@birdycom/omniaui-vue 0.12.5 → 0.12.6

package/src/components/OcDataTable.vue

@@ -1,9 +1,12 @@
-<!-- File: packages/vue/src/components/OcDataTable.vue | Map: props -> markup (toolbar, table, footer) -> bind the list-table script on mount -->
+<!-- File: packages/vue/src/components/OcDataTable.vue | Map: props -> markup (tabs, toolbar, filters, 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.
+ * List table for business apps. Same markup as packages/ui/snippets/data-table.html.
+ * Search, column filters, 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.
+ * Slots: cell-<key> ({ row }) for a rich cell (an OcDataTableName, a badge …), actions ({ row }) for the row buttons
+ * (default: one soft edit button), page-actions for the toolbar (New customer …).
+ * Icons of tabs and filters are webicon names (mdi:account-outline …), drawn with <iconify-icon>.
  */
 import { onMounted, useTemplateRef } from 'vue'
 import { bindDataTable } from '../../../ui/src/data-table.js'
@@ -15,14 +18,31 @@ export interface DataTableColumn {
   sortable?: boolean
   hideable?: boolean
   defaultHidden?: boolean
+  /** Cut long text with an ellipsis at this width (e.g. "12rem"); the full text goes in the title. */
+  truncate?: string
+  /** Sort the table on this column when it starts. */
+  defaultSort?: 'ascending' | 'descending'
 }
 export interface DataTableRow {
   key: string
   status?: 'active' | 'deleted' | 'archived'
   cells: Record<string, string>
+  /** Sort, filter, search and export value when it differs from the visible text. */
   values?: Record<string, string>
   href?: string
 }
+export interface DataTableTabs {
+  column: string
+  label?: string
+  /** tone colors the count like the type badge in the table. */
+  items: { value: string; label: string; icon?: string; count?: number; tone?: 'success' | 'info' | 'warning' }[]
+}
+export interface DataTableColumnFilter {
+  column: string
+  label: string
+  icon?: string
+  options: { value: string; label: string }[]
+}
 
 const props = withDefaults(
   defineProps<{
@@ -33,17 +53,34 @@ const props = withDefaults(
     pageSize?: number
     searchPlaceholder?: string
     selectable?: boolean
+    /** Grip column to drag rows; the drag is OmniaUI Pro (data-table-pro.js). */
     draggable?: boolean
+    /** Handles to drag a column width; the resize is OmniaUI Pro (data-table-pro.js). */
+    resizable?: boolean
+    /** Column chooser in the actions header (show or hide columns). Needs the OmniaUI Pro CSS. */
+    columnMenu?: boolean
     filters?: boolean
+    archive?: boolean
+    tabs?: DataTableTabs
+    columnFilters?: DataTableColumnFilter[]
+    /** Footer count, e.g. "Showing {from}–{to} of {total} customers". */
+    summary?: string
+    /** Offer "Import CSV" in the settings (fires oc-datatable-import with the file). */
+    importable?: boolean
+    /** 'bordered' = version 2: tinted header, lines between the columns, sort chevrons always visible. */
+    variant?: 'default' | 'bordered'
+    /** Striped rows (default true). */
+    striped?: boolean
     live?: boolean
   }>(),
-  { title: 'List', pageSize: 15, searchPlaceholder: 'Search...', selectable: true, draggable: true, filters: true, live: false },
+  { title: 'List', pageSize: 15, searchPlaceholder: 'Search...', selectable: true, draggable: false, resizable: false, columnMenu: false, filters: true, archive: true, summary: '', importable: false, variant: 'default', striped: 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)}`
+const label = (row: DataTableRow) => row.values?.name ?? row.cells.name ?? row.key
 
 onMounted(() => {
   if (root.value) bindDataTable(root.value)
@@ -51,19 +88,34 @@ onMounted(() => {
 </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 ref="root" :class="['oc-data-table', variant === 'bordered' && 'oc-data-table--bordered', !striped && 'oc-data-table--plain', columnMenu && 'oc-column-menu-scope']" :id="id" :data-page-size="pageSize" :data-oc-live="live ? 'true' : undefined">
+    <div v-if="tabs" class="oc-tab-list oc-data-table-tabs" role="tablist" :aria-label="tabs.label ?? 'Filter'">
+      <button
+        v-for="(tab, i) in tabs.items"
+        :key="tab.value"
+        class="oc-tab-trigger"
+        role="tab"
+        type="button"
+        :data-oc-col-filter="tabs.column"
+        :data-oc-value="tab.value"
+        :aria-selected="i === 0 ? 'true' : 'false'"
+      ><iconify-icon v-if="tab.icon" :icon="tab.icon" aria-hidden="true" />{{ tab.label }}<span v-if="tab.count != null" :class="['oc-data-table-tab-count', tab.tone && `oc-data-table-tab-count--${tab.tone}`]">{{ tab.count }}</span></button>
+    </div>
     <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>
+        <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" :popovertarget="`${id}-menu`" aria-label="List actions" title="List actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 13c-1.86 0-3.41 1.28-3.86 3H2v2h2.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3H22v-2H11.86c-.45-1.72-2-3-3.86-3m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2M19.86 6c-.45-1.72-2-3-3.86-3s-3.41 1.28-3.86 3H2v2h10.14c.45 1.72 2 3 3.86 3s3.41-1.28 3.86-3H22V6zM16 9c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2" /></svg></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>
+          <template v-if="importable">
+            <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>
+          </template>
+          <button class="oc-dropdown-item" type="button" data-oc-bulk="duplicate">Duplicate selection</button>
+          <button class="oc-dropdown-item" type="button" data-oc-bulk="archive">Move selection to trash</button>
           <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}`">
@@ -71,20 +123,30 @@ onMounted(() => {
         <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>
+        <button v-if="archive" 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>
+        <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" data-oc-view="table" aria-pressed="true" aria-label="Table"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5h14v2H7zm0 8v-2h14v2zM4 4.5A1.5 1.5 0 0 1 5.5 6A1.5 1.5 0 0 1 4 7.5A1.5 1.5 0 0 1 2.5 6A1.5 1.5 0 0 1 4 4.5m0 6A1.5 1.5 0 0 1 5.5 12A1.5 1.5 0 0 1 4 13.5A1.5 1.5 0 0 1 2.5 12A1.5 1.5 0 0 1 4 10.5M7 19v-2h14v2zm-3-2.5A1.5 1.5 0 0 1 5.5 18A1.5 1.5 0 0 1 4 19.5A1.5 1.5 0 0 1 2.5 18A1.5 1.5 0 0 1 4 16.5" /></svg></button>
+        <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" data-oc-view="grid" aria-label="Cards"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 11h8V3H3m2 2h4v4H5m8 12h8v-8h-8m2 2h4v4h-4M3 21h8v-8H3m2 2h4v4H5m8-16v8h8V3m-2 6h-4V5h4Z" /></svg></button>
       </div>
+      <div v-if="$slots['page-actions']" class="oc-data-table-actions"><slot name="page-actions" /></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 v-if="columnFilters?.length" :id="`${id}-filters`" class="oc-data-table-filters">
+      <label v-for="f in columnFilters" :key="f.column" class="oc-data-table-filter">
+        <iconify-icon v-if="f.icon" :icon="f.icon" aria-hidden="true" />
+        <template v-else><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M15 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L9.29 16.7a.99.99 0 0 1-.29-.83v-5.12L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L15 10.75zM7.04 5L11 10.06v5.52l2 2v-7.53L16.96 5z" /></svg></template>
+        <select class="oc-select" :data-oc-col-filter="f.column" :aria-label="f.label">
+          <option v-for="o in f.options" :key="o.value" :value="o.value" :selected="o.value === ''">{{ o.label }}</option>
+        </select>
+      </label>
     </div>
-    <div class="oc-column-menu" :id="`${id}-columns`" popover>
-      <p class="oc-column-menu-title">Visible columns</p>
+    <div v-if="columnMenu" class="oc-column-menu" :id="`${id}-columns`" popover>
+      <p class="oc-column-menu-title">Columns</p>
+      <template v-if="resizable">
+        <button class="oc-dropdown-item" type="button" data-oc-reset-widths>Reset column widths</button>
+        <div class="oc-dropdown-separator"></div>
+      </template>
       <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">
@@ -109,22 +171,35 @@ onMounted(() => {
             <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">
+              <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" :aria-sort="col.defaultSort">
                 <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 v-if="resizable" 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>
+              <th data-oc-col="actions">
+                <span class="oc-data-table-th">Actions<button v-if="columnMenu" class="oc-btn oc-btn--plain oc-data-table-columns-btn" type="button" :popovertarget="`${id}-columns`" aria-label="Columns" title="Columns"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4 5v13h17V5zm10 2v9h-3V7zM6 7h3v9H6zm13 9h-3V7h3z" /></svg></button></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>
+              <td v-if="selectable" data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select :aria-label="`Select ${label(row)}`"></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 ${label(row)}`"></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]">
+                <slot :name="`cell-${col.key}`" :row="row">
+                  <span v-if="col.truncate" class="oc-data-table-truncate" :style="{ '--oc-data-table-truncate': col.truncate }" :title="row.cells[col.key]">{{ row.cells[col.key] ?? '' }}</span>
+                  <template v-else>{{ row.cells[col.key] ?? '' }}</template>
+                </slot>
+              </td>
+              <td data-oc-col="actions">
+                <div style="display: flex; gap: 0.375rem; justify-content: flex-end">
+                  <slot name="actions" :row="row">
+                    <button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" :aria-label="`Edit ${label(row)}`" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z" /></svg></button>
+                  </slot>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -132,7 +207,7 @@ onMounted(() => {
       <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>
+      <p class="oc-data-table-summary" :data-oc-summary="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>

package/src/components/OcDataTableName.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcDataTableName.vue | Map: props -> avatar + name line + second line -->
+<script setup lang="ts">
+/** Name cell of a data table: avatar (initials or image), name with a badge (slot) and a muted second line. */
+import { computed } from 'vue'
+
+const props = defineProps<{ name: string; initials?: string; avatar?: string; sub?: string }>()
+const letters = computed(() => props.initials ?? props.name.split(/[\s&-]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join('').toUpperCase())
+</script>
+
+<template>
+  <span class="oc-data-table-name">
+    <span class="oc-avatar" aria-hidden="true"><img v-if="avatar" :src="avatar" alt=""><template v-else>{{ letters }}</template></span>
+    <span class="oc-data-table-name-text">
+      <span class="oc-data-table-name-line">{{ name }} <slot name="badge" /></span>
+      <span v-if="sub || $slots.sub" class="oc-data-table-name-sub"><slot name="sub">{{ sub }}</slot></span>
+    </span>
+  </span>
+</template>

package/src/components/OcDateField.vue

@@ -0,0 +1,23 @@
+<!-- File: packages/vue/src/components/OcDateField.vue | Map: v-model date -> ISO week label -> markup -->
+<script setup lang="ts">
+/** Native date input with a calendar icon zone and the ISO week. v-model is the YYYY-MM-DD string. */
+import { computed } from 'vue'
+import { isoWeek } from '../../../ui/src/form-extras.js'
+
+const props = withDefaults(defineProps<{ week?: boolean; weekLabel?: string; size?: 'md' | 'sm'; id?: string }>(), { week: true, weekLabel: 'Week {week}', size: 'md' })
+const model = defineModel<string>({ default: '' })
+const label = computed(() => {
+  const [y, m, d] = (model.value || '').split('-').map(Number)
+  if (!props.week || !y) return ''
+  const w = isoWeek(new Date(y, m - 1, d))
+  return props.weekLabel.replace('{week}', String(w.week)).replace('{year}', String(w.year))
+})
+</script>
+
+<template>
+  <div :class="['oc-date-field', size === 'sm' && 'oc-date-field--sm']">
+    <span class="oc-date-field__icon"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.11 0 2-.89 2-2V5a2 2 0 0 0-2-2m0 16H5V9h14zm0-12H5V5h14z" /></svg></span>
+    <input :id="id" v-model="model" type="date" class="oc-date-field__input">
+    <output v-if="week" class="oc-date-field__week">{{ label }}</output>
+  </div>
+</template>

package/src/components/OcEmojiPicker.vue

@@ -3,7 +3,7 @@
 /**
  * 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 🙂).
+ * Emits: select(emoji) and then closes the popover. Slot: trigger (button content, default a smiley webicon).
  * Classes: .oc-emoji-picker(--inline), __trigger, __label, __grid, __item
  */
 import { useUid } from '../composables/useUid'
@@ -32,7 +32,7 @@ function pick(e: MouseEvent, emoji: string) {
 
 <template>
   <button v-if="!inline" type="button" class="oc-emoji-picker__trigger" :popovertarget="id" :aria-label="triggerLabel">
-    <slot name="trigger">🙂</slot>
+    <slot name="trigger"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-12-3.5c0 .8-.7 1.5-1.5 1.5S7 9.3 7 8.5S7.7 7 8.5 7s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 9.3 14 8.5S14.7 7 15.5 7s1.5.7 1.5 1.5m-5 9.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81"/></svg></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">

package/src/components/OcFormSection.vue

@@ -0,0 +1,19 @@
+<!-- File: packages/vue/src/components/OcFormSection.vue | Map: props -> details (summary: icon, heading, status) -> fields slot -->
+<script setup lang="ts">
+/** Collapsible form section. Slots: icon, status, default (the fields). Same `name` on siblings = one open at a time. */
+withDefaults(defineProps<{ title: string; hint?: string; name?: string; open?: boolean }>(), { open: false })
+</script>
+
+<template>
+  <details class="oc-form-section" :name="name" :open="open">
+    <summary class="oc-form-section__summary">
+      <span class="oc-form-section__icon"><slot name="icon" /></span>
+      <span class="oc-form-section__heading">
+        <span class="oc-form-section__title">{{ title }}</span>
+        <span v-if="hint" class="oc-form-section__hint">{{ hint }}</span>
+      </span>
+      <span class="oc-form-section__status"><slot name="status" /></span>
+    </summary>
+    <div class="oc-form-section__body"><slot /></div>
+  </details>
+</template>

package/src/components/OcGallery.vue

@@ -0,0 +1,27 @@
+<!-- File: packages/vue/src/components/OcGallery.vue | Map: images (max 8) -> stage with slides -> thumbnail radios -->
+<script setup lang="ts">
+/** Product photos with thumbnails (same markup as snippets/gallery.html), CSS only: radios and :has(). */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface GalleryImage { src: string; alt: string; thumb?: string; thumbAlt?: string }
+const props = withDefaults(defineProps<{ images: GalleryImage[]; label?: string; badge?: string; side?: boolean; name?: string }>(), { label: 'Photos' })
+const group = props.name ?? useUid('oc-gallery')
+const list = computed(() => props.images.slice(0, 8))
+</script>
+
+<template>
+  <div :class="['oc-gallery', side && 'oc-gallery--side']">
+    <div class="oc-gallery__stage">
+      <span v-if="badge" class="oc-badge oc-badge--destructive oc-gallery__badge">{{ badge }}</span>
+      <figure v-for="(img, i) in list" :key="i" class="oc-gallery__slide"><img :src="img.src" :alt="img.alt" :loading="i ? 'lazy' : undefined"></figure>
+    </div>
+    <fieldset v-if="list.length > 1" class="oc-gallery__thumbs">
+      <legend>{{ label }}</legend>
+      <label v-for="(img, i) in list" :key="i" class="oc-gallery__thumb">
+        <input type="radio" :name="group" :checked="i === 0">
+        <img :src="img.thumb ?? img.src" :alt="img.thumbAlt ?? img.alt">
+      </label>
+    </fieldset>
+  </div>
+</template>

package/src/components/OcGlass.vue

@@ -1,10 +1,10 @@
-<!-- File: packages/vue/src/components/OcGlass.vue | Map: props (strong, flat, as) -> .oc-glass sheet -> default slot -->
+<!-- File: packages/vue/src/components/OcGlass.vue | Map: props (strong, flat, liquid, as) -> .oc-glass sheet -> default slot -->
 <script setup lang="ts">
 /** See-through glass sheet with a light top edge; .oc-card inside becomes a glass panel.
- *  Classes: .oc-glass + --strong, --flat (desktop window where the OS draws the blur) */
-withDefaults(defineProps<{ strong?: boolean; flat?: boolean; as?: 'div' | 'section' | 'aside' | 'article' | 'main' }>(), { as: 'div' })
+ *  Classes: .oc-glass + --strong, --flat (desktop window where the OS draws the blur), --liquid (liquid glass) */
+withDefaults(defineProps<{ strong?: boolean; flat?: boolean; liquid?: boolean; as?: 'div' | 'section' | 'aside' | 'article' | 'main' }>(), { as: 'div' })
 </script>
 
 <template>
-  <component :is="as" :class="['oc-glass', strong && 'oc-glass--strong', flat && 'oc-glass--flat']"><slot /></component>
+  <component :is="as" :class="['oc-glass', strong && 'oc-glass--strong', flat && 'oc-glass--flat', liquid && 'oc-glass--liquid']"><slot /></component>
 </template>

package/src/components/OcGlassBar.vue

@@ -0,0 +1,17 @@
+<!-- File: packages/vue/src/components/OcGlassBar.vue | Map: props (items, icons, label) -> nav.oc-glass-bar -> links or buttons (icon slot per item) -->
+<script setup lang="ts">
+/** Liquid glass menu bar: items with an icon and a label; the current item sits in a raised bubble.
+ *  Slots: icon-<index> (the icon of an item). Emits select(index) for items without href. */
+export interface GlassBarItem { label: string; href?: string; current?: boolean }
+withDefaults(defineProps<{ items: GlassBarItem[]; icons?: boolean; label?: string }>(), { label: 'Main' })
+defineEmits<{ select: [index: number] }>()
+</script>
+
+<template>
+  <nav :class="['oc-glass-bar', icons && 'oc-glass-bar--icons']" :aria-label="label">
+    <template v-for="(item, i) in items" :key="i">
+      <a v-if="item.href != null" class="oc-glass-bar__item" :href="item.href" :aria-current="item.current ? 'page' : undefined" :aria-label="icons ? item.label : undefined"><slot :name="`icon-${i}`" /><span v-if="!icons">{{ item.label }}</span></a>
+      <button v-else class="oc-glass-bar__item" type="button" :aria-pressed="item.current ?? false" :aria-label="icons ? item.label : undefined" @click="$emit('select', i)"><slot :name="`icon-${i}`" /><span v-if="!icons">{{ item.label }}</span></button>
+    </template>
+  </nav>
+</template>

package/src/components/OcLazyImage.vue

@@ -0,0 +1,17 @@
+<!-- File: packages/vue/src/components/OcLazyImage.vue | Map: props -> figure.oc-lazy (ratio, preview) -> img loading=lazy -> loaded / error state -->
+<script setup lang="ts">
+/** An image that keeps its place, shows a shimmer (or a blurred preview) and fades in once loaded (same markup as
+ *  snippets/lazy.html). Props: src, alt, width, height, ratio, preview, caption, loading. Slot: caption. */
+import { computed, ref } from 'vue'
+
+const props = withDefaults(defineProps<{ src: string; alt: string; width?: number; height?: number; ratio?: string; preview?: string; caption?: string; loading?: 'lazy' | 'eager' }>(), { loading: 'lazy' })
+const state = ref<'' | 'is-loaded' | 'is-error'>('')
+const vars = computed(() => ({ ...(props.ratio ? { '--oc-lazy-ratio': props.ratio } : {}), ...(props.preview ? { '--oc-lazy-preview': `url(${props.preview})` } : {}) }))
+</script>
+
+<template>
+  <figure :class="['oc-lazy', state]" :style="vars">
+    <img :src="src" :alt="alt" :width="width" :height="height" :loading="loading" decoding="async" @load="state = 'is-loaded'" @error="state = 'is-error'">
+    <figcaption v-if="caption || $slots.caption"><slot name="caption">{{ caption }}</slot></figcaption>
+  </figure>
+</template>

package/src/components/OcMessageList.vue

@@ -10,21 +10,21 @@ import OcMessage, { type MessageData } from './OcMessage.vue'
 export type MessageListItem = MessageData | { divider: string; system?: boolean }
 withDefaults(defineProps<{ items?: MessageListItem[]; log?: boolean; label?: string }>(), {
   log: true,
-  label: 'Conversation with Lisa Verbeke',
+  label: 'Conversation with Customer 1',
   items: () => [
     { divider: 'Tuesday 14 October' },
-    { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:12', datetime: '2026-10-14T09:12', label: 'Lisa Verbeke, 09:12', text: 'Morning Tom! The worktop supplier sent two samples for Villa Dewitte.' },
+    { sender: 'Customer 1', avatar: 'C1', time: '09:12', datetime: '2026-10-14T09:12', label: 'Customer 1, 09:12', text: 'Morning Tom! The worktop supplier sent two samples for Project 1.' },
     {
-      sender: 'Lisa Verbeke', avatar: 'LV', time: '09:13', datetime: '2026-10-14T09:13', label: 'Lisa Verbeke, 09:13', continued: true, id: 'oc-message-demo-question',
+      sender: 'Customer 1', avatar: 'C1', time: '09:13', datetime: '2026-10-14T09:13', label: 'Customer 1, 09:13', continued: true, id: 'oc-message-demo-question',
       html: '<p>Which finish should we order?</p><ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul><p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>',
     },
     {
-      direction: 'out', avatar: 'TP', time: '09:20', datetime: '2026-10-14T09:20', label: 'You, 09:20', status: 'read', statusIcon: true,
-      quote: { href: '#oc-message-demo-question', sender: 'Lisa Verbeke', text: 'Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm' },
+      direction: 'out', avatar: 'C6', time: '09:20', datetime: '2026-10-14T09:20', label: 'You, 09:20', status: 'read', statusIcon: true,
+      quote: { href: '#oc-message-demo-question', sender: 'Customer 1', text: 'Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm' },
       text: 'Calacatta matt. The client wants the lighter look next to the oak fronts.',
       actions: [{ name: 'reply', label: 'Reply to this message' }, { name: 'delete', label: 'Delete this message', destructive: true }],
     },
-    { divider: 'Lisa Verbeke marked this question as answered', system: true },
+    { divider: 'Customer 1 marked this question as answered', system: true },
   ],
 })
 const emit = defineEmits<{ action: [name: string, message: MessageData, index: number] }>()

package/src/components/OcMessageThread.vue

@@ -45,21 +45,21 @@ const props = withDefaults(
   }>(),
   {
     title: 'Kitchen worktop: which finish?',
-    project: 'Villa Dewitte',
-    meta: 'Lisa Verbeke → Tom Peeters · 14 Oct 2026',
-    participants: () => [{ initials: 'LV', name: 'Lisa Verbeke' }, { initials: 'TP', name: 'Tom Peeters' }],
+    project: 'Project 1',
+    meta: 'Customer 1 → Customer 6 · 14 Oct 2026',
+    participants: () => [{ initials: 'C1', name: 'Customer 1' }, { initials: 'C6', name: 'Customer 6' }],
     status: () => ({ label: 'Urgent', variant: 'destructive' }),
     menu: () => [{ name: 'unread', label: 'Mark as unread' }, { name: 'archive', label: 'Move to archive' }, { separator: true }, { name: 'delete', label: 'Delete conversation', destructive: true }],
     messages: () => [
       { divider: 'Tuesday 14 October' },
-      { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:12', datetime: '2026-10-14T09:12', text: 'The supplier dropped off two worktop samples at the workshop. Photo attached.',
+      { sender: 'Customer 1', avatar: 'C1', time: '09:12', datetime: '2026-10-14T09:12', text: 'The supplier dropped off two worktop samples at the workshop. Photo attached.',
         attachments: [{ kind: 'image', href: '#samples.jpg', alt: 'Two worktop samples on the workbench', art: 6, caption: 'samples.jpg · 2.1 MB' }] },
-      { sender: 'Lisa Verbeke', avatar: 'LV', time: '09:13', datetime: '2026-10-14T09:13', continued: true,
+      { sender: 'Customer 1', avatar: 'C1', time: '09:13', datetime: '2026-10-14T09:13', continued: true,
         html: '<p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p>' },
-      { direction: 'out', avatar: 'TP', time: '09:20', datetime: '2026-10-14T09:20', status: 'read', text: 'Calacatta matt, 20 mm. I\'ll send the updated quote to the client today.',
-        attachments: [{ name: 'Quote kitchen Dewitte v2.pdf', size: '1.2 MB', href: '#quote.pdf' }], actions: [{ name: 'delete', label: 'Delete this message', destructive: true }] },
+      { direction: 'out', avatar: 'C6', time: '09:20', datetime: '2026-10-14T09:20', status: 'read', text: 'Calacatta matt, 20 mm. I\'ll send the updated quote to the client today.',
+        attachments: [{ name: 'Quote kitchen Project 1 v2.pdf', size: '1.2 MB', href: '#quote.pdf' }], actions: [{ name: 'delete', label: 'Delete this message', destructive: true }] },
       { divider: 'Today' },
-      { sender: 'Lisa Verbeke', avatar: 'LV', time: '10:02', datetime: '2026-10-24T10:02', text: 'Client signed. Can you confirm the edge profile before 16:00?' },
+      { sender: 'Customer 1', avatar: 'C1', time: '10:02', datetime: '2026-10-24T10:02', text: 'Client signed. Can you confirm the edge profile before 16:00?' },
     ],
     scrollLabel: 'Messages',
     live: true,
@@ -137,11 +137,11 @@ function ctrlEnter(e: KeyboardEvent) {
           <textarea :id="`${base}-input`" class="oc-chat-composer__input" name="message" rows="1" :placeholder="placeholder" required></textarea>
           <div class="oc-chat-composer__bar">
             <div v-if="tools.length" class="oc-chat-composer__tools">
-              <button v-if="tools.includes('attach')" type="button" class="oc-chat-composer__tool" aria-label="Attach a file" @click="emit('tool', 'attach')">&#128206;</button>
-              <button v-if="tools.includes('emoji')" type="button" class="oc-chat-composer__tool" aria-label="Insert emoji" @click="emit('tool', 'emoji')">&#128578;</button>
+              <button v-if="tools.includes('attach')" type="button" class="oc-chat-composer__tool" aria-label="Attach a file" @click="emit('tool', 'attach')"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.5 6v11.5a4 4 0 0 1-4 4a4 4 0 0 1-4-4V5a2.5 2.5 0 0 1 2.5-2.5A2.5 2.5 0 0 1 13.5 5v10.5a1 1 0 0 1-1 1a1 1 0 0 1-1-1V6H10v9.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5V5a4 4 0 0 0-4-4a4 4 0 0 0-4 4v12.5a5.5 5.5 0 0 0 5.5 5.5a5.5 5.5 0 0 0 5.5-5.5V6z"/></svg></button>
+              <button v-if="tools.includes('emoji')" type="button" class="oc-chat-composer__tool" aria-label="Insert emoji" @click="emit('tool', 'emoji')"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-12-3.5c0 .8-.7 1.5-1.5 1.5S7 9.3 7 8.5S7.7 7 8.5 7s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 9.3 14 8.5S14.7 7 15.5 7s1.5.7 1.5 1.5m-5 9.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81"/></svg></button>
             </div>
             <span v-if="hint" class="oc-chat-composer__hint">{{ hint }}</span>
-            <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+            <button type="submit" class="oc-chat-composer__send" aria-label="Send"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2l-15 2z"/></svg></button>
           </div>
         </form>
       </slot>

package/src/components/OcMeterRow.vue

@@ -0,0 +1,18 @@
+<!-- File: packages/vue/src/components/OcMeterRow.vue | Map: props -> level from the percentage -> row markup -->
+<script setup lang="ts">
+/** Usage line: label, percentage and amount, a colored bar (warn from 75, critical from 90) and the reset line. */
+import { computed } from 'vue'
+
+const props = defineProps<{ label: string; percent: number; value?: string; reset?: string; level?: 'ok' | 'warn' | 'critical' }>()
+const pct = computed(() => Math.max(0, Math.min(100, Math.round(props.percent))))
+const tone = computed(() => props.level ?? (pct.value >= 90 ? 'critical' : pct.value >= 75 ? 'warn' : 'ok'))
+</script>
+
+<template>
+  <div class="oc-meter-row" :data-level="tone === 'ok' ? undefined : tone" :style="{ '--oc-meter': `${pct}%` }">
+    <span class="oc-meter-row__label">{{ label }}</span>
+    <span class="oc-meter-row__value"><strong>{{ pct }}%</strong><template v-if="value"> · {{ value }}</template></span>
+    <span class="oc-meter-row__bar" role="meter" aria-valuemin="0" aria-valuemax="100" :aria-valuenow="pct" :aria-label="label"></span>
+    <span v-if="reset" class="oc-meter-row__reset">{{ reset }}</span>
+  </div>
+</template>

package/src/components/OcNameCard.vue

@@ -0,0 +1,28 @@
+<!-- File: packages/vue/src/components/OcNameCard.vue | Map: props -> details (head, body slot) -> rename event on mount -->
+<script setup lang="ts">
+/** Name card: name, rename pencil (when renamable), meta, amount and an actions slot; default slot = content. Emits rename. */
+import { onMounted, useTemplateRef } from 'vue'
+import { bindNameCard } from '../../../ui/src/form-extras.js'
+
+const props = withDefaults(defineProps<{ name: string; amount?: string; meta?: string; renamable?: boolean; total?: boolean; open?: boolean }>(), { renamable: false, total: false, open: false })
+const emit = defineEmits<{ rename: [name: string] }>()
+const root = useTemplateRef<HTMLDetailsElement>('root')
+onMounted(() => {
+  if (!root.value || !props.renamable) return
+  bindNameCard(root.value)
+  root.value.addEventListener('oc-namecard-rename', (e) => emit('rename', (e as CustomEvent<{ name: string }>).detail.name))
+})
+</script>
+
+<template>
+  <details ref="root" :class="['oc-name-card', total && 'oc-name-card--total']" :open="open">
+    <summary class="oc-name-card__head">
+      <span class="oc-name-card__title">{{ name }}</span>
+      <button v-if="renamable" type="button" class="oc-btn oc-btn--plain" data-oc-rename :aria-label="`Rename ${name}`" title="Rename"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="m14.06 9l.94.94L5.92 19H5v-.92zm3.6-6c-.25 0-.51.1-.7.29l-1.83 1.83l3.75 3.75l1.83-1.83c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94z" /></svg></button>
+      <span v-if="meta" class="oc-name-card__meta">{{ meta }}</span>
+      <span v-if="amount" class="oc-name-card__amount">{{ amount }}</span>
+      <span v-if="$slots.actions" class="oc-name-card__actions"><slot name="actions" /></span>
+    </summary>
+    <div class="oc-name-card__body"><slot /></div>
+  </details>
+</template>

package/src/components/OcPrice.vue

@@ -0,0 +1,30 @@
+<!-- File: packages/vue/src/components/OcPrice.vue | Map: props -> formatted amounts -> main line, note, alternative -->
+<script setup lang="ts">
+/** A price with old price, discount, VAT note and the other amount (same markup as snippets/price.html). */
+const props = withDefaults(defineProps<{
+  amount: number | string
+  old?: number | string
+  discount?: string
+  note?: string
+  alt?: string
+  currency?: string
+  locale?: string
+  size?: 'sm' | 'md' | 'lg'
+  sale?: boolean
+  inline?: boolean
+  end?: boolean
+}>(), { currency: 'EUR', locale: 'nl-BE', size: 'md' })
+const format = (v: number | string) => (typeof v === 'number' ? new Intl.NumberFormat(props.locale, { style: 'currency', currency: props.currency }).format(v) : v)
+</script>
+
+<template>
+  <div :class="['oc-price', size !== 'md' && `oc-price--${size}`, sale && 'oc-price--sale', inline && 'oc-price--inline', end && 'oc-price--end']">
+    <div class="oc-price__main">
+      <span class="oc-price__amount">{{ format(amount) }}</span>
+      <s v-if="old != null" class="oc-price__old">{{ format(old) }}</s>
+      <span v-if="discount" class="oc-badge oc-badge--destructive">{{ discount }}</span>
+    </div>
+    <span v-if="note" class="oc-price__note">{{ note }}</span>
+    <span v-if="alt" class="oc-price__alt">{{ alt }}</span>
+  </div>
+</template>

package/src/components/OcProse.vue

@@ -24,7 +24,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </ul>
       <figure>
         <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
-        <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+        <figcaption>Project 1: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
       </figure>
       <h3>From design to installation</h3>
       <ol>
@@ -35,7 +35,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </ol>
       <blockquote>
         <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-        <footer>— Ann Dewitte, client in Ghent</footer>
+        <footer>— Customer 8, client in Ghent</footer>
       </blockquote>
       <h2>Worktop materials compared</h2>
       <table>
@@ -49,7 +49,7 @@ withDefaults(defineProps<{ size?: 'compact' | 'sm' | 'md' | 'lg'; full?: boolean
       </table>
       <h3>Sharing your floor plan</h3>
       <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-      <pre><code>{{ 'Project:   2026-114 Villa Dewitte\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
+      <pre><code>{{ 'Project:   2026-114 Project 1\nRoom:      Kitchen, ground floor\nWall A:    412 cm (window at 160 cm)\nWall B:    298 cm (door at the left)' }}</code></pre>
       <hr />
       <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
     </slot>

package/src/components/OcQuantity.vue

@@ -0,0 +1,21 @@
+<!-- File: packages/vue/src/components/OcQuantity.vue | Map: v-model number -> minus / input / plus within min, max, step -->
+<script setup lang="ts">
+/** Minus, number and plus in one frame (same markup as snippets/quantity.html). v-model is the number. */
+import { stepQuantity } from '../../../ui/src/form-extras.js'
+
+const props = withDefaults(defineProps<{ min?: number; max?: number; step?: number; size?: 'sm' | 'md'; label?: string; name?: string; id?: string; disabled?: boolean }>(), { min: 0, step: 1, size: 'md', label: 'Quantity' })
+const model = defineModel<number>({ default: 1 })
+const move = (direction: -1 | 1) => { model.value = stepQuantity(model.value, direction, { min: props.min, max: props.max ?? Infinity, step: props.step }) }
+</script>
+
+<template>
+  <div :class="['oc-quantity', size === 'sm' && 'oc-quantity--sm']">
+    <button class="oc-quantity__step" type="button" :aria-label="`Decrease ${label.toLowerCase()}`" :disabled="disabled || model <= min" @click="move(-1)">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13H5v-2h14z" /></svg>
+    </button>
+    <input :id="id" v-model.number="model" class="oc-quantity__input" type="number" inputmode="numeric" :name="name" :min="min" :max="max" :step="step" :aria-label="label" :disabled="disabled">
+    <button class="oc-quantity__step" type="button" :aria-label="`Increase ${label.toLowerCase()}`" :disabled="disabled || (max != null && model >= max)" @click="move(1)">
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z" /></svg>
+    </button>
+  </div>
+</template>