@birdycom/omniaui-vue 0.11.0 → 0.11.1

package/src/components/OcImageZoom.vue

@@ -1,39 +1,39 @@
-<!-- File: packages/vue/src/components/OcImageZoom.vue | Map: props + v-model:zoom -> toolbar (radio levels) -> viewport -> canvas -->
-<script setup lang="ts">
-/**
- * Zoom / pan viewport (same markup as snippets/image-zoom.html). v-model:zoom = current level (default 1).
- * levels: toolbar values (default [1, 1.5, 2, 3]; [] = no toolbar). ratio: square | photo | CSS ratio.
- * Default slot replaces the <img>. Classes: .oc-image-zoom(--square/--photo), __toolbar, __label, __level, __viewport, __canvas
- */
-import { computed } from 'vue'
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(defineProps<{ src?: string; alt?: string; levels?: number[]; ratio?: string }>(), {
-  alt: '',
-  levels: () => [1, 1.5, 2, 3],
-})
-const zoom = defineModel<number>('zoom', { default: 1 })
-const name = useUid('oc-zoom')
-const preset = computed(() => (props.ratio === 'square' || props.ratio === 'photo' ? props.ratio : undefined))
-// Writing --oc-zoom inline means any level works, not only the ones the CSS :has() rules know.
-const vars = computed(() => ({ '--oc-zoom': String(zoom.value), ...(props.ratio && !preset.value ? { '--oc-image-zoom-ratio': props.ratio } : {}) }))
-</script>
-
-<template>
-  <div :class="['oc-image-zoom', preset && `oc-image-zoom--${preset}`]" :style="vars">
-    <div v-if="levels.length" class="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
-      <span class="oc-image-zoom__label">Zoom</span>
-      <label v-for="l in levels" :key="l" class="oc-image-zoom__level">
-        <input v-model="zoom" type="radio" :name="name" :value="l" />{{ Math.round(l * 100) }}%
-      </label>
-    </div>
-    <div class="oc-image-zoom__viewport" tabindex="0" role="region" :aria-label="alt ? `${alt}, scroll to pan` : 'Scroll to pan'">
-      <div class="oc-image-zoom__canvas">
-        <slot>
-          <img v-if="src" :src="src" :alt="alt" />
-          <div v-else class="oc-media-art" role="img" :aria-label="alt" />
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
+<!-- File: packages/vue/src/components/OcImageZoom.vue | Map: props + v-model:zoom -> toolbar (radio levels) -> viewport -> canvas -->
+<script setup lang="ts">
+/**
+ * Zoom / pan viewport (same markup as snippets/image-zoom.html). v-model:zoom = current level (default 1).
+ * levels: toolbar values (default [1, 1.5, 2, 3]; [] = no toolbar). ratio: square | photo | CSS ratio.
+ * Default slot replaces the <img>. Classes: .oc-image-zoom(--square/--photo), __toolbar, __label, __level, __viewport, __canvas
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(defineProps<{ src?: string; alt?: string; levels?: number[]; ratio?: string }>(), {
+  alt: '',
+  levels: () => [1, 1.5, 2, 3],
+})
+const zoom = defineModel<number>('zoom', { default: 1 })
+const name = useUid('oc-zoom')
+const preset = computed(() => (props.ratio === 'square' || props.ratio === 'photo' ? props.ratio : undefined))
+// Writing --oc-zoom inline means any level works, not only the ones the CSS :has() rules know.
+const vars = computed(() => ({ '--oc-zoom': String(zoom.value), ...(props.ratio && !preset.value ? { '--oc-image-zoom-ratio': props.ratio } : {}) }))
+</script>
+
+<template>
+  <div :class="['oc-image-zoom', preset && `oc-image-zoom--${preset}`]" :style="vars">
+    <div v-if="levels.length" class="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
+      <span class="oc-image-zoom__label">Zoom</span>
+      <label v-for="l in levels" :key="l" class="oc-image-zoom__level">
+        <input v-model="zoom" type="radio" :name="name" :value="l" />{{ Math.round(l * 100) }}%
+      </label>
+    </div>
+    <div class="oc-image-zoom__viewport" tabindex="0" role="region" :aria-label="alt ? `${alt}, scroll to pan` : 'Scroll to pan'">
+      <div class="oc-image-zoom__canvas">
+        <slot>
+          <img v-if="src" :src="src" :alt="alt" />
+          <div v-else class="oc-media-art" role="img" :aria-label="alt" />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcInput.vue

@@ -1,9 +1,9 @@
-<script setup lang="ts">
-/** Text input. v-model. `error` sets .oc-input--error + aria-invalid. Any native attribute falls through. */
-defineProps<{ error?: boolean }>()
-const model = defineModel<string | number>()
-</script>
-
-<template>
-  <input v-model="model" :class="['oc-input', error && 'oc-input--error']" :aria-invalid="error ? 'true' : undefined" />
-</template>
+<script setup lang="ts">
+/** Text input. v-model. `error` sets .oc-input--error + aria-invalid. Any native attribute falls through. */
+defineProps<{ error?: boolean }>()
+const model = defineModel<string | number>()
+</script>
+
+<template>
+  <input v-model="model" :class="['oc-input', error && 'oc-input--error']" :aria-invalid="error ? 'true' : undefined" />
+</template>

package/src/components/OcInputGroup.vue

@@ -1,12 +1,12 @@
-<script setup lang="ts">
-/** Input with prefix/suffix addon. Default slot = the input(s); `prefix` / `suffix` are text props or slots. */
-defineProps<{ prefix?: string; suffix?: string }>()
-</script>
-
-<template>
-  <div class="oc-input-group">
-    <span v-if="prefix || $slots.prefix" class="oc-input-addon"><slot name="prefix">{{ prefix }}</slot></span>
-    <slot />
-    <span v-if="suffix || $slots.suffix" class="oc-input-addon"><slot name="suffix">{{ suffix }}</slot></span>
-  </div>
-</template>
+<script setup lang="ts">
+/** Input with prefix/suffix addon. Default slot = the input(s); `prefix` / `suffix` are text props or slots. */
+defineProps<{ prefix?: string; suffix?: string }>()
+</script>
+
+<template>
+  <div class="oc-input-group">
+    <span v-if="prefix || $slots.prefix" class="oc-input-addon"><slot name="prefix">{{ prefix }}</slot></span>
+    <slot />
+    <span v-if="suffix || $slots.suffix" class="oc-input-addon"><slot name="suffix">{{ suffix }}</slot></span>
+  </div>
+</template>

package/src/components/OcItem.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-/**
- * List row. Renders <a> when `href` is set. Slots: media (left; `icon` boxes it, `image` makes it an image),
- * default (replaces title + description), actions (right), header / footer (full-width rows).
- * Classes: .oc-item(--outline/--muted/--sm/--interactive), -media(--icon/--image), -content, -title, -description,
- * -actions, -header, -footer
- */
-withDefaults(
-  defineProps<{
-    variant?: 'default' | 'outline' | 'muted'
-    size?: 'sm' | 'md'
-    interactive?: boolean
-    href?: string
-    title?: string
-    description?: string
-    icon?: boolean
-    image?: boolean
-  }>(),
-  { variant: 'default', size: 'md' },
-)
-</script>
-
-<template>
-  <component
-    :is="href ? 'a' : 'div'"
-    :href="href"
-    :class="['oc-item', variant !== 'default' && `oc-item--${variant}`, size === 'sm' && 'oc-item--sm', interactive && 'oc-item--interactive']"
-  >
-    <div v-if="$slots.header" class="oc-item-header"><slot name="header" /></div>
-    <div v-if="$slots.media" :class="['oc-item-media', icon && 'oc-item-media--icon', image && 'oc-item-media--image']"><slot name="media" /></div>
-    <div class="oc-item-content">
-      <slot>
-        <p v-if="title" class="oc-item-title">{{ title }}</p>
-        <p v-if="description" class="oc-item-description">{{ description }}</p>
-      </slot>
-    </div>
-    <div v-if="$slots.actions" class="oc-item-actions"><slot name="actions" /></div>
-    <div v-if="$slots.footer" class="oc-item-footer"><slot name="footer" /></div>
-  </component>
-</template>
+<script setup lang="ts">
+/**
+ * List row. Renders <a> when `href` is set. Slots: media (left; `icon` boxes it, `image` makes it an image),
+ * default (replaces title + description), actions (right), header / footer (full-width rows).
+ * Classes: .oc-item(--outline/--muted/--sm/--interactive), -media(--icon/--image), -content, -title, -description,
+ * -actions, -header, -footer
+ */
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'outline' | 'muted'
+    size?: 'sm' | 'md'
+    interactive?: boolean
+    href?: string
+    title?: string
+    description?: string
+    icon?: boolean
+    image?: boolean
+  }>(),
+  { variant: 'default', size: 'md' },
+)
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'div'"
+    :href="href"
+    :class="['oc-item', variant !== 'default' && `oc-item--${variant}`, size === 'sm' && 'oc-item--sm', interactive && 'oc-item--interactive']"
+  >
+    <div v-if="$slots.header" class="oc-item-header"><slot name="header" /></div>
+    <div v-if="$slots.media" :class="['oc-item-media', icon && 'oc-item-media--icon', image && 'oc-item-media--image']"><slot name="media" /></div>
+    <div class="oc-item-content">
+      <slot>
+        <p v-if="title" class="oc-item-title">{{ title }}</p>
+        <p v-if="description" class="oc-item-description">{{ description }}</p>
+      </slot>
+    </div>
+    <div v-if="$slots.actions" class="oc-item-actions"><slot name="actions" /></div>
+    <div v-if="$slots.footer" class="oc-item-footer"><slot name="footer" /></div>
+  </component>
+</template>

package/src/components/OcItemGroup.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-/** Vertical list of OcItem. `separated` puts a separator between the direct children is left to OcItemSeparator. Class: .oc-item-group */
-</script>
-
-<template>
-  <div class="oc-item-group"><slot /></div>
-</template>
+<script setup lang="ts">
+/** Vertical list of OcItem. `separated` puts a separator between the direct children is left to OcItemSeparator. Class: .oc-item-group */
+</script>
+
+<template>
+  <div class="oc-item-group"><slot /></div>
+</template>

package/src/components/OcItemSeparator.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-/** Divider between items in an OcItemGroup. Class: .oc-item-separator */
-</script>
-
-<template>
-  <hr class="oc-item-separator" />
-</template>
+<script setup lang="ts">
+/** Divider between items in an OcItemGroup. Class: .oc-item-separator */
+</script>
+
+<template>
+  <hr class="oc-item-separator" />
+</template>

package/src/components/OcKbd.vue

@@ -1,7 +1,7 @@
-<script setup lang="ts">
-/** One key. Class: .oc-kbd */
-</script>
-
-<template>
-  <kbd class="oc-kbd"><slot /></kbd>
-</template>
+<script setup lang="ts">
+/** One key. Class: .oc-kbd */
+</script>
+
+<template>
+  <kbd class="oc-kbd"><slot /></kbd>
+</template>

package/src/components/OcKbdGroup.vue

@@ -1,15 +1,15 @@
-<script setup lang="ts">
-/** Shortcut: `keys` ["Ctrl", "K"] renders one key per entry, with a "+" separator when `separator` is set. Or pass OcKbd in the slot. Classes: .oc-kbd-group, .oc-kbd-sep */
-defineProps<{ keys?: string[]; separator?: boolean }>()
-</script>
-
-<template>
-  <span class="oc-kbd-group">
-    <slot>
-      <template v-for="(key, i) in keys" :key="key + i">
-        <span v-if="separator && i > 0" class="oc-kbd-sep">+</span>
-        <kbd class="oc-kbd">{{ key }}</kbd>
-      </template>
-    </slot>
-  </span>
-</template>
+<script setup lang="ts">
+/** Shortcut: `keys` ["Ctrl", "K"] renders one key per entry, with a "+" separator when `separator` is set. Or pass OcKbd in the slot. Classes: .oc-kbd-group, .oc-kbd-sep */
+defineProps<{ keys?: string[]; separator?: boolean }>()
+</script>
+
+<template>
+  <span class="oc-kbd-group">
+    <slot>
+      <template v-for="(key, i) in keys" :key="key + i">
+        <span v-if="separator && i > 0" class="oc-kbd-sep">+</span>
+        <kbd class="oc-kbd">{{ key }}</kbd>
+      </template>
+    </slot>
+  </span>
+</template>

package/src/components/OcLabel.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
-/** Form label. `for` links it to a control. Classes: .oc-label(--required/--inline/--muted) */
-defineProps<{ for?: string; required?: boolean; inline?: boolean; muted?: boolean }>()
-</script>
-
-<template>
-  <label :class="['oc-label', required && 'oc-label--required', inline && 'oc-label--inline', muted && 'oc-label--muted']" :for="$props.for">
-    <slot />
-  </label>
-</template>
+<script setup lang="ts">
+/** Form label. `for` links it to a control. Classes: .oc-label(--required/--inline/--muted) */
+defineProps<{ for?: string; required?: boolean; inline?: boolean; muted?: boolean }>()
+</script>
+
+<template>
+  <label :class="['oc-label', required && 'oc-label--required', inline && 'oc-label--inline', muted && 'oc-label--muted']" :for="$props.for">
+    <slot />
+  </label>
+</template>

package/src/components/OcLanguageSelect.vue

@@ -1,40 +1,40 @@
-<!-- File: packages/vue/src/components/OcLanguageSelect.vue | Map: types + props -> template (label pill: icon slot + native select) -->
-<script setup lang="ts">
-/**
- * Compact language / currency switcher. v-model = selected value. Slot `icon` replaces the globe / symbol.
- * Same markup as packages/ui/snippets/language-select.html. class/style on the pill, other attributes on the select.
- */
-import { useAttrsSplit } from '../composables/useAttrsSplit'
-
-export interface LanguageSelectItem {
-  value: string
-  label: string
-}
-
-defineOptions({ inheritAttrs: false })
-defineProps<{
-  options: LanguageSelectItem[]
-  /** aria-label of the select (default "Language" / "Currency") */
-  label?: string
-  currency?: boolean
-  ghost?: boolean
-  /** Text icon, e.g. "€" (default: globe, or € with `currency`) */
-  icon?: string
-}>()
-const model = defineModel<string>()
-const { root, control } = useAttrsSplit()
-</script>
-
-<template>
-  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency']">
-    <span class="oc-language-select-icon" aria-hidden="true">
-      <slot name="icon">
-        <template v-if="icon || currency">{{ icon ?? '€' }}</template>
-        <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
-      </slot>
-    </span>
-    <select v-bind="control" v-model="model" class="oc-language-select-control" :aria-label="label ?? (currency ? 'Currency' : 'Language')">
-      <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
-    </select>
-  </label>
-</template>
+<!-- File: packages/vue/src/components/OcLanguageSelect.vue | Map: types + props -> template (label pill: icon slot + native select) -->
+<script setup lang="ts">
+/**
+ * Compact language / currency switcher. v-model = selected value. Slot `icon` replaces the globe / symbol.
+ * Same markup as packages/ui/snippets/language-select.html. class/style on the pill, other attributes on the select.
+ */
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+export interface LanguageSelectItem {
+  value: string
+  label: string
+}
+
+defineOptions({ inheritAttrs: false })
+defineProps<{
+  options: LanguageSelectItem[]
+  /** aria-label of the select (default "Language" / "Currency") */
+  label?: string
+  currency?: boolean
+  ghost?: boolean
+  /** Text icon, e.g. "€" (default: globe, or € with `currency`) */
+  icon?: string
+}>()
+const model = defineModel<string>()
+const { root, control } = useAttrsSplit()
+</script>
+
+<template>
+  <label v-bind="root" :class="['oc-language-select', ghost && 'oc-language-select--ghost', currency && 'oc-language-select--currency']">
+    <span class="oc-language-select-icon" aria-hidden="true">
+      <slot name="icon">
+        <template v-if="icon || currency">{{ icon ?? '€' }}</template>
+        <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>
+      </slot>
+    </span>
+    <select v-bind="control" v-model="model" class="oc-language-select-control" :aria-label="label ?? (currency ? 'Currency' : 'Language')">
+      <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
+    </select>
+  </label>
+</template>

package/src/components/OcLauncherCard.vue

@@ -1,34 +1,34 @@
-<script setup lang="ts">
-/**
- * Large clickable card with icon, title and description. Renders <a> with `href`, <span> when disabled,
- * otherwise <button>. State: `current` (aria-current), `disabled` (aria-disabled).
- * Slots: icon, title (+ trailing badge), description, footer.
- */
-import { computed } from 'vue'
-
-const props = defineProps<{
-  href?: string
-  title?: string
-  description?: string
-  footer?: string
-  current?: boolean
-  disabled?: boolean
-}>()
-const tag = computed(() => (props.disabled ? 'span' : props.href ? 'a' : 'button'))
-</script>
-
-<template>
-  <component
-    :is="tag"
-    class="oc-launcher"
-    :href="tag === 'a' ? href : undefined"
-    :type="tag === 'button' ? 'button' : undefined"
-    :aria-current="current ? 'true' : undefined"
-    :aria-disabled="disabled ? 'true' : undefined"
-  >
-    <span v-if="$slots.icon" class="oc-launcher-icon" aria-hidden="true"><slot name="icon" /></span>
-    <h3 class="oc-launcher-title"><slot name="title">{{ title }}</slot></h3>
-    <p v-if="description || $slots.description" class="oc-launcher-description"><slot name="description">{{ description }}</slot></p>
-    <span v-if="footer || $slots.footer" class="oc-launcher-footer"><slot name="footer">{{ footer }}</slot></span>
-  </component>
-</template>
+<script setup lang="ts">
+/**
+ * Large clickable card with icon, title and description. Renders <a> with `href`, <span> when disabled,
+ * otherwise <button>. State: `current` (aria-current), `disabled` (aria-disabled).
+ * Slots: icon, title (+ trailing badge), description, footer.
+ */
+import { computed } from 'vue'
+
+const props = defineProps<{
+  href?: string
+  title?: string
+  description?: string
+  footer?: string
+  current?: boolean
+  disabled?: boolean
+}>()
+const tag = computed(() => (props.disabled ? 'span' : props.href ? 'a' : 'button'))
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="oc-launcher"
+    :href="tag === 'a' ? href : undefined"
+    :type="tag === 'button' ? 'button' : undefined"
+    :aria-current="current ? 'true' : undefined"
+    :aria-disabled="disabled ? 'true' : undefined"
+  >
+    <span v-if="$slots.icon" class="oc-launcher-icon" aria-hidden="true"><slot name="icon" /></span>
+    <h3 class="oc-launcher-title"><slot name="title">{{ title }}</slot></h3>
+    <p v-if="description || $slots.description" class="oc-launcher-description"><slot name="description">{{ description }}</slot></p>
+    <span v-if="footer || $slots.footer" class="oc-launcher-footer"><slot name="footer">{{ footer }}</slot></span>
+  </component>
+</template>

package/src/components/OcLightbox.vue

@@ -1,63 +1,63 @@
-<!-- File: packages/vue/src/components/OcLightbox.vue | Map: props + model -> open at photo -> thumbnails -> <dialog> (bar, track of slides) -->
-<script setup lang="ts">
-/**
- * Lightbox on a native <dialog> (same markup as snippets/lightbox.html). v-model:open controls it.
- * images: { src?, alt, caption?, thumb? }[] (no src = placeholder art). Prev / next are anchor links.
- * Slot: caption (scoped: { image, index }). Classes: .oc-lightbox(--single), __bar, __title, __close, __track,
- * __slide, __media, __nav(--prev/--next), __caption, __counter; .oc-lightbox-thumbs / -thumb.
- */
-import { nextTick, ref } from 'vue'
-import { useDialog } from '../composables/useDialog'
-import { useUid } from '../composables/useUid'
-
-const props = withDefaults(
-  defineProps<{ images: { src?: string; alt: string; caption?: string; thumb?: string }[]; title?: string; label?: string; thumbnails?: boolean }>(),
-  { label: 'Photo viewer', thumbnails: true },
-)
-const open = defineModel<boolean>('open', { default: false })
-const el = ref<HTMLDialogElement | null>(null)
-const { onClose } = useDialog(open, el)
-const base = useUid('oc-lightbox')
-const n = () => props.images.length
-const slideId = (i: number) => `${base}-${((i % n()) + n()) % n() + 1}`
-
-// Open the viewer and jump (without animation) to photo i.
-async function show(i: number) {
-  open.value = true
-  await nextTick()
-  document.getElementById(slideId(i))?.scrollIntoView?.({ behavior: 'instant' as ScrollBehavior, block: 'nearest', inline: 'center' })
-}
-defineExpose({ show, close: () => (open.value = false) })
-</script>
-
-<template>
-  <div v-if="thumbnails" class="oc-lightbox-thumbs">
-    <button v-for="(img, i) in images" :key="i" type="button" class="oc-lightbox-thumb" :aria-label="`Open photo ${i + 1}: ${img.alt}`" @click="show(i)">
-      <img v-if="img.thumb || img.src" :src="img.thumb || img.src" :alt="img.alt" />
-      <span v-else class="oc-media-art" />
-    </button>
-  </div>
-  <dialog ref="el" :class="['oc-lightbox', images.length === 1 && 'oc-lightbox--single']" closedby="any" :aria-label="label" @close="onClose">
-    <div class="oc-lightbox__bar">
-      <h2 v-if="title" class="oc-lightbox__title">{{ title }}</h2>
-      <span v-else />
-      <button type="button" class="oc-lightbox__close" aria-label="Close" @click="open = false">&#10005;</button>
-    </div>
-    <div class="oc-lightbox__track" tabindex="0" aria-label="Photos, use the arrow keys">
-      <figure v-for="(img, i) in images" :id="slideId(i)" :key="i" class="oc-lightbox__slide">
-        <div class="oc-lightbox__media">
-          <img v-if="img.src" :src="img.src" :alt="img.alt" />
-          <span v-else class="oc-media-art" role="img" :aria-label="img.alt" />
-        </div>
-        <template v-if="images.length > 1">
-          <a class="oc-lightbox__nav oc-lightbox__nav--prev" :href="`#${slideId(i - 1)}`" aria-label="Previous photo">&#8592;</a>
-          <a class="oc-lightbox__nav oc-lightbox__nav--next" :href="`#${slideId(i + 1)}`" aria-label="Next photo">&#8594;</a>
-        </template>
-        <figcaption class="oc-lightbox__caption">
-          <span v-if="images.length > 1" class="oc-lightbox__counter">{{ i + 1 }} / {{ images.length }}</span>
-          <slot name="caption" :image="img" :index="i">{{ img.caption ?? img.alt }}</slot>
-        </figcaption>
-      </figure>
-    </div>
-  </dialog>
-</template>
+<!-- File: packages/vue/src/components/OcLightbox.vue | Map: props + model -> open at photo -> thumbnails -> <dialog> (bar, track of slides) -->
+<script setup lang="ts">
+/**
+ * Lightbox on a native <dialog> (same markup as snippets/lightbox.html). v-model:open controls it.
+ * images: { src?, alt, caption?, thumb? }[] (no src = placeholder art). Prev / next are anchor links.
+ * Slot: caption (scoped: { image, index }). Classes: .oc-lightbox(--single), __bar, __title, __close, __track,
+ * __slide, __media, __nav(--prev/--next), __caption, __counter; .oc-lightbox-thumbs / -thumb.
+ */
+import { nextTick, ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{ images: { src?: string; alt: string; caption?: string; thumb?: string }[]; title?: string; label?: string; thumbnails?: boolean }>(),
+  { label: 'Photo viewer', thumbnails: true },
+)
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const base = useUid('oc-lightbox')
+const n = () => props.images.length
+const slideId = (i: number) => `${base}-${((i % n()) + n()) % n() + 1}`
+
+// Open the viewer and jump (without animation) to photo i.
+async function show(i: number) {
+  open.value = true
+  await nextTick()
+  document.getElementById(slideId(i))?.scrollIntoView?.({ behavior: 'instant' as ScrollBehavior, block: 'nearest', inline: 'center' })
+}
+defineExpose({ show, close: () => (open.value = false) })
+</script>
+
+<template>
+  <div v-if="thumbnails" class="oc-lightbox-thumbs">
+    <button v-for="(img, i) in images" :key="i" type="button" class="oc-lightbox-thumb" :aria-label="`Open photo ${i + 1}: ${img.alt}`" @click="show(i)">
+      <img v-if="img.thumb || img.src" :src="img.thumb || img.src" :alt="img.alt" />
+      <span v-else class="oc-media-art" />
+    </button>
+  </div>
+  <dialog ref="el" :class="['oc-lightbox', images.length === 1 && 'oc-lightbox--single']" closedby="any" :aria-label="label" @close="onClose">
+    <div class="oc-lightbox__bar">
+      <h2 v-if="title" class="oc-lightbox__title">{{ title }}</h2>
+      <span v-else />
+      <button type="button" class="oc-lightbox__close" aria-label="Close" @click="open = false">&#10005;</button>
+    </div>
+    <div class="oc-lightbox__track" tabindex="0" aria-label="Photos, use the arrow keys">
+      <figure v-for="(img, i) in images" :id="slideId(i)" :key="i" class="oc-lightbox__slide">
+        <div class="oc-lightbox__media">
+          <img v-if="img.src" :src="img.src" :alt="img.alt" />
+          <span v-else class="oc-media-art" role="img" :aria-label="img.alt" />
+        </div>
+        <template v-if="images.length > 1">
+          <a class="oc-lightbox__nav oc-lightbox__nav--prev" :href="`#${slideId(i - 1)}`" aria-label="Previous photo">&#8592;</a>
+          <a class="oc-lightbox__nav oc-lightbox__nav--next" :href="`#${slideId(i + 1)}`" aria-label="Next photo">&#8594;</a>
+        </template>
+        <figcaption class="oc-lightbox__caption">
+          <span v-if="images.length > 1" class="oc-lightbox__counter">{{ i + 1 }} / {{ images.length }}</span>
+          <slot name="caption" :image="img" :index="i">{{ img.caption ?? img.alt }}</slot>
+        </figcaption>
+      </figure>
+    </div>
+  </dialog>
+</template>