@birdycom/omniaui-vue 0.12.5 → 0.13.0

package/manifest.json

@@ -84,6 +84,12 @@
       "file": "src/components/OcAvatarGroup.vue",
       "snippet": "@birdycom/omniaui/snippets/avatar.html"
     },
+    {
+      "name": "OcAvatarPicker",
+      "kind": "component",
+      "file": "src/components/OcAvatarPicker.vue",
+      "snippet": "@birdycom/omniaui/snippets/avatar-picker.html"
+    },
     {
       "name": "OcBackLink",
       "kind": "component",
@@ -96,12 +102,24 @@
       "file": "src/components/OcBadge.vue",
       "snippet": "@birdycom/omniaui/snippets/badge.html"
     },
+    {
+      "name": "OcBarcode",
+      "kind": "component",
+      "file": "src/components/OcBarcode.vue",
+      "snippet": "@birdycom/omniaui/snippets/barcode.html"
+    },
     {
       "name": "OcBarcodeInput",
       "kind": "component",
       "file": "src/components/OcBarcodeInput.vue",
       "snippet": "@birdycom/omniaui/snippets/barcode-input.html"
     },
+    {
+      "name": "OcBrandMark",
+      "kind": "component",
+      "file": "src/components/OcBrandMark.vue",
+      "snippet": "@birdycom/omniaui/snippets/brand-mark.html"
+    },
     {
       "name": "OcBreadcrumb",
       "kind": "component",
@@ -192,12 +210,6 @@
       "file": "src/components/OcColorSelect.vue",
       "snippet": "@birdycom/omniaui/snippets/color-select.html"
     },
-    {
-      "name": "OcColumnMenu",
-      "kind": "component",
-      "file": "src/components/OcColumnMenu.vue",
-      "snippet": "@birdycom/omniaui/snippets/column-menu.html"
-    },
     {
       "name": "OcCommand",
       "kind": "component",
@@ -234,6 +246,18 @@
       "file": "src/components/OcDataTable.vue",
       "snippet": "@birdycom/omniaui/snippets/data-table.html"
     },
+    {
+      "name": "OcDataTableName",
+      "kind": "component",
+      "file": "src/components/OcDataTableName.vue",
+      "snippet": null
+    },
+    {
+      "name": "OcDateField",
+      "kind": "component",
+      "file": "src/components/OcDateField.vue",
+      "snippet": "@birdycom/omniaui/snippets/date-field.html"
+    },
     {
       "name": "OcDecimalInput",
       "kind": "component",
@@ -306,6 +330,12 @@
       "file": "src/components/OcFactList.vue",
       "snippet": "@birdycom/omniaui/snippets/fact-list.html"
     },
+    {
+      "name": "OcFeatureCard",
+      "kind": "component",
+      "file": "src/components/OcFeatureCard.vue",
+      "snippet": "@birdycom/omniaui/snippets/feature-card.html"
+    },
     {
       "name": "OcFilterCounts",
       "kind": "component",
@@ -324,12 +354,30 @@
       "file": "src/components/OcFormField.vue",
       "snippet": "@birdycom/omniaui/snippets/form-field.html"
     },
+    {
+      "name": "OcFormSection",
+      "kind": "component",
+      "file": "src/components/OcFormSection.vue",
+      "snippet": "@birdycom/omniaui/snippets/form-section.html"
+    },
+    {
+      "name": "OcGallery",
+      "kind": "component",
+      "file": "src/components/OcGallery.vue",
+      "snippet": "@birdycom/omniaui/snippets/gallery.html"
+    },
     {
       "name": "OcGlass",
       "kind": "component",
       "file": "src/components/OcGlass.vue",
       "snippet": "@birdycom/omniaui/snippets/glass.html"
     },
+    {
+      "name": "OcGlassBar",
+      "kind": "component",
+      "file": "src/components/OcGlassBar.vue",
+      "snippet": null
+    },
     {
       "name": "OcGlassPanel",
       "kind": "component",
@@ -420,6 +468,12 @@
       "file": "src/components/OcLauncherCard.vue",
       "snippet": "@birdycom/omniaui/snippets/launcher-card.html"
     },
+    {
+      "name": "OcLazyImage",
+      "kind": "component",
+      "file": "src/components/OcLazyImage.vue",
+      "snippet": null
+    },
     {
       "name": "OcLightbox",
       "kind": "component",
@@ -432,6 +486,12 @@
       "file": "src/components/OcLinkArrow.vue",
       "snippet": "@birdycom/omniaui/snippets/link-arrow.html"
     },
+    {
+      "name": "OcLinkCard",
+      "kind": "component",
+      "file": "src/components/OcLinkCard.vue",
+      "snippet": null
+    },
     {
       "name": "OcLinkRow",
       "kind": "component",
@@ -492,12 +552,24 @@
       "file": "src/components/OcMessageThread.vue",
       "snippet": "@birdycom/omniaui/snippets/message-thread.html"
     },
+    {
+      "name": "OcMeterRow",
+      "kind": "component",
+      "file": "src/components/OcMeterRow.vue",
+      "snippet": "@birdycom/omniaui/snippets/meter-row.html"
+    },
     {
       "name": "OcModal",
       "kind": "component",
       "file": "src/components/OcModal.vue",
       "snippet": "@birdycom/omniaui/snippets/modal.html"
     },
+    {
+      "name": "OcNameCard",
+      "kind": "component",
+      "file": "src/components/OcNameCard.vue",
+      "snippet": "@birdycom/omniaui/snippets/name-card.html"
+    },
     {
       "name": "OcNavmenu",
       "kind": "component",
@@ -540,6 +612,12 @@
       "file": "src/components/OcPagination.vue",
       "snippet": "@birdycom/omniaui/snippets/pagination.html"
     },
+    {
+      "name": "OcPanel",
+      "kind": "component",
+      "file": "src/components/OcPanel.vue",
+      "snippet": "@birdycom/omniaui/snippets/panel.html"
+    },
     {
       "name": "OcPasswordInput",
       "kind": "component",
@@ -564,6 +642,12 @@
       "file": "src/components/OcPopover.vue",
       "snippet": "@birdycom/omniaui/snippets/popover.html"
     },
+    {
+      "name": "OcPrice",
+      "kind": "component",
+      "file": "src/components/OcPrice.vue",
+      "snippet": "@birdycom/omniaui/snippets/price.html"
+    },
     {
       "name": "OcPriceCard",
       "kind": "component",
@@ -594,6 +678,12 @@
       "file": "src/components/OcProse.vue",
       "snippet": "@birdycom/omniaui/snippets/prose.html"
     },
+    {
+      "name": "OcQuantity",
+      "kind": "component",
+      "file": "src/components/OcQuantity.vue",
+      "snippet": "@birdycom/omniaui/snippets/quantity.html"
+    },
     {
       "name": "OcRadio",
       "kind": "component",
@@ -606,12 +696,36 @@
       "file": "src/components/OcRadioGroup.vue",
       "snippet": null
     },
+    {
+      "name": "OcRating",
+      "kind": "component",
+      "file": "src/components/OcRating.vue",
+      "snippet": "@birdycom/omniaui/snippets/rating.html"
+    },
+    {
+      "name": "OcRatingInput",
+      "kind": "component",
+      "file": "src/components/OcRatingInput.vue",
+      "snippet": "@birdycom/omniaui/snippets/rating.html"
+    },
     {
       "name": "OcRecoveryCodes",
       "kind": "component",
       "file": "src/components/OcRecoveryCodes.vue",
       "snippet": "@birdycom/omniaui/snippets/recovery-codes.html"
     },
+    {
+      "name": "OcResult",
+      "kind": "component",
+      "file": "src/components/OcResult.vue",
+      "snippet": "@birdycom/omniaui/snippets/result.html"
+    },
+    {
+      "name": "OcRibbon",
+      "kind": "component",
+      "file": "src/components/OcRibbon.vue",
+      "snippet": "@birdycom/omniaui/snippets/ribbon.html"
+    },
     {
       "name": "OcScrollArea",
       "kind": "component",
@@ -702,6 +816,12 @@
       "file": "src/components/OcSortableRow.vue",
       "snippet": "@birdycom/omniaui/snippets/sortable-row.html"
     },
+    {
+      "name": "OcSpecList",
+      "kind": "component",
+      "file": "src/components/OcSpecList.vue",
+      "snippet": "@birdycom/omniaui/snippets/spec-list.html"
+    },
     {
       "name": "OcSpinner",
       "kind": "component",
@@ -744,6 +864,12 @@
       "file": "src/components/OcStepper.vue",
       "snippet": "@birdycom/omniaui/snippets/stepper.html"
     },
+    {
+      "name": "OcStock",
+      "kind": "component",
+      "file": "src/components/OcStock.vue",
+      "snippet": "@birdycom/omniaui/snippets/stock.html"
+    },
     {
       "name": "OcSwitch",
       "kind": "component",
@@ -936,6 +1062,12 @@
       "file": "src/blocks/OcBlockAuthSplit.vue",
       "snippet": "@birdycom/omniaui-blocks/blocks/auth-split.html"
     },
+    {
+      "name": "OcBlockContactForm",
+      "kind": "block",
+      "file": "src/blocks/OcBlockContactForm.vue",
+      "snippet": "@birdycom/omniaui-blocks/blocks/contact-form.html"
+    },
     {
       "name": "OcBlockContactGrid",
       "kind": "block",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui-vue",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "description": "OmniaUI for Vue 3: one single-file component per OmniaUI component and block, rendering the exact markup of the CSS packages.",
   "type": "module",
   "license": "MIT",

package/src/blocks/OcBlockContactForm.vue

@@ -0,0 +1,146 @@
+<!-- File: packages/vue/src/blocks/OcBlockContactForm.vue | Map: props -> panel (result | title, intro, alert, form: honeypot, fields, actions) -> cards -->
+<script setup lang="ts">
+/**
+ * Contact form in a panel next to a column of contact cards. Server errors come in as `errors` (field name -> text,
+ * `form` = message above the form); `sent` shows the result, `busy` sets aria-busy and disables the button.
+ * Slots: fields (own fields instead of name, e-mail, phone, subject, message), note, success, card-icon ({ card }).
+ * Emits submit (the native event; call preventDefault for Inertia) and again (back to the form).
+ * Classes: .oc-block-contact-form, -layout, -title, -intro, -cards; .oc-panel--glow, .oc-form--filled, .oc-result
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface ContactFormLine {
+  text: string
+  href?: string
+}
+export interface ContactFormCard {
+  title: string
+  lines: ContactFormLine[]
+  /** Webicon name (mdi:email-outline …), drawn with <iconify-icon>. */
+  icon?: string
+}
+export interface ContactFormSubject {
+  value: string
+  label: string
+}
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    intro?: string
+    action?: string
+    method?: string
+    subjects?: ContactFormSubject[]
+    values?: Record<string, string>
+    errors?: Record<string, string>
+    sent?: boolean
+    busy?: boolean
+    submitLabel?: string
+    busyLabel?: string
+    note?: string
+    successTitle?: string
+    successText?: string
+    againLabel?: string
+    errorText?: string
+    cards?: ContactFormCard[]
+  }>(),
+  {
+    title: 'Send us a message',
+    method: 'post',
+    subjects: () => [],
+    values: () => ({}),
+    errors: () => ({}),
+    submitLabel: 'Send message',
+    busyLabel: 'Sending…',
+    successTitle: 'Thank you, your message was sent',
+    againLabel: 'Send another message',
+    errorText: 'Please check the fields in red.',
+    cards: () => [],
+  },
+)
+const emit = defineEmits<{ submit: [event: Event]; again: [] }>()
+const uid = useUid('oc-contact')
+const fid = (name: string) => `${uid}-${name}`
+const invalid = (name: string) => (props.errors[name] ? { 'aria-invalid': true as const, 'aria-describedby': `err-${name}` } : {})
+const alertText = computed(() => props.errors.form ?? (Object.keys(props.errors).some((k) => k !== 'form') ? props.errorText : null))
+</script>
+
+<template>
+  <section class="oc-block-contact-form" aria-label="Contact">
+    <div class="oc-block-contact-form-layout">
+      <div :id="uid" class="oc-panel oc-panel--glow">
+        <div v-if="sent" class="oc-result" role="status" tabindex="-1">
+          <slot name="success">
+            <span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:check" /></span>
+            <h2 class="oc-result__title">{{ successTitle }}</h2>
+            <p v-if="successText" class="oc-result__text">{{ successText }}</p>
+            <div class="oc-result__actions">
+              <button type="button" class="oc-btn oc-btn--outline" @click="emit('again')">{{ againLabel }}</button>
+            </div>
+          </slot>
+        </div>
+        <div v-else>
+          <h2 v-if="title" class="oc-block-contact-form-title">{{ title }}</h2>
+          <p v-if="intro" class="oc-block-contact-form-intro">{{ intro }}</p>
+          <p v-if="alertText" class="oc-alert oc-alert--danger" role="alert">{{ alertText }}</p>
+          <form class="oc-form oc-form--filled" :action="action" :method="method" novalidate :aria-busy="busy || undefined" @submit="emit('submit', $event)">
+            <div class="oc-honeypot" aria-hidden="true">
+              <label :for="fid('website')">Leave this field empty</label>
+              <input :id="fid('website')" type="text" name="website" tabindex="-1" autocomplete="off" />
+            </div>
+            <slot name="fields">
+              <div class="oc-field-group oc-field-group--row">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('name')">Name</label>
+                  <input :id="fid('name')" class="oc-input" type="text" name="name" required maxlength="100" autocomplete="name" :value="values.name" v-bind="invalid('name')" />
+                  <p v-if="errors.name" id="err-name" class="oc-field-error">{{ errors.name }}</p>
+                </div>
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('email')">E-mail</label>
+                  <input :id="fid('email')" class="oc-input" type="email" name="email" required maxlength="254" autocomplete="email" :value="values.email" v-bind="invalid('email')" />
+                  <p v-if="errors.email" id="err-email" class="oc-field-error">{{ errors.email }}</p>
+                </div>
+              </div>
+              <div :class="['oc-field-group', subjects.length && 'oc-field-group--row']">
+                <div class="oc-field">
+                  <label class="oc-field-label" :for="fid('phone')">Phone <span class="oc-field-label__hint">(optional)</span></label>
+                  <input :id="fid('phone')" class="oc-input" type="tel" name="phone" maxlength="40" autocomplete="tel" inputmode="tel" :value="values.phone" v-bind="invalid('phone')" />
+                  <p v-if="errors.phone" id="err-phone" class="oc-field-error">{{ errors.phone }}</p>
+                </div>
+                <div v-if="subjects.length" class="oc-field">
+                  <label class="oc-field-label" :for="fid('subject')">What is it about?</label>
+                  <select :id="fid('subject')" class="oc-select" name="subject" required v-bind="invalid('subject')">
+                    <option value="" :selected="!values.subject">Choose a subject</option>
+                    <option v-for="s in subjects" :key="s.value" :value="s.value" :selected="values.subject === s.value">{{ s.label }}</option>
+                  </select>
+                  <p v-if="errors.subject" id="err-subject" class="oc-field-error">{{ errors.subject }}</p>
+                </div>
+              </div>
+              <div class="oc-field">
+                <label class="oc-field-label" :for="fid('message')">Your message</label>
+                <textarea :id="fid('message')" class="oc-input oc-textarea" name="message" rows="6" required maxlength="5000" :value="values.message" v-bind="invalid('message')" />
+                <p v-if="errors.message" id="err-message" class="oc-field-error">{{ errors.message }}</p>
+              </div>
+            </slot>
+            <div class="oc-form-actions">
+              <button class="oc-btn oc-btn--lg" type="submit" :disabled="busy">{{ busy ? busyLabel : submitLabel }}</button>
+              <p v-if="note || $slots.note" class="oc-form-note"><slot name="note">{{ note }}</slot></p>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div v-if="cards.length" class="oc-block-contact-form-cards">
+        <article v-for="(card, i) in cards" :key="i" class="oc-block-contact-card">
+          <span v-if="card.icon || $slots['card-icon']" class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true">
+            <slot name="card-icon" :card="card"><iconify-icon :icon="card.icon" /></slot>
+          </span>
+          <h3 class="oc-block-contact-title">{{ card.title }}</h3>
+          <template v-for="(line, j) in card.lines" :key="j">
+            <a v-if="line.href" class="oc-block-contact-line" :href="line.href">{{ line.text }}</a>
+            <p v-else class="oc-block-contact-line">{{ line.text }}</p>
+          </template>
+        </article>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockDataTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 /**
  * Card with title, actions, toolbar, table, bulk bar and footer. Put an <OcTable> in the default slot.
- * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills, columns popover),
+ * Slots: actions (header buttons), toolbar (.oc-table-toolbar content: search, filter pills),
  * bulk (selection bar, shown when `selectedCount` > 0), default (table), footer (.oc-table-footer: entries text, page size, pagination).
  * Classes: .oc-card.oc-block-datatable, -head, -title, -description, -body, -bulk, .oc-table-toolbar, .oc-table-footer
  */

package/src/blocks/OcBlockProfileHeader.vue

@@ -2,15 +2,16 @@
 <script setup lang="ts">
 /**
  * Profile / channel header: banner, overhanging avatar, name, meta, bio, actions and link tabs.
- * Slots: avatar (initials or <img>), actions, bio. Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
+ * Slots: avatar (initials or <img>), actions, bio, panel-0, panel-1 … (with panel slots the tabs switch on the page
+ * itself: radios + panels, CSS only; without them the tabs are links). Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
  * -info, -name, -meta, -bio, -actions, -tabs, -tab (aria-current="page")
  */
-import { computed } from 'vue'
+import { computed, useSlots } from 'vue'
 import { useUid } from '../composables/useUid'
 
 export interface ProfileHeaderTab {
   label: string
-  href: string
+  href?: string
   current?: boolean
 }
 const props = withDefaults(
@@ -28,6 +29,8 @@ const props = withDefaults(
   { tabs: () => [], tabsLabel: 'Profile sections', headingLevel: 1 },
 )
 const nameId = useUid('oc-profile-name')
+const slots = useSlots()
+const panels = computed(() => props.tabs.some((_, i) => Boolean(slots[`panel-${i}`])))
 const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${props.banner}")` : undefined))
 </script>
 
@@ -43,7 +46,15 @@ const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${
       </div>
       <div v-if="$slots.actions" class="oc-block-profile-actions"><slot name="actions" /></div>
     </div>
-    <nav v-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
+    <template v-if="tabs.length && panels">
+      <div class="oc-block-profile-tabs" role="radiogroup" :aria-label="tabsLabel">
+        <label v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab"><input type="radio" :name="`${nameId}-tab`" :checked="tab.current ?? i === 0">{{ tab.label }}</label>
+      </div>
+      <div class="oc-block-profile-panels">
+        <div v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-panel"><slot :name="`panel-${i}`" /></div>
+      </div>
+    </template>
+    <nav v-else-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
       <a v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab" :href="tab.href" :aria-current="tab.current ? 'page' : undefined">{{ tab.label }}</a>
     </nav>
   </section>

package/src/components/OcAttachmentList.vue

@@ -10,7 +10,7 @@ withDefaults(defineProps<{ items?: AttachmentFile[]; stack?: boolean; as?: 'ul'
   as: 'ul',
   label: 'Files in this message',
   items: () => [
-    { name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' },
+    { name: 'Quote kitchen Project 1 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' },

package/src/components/OcAvatarPicker.vue

@@ -0,0 +1,34 @@
+<!-- File: packages/vue/src/components/OcAvatarPicker.vue | Map: props -> preview + file input -> text and buttons -> change event on mount -->
+<script setup lang="ts">
+/** Avatar or logo picker with a preview, Upload and Remove, and drag and drop. Emits change (File or null) and invalid (File, reason) for a wrong type or a file over maxKb. */
+import { onMounted, useId, useTemplateRef } from 'vue'
+import { bindAvatarPicker } from '../../../ui/src/form-extras.js'
+
+withDefaults(defineProps<{ initials: string; label?: string; hint?: string; logo?: boolean; name?: string; accept?: string; maxKb?: number }>(), { label: 'Profile picture', logo: false, accept: 'image/*' })
+const emit = defineEmits<{ change: [file: File | null]; invalid: [file: File, reason: string] }>()
+const id = useId()
+const root = useTemplateRef<HTMLDivElement>('root')
+onMounted(() => {
+  if (!root.value) return
+  bindAvatarPicker(root.value)
+  root.value.addEventListener('oc-avatar-change', (e) => emit('change', (e as CustomEvent<{ file: File | null }>).detail.file))
+  root.value.addEventListener('oc-avatar-invalid', (e) => { const d = (e as CustomEvent<{ file: File; reason: string }>).detail; emit('invalid', d.file, d.reason) })
+})
+</script>
+
+<template>
+  <div ref="root" :class="['oc-avatar-picker', logo && 'oc-avatar-picker--square oc-avatar-picker--logo']" :data-oc-max-kb="maxKb">
+    <label class="oc-avatar-picker__preview" :for="id" title="Choose an image">
+      <span data-oc-initials>{{ initials }}</span>
+      <input :id="id" class="oc-avatar-picker__file" type="file" :accept="accept" :name="name">
+    </label>
+    <div class="oc-avatar-picker__text">
+      <span class="oc-avatar-picker__label">{{ label }}</span>
+      <span v-if="hint" class="oc-avatar-picker__hint">{{ hint }}</span>
+      <div class="oc-avatar-picker__actions">
+        <button type="button" class="oc-btn oc-btn--outline oc-btn--sm" data-oc-avatar-upload><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M9 16v-6H5l7-7l7 7h-4v6zm-4 4v-2h14v2z" /></svg>Upload</button>
+        <button type="button" class="oc-btn oc-btn--ghost oc-btn--sm" data-oc-avatar-remove><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" /></svg>Remove</button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/OcBarcode.vue

@@ -0,0 +1,23 @@
+<!-- File: packages/vue/src/components/OcBarcode.vue | Map: props -> encode -> svg + digits -->
+<script setup lang="ts">
+/** EAN-13, EAN-8, UPC-A or Code 128 as SVG; shows the reason when the value cannot be encoded. */
+import { computed } from 'vue'
+import { barsToSvg, encodeBarcode } from '../../../ui/src/barcode.js'
+
+const props = withDefaults(defineProps<{ value: string; format?: 'auto' | 'EAN13' | 'EAN8' | 'UPC' | 'CODE128'; digits?: boolean; size?: 'md' | 'hero' | 'compact' }>(), { format: 'auto', digits: true, size: 'md' })
+const result = computed(() => {
+  try {
+    const { bits, text } = encodeBarcode(props.value, props.format)
+    return { svg: barsToSvg(bits, `Barcode ${text}`), text, error: '' }
+  } catch (err) {
+    return { svg: '', text: props.value, error: (err as Error).message }
+  }
+})
+</script>
+
+<template>
+  <figure :class="['oc-barcode', size !== 'md' && `oc-barcode--${size}`]" :data-error="result.error ? '' : undefined">
+    <span v-if="result.svg" style="display: contents" v-html="result.svg"></span>
+    <figcaption v-if="digits || result.error" class="oc-barcode__digits">{{ result.error ? `${value}: ${result.error}` : result.text }}</figcaption>
+  </figure>
+</template>

package/src/components/OcBrandMark.vue

@@ -0,0 +1,15 @@
+<!-- File: packages/vue/src/components/OcBrandMark.vue | Map: link -> icon (slot) -> word (name + accent) -> tagline -->
+<script setup lang="ts">
+/** Logo from an icon and text (snippets/brand-mark.html). Slot icon: an <svg class="oc-brand-mark__icon"> or <img>. */
+withDefaults(defineProps<{ name: string; accent?: string; tagline?: string; href?: string; size?: 'sm' | 'md' | 'lg' }>(), { href: '/', size: 'md' })
+</script>
+
+<template>
+  <a :class="['oc-brand-mark', size !== 'md' && `oc-brand-mark--${size}`]" :href="href">
+    <slot name="icon" />
+    <span class="oc-brand-mark__text">
+      <span class="oc-brand-mark__word">{{ name }}<span v-if="accent" class="oc-brand-mark__accent">{{ accent }}</span></span>
+      <span v-if="tagline" class="oc-brand-mark__tagline">{{ tagline }}</span>
+    </span>
+  </a>
+</template>

package/src/components/OcBreadcrumb.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
-/** Breadcrumb. Pass `items` (the last one is the current page) or use the default slot. */
+/**
+ * Breadcrumb. Pass `items` (the last one is the current page) or use the default slot.
+ * `icon` per item is a webicon name (mdi:home-outline …), drawn with <iconify-icon>; separator="chevron" puts › between.
+ */
 export interface BreadcrumbItem {
   label: string
   href?: string
+  icon?: string
 }
-withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string }>(), {
+withDefaults(defineProps<{ items?: BreadcrumbItem[]; label?: string; separator?: 'slash' | 'chevron' }>(), {
   items: () => [],
   label: 'Breadcrumb',
+  separator: 'slash',
 })
 </script>
 
 <template>
-  <nav class="oc-breadcrumb" :aria-label="label">
+  <nav :class="['oc-breadcrumb', separator === 'chevron' && 'oc-breadcrumb--chevron']" :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>
+        <a v-if="item.href && i < items.length - 1" class="oc-breadcrumb-item" :href="item.href"
+          ><iconify-icon v-if="item.icon" :icon="item.icon" aria-hidden="true" />{{ item.label }}</a
+        >
+        <span v-else class="oc-breadcrumb-item" aria-current="page"
+          ><iconify-icon v-if="item.icon" :icon="item.icon" aria-hidden="true" />{{ item.label }}</span
+        >
       </template>
     </slot>
   </nav>

package/src/components/OcButton.vue

@@ -2,15 +2,20 @@
 /**
  * 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, --inline (link button inside running text)
+ * --soft-primary/-success/-warning/-destructive/-info (row actions), --plain (icon only, no surface),
+ * --xs/--sm/--lg, --icon, --pill, --inline (link button inside running text). `loading` sets aria-busy (spinner).
  */
 withDefaults(
   defineProps<{
-    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+    variant?:
+      | 'default' | 'secondary' | 'outline' | 'ghost' | 'link' | 'destructive' | 'success' | 'gradient' | 'glass'
+      | 'soft-primary' | 'soft-success' | 'soft-warning' | 'soft-destructive' | 'soft-info' | 'plain'
     size?: 'xs' | 'sm' | 'md' | 'lg'
     icon?: boolean
     pill?: boolean
     inline?: boolean
+    loading?: boolean
+    disabled?: boolean
     href?: string
     type?: 'button' | 'submit' | 'reset'
   }>(),
@@ -22,6 +27,7 @@ withDefaults(
   <a
     v-if="href"
     :href="href"
+    :aria-busy="loading || undefined"
     :class="[
       'oc-btn',
       variant !== 'default' && `oc-btn--${variant}`,
@@ -36,6 +42,8 @@ withDefaults(
   <button
     v-else
     :type="type"
+    :aria-busy="loading || undefined"
+    :disabled="disabled || loading"
     :class="[
       'oc-btn',
       variant !== 'default' && `oc-btn--${variant}`,