@birdycom/omniaui-vue 0.0.0-stage → 0.11.0

package/src/components/OcAccordion.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+/** Exclusive accordion on <details name>. Put OcAccordionItem children inside; they share one group name. */
+import { provide } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{ name?: string }>()
+provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
+</script>
+
+<template>
+  <div class="oc-accordion"><slot /></div>
+</template>

package/src/components/OcAccordionAccent.vue

@@ -0,0 +1,27 @@
+<!-- File: packages/vue/src/components/OcAccordionAccent.vue | Map: div.oc-accordion.oc-accordion--accent (+ color classes) -> OcAccordionItem children -->
+<script setup lang="ts">
+/**
+ * Accent accordion: separate item cards with a colored start edge. Put OcAccordionItem children inside;
+ * they share one group name (like OcAccordion). Color one item with class "oc-accent--violet" or "oc-accordion-item--warning".
+ * Classes: .oc-accordion--accent, .oc-accent--*, .oc-accordion--success/--warning/--danger, .oc-accordion--flush, .oc-accordion-accent-meta
+ */
+import { provide } from 'vue'
+import { useUid } from '../composables/useUid'
+
+const props = defineProps<{
+  name?: string
+  /** Color preset for all items. */
+  accent?: 'blue' | 'cyan' | 'green' | 'orange' | 'red' | 'violet' | 'yellow'
+  /** Semantic color for all items. */
+  tone?: 'success' | 'warning' | 'danger'
+  flush?: boolean
+}>()
+// Same key as OcAccordion, so OcAccordionItem picks up the group name.
+provide('oc-accordion-name', props.name ?? useUid('oc-accordion'))
+</script>
+
+<template>
+  <div :class="['oc-accordion', 'oc-accordion--accent', flush && 'oc-accordion--flush', accent && `oc-accent--${accent}`, tone && `oc-accordion--${tone}`]">
+    <slot />
+  </div>
+</template>

package/src/components/OcAccordionItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/** One accordion section (details/summary). v-model:open; default slot = content, `title` prop or slot = trigger. */
+import { inject } from 'vue'
+
+defineProps<{ title?: string }>()
+const open = defineModel<boolean>('open', { default: false })
+const name = inject<string | undefined>('oc-accordion-name', undefined)
+
+function onToggle(e: Event) {
+  open.value = (e.target as HTMLDetailsElement).open
+}
+</script>
+
+<template>
+  <details class="oc-accordion-item" :name="name" :open="open" @toggle="onToggle">
+    <summary class="oc-accordion-trigger"><slot name="title">{{ title }}</slot></summary>
+    <div class="oc-accordion-content"><slot /></div>
+  </details>
+</template>

package/src/components/OcAffixInput.vue

@@ -0,0 +1,40 @@
+<!-- File: packages/vue/src/components/OcAffixInput.vue | Map: props -> variant presets -> template (input group --affix with inline symbol) -->
+<script setup lang="ts">
+/**
+ * Input with a symbol inside the frame. variant: currency (€), percent (%) or email (@); or own prefix / suffix (props or slots).
+ * Same markup as packages/ui/snippets/affix-input.html. v-model: string.
+ * class/style stay on the wrapper, other attributes go to the input.
+ */
+import { computed } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+
+export type AffixInputKind = 'currency' | 'percent' | 'email'
+
+defineOptions({ inheritAttrs: false })
+// alignEnd defaults to undefined (not false), so the variant preset can decide.
+const props = withDefaults(defineProps<{ variant?: AffixInputKind; prefix?: string; suffix?: string; alignEnd?: boolean; error?: boolean }>(), {
+  alignEnd: undefined,
+})
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+
+// Preset per variant. Email uses type="email" so :user-invalid checks the address.
+const PRESETS = {
+  currency: { prefix: '\u20AC', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
+  percent: { prefix: '%', suffix: undefined, end: false, input: { type: 'text', inputmode: 'decimal' } },
+  email: { prefix: '@', suffix: undefined, end: false, input: { type: 'email', autocomplete: 'email' } },
+} as const
+
+const preset = computed(() => (props.variant ? PRESETS[props.variant] : undefined))
+const before = computed(() => props.prefix ?? preset.value?.prefix)
+const after = computed(() => props.suffix ?? preset.value?.suffix)
+const end = computed(() => props.alignEnd ?? preset.value?.end ?? false)
+</script>
+
+<template>
+  <div v-bind="root" :class="['oc-input-group', 'oc-input-group--affix', end && 'oc-input-group--end', error && 'oc-input-group--error']">
+    <span v-if="before || $slots.prefix" class="oc-input-addon" aria-hidden="true"><slot name="prefix">{{ before }}</slot></span>
+    <input v-bind="{ type: 'text', ...preset?.input, ...control }" v-model="model" class="oc-input" :aria-invalid="error ? 'true' : undefined" />
+    <span v-if="after || $slots.suffix" class="oc-input-addon" aria-hidden="true"><slot name="suffix">{{ after }}</slot></span>
+  </div>
+</template>

package/src/components/OcAlert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+/** Alert. Classes: .oc-alert--info/success/warning/danger. Default slot = description. */
+withDefaults(
+  defineProps<{
+    variant?: 'info' | 'success' | 'warning' | 'danger'
+    title?: string
+  }>(),
+  { variant: 'info' },
+)
+</script>
+
+<template>
+  <div :class="['oc-alert', `oc-alert--${variant}`]" role="status">
+    <h4 v-if="title || $slots.title" class="oc-alert-title"><slot name="title">{{ title }}</slot></h4>
+    <p v-if="$slots.default" class="oc-alert-description"><slot /></p>
+  </div>
+</template>

package/src/components/OcAlertDialog.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Confirmation modal with a status icon. v-model:open. Emits `confirm` / `cancel` (both close the dialog).
+ * Slots: icon, title, default (message), footer (scoped: { close }).
+ * Classes: .oc-alert-dialog(--success/--error/--warning/--info/--question), .oc-alert-dialog-icon
+ */
+import { computed, ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question'
+    title?: string
+    message?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    /** Variant of the confirm button; defaults to destructive for warning/error. */
+    confirmVariant?: 'default' | 'destructive' | 'success'
+  }>(),
+  { type: 'warning', confirmLabel: 'Confirm', cancelLabel: 'Cancel' },
+)
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const titleId = useUid('oc-alert-dialog-title')
+const textId = `${titleId}-text`
+
+const glyphs = { success: '✓', error: '×', warning: '!', info: 'i', question: '?' } as const
+const variant = computed(() => props.confirmVariant ?? (props.type === 'warning' || props.type === 'error' ? 'destructive' : 'default'))
+const close = () => (open.value = false)
+
+function confirm() {
+  emit('confirm')
+  close()
+}
+function cancel() {
+  emit('cancel')
+  close()
+}
+</script>
+
+<template>
+  <dialog
+    ref="el"
+    class="oc-modal"
+    closedby="closerequest"
+    role="alertdialog"
+    :aria-labelledby="titleId"
+    :aria-describedby="textId"
+    @close="onClose"
+  >
+    <div :class="['oc-modal-content', 'oc-modal-content--sm', 'oc-alert-dialog', `oc-alert-dialog--${type}`]">
+      <span class="oc-alert-dialog-icon" aria-hidden="true"><slot name="icon">{{ glyphs[type] }}</slot></span>
+      <h2 :id="titleId" class="oc-modal-title"><slot name="title">{{ title }}</slot></h2>
+      <div :id="textId" class="oc-modal-body"><slot>{{ message }}</slot></div>
+      <div class="oc-modal-footer">
+        <slot name="footer" :close="close" :confirm="confirm" :cancel="cancel">
+          <button class="oc-btn oc-btn--outline" type="button" @click="cancel">{{ cancelLabel }}</button>
+          <button :class="['oc-btn', variant !== 'default' && `oc-btn--${variant}`]" type="button" @click="confirm">{{ confirmLabel }}</button>
+        </slot>
+      </div>
+    </div>
+  </dialog>
+</template>

package/src/components/OcAlphaTabs.vue

@@ -0,0 +1,54 @@
+<!-- File: packages/vue/src/components/OcAlphaTabs.vue | Map: nav -> "All" item -> one item per letter (current / disabled) -->
+<script setup lang="ts">
+/**
+ * All + A-Z letter filter. v-model = current letter ("all" by default).
+ * With `href` (e.g. "?letter={letter}") the items are links; otherwise buttons that update v-model.
+ * Classes: nav.oc-alpha-tabs(--wrap/--sm/--plain), .oc-alpha-tabs-item(--all), aria-current, aria-disabled
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    letters?: string[]
+    /** Letters with entries; the others are disabled. Default: all. */
+    available?: string[]
+    /** Link pattern; "{letter}" is replaced, e.g. "?letter={letter}". */
+    href?: string
+    allLabel?: string
+    wrap?: boolean
+    size?: 'sm'
+    plain?: boolean
+  }>(),
+  { letters: () => 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), allLabel: 'All' },
+)
+const current = defineModel<string>({ default: 'all' })
+
+const items = computed(() => [
+  { key: 'all', label: props.allLabel, all: true },
+  ...props.letters.map((l) => ({ key: l, label: l, all: false })),
+])
+const isDisabled = (key: string) => key !== 'all' && props.available !== undefined && !props.available.includes(key)
+const link = (key: string) => props.href?.replace('{letter}', key)
+</script>
+
+<template>
+  <nav :class="['oc-alpha-tabs', wrap && 'oc-alpha-tabs--wrap', size && `oc-alpha-tabs--${size}`, plain && 'oc-alpha-tabs--plain']" aria-label="Filter by letter">
+    <template v-for="item in items" :key="item.key">
+      <a
+        v-if="href"
+        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
+        :href="isDisabled(item.key) ? undefined : link(item.key)"
+        :aria-current="current === item.key ? 'true' : undefined"
+        :aria-disabled="isDisabled(item.key) ? 'true' : undefined"
+      >{{ item.label }}</a>
+      <button
+        v-else
+        type="button"
+        :class="['oc-alpha-tabs-item', item.all && 'oc-alpha-tabs-item--all']"
+        :aria-current="current === item.key ? 'true' : undefined"
+        :disabled="isDisabled(item.key)"
+        @click="current = item.key"
+      >{{ item.label }}</button>
+    </template>
+  </nav>
+</template>

package/src/components/OcAspectRatio.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+/**
+ * Aspect-ratio box. `ratio` is a preset (square | photo | portrait | wide), a number (1.5) or a CSS ratio ("5 / 2");
+ * default 16 / 9. `center` centers the content. Classes: .oc-aspect(--square/--photo/--portrait/--wide/--center), --oc-aspect
+ */
+import { computed } from 'vue'
+
+const presets = ['square', 'photo', 'portrait', 'wide']
+const props = defineProps<{ ratio?: 'square' | 'photo' | 'portrait' | 'wide' | number | string; center?: boolean }>()
+const preset = computed(() => (typeof props.ratio === 'string' && presets.includes(props.ratio) ? props.ratio : undefined))
+const custom = computed(() => (props.ratio !== undefined && !preset.value ? String(props.ratio) : undefined))
+</script>
+
+<template>
+  <div
+    :class="['oc-aspect', preset && `oc-aspect--${preset}`, center && 'oc-aspect--center']"
+    :style="custom ? { '--oc-aspect': custom } : undefined"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/OcAttachment.vue

@@ -0,0 +1,59 @@
+<!-- File: packages/vue/src/components/OcAttachment.vue | Map: type / extension helpers -> props -> a[download] or div chip (icon, name, size, remove) -->
+<script lang="ts">
+export type AttachmentType = 'pdf' | 'doc' | 'sheet' | 'zip' | 'image'
+export interface AttachmentFile {
+  name: string
+  size?: string
+  type?: AttachmentType
+  ext?: string
+  href?: string
+  image?: string
+  state?: 'uploading' | 'error'
+  progress?: number
+  removable?: boolean
+  removeLabel?: string
+}
+const TYPES: Record<string, AttachmentType> = {
+  pdf: 'pdf', doc: 'doc', docx: 'doc', odt: 'doc', rtf: 'doc', txt: 'doc', xls: 'sheet', xlsx: 'sheet', csv: 'sheet', ods: 'sheet',
+  zip: 'zip', rar: 'zip', '7z': 'zip', gz: 'zip', jpg: 'image', jpeg: 'image', png: 'image', gif: 'image', webp: 'image', heic: 'image', avif: 'image',
+}
+const extOf = (name: string) => (name.includes('.') ? name.split('.').pop()!.toLowerCase() : '')
+/** Icon text and tint of a file name (Plan.xlsx -> XLS, sheet). */
+export const attachmentMeta = (f: AttachmentFile) => ({
+  ext: f.ext ?? extOf(f.name).toUpperCase().replace(/^(DOC|XLS|PPT)X$/, '$1'),
+  type: f.type ?? TYPES[extOf(f.name)],
+})
+</script>
+
+<script setup lang="ts">
+/**
+ * File chip (same markup as snippets/attachment.html): icon tile by type, name, size, upload / error state and remove button.
+ * With href (and not removable) it is an <a download>. Emits: remove. Classes: .oc-attachment(--pdf/--doc/--sheet/--zip/--image,
+ * --uploading/--error) __icon __body __name __size __remove; --oc-attachment-progress while uploading.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<AttachmentFile>(), { progress: 0 })
+const emit = defineEmits<{ remove: [] }>()
+const meta = computed(() => attachmentMeta(props))
+const uploading = computed(() => props.state === 'uploading')
+const link = computed(() => !!props.href && !props.removable)
+</script>
+
+<template>
+  <component
+    :is="link ? 'a' : 'div'"
+    :class="['oc-attachment', meta.type && `oc-attachment--${meta.type}`, state && `oc-attachment--${state}`]"
+    :href="link ? href : undefined"
+    :download="link ? '' : undefined"
+    :style="uploading ? `--oc-attachment-progress:${progress}%` : undefined"
+  >
+    <span class="oc-attachment__icon" aria-hidden="true"><img v-if="image" :src="image" alt="" /><template v-else>{{ meta.ext }}</template></span>
+    <span class="oc-attachment__body">
+      <span class="oc-attachment__name">{{ name }}</span>
+      <span v-if="uploading" class="oc-attachment__size" role="status">{{ size ?? `Uploading… ${progress}%` }}</span>
+      <span v-else-if="size" class="oc-attachment__size">{{ size }}</span>
+    </span>
+    <button v-if="removable" type="button" class="oc-attachment__remove" :aria-label="removeLabel ?? (uploading ? `Cancel upload of ${name}` : `Remove ${name}`)" @click="emit('remove')">&#10005;</button>
+  </component>
+</template>

package/src/components/OcAttachmentImage.vue

@@ -0,0 +1,13 @@
+<!-- File: packages/vue/src/components/OcAttachmentImage.vue | Map: props -> a.oc-attachment-image (img or placeholder art, caption) -->
+<script setup lang="ts">
+/** Image preview inside a message (4 : 3, same markup as snippets/attachment.html). No src = placeholder art. Classes: .oc-attachment-image, __caption */
+defineProps<{ href?: string; src?: string; alt: string; art?: number; caption?: string }>()
+</script>
+
+<template>
+  <a class="oc-attachment-image" :href="href">
+    <img v-if="src" :src="src" :alt="alt" />
+    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
+    <span v-if="caption" class="oc-attachment-image__caption">{{ caption }}</span>
+  </a>
+</template>

package/src/components/OcAttachmentList.vue

@@ -0,0 +1,31 @@
+<!-- File: packages/vue/src/components/OcAttachmentList.vue | Map: props + demo files -> ul (li > chip) or div of chips -->
+<script setup lang="ts">
+/**
+ * Wrapping row of file chips (snippets/attachment.html). items = AttachmentFile[] (demo files when empty); slot default replaces them.
+ * stack = one per line. as = ul (default) or div. Emits: remove(file, index). Classes: .oc-attachment-list(--stack)
+ */
+import OcAttachment, { type AttachmentFile } from './OcAttachment.vue'
+
+withDefaults(defineProps<{ items?: AttachmentFile[]; stack?: boolean; as?: 'ul' | 'div'; label?: string }>(), {
+  as: 'ul',
+  label: 'Files in this message',
+  items: () => [
+    { name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
+    { name: 'Measurements ground floor.xlsx', size: '86 KB', href: '#measurements.xlsx' },
+    { name: 'Contract addendum.docx', size: '240 KB', href: '#contract.docx' },
+    { name: 'Plans architect.zip', size: '14.8 MB', href: '#plans.zip' },
+  ],
+})
+const emit = defineEmits<{ remove: [file: AttachmentFile, index: number] }>()
+</script>
+
+<template>
+  <component :is="as" :class="['oc-attachment-list', stack && 'oc-attachment-list--stack']" :aria-label="label">
+    <slot>
+      <template v-for="(f, i) in items" :key="i">
+        <li v-if="as === 'ul'"><OcAttachment v-bind="f" @remove="emit('remove', f, i)" /></li>
+        <OcAttachment v-else v-bind="f" @remove="emit('remove', f, i)" />
+      </template>
+    </slot>
+  </component>
+</template>

package/src/components/OcAttachmentThumb.vue

@@ -0,0 +1,14 @@
+<!-- File: packages/vue/src/components/OcAttachmentThumb.vue | Map: props -> .oc-attachment-thumb (img or placeholder art, remove button) -->
+<script setup lang="ts">
+/** Square thumbnail of a pasted screenshot (snippets/attachment.html). removeLabel adds the remove button. Emits: remove. */
+withDefaults(defineProps<{ src?: string; alt: string; art?: number; removeLabel?: string; as?: 'div' | 'span' }>(), { as: 'div' })
+const emit = defineEmits<{ remove: [] }>()
+</script>
+
+<template>
+  <component :is="as" class="oc-attachment-thumb">
+    <img v-if="src" :src="src" :alt="alt" />
+    <span v-else :class="['oc-media-art', art != null && `oc-media-art--${art}`]" role="img" :aria-label="alt"></span>
+    <button v-if="removeLabel" type="button" class="oc-attachment__remove" :aria-label="removeLabel" @click="emit('remove')">&#10005;</button>
+  </component>
+</template>

package/src/components/OcAvatar.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/** Avatar (initials via the default slot, or an image via `src`). Classes: .oc-avatar--sm/lg/xl */
+withDefaults(
+  defineProps<{
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+    src?: string
+    alt?: string
+  }>(),
+  { size: 'md', alt: '' },
+)
+</script>
+
+<template>
+  <span :class="['oc-avatar', size !== 'md' && `oc-avatar--${size}`]">
+    <img v-if="src" :src="src" :alt="alt" />
+    <slot v-else />
+  </span>
+</template>

package/src/components/OcAvatarGroup.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+/** Overlapping avatars. Put <OcAvatar> elements in the default slot. */
+</script>
+
+<template>
+  <div class="oc-avatar-group"><slot /></div>
+</template>

package/src/components/OcBackLink.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+/** Outline link that names its destination (Back to Products). */
+withDefaults(defineProps<{ href?: string }>(), { href: '#' })
+</script>
+
+<template>
+  <a class="oc-back-link" :href="href"><slot /></a>
+</template>

package/src/components/OcBadge.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+/** Badge. Classes: .oc-badge + --secondary/--outline/--destructive/--success/--warning/--info */
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info'
+  }>(),
+  { variant: 'default' },
+)
+</script>
+
+<template>
+  <span :class="['oc-badge', variant !== 'default' && `oc-badge--${variant}`]"><slot /></span>
+</template>

package/src/components/OcBarcodeInput.vue

@@ -0,0 +1,51 @@
+<!-- File: packages/vue/src/components/OcBarcodeInput.vue | Map: props + model -> template (label, digits-only field, preview figure + slot) -->
+<script setup lang="ts">
+/**
+ * Barcode / EAN field with a preview. v-model: string (digits only).
+ * Slot `preview`: your own <svg>/<canvas> barcode; default = decorative placeholder bars.
+ * Same markup as packages/ui/snippets/barcode-input.html. class/style on the wrapper, other attributes on the input.
+ */
+import { computed } from 'vue'
+import { useAttrsSplit } from '../composables/useAttrsSplit'
+import { useUid } from '../composables/useUid'
+
+defineOptions({ inheritAttrs: false })
+const props = withDefaults(defineProps<{ label?: string; id?: string; emptyText?: string; error?: boolean }>(), { emptyText: 'No code yet' })
+const model = defineModel<string>({ default: '' })
+const { root, control } = useAttrsSplit()
+const auto = useUid('oc-barcode')
+const inputId = computed(() => props.id ?? auto)
+
+function onInput(e: Event) {
+  const input = e.target as HTMLInputElement
+  model.value = input.value
+}
+</script>
+
+<template>
+  <div v-bind="root" class="oc-barcode-input">
+    <label v-if="label" class="oc-field-label" :for="inputId">{{ label }}</label>
+    <div class="oc-input-group oc-input-group--affix">
+      <span class="oc-input-addon" aria-hidden="true">
+        <svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z" /></svg>
+      </span>
+      <input
+        v-bind="control"
+        :id="inputId"
+        class="oc-input oc-barcode-input-field"
+        type="text"
+        autocomplete="off"
+        spellcheck="false"
+        maxlength="80"
+        placeholder="EAN-13 or internal code"
+        :aria-invalid="error ? 'true' : undefined"
+        :value="model"
+        @input="onInput"
+      />
+    </div>
+    <figure :class="['oc-barcode-preview', !model && 'oc-barcode-preview--empty']" aria-label="Barcode preview">
+      <slot name="preview"><div class="oc-barcode-preview-bars" aria-hidden="true"></div></slot>
+      <figcaption class="oc-barcode-preview-code">{{ model || emptyText }}</figcaption>
+    </figure>
+  </div>
+</template>

package/src/components/OcBreadcrumb.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+/** Breadcrumb. Pass `items` (the last one is the current page) or use the default slot. */
+export interface BreadcrumbItem {
+  label: string
+  href?: string
+}
+withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string }>(), {
+  items: () => [],
+  label: 'Breadcrumb',
+})
+</script>
+
+<template>
+  <nav class="oc-breadcrumb" :aria-label="label">
+    <slot>
+      <template v-for="(item, i) in items" :key="i">
+        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href">{{ item.label }}</a>
+        <span v-else class="oc-breadcrumb-item" aria-current="page">{{ item.label }}</span>
+      </template>
+    </slot>
+  </nav>
+</template>

package/src/components/OcBrowserFrame.vue

@@ -0,0 +1,33 @@
+<!-- File: packages/vue/src/components/OcBrowserFrame.vue | Map: props -> figure -> bar (dots, address, actions) -> view (slot or img) -> caption -->
+<script setup lang="ts">
+/**
+ * Fake browser chrome (same markup as snippets/browser-frame.html).
+ * Props: url (address pill), src / alt (screenshot), caption, minimal, dark, tilt, auto (free height), ratio ("16 / 9").
+ * Slots: default (live content, replaces the screenshot), actions (glyphs right in the bar), caption.
+ * Classes: .oc-browser-frame(--minimal/--dark/--tilt/--auto), __bar, __address, __actions, __view, __caption
+ */
+withDefaults(
+  defineProps<{ url?: string; src?: string; alt?: string; caption?: string; minimal?: boolean; dark?: boolean; tilt?: boolean; auto?: boolean; ratio?: string }>(),
+  { alt: '' },
+)
+</script>
+
+<template>
+  <figure
+    :class="['oc-browser-frame', minimal && 'oc-browser-frame--minimal', dark && 'oc-browser-frame--dark', tilt && 'oc-browser-frame--tilt', auto && 'oc-browser-frame--auto']"
+    :style="ratio ? { '--oc-browser-frame-ratio': ratio } : undefined"
+  >
+    <div class="oc-browser-frame__bar">
+      <i /><i /><i />
+      <span v-if="url" class="oc-browser-frame__address">{{ url }}</span>
+      <span v-if="$slots.actions" class="oc-browser-frame__actions" aria-hidden="true"><slot name="actions" /></span>
+    </div>
+    <div class="oc-browser-frame__view">
+      <slot>
+        <img v-if="src" :src="src" :alt="alt" />
+        <div v-else class="oc-media-art" role="img" :aria-label="alt" />
+      </slot>
+    </div>
+    <figcaption v-if="caption || $slots.caption" class="oc-browser-frame__caption"><slot name="caption">{{ caption }}</slot></figcaption>
+  </figure>
+</template>

package/src/components/OcBusyOverlay.vue

@@ -0,0 +1,32 @@
+<!-- File: packages/vue/src/components/OcBusyOverlay.vue | Map: props + model -> <dialog closedby="none"> (spinner or progress, title, text) -->
+<script setup lang="ts">
+/**
+ * Modal "please wait" overlay (same markup as snippets/busy-overlay.html). v-model:open shows it while a long submit or
+ * upload runs; the page is inert and Esc does not close it. `progress` (0-100) swaps the spinner for a progress bar.
+ * Slot: default (replaces the text). Classes: .oc-busy-overlay __title __text; .oc-spinner / .oc-progress
+ */
+import { ref } from 'vue'
+import { useDialog } from '../composables/useDialog'
+import { useUid } from '../composables/useUid'
+import OcProgress from './OcProgress.vue'
+
+const props = withDefaults(defineProps<{ title?: string; text?: string; progress?: number; label?: string; id?: string }>(), {
+  title: 'Saving…',
+  text: 'The photos are being processed. This can take a minute; please keep this page open.',
+  label: 'Busy',
+})
+const open = defineModel<boolean>('open', { default: false })
+const el = ref<HTMLDialogElement | null>(null)
+const { onClose } = useDialog(open, el)
+const auto = useUid('oc-busy-overlay')
+const base = props.id ?? auto
+</script>
+
+<template>
+  <dialog :id="base" ref="el" class="oc-busy-overlay" closedby="none" :aria-labelledby="`${base}-title`" :aria-describedby="`${base}-text`" @close="onClose">
+    <span v-if="progress == null" class="oc-spinner" role="status" :aria-label="label"></span>
+    <OcProgress v-else :value="progress" :label="label" />
+    <h2 :id="`${base}-title`" class="oc-busy-overlay__title">{{ title }}</h2>
+    <p :id="`${base}-text`" class="oc-busy-overlay__text"><slot>{{ text }}</slot></p>
+  </dialog>
+</template>

package/src/components/OcButton.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Button. Renders <a> when `href` is set, otherwise <button>.
+ * Classes: .oc-btn + --secondary/--outline/--ghost/--link/--destructive/--success/--gradient/--glass,
+ * --xs/--sm/--lg, --icon, --pill
+ */
+withDefaults(
+  defineProps<{
+    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+    size?: 'xs' | 'sm' | 'md' | 'lg'
+    icon?: boolean
+    pill?: boolean
+    href?: string
+    type?: 'button' | 'submit' | 'reset'
+  }>(),
+  { variant: 'default', size: 'md', type: 'button' },
+)
+</script>
+
+<template>
+  <a
+    v-if="href"
+    :href="href"
+    :class="[
+      'oc-btn',
+      variant !== 'default' && `oc-btn--${variant}`,
+      size !== 'md' && `oc-btn--${size}`,
+      icon && 'oc-btn--icon',
+      pill && 'oc-btn--pill',
+    ]"
+  >
+    <slot />
+  </a>
+  <button
+    v-else
+    :type="type"
+    :class="[
+      'oc-btn',
+      variant !== 'default' && `oc-btn--${variant}`,
+      size !== 'md' && `oc-btn--${size}`,
+      icon && 'oc-btn--icon',
+      pill && 'oc-btn--pill',
+    ]"
+  >
+    <slot />
+  </button>
+</template>

package/src/components/OcButtonGroup.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+/** Joined buttons with shared borders. `label` becomes aria-label. Put OcButton (usually variant outline) and OcButtonGroupText inside. Classes: .oc-btn-group(--vertical) */
+defineProps<{ vertical?: boolean; label?: string }>()
+</script>
+
+<template>
+  <div :class="['oc-btn-group', vertical && 'oc-btn-group--vertical']" role="group" :aria-label="label">
+    <slot />
+  </div>
+</template>