@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcEntityCard.vue

@@ -0,0 +1,47 @@
+<!-- File: packages/vue/src/components/OcEntityCard.vue | Map: props -> article -> grid (frame | body: eyebrow, title, description, facts) -> footer -->
+<script setup lang="ts">
+/**
+ * Framed media cell + detail column (same markup as snippets/entity-card.html).
+ * Props: title, eyebrow, description, src / alt or glyph (frame content), contain, facts ([key, value][]), stacked, size (sm|md).
+ * Slots: media (frame content), default (extra body content), footer. Classes: .oc-entity-card(--stacked/--sm), __grid,
+ * __frame(--contain), __glyph, __body, __eyebrow, __title, __description, __facts, __footer
+ */
+withDefaults(
+  defineProps<{
+    title: string
+    eyebrow?: string
+    description?: string
+    src?: string
+    alt?: string
+    glyph?: string
+    contain?: boolean
+    facts?: [string, string][]
+    stacked?: boolean
+    size?: 'sm' | 'md'
+  }>(),
+  { alt: '', size: 'md' },
+)
+</script>
+
+<template>
+  <article :class="['oc-entity-card', stacked && 'oc-entity-card--stacked', size === 'sm' && 'oc-entity-card--sm']">
+    <div class="oc-entity-card__grid">
+      <div :class="['oc-entity-card__frame', contain && 'oc-entity-card__frame--contain']">
+        <slot name="media">
+          <img v-if="src" :src="src" :alt="alt" />
+          <span v-else-if="glyph" class="oc-entity-card__glyph" aria-hidden="true">{{ glyph }}</span>
+        </slot>
+      </div>
+      <div class="oc-entity-card__body">
+        <p v-if="eyebrow" class="oc-entity-card__eyebrow">{{ eyebrow }}</p>
+        <h3 class="oc-entity-card__title">{{ title }}</h3>
+        <p v-if="description" class="oc-entity-card__description">{{ description }}</p>
+        <dl v-if="facts?.length" class="oc-entity-card__facts">
+          <template v-for="([k, v], i) in facts" :key="i"><dt>{{ k }}</dt><dd>{{ v }}</dd></template>
+        </dl>
+        <slot />
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="oc-entity-card__footer"><slot name="footer" /></div>
+  </article>
+</template>

package/src/components/OcFactList.vue

@@ -0,0 +1,37 @@
+<!-- File: packages/vue/src/components/OcFactList.vue | Map: props (items + modifiers) -> dl.oc-fact-list -> div > dt + dd -->
+<script setup lang="ts">
+/**
+ * Key / value product facts (variant of the definition list). Pass `items`, or your own <div><dt><dd> rows in the slot.
+ * Classes: .oc-fact-list (--plain, --compact, --stacked, --accent)
+ */
+export interface FactListRow {
+  label: string
+  value: string
+}
+withDefaults(
+  defineProps<{
+    items?: FactListRow[]
+    plain?: boolean
+    compact?: boolean
+    stacked?: boolean
+    accent?: boolean
+  }>(),
+  { items: () => [] },
+)
+</script>
+
+<template>
+  <dl
+    :class="[
+      'oc-fact-list',
+      plain && 'oc-fact-list--plain',
+      compact && 'oc-fact-list--compact',
+      stacked && 'oc-fact-list--stacked',
+      accent && 'oc-fact-list--accent',
+    ]"
+  >
+    <slot>
+      <div v-for="(row, i) in items" :key="i"><dt>{{ row.label }}</dt><dd>{{ row.value }}</dd></div>
+    </slot>
+  </dl>
+</template>

package/src/components/OcFilterCounts.vue

@@ -0,0 +1,38 @@
+<!-- File: packages/vue/src/components/OcFilterCounts.vue | Map: types + props -> template (fieldset radiogroup -> tile per view) -->
+<script setup lang="ts">
+/**
+ * View filter tiles with counts (Active / Deleted / All). v-model = selected value.
+ * Same markup as packages/ui/snippets/filter-counts.html. Classes: .oc-filter-counts(--compact), -item(--success/--destructive/--muted), -value, -label, -hint
+ */
+import { useUid } from '../composables/useUid'
+
+export interface FilterCountsItem {
+  value: string
+  label: string
+  count: number | string
+  hint?: string
+  /** Accent color of the tile; default primary. */
+  tone?: 'primary' | 'success' | 'destructive' | 'muted'
+  disabled?: boolean
+}
+defineProps<{
+  options: FilterCountsItem[]
+  /** aria-label of the group */
+  label?: string
+  compact?: boolean
+  name?: string
+}>()
+const model = defineModel<string>()
+const uid = useUid('oc-filter')
+</script>
+
+<template>
+  <fieldset :class="['oc-filter-counts', compact && 'oc-filter-counts--compact']" role="radiogroup" :aria-label="label">
+    <label v-for="option in options" :key="option.value" :class="['oc-filter-counts-item', option.tone && option.tone !== 'primary' && `oc-filter-counts-item--${option.tone}`]">
+      <input v-model="model" type="radio" :name="name ?? uid" :value="option.value" :disabled="option.disabled" />
+      <span class="oc-filter-counts-value">{{ option.count }}</span>
+      <span class="oc-filter-counts-label">{{ option.label }}</span>
+      <span v-if="option.hint" class="oc-filter-counts-hint">{{ option.hint }}</span>
+    </label>
+  </fieldset>
+</template>

package/src/components/OcFlipCard.vue

@@ -0,0 +1,36 @@
+<!-- File: packages/vue/src/components/OcFlipCard.vue | Map: props + v-model:flipped -> card -> checkbox (toggle) -> inner -> front / back faces -->
+<script setup lang="ts">
+/**
+ * 3D flip card (same markup as snippets/flip-card.html). v-model:flipped. trigger: toggle (checkbox, default) |
+ * hover (--hover, tabindex 0) | manual (.is-flipped from the model only). Props: vertical, frontLabel, backLabel.
+ * Slots: front, back. Classes: .oc-flip-card(--hover/--vertical, .is-flipped), __toggle, __inner, __face(--front/--back),
+ * __title, __text, __flip
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{ trigger?: 'toggle' | 'hover' | 'manual'; vertical?: boolean; frontLabel?: string; backLabel?: string }>(),
+  { trigger: 'toggle', frontLabel: 'Show answer', backLabel: 'Back' },
+)
+const flipped = defineModel<boolean>('flipped', { default: false })
+const id = useUid('oc-flip')
+</script>
+
+<template>
+  <div
+    :class="['oc-flip-card', trigger === 'hover' && 'oc-flip-card--hover', vertical && 'oc-flip-card--vertical', trigger !== 'toggle' && flipped && 'is-flipped']"
+    :tabindex="trigger === 'hover' ? 0 : undefined"
+  >
+    <input v-if="trigger === 'toggle'" :id="id" v-model="flipped" type="checkbox" class="oc-flip-card__toggle" />
+    <div class="oc-flip-card__inner">
+      <div class="oc-flip-card__face oc-flip-card__face--front">
+        <slot name="front" />
+        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ frontLabel }}</label>
+      </div>
+      <div class="oc-flip-card__face oc-flip-card__face--back">
+        <slot name="back" />
+        <label v-if="trigger === 'toggle'" class="oc-flip-card__flip" :for="id">{{ backLabel }}</label>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcFormField.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * Form field: label, control (default slot), description and error.
+ * The slot receives { id, describedBy, invalid } so the control can be wired:
+ *   <OcFormField label="Email" description="..." v-slot="f"><OcInput :id="f.id" :aria-describedby="f.describedBy" /></OcFormField>
+ * Classes: .oc-field(--horizontal), .oc-field-label, .oc-field-description, .oc-field-error
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{
+  label?: string
+  description?: string
+  error?: string
+  /** id of the control; generated when omitted */
+  for?: string
+  horizontal?: boolean
+}>()
+const generated = useUid('oc-field')
+const id = computed(() => props.for ?? generated)
+const helpId = computed(() => `${id.value}-help`)
+const errorId = computed(() => `${id.value}-error`)
+const describedBy = computed(() => {
+  const ids = [props.description && helpId.value, props.error && errorId.value].filter(Boolean)
+  return ids.length ? ids.join(' ') : undefined
+})
+</script>
+
+<template>
+  <div :class="['oc-field', horizontal && 'oc-field--horizontal']">
+    <label v-if="label || $slots.label" class="oc-field-label" :for="id"><slot name="label">{{ label }}</slot></label>
+    <slot :id="id" :described-by="describedBy" :invalid="!!error" />
+    <p v-if="description" :id="helpId" class="oc-field-description">{{ description }}</p>
+    <p v-if="error" :id="errorId" class="oc-field-error" role="alert">{{ error }}</p>
+  </div>
+</template>

package/src/components/OcGreeting.vue

@@ -0,0 +1,52 @@
+<!-- File: packages/vue/src/components/OcGreeting.vue | Map: time-of-day logic -> header -> icon slot -> body (eyebrow, title + name, date) -> actions slot -->
+<script setup lang="ts">
+/**
+ * Dashboard greeting. The time of day comes from `date` (default now): morning 05-12, afternoon 12-18, evening otherwise.
+ * Slots: icon, actions. Classes: .oc-greeting(--morning/--afternoon/--evening/--lg), -icon, -body, -eyebrow, -title, -name, -date, -actions
+ */
+import { computed } from 'vue'
+
+type TimeOfDay = 'morning' | 'afternoon' | 'evening'
+
+const props = defineProps<{
+  name?: string
+  date?: Date
+  timeOfDay?: TimeOfDay
+  /** Translated greetings, e.g. { morning: 'Goedemorgen' }. */
+  words?: Partial<Record<TimeOfDay, string>>
+  locale?: string
+  hideDate?: boolean
+  eyebrow?: string
+  size?: 'lg'
+}>()
+
+const WORDS: Record<TimeOfDay, string> = { morning: 'Good morning', afternoon: 'Good afternoon', evening: 'Good evening' }
+
+const when = computed(() => props.date ?? new Date())
+const tod = computed<TimeOfDay>(() => {
+  if (props.timeOfDay) return props.timeOfDay
+  const h = when.value.getHours()
+  return h >= 5 && h < 12 ? 'morning' : h >= 12 && h < 18 ? 'afternoon' : 'evening'
+})
+const word = computed(() => props.words?.[tod.value] ?? WORDS[tod.value])
+const dateText = computed(() =>
+  new Intl.DateTimeFormat(props.locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(when.value),
+)
+// Local YYYY-MM-DD for datetime (toISOString would use UTC).
+const iso = computed(() => {
+  const d = when.value
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+})
+</script>
+
+<template>
+  <header :class="['oc-greeting', `oc-greeting--${tod}`, size && `oc-greeting--${size}`]">
+    <span v-if="$slots.icon" class="oc-greeting-icon" aria-hidden="true"><slot name="icon" /></span>
+    <div class="oc-greeting-body">
+      <p v-if="eyebrow" class="oc-greeting-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-greeting-title">{{ word }}<template v-if="name">, <span class="oc-greeting-name">{{ name }}</span></template></h2>
+      <time v-if="!hideDate" class="oc-greeting-date" :datetime="iso">{{ dateText }}</time>
+    </div>
+    <div v-if="$slots.actions" class="oc-greeting-actions"><slot name="actions" /></div>
+  </header>
+</template>

package/src/components/OcHeading.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/** Page or section title with a muted description. Classes: .oc-heading(--sm). `as` picks the title tag. */
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    size?: 'sm' | 'md'
+    as?: 'h1' | 'h2' | 'h3' | 'h4'
+  }>(),
+  { size: 'md', as: 'h2' },
+)
+</script>
+
+<template>
+  <div :class="['oc-heading', size === 'sm' && 'oc-heading--sm']">
+    <component :is="as" class="oc-heading-title"><slot name="title">{{ title }}</slot></component>
+    <p v-if="description || $slots.default" class="oc-heading-description"><slot>{{ description }}</slot></p>
+  </div>
+</template>

package/src/components/OcHoverCard.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/**
+ * Preview on hover/focus (interestfor + popover, CSS hover fallback). The trigger is the `trigger` slot
+ * (scoped: { id }) or a link with `label` and `href`; default slot = card content.
+ * Classes: .oc-hover-card(--top), -trigger, -content(--sm). Attributes land on the content element.
+ */
+import { useAttrs } from 'vue'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ label?: string; href?: string; top?: boolean; small?: boolean }>()
+const attrs = useAttrs()
+const id = (attrs.id as string | undefined) ?? useUid('oc-hover-card')
+</script>
+
+<template>
+  <span :class="['oc-hover-card', top && 'oc-hover-card--top']">
+    <slot name="trigger" :id="id">
+      <a class="oc-hover-card-trigger" :href="href ?? '#'" :interestfor="id">{{ label }}</a>
+    </slot>
+    <div v-bind="attrs" :id="id" :class="['oc-hover-card-content', small && 'oc-hover-card-content--sm']" popover>
+      <slot />
+    </div>
+  </span>
+</template>

package/src/components/OcImageZoom.vue

@@ -0,0 +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>

package/src/components/OcInput.vue

@@ -0,0 +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>

package/src/components/OcInputGroup.vue

@@ -0,0 +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>

package/src/components/OcItem.vue

@@ -0,0 +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>

package/src/components/OcItemGroup.vue

@@ -0,0 +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>

package/src/components/OcItemSeparator.vue

@@ -0,0 +1,7 @@
+<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

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

package/src/components/OcKbdGroup.vue

@@ -0,0 +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>

package/src/components/OcLabel.vue

@@ -0,0 +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>

package/src/components/OcLanguageSelect.vue

@@ -0,0 +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>

package/src/components/OcLauncherCard.vue

@@ -0,0 +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>

package/src/components/OcLightbox.vue

@@ -0,0 +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>

package/src/components/OcLinkArrow.vue

@@ -0,0 +1,25 @@
+<!-- File: packages/vue/src/components/OcLinkArrow.vue | Map: props (direction, tone, size) -> a.oc-link-arrow -->
+<script setup lang="ts">
+/** Text link with a moving arrow. Classes: .oc-link-arrow + --back/--external, --accent/--muted, --sm/--lg */
+withDefaults(
+  defineProps<{
+    href: string
+    direction?: 'forward' | 'back' | 'external'
+    tone?: 'default' | 'accent' | 'muted'
+    size?: 'sm' | 'default' | 'lg'
+  }>(),
+  { direction: 'forward', tone: 'default', size: 'default' },
+)
+</script>
+
+<template>
+  <a
+    :class="[
+      'oc-link-arrow',
+      direction !== 'forward' && `oc-link-arrow--${direction}`,
+      tone !== 'default' && `oc-link-arrow--${tone}`,
+      size !== 'default' && `oc-link-arrow--${size}`,
+    ]"
+    :href="href"
+  ><slot /></a>
+</template>