@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcCookieConsent.vue

@@ -0,0 +1,119 @@
+<!-- File: packages/vue/src/components/OcCookieConsent.vue | Map: props -> storage helpers -> reopen button -> popover (title, text, categories, actions) -->
+<script setup lang="ts">
+/**
+ * Cookie banner on popover="manual" (same markup as snippets/cookie-consent.html). Like the snippet script it shows itself
+ * when no choice is stored, saves { necessary, <categories>, date } in localStorage and fires "oc-consent" on document.
+ * Emits: consent (the choice, also on load when one is stored). Slot: text (replaces the paragraph content).
+ * Classes: .oc-cookie-consent(--bar) __title __text __prefs __category __category-name __category-text __actions
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export interface CookieCategory {
+  name: string
+  label: string
+  text?: string
+  required?: boolean
+}
+export type ConsentChoice = { necessary: boolean; date: string } & Record<string, boolean | string>
+
+const props = withDefaults(
+  defineProps<{
+    categories?: CookieCategory[]
+    title?: string
+    policyHref?: string
+    customizeLabel?: string
+    necessaryLabel?: string
+    selectedLabel?: string
+    allLabel?: string
+    /** Text of the "Cookie settings" button; empty string hides it. */
+    openLabel?: string
+    bar?: boolean
+    manual?: boolean
+    storageKey?: string
+    id?: string
+  }>(),
+  {
+    categories: () => [
+      { name: 'necessary', label: 'Necessary', text: 'Session, security and your cookie choice. Always on.', required: true },
+      { name: 'statistics', label: 'Statistics', text: 'Anonymous visit counts.' },
+      { name: 'marketing', label: 'Marketing', text: 'Embedded videos and ads that track you.' },
+    ],
+    title: 'We use cookies',
+    policyHref: '#cookie-policy',
+    customizeLabel: 'Customize',
+    necessaryLabel: 'Only necessary',
+    selectedLabel: 'Save choice',
+    allLabel: 'Accept all',
+    openLabel: 'Cookie settings',
+    storageKey: 'oc-consent',
+    id: 'oc-cookie-consent',
+  },
+)
+const emit = defineEmits<{ consent: [choice: ConsentChoice] }>()
+defineOptions({ inheritAttrs: false })
+const box = ref<HTMLElement | null>(null)
+
+const read = (): ConsentChoice | null => {
+  try { return JSON.parse(localStorage.getItem(props.storageKey) ?? 'null') } catch { return null }
+}
+const inputs = () => Array.from(box.value?.querySelectorAll<HTMLInputElement>('input[name]') ?? [])
+function tell(choice: ConsentChoice) {
+  document.dispatchEvent(new CustomEvent('oc-consent', { detail: choice }))
+  emit('consent', choice)
+}
+// Any [data-oc-consent-open] (also outside this component) opens the banner with the stored choice.
+function reopen(e: Event) {
+  if (!(e.target as Element | null)?.closest?.('[data-oc-consent-open]')) return
+  const choice = read()
+  for (const i of inputs()) if (!i.disabled) i.checked = !!choice?.[i.name]
+  box.value?.showPopover?.()
+}
+function choose(e: MouseEvent) {
+  const mode = (e.target as HTMLElement).closest<HTMLElement>('[data-oc-consent]')?.dataset.ocConsent
+  if (!mode) return
+  const choice: ConsentChoice = { necessary: true, date: new Date().toISOString() }
+  for (const i of inputs()) if (!i.disabled) choice[i.name] = mode === 'all' || (mode === 'selected' && i.checked)
+  try { localStorage.setItem(props.storageKey, JSON.stringify(choice)) } catch { /* storage blocked */ }
+  box.value?.hidePopover?.()
+  tell(choice)
+}
+onMounted(() => {
+  const stored = read()
+  if (stored) tell(stored)
+  else if (!props.manual) box.value?.showPopover?.()
+  document.addEventListener('click', reopen)
+})
+onBeforeUnmount(() => document.removeEventListener('click', reopen))
+</script>
+
+<template>
+  <button v-if="openLabel" type="button" class="oc-btn oc-btn--outline oc-btn--sm" data-oc-consent-open>{{ openLabel }}</button>
+  <aside
+    :id="id"
+    ref="box"
+    v-bind="$attrs"
+    :class="['oc-cookie-consent', bar && 'oc-cookie-consent--bar']"
+    popover="manual"
+    :data-oc-consent-manual="manual ? '' : undefined"
+    :aria-labelledby="`${id}-title`"
+    @click="choose"
+  >
+    <h2 :id="`${id}-title`" class="oc-cookie-consent__title"><span aria-hidden="true">&#127850;</span> {{ title }}</h2>
+    <p class="oc-cookie-consent__text">
+      <slot name="text">Necessary cookies keep the site working. With your permission we also measure visits to improve the site. Read the <a :href="policyHref">cookie policy</a>.</slot>
+    </p>
+    <details class="oc-cookie-consent__prefs">
+      <summary>{{ customizeLabel }}</summary>
+      <div v-for="c in categories" :key="c.name" class="oc-cookie-consent__category">
+        <span class="oc-cookie-consent__category-name">{{ c.label }}</span>
+        <span v-if="c.text" class="oc-cookie-consent__category-text">{{ c.text }}</span>
+        <label class="oc-switch"><input type="checkbox" role="switch" :name="c.name" :checked="c.required" :disabled="c.required" :aria-label="`${c.label} cookies`" /><span class="oc-switch-track"></span></label>
+      </div>
+    </details>
+    <div class="oc-cookie-consent__actions">
+      <button type="button" class="oc-btn oc-btn--outline" data-oc-consent="necessary">{{ necessaryLabel }}</button>
+      <button type="button" class="oc-btn oc-btn--secondary" data-oc-consent="selected">{{ selectedLabel }}</button>
+      <button type="button" class="oc-btn" data-oc-consent="all">{{ allLabel }}</button>
+    </div>
+  </aside>
+</template>

package/src/components/OcCopyField.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Read-only monospace value with a copy button. Copies via navigator.clipboard and
+ * adds .is-copied for 2 seconds. Emits `copy` with the value.
+ */
+import { onBeforeUnmount, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: string
+    label?: string
+    buttonLabel?: string
+  }>(),
+  { label: 'Value', buttonLabel: 'Copy' },
+)
+const emit = defineEmits<{ copy: [value: string] }>()
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+async function copy() {
+  await navigator.clipboard.writeText(props.value)
+  copied.value = true
+  emit('copy', props.value)
+  clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 2000)
+}
+
+onBeforeUnmount(() => clearTimeout(timer))
+</script>
+
+<template>
+  <div class="oc-copy-field">
+    <input class="oc-copy-field-value" type="text" readonly :value="value" :aria-label="label" />
+    <button :class="['oc-copy-field-button', copied && 'is-copied']" type="button" @click="copy">{{ buttonLabel }}</button>
+  </div>
+</template>

package/src/components/OcCounter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/** Animated number (@property). Starts when scrolled into view unless `onView` is false. */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{ to: number; suffix?: string; onView?: boolean }>(), { onView: true })
+const style = computed(() => {
+  const s: Record<string, string> = { '--oc-counter-to': String(props.to) }
+  if (props.suffix) s['--oc-counter-suffix'] = `'${props.suffix}'`
+  return s
+})
+</script>
+
+<template>
+  <strong :class="['oc-counter', onView && 'oc-counter--on-view']" :style="style"></strong>
+</template>

package/src/components/OcDataTable.vue

@@ -0,0 +1,144 @@
+<!-- File: packages/vue/src/components/OcDataTable.vue | Map: props -> markup (toolbar, table, footer) -> bind the list-table script on mount -->
+<script setup lang="ts">
+/**
+ * Korrekt / OmniaDesk list table. Same markup as packages/ui/snippets/data-table.html.
+ * Search, sort, pages, columns, resize, drag and bulk actions come from data-table.js.
+ * Listen on the root for oc-datatable-bulk, oc-datatable-reorder, oc-datatable-search, oc-datatable-import.
+ */
+import { onMounted, useTemplateRef } from 'vue'
+import { bindDataTable } from '../../../ui/src/data-table.js'
+
+export interface DataTableColumn {
+  key: string
+  header: string
+  numeric?: boolean
+  sortable?: boolean
+  hideable?: boolean
+  defaultHidden?: boolean
+}
+export interface DataTableRow {
+  key: string
+  status?: 'active' | 'deleted' | 'archived'
+  cells: Record<string, string>
+  values?: Record<string, string>
+  href?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    tableId?: string
+    title?: string
+    columns: DataTableColumn[]
+    rows: DataTableRow[]
+    pageSize?: number
+    searchPlaceholder?: string
+    selectable?: boolean
+    draggable?: boolean
+    filters?: boolean
+    live?: boolean
+  }>(),
+  { title: 'List', pageSize: 15, searchPlaceholder: 'Search...', selectable: true, draggable: true, filters: true, live: false },
+)
+
+const root = useTemplateRef<HTMLElement>('root')
+const sizes = [...new Set([10, 15, 20, 50, 100, props.pageSize])].sort((a, b) => a - b)
+const lead = (props.selectable ? 1 : 0) + (props.draggable ? 1 : 0)
+const id = props.tableId || `oc-dt-${Math.random().toString(36).slice(2, 8)}`
+
+onMounted(() => {
+  if (root.value) bindDataTable(root.value)
+})
+</script>
+
+<template>
+  <div ref="root" class="oc-data-table oc-column-menu-scope" :id="id" :data-page-size="pageSize" :data-oc-live="live ? 'true' : undefined">
+    <div class="oc-data-table-toolbar">
+      <div class="oc-data-table-heading">
+        <span class="oc-data-table-title">{{ title }}</span>
+        <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" :popovertarget="`${id}-menu`" aria-label="Table actions">⚙</button>
+        <div class="oc-dropdown-menu" :id="`${id}-menu`" popover>
+          <button class="oc-dropdown-item" type="button" data-oc-export>Export CSV</button>
+          <button class="oc-dropdown-item" type="button" data-oc-import>Import CSV</button>
+          <input class="oc-data-table-file" type="file" accept=".csv,text/csv" data-oc-file>
+          <div class="oc-dropdown-separator"></div>
+          <button class="oc-dropdown-item" type="button" data-oc-density="comfortable">Comfortable rows</button>
+          <button class="oc-dropdown-item" type="button" data-oc-density="compact">Compact rows</button>
+          <button class="oc-dropdown-item" type="button" data-oc-reset-widths>Reset column widths</button>
+        </div>
+      </div>
+      <input class="oc-input oc-data-table-search" type="search" :placeholder="searchPlaceholder" :aria-label="`Search ${title}`">
+      <div v-if="filters" class="oc-filter-pills" role="group" aria-label="Trash filter">
+        <button class="oc-filter-pill" type="button" data-oc-filter="active" aria-current="true">Active only</button>
+        <button class="oc-filter-pill" type="button" data-oc-filter="all">Including trash</button>
+        <button class="oc-filter-pill" type="button" data-oc-filter="deleted">Trash only</button>
+        <button class="oc-filter-pill" type="button" data-oc-filter="archived">Archive only</button>
+      </div>
+      <div class="oc-data-table-view" role="group" aria-label="View">
+        <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="table" aria-pressed="true">Table</button>
+        <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="grid">Cards</button>
+      </div>
+      <p class="oc-data-table-sort-summary" data-oc-sort-summary role="status"></p>
+    </div>
+    <div class="oc-table-toolbar">
+      <span class="oc-table-toolbar-spacer"></span>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" :popovertarget="`${id}-columns`">Columns</button>
+    </div>
+    <div class="oc-column-menu" :id="`${id}-columns`" popover>
+      <p class="oc-column-menu-title">Visible columns</p>
+      <form class="oc-column-menu-list">
+        <template v-for="(col, index) in columns" :key="col.key">
+          <label v-if="col.hideable !== false" class="oc-column-menu-item">
+            <input type="checkbox" :data-col="lead + index + 1" :checked="!col.defaultHidden"> {{ col.header }}
+          </label>
+        </template>
+      </form>
+    </div>
+    <div class="oc-data-table-bulk" hidden>
+      <span data-oc-selected-count>0 selected</span>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="export">Export selection</button>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="duplicate">Duplicate</button>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="archive">Move to trash</button>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="restore">Restore</button>
+      <button class="oc-btn oc-btn--destructive oc-btn--sm" type="button" data-oc-bulk="delete">Delete permanently</button>
+      <button class="oc-btn oc-btn--ghost oc-btn--sm" type="button" data-oc-bulk="clear">Clear</button>
+    </div>
+    <div class="oc-data-table-frame">
+      <div class="oc-data-table-scroll">
+        <table class="oc-table oc-data-table-table">
+          <thead>
+            <tr>
+              <th v-if="selectable" data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select-all aria-label="Select all"></th>
+              <th v-if="draggable" data-oc-col="order"><span class="oc-visually-hidden">Order</span></th>
+              <th v-for="col in columns" :key="col.key" :data-oc-col="col.key" :data-oc-sort="col.numeric ? 'numeric' : 'text'" :data-numeric="col.numeric ? '' : undefined">
+                <span class="oc-data-table-th">
+                  <button v-if="col.sortable !== false" class="oc-table-sort" type="button">{{ col.header }}</button>
+                  <template v-else>{{ col.header }}</template>
+                  <span class="oc-data-table-resize" role="separator" aria-orientation="vertical" :aria-label="`Resize ${col.header}`"></span>
+                </span>
+              </th>
+              <th data-oc-col="actions"><span class="oc-visually-hidden">Actions</span></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in rows" :key="row.key" data-oc-row :data-oc-key="row.key" :data-oc-status="row.status || 'active'" :data-oc-href="row.href">
+              <td v-if="selectable" data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select :aria-label="`Select ${row.cells.name || row.key}`"></td>
+              <td v-if="draggable" data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" :aria-label="`Move ${row.cells.name || row.key}`"></button></td>
+              <td v-for="col in columns" :key="col.key" :data-oc-col="col.key" :data-numeric="col.numeric ? '' : undefined" :data-oc-value="row.values?.[col.key]">{{ row.cells[col.key] ?? '' }}</td>
+              <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p class="oc-data-table-empty" hidden>No results</p>
+    </div>
+    <div class="oc-data-table-footer">
+      <p class="oc-data-table-summary" data-oc-summary></p>
+      <label class="oc-data-table-per-page">Rows per page
+        <select class="oc-select" data-oc-page-size aria-label="Rows per page">
+          <option v-for="n in sizes" :key="n" :value="n" :selected="n === pageSize">{{ n }}</option>
+        </select>
+      </label>
+      <nav class="oc-data-table-pager" data-oc-pager aria-label="Pagination"></nav>
+    </div>
+  </div>
+</template>

package/src/components/OcDecimalInput.vue

@@ -0,0 +1,53 @@
+<!-- File: packages/vue/src/components/OcDecimalInput.vue | Map: props + model -> locale helpers (parse / format) -> template (field, optional unit frame) -->
+<script setup lang="ts">
+/**
+ * Locale decimal field (1.234,56). v-model: number | null. Formats on blur with Intl.NumberFormat.
+ * Same markup as packages/ui/snippets/decimal-input.html. All attributes (also class) go to the input.
+ */
+import { ref, watch } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<{ locale?: string; decimals?: number; unit?: string; alignStart?: boolean; error?: boolean }>(), {
+  locale: 'nl-BE',
+  decimals: 2,
+})
+const model = defineModel<number | null>({ default: null })
+
+/** Group and decimal separator of the locale, e.g. nl-BE -> "." and ",". */
+function separators() {
+  const parts = new Intl.NumberFormat(props.locale).formatToParts(1234.5)
+  return { group: parts.find((p) => p.type === 'group')?.value ?? ',', decimal: parts.find((p) => p.type === 'decimal')?.value ?? '.' }
+}
+function parse(text: string): number | null {
+  const { group, decimal } = separators()
+  const clean = text.trim().split(group).join('').replace(decimal, '.').replace(/\s/g, '')
+  const n = Number(clean)
+  return clean && Number.isFinite(n) ? n : null
+}
+function format(n: number | null): string {
+  return n == null ? '' : new Intl.NumberFormat(props.locale, { minimumFractionDigits: props.decimals, maximumFractionDigits: props.decimals }).format(n)
+}
+
+const text = ref(format(model.value))
+const focused = ref(false)
+// Show outside changes, but never while the user is typing.
+watch(model, (n) => { if (!focused.value) text.value = format(n) })
+
+function onInput(e: Event) {
+  text.value = (e.target as HTMLInputElement).value
+  model.value = parse(text.value)
+}
+function onBlur() {
+  focused.value = false
+  const n = parse(text.value)
+  if (n != null || !text.value.trim()) text.value = format(n)
+}
+</script>
+
+<template>
+  <div v-if="unit" class="oc-decimal-field">
+    <input v-bind="$attrs" :class="['oc-input', 'oc-decimal-input', alignStart && 'oc-decimal-input--start']" type="text" inputmode="decimal" :aria-invalid="error ? 'true' : undefined" :value="text" @focus="focused = true" @input="onInput" @blur="onBlur" />
+    <span class="oc-decimal-field-unit">{{ unit }}</span>
+  </div>
+  <input v-else v-bind="$attrs" :class="['oc-input', 'oc-decimal-input', alignStart && 'oc-decimal-input--start']" type="text" inputmode="decimal" :aria-invalid="error ? 'true' : undefined" :value="text" @focus="focused = true" @input="onInput" @blur="onBlur" />
+</template>

package/src/components/OcDefinitionList.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * Label / value rows in a panel (dl). Pass `rows`, or put your own .oc-dl-row elements in the default slot.
+ * Slots: title, description, default (rows), footer.
+ */
+export interface DefinitionRow {
+  term: string
+  detail: string
+}
+withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    rows?: DefinitionRow[]
+    label?: string
+  }>(),
+  { rows: () => [] },
+)
+</script>
+
+<template>
+  <div class="oc-dl-panel" role="region" :aria-label="label ?? title">
+    <h3 v-if="title || $slots.title" class="oc-dl-title"><slot name="title">{{ title }}</slot></h3>
+    <p v-if="description || $slots.description" class="oc-dl-description"><slot name="description">{{ description }}</slot></p>
+    <dl class="oc-dl">
+      <slot>
+        <div v-for="(row, i) in rows" :key="i" class="oc-dl-row">
+          <dt class="oc-dl-term">{{ row.term }}</dt>
+          <dd class="oc-dl-detail">{{ row.detail }}</dd>
+        </div>
+      </slot>
+    </dl>
+    <div v-if="$slots.footer" class="oc-dl-footer"><slot name="footer" /></div>
+  </div>
+</template>

package/src/components/OcDocViewer.vue

@@ -0,0 +1,79 @@
+<!-- File: packages/vue/src/components/OcDocViewer.vue | Map: props + demo items -> grid of cards (bar, frame) -> one full-screen <dialog> per card -->
+<script setup lang="ts">
+/**
+ * PDF, video or image cards with a full-screen view (same markup as snippets/doc-viewer.html). No JavaScript:
+ * the buttons open the dialog with invoker commands (command="show-modal" commandfor), closedby="any" closes it.
+ * items: { label, meta?, src?, type?: pdf|video|image, id?, alt?, art?, download?, open?: bar|frame, fullscreen? }[]
+ * Classes: .oc-doc-viewer-grid, .oc-doc-viewer(--video/--image) __bar __label __meta __expand __frame __open;
+ * .oc-doc-viewer-dialog(--video) __bar __title __actions __close __body
+ */
+import { useUid } from '../composables/useUid'
+
+export interface DocViewerItem {
+  label: string
+  meta?: string
+  src?: string
+  type?: 'pdf' | 'video' | 'image'
+  id?: string
+  alt?: string
+  art?: number
+  download?: string
+  open?: 'bar' | 'frame'
+  fullscreen?: boolean
+}
+const props = withDefaults(
+  defineProps<{ items?: DocViewerItem[]; openText?: string; downloadText?: string; idPrefix?: string }>(),
+  {
+    items: () => [
+      { label: 'Brochure 2026', meta: 'PDF · 2.4 MB', alt: 'First page of Brochure 2026', art: 2, download: '#brochure.pdf' },
+      { label: 'Site visit', meta: '1:42', type: 'video', alt: 'Video still: site visit', art: 5 },
+    ],
+    openText: 'Click for full screen',
+    downloadText: 'Download',
+  },
+)
+defineOptions({ inheritAttrs: false })
+const auto = useUid('oc-doc-viewer')
+const idOf = (doc: DocViewerItem, i: number) => doc.id ?? `${props.idPrefix ?? auto}-${i + 1}`
+const full = (doc: DocViewerItem) => doc.fullscreen !== false
+const inFrame = (doc: DocViewerItem) => full(doc) && (doc.open ?? (doc.type === 'video' ? 'frame' : 'bar')) === 'frame'
+const art = (doc: DocViewerItem) => ['oc-media-art', doc.art != null && `oc-media-art--${doc.art}`]
+const dialogAlt = (doc: DocViewerItem) => (doc.type === 'video' ? `${doc.label} video` : doc.label)
+</script>
+
+<template>
+  <div class="oc-doc-viewer-grid" v-bind="$attrs">
+    <figure v-for="(doc, i) in items" :key="i" :class="['oc-doc-viewer', doc.type === 'video' && 'oc-doc-viewer--video', doc.type === 'image' && 'oc-doc-viewer--image']">
+      <figcaption class="oc-doc-viewer__bar">
+        <span class="oc-doc-viewer__label">{{ doc.label }}</span>
+        <span v-if="doc.meta" class="oc-doc-viewer__meta">{{ doc.meta }}</span>
+        <button v-if="full(doc) && !inFrame(doc)" type="button" class="oc-doc-viewer__expand" command="show-modal" :commandfor="idOf(doc, i)" :aria-label="`Open ${doc.label} full screen`">&#10530;</button>
+      </figcaption>
+      <div class="oc-doc-viewer__frame">
+        <div v-if="!doc.src" :class="art(doc)" role="img" :aria-label="doc.alt ?? doc.label"></div>
+        <video v-else-if="doc.type === 'video'" :src="doc.src" controls preload="metadata" :aria-label="doc.alt ?? doc.label"></video>
+        <img v-else-if="doc.type === 'image'" :src="doc.src" :alt="doc.alt ?? doc.label" />
+        <iframe v-else :src="`${doc.src}#toolbar=0&view=FitH`" :title="doc.alt ?? doc.label" loading="lazy"></iframe>
+        <button v-if="inFrame(doc)" type="button" class="oc-doc-viewer__open" command="show-modal" :commandfor="idOf(doc, i)">{{ openText }}</button>
+      </div>
+    </figure>
+  </div>
+  <template v-for="(doc, i) in items" :key="i">
+    <dialog v-if="full(doc)" :id="idOf(doc, i)" :class="['oc-doc-viewer-dialog', doc.type === 'video' && 'oc-doc-viewer-dialog--video']" closedby="any" :aria-labelledby="`${idOf(doc, i)}-title`">
+      <div class="oc-doc-viewer-dialog__bar">
+        <h2 :id="`${idOf(doc, i)}-title`" class="oc-doc-viewer-dialog__title">{{ doc.label }}</h2>
+        <div v-if="doc.download" class="oc-doc-viewer-dialog__actions">
+          <a class="oc-btn oc-btn--outline oc-btn--sm" :href="doc.download" download>{{ downloadText }}</a>
+          <button type="button" class="oc-doc-viewer-dialog__close" command="close" :commandfor="idOf(doc, i)" aria-label="Close">&#10005;</button>
+        </div>
+        <button v-else type="button" class="oc-doc-viewer-dialog__close" command="close" :commandfor="idOf(doc, i)" aria-label="Close">&#10005;</button>
+      </div>
+      <div class="oc-doc-viewer-dialog__body">
+        <div v-if="!doc.src" :class="art(doc)" role="img" :aria-label="dialogAlt(doc)"></div>
+        <video v-else-if="doc.type === 'video'" :src="doc.src" controls preload="metadata" :aria-label="dialogAlt(doc)"></video>
+        <img v-else-if="doc.type === 'image'" :src="doc.src" :alt="dialogAlt(doc)" />
+        <iframe v-else :src="`${doc.src}#toolbar=0&view=FitH`" :title="dialogAlt(doc)" loading="lazy"></iframe>
+      </div>
+    </dialog>
+  </template>
+</template>

package/src/components/OcDropdown.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/**
+ * Dropdown menu on the popover attribute + anchor positioning. The trigger is the `trigger` slot
+ * (scoped: { id }) or a default outline button showing `label`. Default slot = menu content
+ * (OcDropdownLabel / OcDropdownItem / OcDropdownSeparator). Attributes land on the menu element.
+ */
+import { useAttrs } from 'vue'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ label?: string }>()
+const attrs = useAttrs()
+const id = (attrs.id as string | undefined) ?? useUid('oc-menu')
+</script>
+
+<template>
+  <slot name="trigger" :id="id">
+    <button class="oc-btn oc-btn--outline" type="button" :popovertarget="id">{{ label }}</button>
+  </slot>
+  <div v-bind="attrs" :id="id" class="oc-dropdown-menu" popover>
+    <slot />
+  </div>
+</template>

package/src/components/OcDropdownItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+/** Menu item: <a> with `href`, otherwise <button>. */
+defineProps<{ href?: string }>()
+</script>
+
+<template>
+  <a v-if="href" class="oc-dropdown-item" :href="href"><slot /></a>
+  <button v-else class="oc-dropdown-item" type="button"><slot /></button>
+</template>

package/src/components/OcDropdownLabel.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+/** Heading inside a dropdown menu. */
+</script>
+
+<template>
+  <div class="oc-dropdown-label"><slot /></div>
+</template>

package/src/components/OcDropdownSeparator.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+/** Divider inside a dropdown menu. */
+</script>
+
+<template>
+  <div class="oc-dropdown-separator"></div>
+</template>

package/src/components/OcDropzone.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * File upload target: a label around a real file input. v-model: File[].
+ * .is-dragover is toggled while dragging over. Slots: icon, default (text), hint.
+ */
+import { ref } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+defineOptions({ inheritAttrs: false })
+defineProps<{ accept?: string; multiple?: boolean; disabled?: boolean; hint?: string }>()
+const model = defineModel<File[]>({ default: () => [] })
+const { root, control } = useAttrsSplit()
+const dragover = ref(false)
+
+function onChange(e: Event) {
+  model.value = Array.from((e.target as HTMLInputElement).files ?? [])
+}
+function onDrop() {
+  dragover.value = false
+}
+</script>
+
+<template>
+  <label
+    v-bind="root"
+    :class="['oc-dropzone', dragover && 'is-dragover']"
+    @dragover.prevent="dragover = true"
+    @dragleave="dragover = false"
+    @drop="onDrop"
+  >
+    <input v-bind="control" type="file" :accept="accept" :multiple="multiple" :disabled="disabled" @change="onChange" />
+    <span v-if="$slots.icon" class="oc-dropzone-icon" aria-hidden="true"><slot name="icon" /></span>
+    <span><slot /></span>
+    <span v-if="hint || $slots.hint" class="oc-dropzone-hint"><slot name="hint">{{ hint }}</slot></span>
+  </label>
+</template>

package/src/components/OcEmojiPicker.vue

@@ -0,0 +1,45 @@
+<!-- File: packages/vue/src/components/OcEmojiPicker.vue | Map: props + emit -> trigger button -> popover panel -> groups (label + grid) -->
+<script setup lang="ts">
+/**
+ * Emoji picker on the popover attribute (same markup as snippets/emoji-picker.html).
+ * Props: groups ({ label?, emojis[] }[]), inline (always visible, no popover), triggerLabel, label.
+ * Emits: select(emoji) and then closes the popover. Slot: trigger (button content, default 🙂).
+ * Classes: .oc-emoji-picker(--inline), __trigger, __label, __grid, __item
+ */
+import { useUid } from '../composables/useUid'
+
+withDefaults(
+  defineProps<{ groups?: { label?: string; emojis: string[] }[]; inline?: boolean; triggerLabel?: string; label?: string }>(),
+  {
+    groups: () => [
+      { label: 'Smileys', emojis: ['😀', '😃', '😄', '😁', '😂', '🙂', '😉', '😍', '🤔', '😎', '😢', '😴', '😯', '🥳', '😤', '🤗'] },
+      { label: 'Gestures', emojis: ['👍', '👎', '👏', '🙌', '👋', '🙏', '✌️', '💪'] },
+      { label: 'Objects', emojis: ['❤️', '⭐', '🔥', '🎉', '✅', '🚀', '💡', '☕'] },
+    ],
+    triggerLabel: 'Insert emoji',
+    label: 'Emoji',
+  },
+)
+const emit = defineEmits<{ select: [emoji: string] }>()
+const id = useUid('oc-emoji')
+
+function pick(e: MouseEvent, emoji: string) {
+  emit('select', emoji)
+  const panel = (e.currentTarget as HTMLElement).closest('[popover]') as (HTMLElement & { hidePopover?: () => void }) | null
+  panel?.hidePopover?.()
+}
+</script>
+
+<template>
+  <button v-if="!inline" type="button" class="oc-emoji-picker__trigger" :popovertarget="id" :aria-label="triggerLabel">
+    <slot name="trigger">🙂</slot>
+  </button>
+  <div :id="id" :class="['oc-emoji-picker', inline && 'oc-emoji-picker--inline']" :popover="inline ? undefined : ''" :role="inline ? 'group' : undefined" :aria-label="label">
+    <div v-for="(g, gi) in groups" :key="gi">
+      <p v-if="g.label" class="oc-emoji-picker__label">{{ g.label }}</p>
+      <div class="oc-emoji-picker__grid">
+        <button v-for="emoji in g.emojis" :key="emoji" type="button" class="oc-emoji-picker__item" @click="pick($event, emoji)">{{ emoji }}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcEmptyState.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/** Icon, title, text and actions for lists without data. Slots: icon, title, default (text), actions. */
+defineProps<{ icon?: string; title?: string; text?: string }>()
+</script>
+
+<template>
+  <div class="oc-empty">
+    <span v-if="icon || $slots.icon" class="oc-empty-icon" aria-hidden="true"><slot name="icon">{{ icon }}</slot></span>
+    <h3 v-if="title || $slots.title" class="oc-empty-title"><slot name="title">{{ title }}</slot></h3>
+    <p v-if="text || $slots.default" class="oc-empty-text"><slot>{{ text }}</slot></p>
+    <div v-if="$slots.actions" class="oc-empty-actions"><slot name="actions" /></div>
+  </div>
+</template>