HyImageGalleryItem

A single cell within an hy-image-gallery. Provides an aspect-ratio crop box for a slotted image, an optional caption, per-item load/error states, and an optional interactive (button) or navigational (link) affordance.

Render modes (resolved in order)

• href set → <a href> (navigational; navigates natively, does not fire activate)
• interactive set → <button> (in-page action; fires activate on click / Enter / Space)
• otherwise → <figure> (presentational, not a focus stop)

All three carry role="listitem" on the host so the parent hy-image-gallery's role="list" announces "list, N items".

Image ownership stays with the author

This component takes no src. Slot the <img>/<picture> so you control srcset, sizes, loading, fetchpriority, and decoding. Eager-load (and fetchpriority="high") the first row for LCP; lazy-load the rest. The fixed aspect-ratio crop box reserves space so there is no layout shift while images load.

Examples

Display-only cell

<hy-image-gallery-item caption="Sunset">
  <img src="/sunset.jpg" alt="Sunset over the lake" loading="lazy" decoding="async" />
</hy-image-gallery-item>

Interactive cell (opens a viewer)

<hy-image-gallery-item interactive>
  <img src="/photo.jpg" alt="Team photo" loading="lazy" decoding="async" />
</hy-image-gallery-item>

Events

• activate - Fired when an interactive cell is activated. Detail: { originalEvent: MouseEvent | KeyboardEvent }

Slots

• default - The media (<img> / <picture>). Provide alt (descriptive, or alt="" for decorative).
• caption - Caption content (richer than the caption string prop).

Methods

focus()

Focus the interactive cell (no-op for a static figure).