@birdycom/omniaui 0.12.4 → 0.12.6

package/snippets/data-table.html

@@ -1,21 +1,17 @@
-<!-- OmniaUI component: data-table - List table from Korrekt and OmniaDesk: search, sort, pages, columns, resize, drag, trash filter and bulk actions. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/data-table.html | Map: shell -> toolbar (gear, search, pills, view) -> bulk bar -> table -> footer. Behaviour: src/data-table.js
+<!-- OmniaUI component: data-table - List table for business apps: search, sort, pages, trash filter and bulk actions. Needs @birdycom/omniaui CSS.
+     Behaviour: data-table.js (npx omniaui copy-js data-table). Webicons: iconify-icon.
+     File: packages/ui/snippets/data-table.html | Map: toolbar (list actions, search, trash pills, view, New) -> bulk bar -> table (sort) -> footer. Behaviour: src/data-table.js
 -->
-<div class="oc-data-table oc-column-menu-scope" id="oc-articles" data-page-size="3" data-oc-live="true" style="--oc-data-table-max: 18rem">
+<div class="oc-data-table" id="oc-articles" data-page-size="3" data-oc-live="true" style="--oc-data-table-max: 18rem">
   <div class="oc-data-table-toolbar">
     <div class="oc-data-table-heading">
       <span class="oc-data-table-title">Articles</span>
-      <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" popovertarget="oc-articles-menu" aria-label="Table actions">
-        <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill="currentColor" d="M7.2 1.2h1.6l.3 1.5a4 4 0 0 1 1.1.6l1.4-.6 1.1 1.1-.6 1.4c.3.3.5.7.6 1.1l1.5.3v1.6l-1.5.3a4 4 0 0 1-.6 1.1l.6 1.4-1.1 1.1-1.4-.6a4 4 0 0 1-1.1.6l-.3 1.5H7.2l-.3-1.5a4 4 0 0 1-1.1-.6l-1.4.6-1.1-1.1.6-1.4a4 4 0 0 1-.6-1.1L1.8 8.8V7.2l1.5-.3c.1-.4.3-.8.6-1.1l-.6-1.4 1.1-1.1 1.4.6a4 4 0 0 1 1.1-.6l.3-1.5zM8 6.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z"/></svg>
-      </button>
-      <div class="oc-dropdown-menu" id="oc-articles-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>
+      <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" popovertarget="oc-articles-menu" aria-label="List actions" title="List actions"><iconify-icon icon="mdi:tune-variant" aria-hidden="true"></iconify-icon></button>
+      <div class="oc-dropdown-menu" id="oc-articles-menu" popover="">
+        <button class="oc-dropdown-item" type="button" data-oc-export="">Export CSV</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="Search articles..." aria-label="Search articles">
@@ -26,28 +22,14 @@
       <button class="oc-filter-pill" type="button" data-oc-filter="archived">Archive only</button>
     </div>
     <div class="oc-data-table-view" role="group" aria-label="View">
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="table" aria-pressed="true">Table</button>
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-view="grid">Cards</button>
+      <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"><iconify-icon icon="mdi:format-list-bulleted" aria-hidden="true"></iconify-icon></button>
+      <button class="oc-btn oc-btn--outline oc-btn--icon oc-btn--sm" type="button" data-oc-view="grid" aria-label="Cards"><iconify-icon icon="mdi:view-grid-outline" aria-hidden="true"></iconify-icon></button>
     </div>
-    <div class="oc-data-table-actions"><button class="oc-btn oc-btn--sm" type="button">New article</button></div>
-    <p class="oc-data-table-sort-summary" data-oc-sort-summary role="status"></p>
-  </div>
-  <div class="oc-table-toolbar">
-    <span class="oc-table-toolbar-spacer"></span>
-    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-articles-columns">Columns</button>
-  </div>
-  <div class="oc-column-menu" id="oc-articles-columns" popover>
-    <p class="oc-column-menu-title">Visible columns</p>
-    <form class="oc-column-menu-list">
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="3" checked> Article ID</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="4" checked> Name</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="5" checked> Price</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="6"> Supplier</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="7" checked> Status</label>
-    </form>
+    <div class="oc-data-table-actions"><button class="oc-btn oc-btn--sm" type="button"><iconify-icon icon="mdi:plus" aria-hidden="true"></iconify-icon>New article</button></div>
+    <p class="oc-data-table-sort-summary" data-oc-sort-summary="" role="status"></p>
   </div>
   <div class="oc-data-table-bulk" hidden>
-    <span data-oc-selected-count>0 selected</span>
+    <span data-oc-selected-count="">0 selected</span>
     <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="export">Export selection</button>
     <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="duplicate">Duplicate</button>
     <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" data-oc-bulk="archive">Move to trash</button>
@@ -60,76 +42,69 @@
       <table class="oc-table oc-data-table-table">
         <thead>
           <tr>
-            <th data-oc-col="select" class="oc-data-table-select"><input class="oc-checkbox" type="checkbox" data-oc-select-all aria-label="Select all"></th>
-            <th data-oc-col="order"><span class="oc-visually-hidden">Order</span></th>
-            <th data-oc-col="sku" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Article ID</button><span class="oc-data-table-resize" role="separator" aria-orientation="vertical" aria-label="Resize Article ID"></span></span></th>
-            <th data-oc-col="name" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Name</button><span class="oc-data-table-resize" role="separator" aria-orientation="vertical" aria-label="Resize Name"></span></span></th>
-            <th data-oc-col="price" data-oc-sort="numeric" data-numeric><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Price</button><span class="oc-data-table-resize" role="separator" aria-orientation="vertical" aria-label="Resize Price"></span></span></th>
-            <th data-oc-col="supplier" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Supplier</button><span class="oc-data-table-resize" role="separator" aria-orientation="vertical" aria-label="Resize Supplier"></span></span></th>
+            <th data-oc-col="select" class="oc-data-table-select"><input class="oc-checkbox" type="checkbox" data-oc-select-all="" aria-label="Select all"></th>
+            <th data-oc-col="sku" data-oc-sort="text" aria-sort="ascending"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Article ID</button></span></th>
+            <th data-oc-col="name" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Name</button></span></th>
+            <th data-oc-col="price" data-oc-sort="numeric" data-numeric=""><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Price</button></span></th>
+            <th data-oc-col="supplier" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Supplier</button></span></th>
             <th data-oc-col="status" data-oc-sort="text"><span class="oc-data-table-th"><button class="oc-table-sort" type="button">Status</button></span></th>
-            <th data-oc-col="actions"><span class="oc-visually-hidden">Actions</span></th>
+            <th data-oc-col="actions" style="width:7.5rem"><span class="oc-data-table-th">Actions</span></th>
           </tr>
         </thead>
         <tbody>
-          <tr data-oc-row data-oc-key="schar" data-oc-status="active">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select Scharnier"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Scharnier"></button></td>
+          <tr data-oc-row="" data-oc-key="schar" data-oc-status="active">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Scharnier"></td>
             <td data-oc-col="sku">SET-SCHAR-1105C-ONS</td>
             <td data-oc-col="name">Scharnier 1105</td>
-            <td data-oc-col="price" data-numeric data-oc-value="5.15">5,15</td>
-            <td data-oc-col="supplier">Van Hoecke</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="5.15">5,15</td>
+            <td data-oc-col="supplier">Supplier 1</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
-          <tr data-oc-row data-oc-key="greep" data-oc-status="active">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select Greep"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Greep"></button></td>
+          <tr data-oc-row="" data-oc-key="greep" data-oc-status="active">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Greep"></td>
             <td data-oc-col="sku">SET-GREEP-40</td>
             <td data-oc-col="name">Greep 40</td>
-            <td data-oc-col="price" data-numeric data-oc-value="12.4">12,40</td>
-            <td data-oc-col="supplier">Van Hoecke</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="12.4">12,40</td>
+            <td data-oc-col="supplier">Supplier 1</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
-          <tr data-oc-row data-oc-key="plaat" data-oc-status="active">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select Plaat"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Plaat"></button></td>
+          <tr data-oc-row="" data-oc-key="plaat" data-oc-status="active">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Plaat"></td>
             <td data-oc-col="sku">PLAAT-18-WIT</td>
             <td data-oc-col="name">Plaat 18 wit</td>
-            <td data-oc-col="price" data-numeric data-oc-value="28">28,00</td>
-            <td data-oc-col="supplier">Egger</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="28">28,00</td>
+            <td data-oc-col="supplier">Supplier 2</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
-          <tr data-oc-row data-oc-key="led" data-oc-status="active">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select LED"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move LED"></button></td>
+          <tr data-oc-row="" data-oc-key="led" data-oc-status="active">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select LED"></td>
             <td data-oc-col="sku">LED-STRIP-2M</td>
             <td data-oc-col="name">LED strip</td>
-            <td data-oc-col="price" data-numeric data-oc-value="16.9">16,90</td>
-            <td data-oc-col="supplier">Egger</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="16.9">16,90</td>
+            <td data-oc-col="supplier">Supplier 2</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--success">Active</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
-          <tr data-oc-row data-oc-key="schroef" data-oc-status="deleted">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select Schroef"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Schroef"></button></td>
+          <tr data-oc-row="" data-oc-key="schroef" data-oc-status="deleted">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Schroef"></td>
             <td data-oc-col="sku">SCHROEF-4X40</td>
             <td data-oc-col="name">Schroef 4x40</td>
-            <td data-oc-col="price" data-numeric data-oc-value="0.08">0,08</td>
-            <td data-oc-col="supplier">Van Hoecke</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="0.08">0,08</td>
+            <td data-oc-col="supplier">Supplier 1</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--secondary">Deleted</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
-          <tr data-oc-row data-oc-key="kast" data-oc-status="archived">
-            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select aria-label="Select Kast"></td>
-            <td data-oc-col="order" class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Kast"></button></td>
+          <tr data-oc-row="" data-oc-key="kast" data-oc-status="archived">
+            <td data-oc-col="select"><input class="oc-checkbox" type="checkbox" data-oc-select="" aria-label="Select Kast"></td>
             <td data-oc-col="sku">ARCH-KAST-60</td>
             <td data-oc-col="name">Kast 60</td>
-            <td data-oc-col="price" data-numeric data-oc-value="240">240,00</td>
-            <td data-oc-col="supplier">Egger</td>
+            <td data-oc-col="price" data-numeric="" data-oc-value="240">240,00</td>
+            <td data-oc-col="supplier">Supplier 2</td>
             <td data-oc-col="status"><span class="oc-badge oc-badge--secondary">Archived</span></td>
-            <td data-oc-col="actions" class="oc-table-actions"><button class="oc-table-row-action" type="button">Edit</button></td>
+            <td data-oc-col="actions"><button class="oc-btn oc-btn--soft-primary oc-btn--icon oc-btn--sm" type="button" aria-label="Edit" title="Edit"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button></td>
           </tr>
         </tbody>
       </table>
@@ -137,15 +112,15 @@
     <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>Showing 1–3 of 4</p>
+    <p class="oc-data-table-summary" data-oc-summary="">Showing 1–3 of 4</p>
     <label class="oc-data-table-per-page">Rows per page
-      <select class="oc-select" data-oc-page-size aria-label="Rows per page">
+      <select class="oc-select" data-oc-page-size="" aria-label="Rows per page">
         <option value="3" selected>3</option>
         <option value="5">5</option>
         <option value="10">10</option>
         <option value="15">15</option>
       </select>
     </label>
-    <nav class="oc-data-table-pager" data-oc-pager aria-label="Pagination"></nav>
+    <nav class="oc-data-table-pager" data-oc-pager="" aria-label="Pagination"></nav>
   </div>
 </div>

package/snippets/date-field.html

@@ -0,0 +1,44 @@
+<!-- OmniaUI component: date-field - Native date input with a calendar icon zone and the ISO week (Week 45) next to it. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/date-field.html | Map: date field demo markup. Behaviour: form-extras.js.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-date-field: The frame around icon, input and week; focus ring on the frame.
+       .oc-date-field__icon: The calendar icon zone with a line after it.
+       input.oc-date-field__input[type=date]: The native date input (value YYYY-MM-DD).
+       output.oc-date-field__week: With form-extras.js: the ISO week of the date, "Week 45". Template: data-oc-week="W{week} · {year}". Hidden without a date.
+       .oc-date-field--sm: 2rem high (also inside .oc-density-compact).
+       isoWeek(date): Exported from form-extras.js: { week, year } after ISO 8601 (week 1 holds the first Thursday).
+-->
+<div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:end">
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-date-delivery">Delivery date</label>
+  <div class="oc-date-field">
+    <span class="oc-date-field__icon"><iconify-icon icon="mdi:calendar-blank-outline" aria-hidden="true"></iconify-icon></span>
+    <input class="oc-date-field__input" id="oc-date-delivery" type="date" value="2026-11-12">
+    <output class="oc-date-field__week" for="oc-date-delivery"></output>
+  </div>
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-date-start">Start of works</label>
+  <div class="oc-date-field">
+    <span class="oc-date-field__icon"><iconify-icon icon="mdi:calendar-blank-outline" aria-hidden="true"></iconify-icon></span>
+    <input class="oc-date-field__input" id="oc-date-start" type="date" value="2027-01-01">
+    <output class="oc-date-field__week" for="oc-date-start" data-oc-week="Week {week} · {year}"></output>
+  </div>
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-date-plain">Without week</label>
+  <div class="oc-date-field">
+    <span class="oc-date-field__icon"><iconify-icon icon="mdi:calendar-blank-outline" aria-hidden="true"></iconify-icon></span>
+    <input class="oc-date-field__input" id="oc-date-plain" type="date" value="2026-12-24">
+    
+  </div>
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-date-small">Small</label>
+  <div class="oc-date-field oc-date-field--sm">
+    <span class="oc-date-field__icon"><iconify-icon icon="mdi:calendar-blank-outline" aria-hidden="true"></iconify-icon></span>
+    <input class="oc-date-field__input" id="oc-date-small" type="date" value="2026-11-03">
+    <output class="oc-date-field__week" for="oc-date-small"></output>
+  </div>
+</div>
+</div>

package/snippets/doc-viewer.html

@@ -38,7 +38,7 @@
   <div class="oc-doc-viewer-dialog__bar">
     <h2 class="oc-doc-viewer-dialog__title" id="oc-doc-viewer-demo-pdf-title">Brochure 2026</h2>
     <div class="oc-doc-viewer-dialog__actions">
-      <a class="oc-btn oc-btn--outline oc-btn--sm" href="#brochure.pdf" download>Download</a>
+      <a class="oc-btn oc-btn--outline oc-btn--sm" href="#brochure.pdf">Download</a>
       <button type="button" class="oc-doc-viewer-dialog__close" command="close" commandfor="oc-doc-viewer-demo-pdf" aria-label="Close">&#10005;</button>
     </div>
   </div>

package/snippets/emoji-picker.html

@@ -7,7 +7,7 @@
 -->
 <div style="display:flex;gap:0.5rem;align-items:center">
   <input class="oc-input" id="oc-emoji-field" placeholder="Say something nice" style="inline-size:16rem">
-  <button type="button" class="oc-emoji-picker__trigger" popovertarget="oc-emoji-demo" aria-label="Insert emoji">&#128578;</button>
+  <button type="button" class="oc-emoji-picker__trigger" popovertarget="oc-emoji-demo" aria-label="Insert 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>
 <div class="oc-emoji-picker" id="oc-emoji-demo" popover data-oc-emoji-target="#oc-emoji-field" aria-label="Emoji">
   <p class="oc-emoji-picker__label">Smileys</p>

package/snippets/form-density.html

@@ -0,0 +1,25 @@
+<!-- OmniaUI component: form-density - Compact forms: .oc-density-compact makes every control in it 2rem high instead of 2.5rem. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/form-density.html | Map: form density demo markup.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-density-compact: On a form or wrapper: controls inside are 2rem high, labels and gaps a step smaller.
+-->
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;inline-size:100%">
+<form class="" style="display:grid;gap:0.75rem;padding:1rem;border:1px solid var(--oc-border);border-radius:var(--oc-radius)" onsubmit="event.preventDefault()">
+  <p style="margin:0;font-weight:600">Standard (2.5rem)</p>
+  <div class="oc-field"><label class="oc-field-label" for="d-desc">Description</label><input class="oc-input" id="d-desc" value="Article 1"></div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
+    <div class="oc-field"><label class="oc-field-label" for="d-qty">Quantity</label><input class="oc-input" id="d-qty" value="2"></div>
+    <div class="oc-field"><label class="oc-field-label" for="d-vat">VAT</label><select class="oc-select" id="d-vat"><option>21%</option><option>6%</option></select></div>
+  </div>
+  <div style="display:flex;gap:0.5rem"><button class="oc-btn oc-btn--sm" type="submit"><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon>Save</button><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Cancel</button></div>
+</form>
+<form class="oc-density-compact" style="display:grid;gap:0.75rem;padding:1rem;border:1px solid var(--oc-border);border-radius:var(--oc-radius)" onsubmit="event.preventDefault()">
+  <p style="margin:0;font-weight:600">Compact (2rem)</p>
+  <div class="oc-field"><label class="oc-field-label" for="oc-density-compact-desc">Description</label><input class="oc-input" id="oc-density-compact-desc" value="Article 1"></div>
+  <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
+    <div class="oc-field"><label class="oc-field-label" for="oc-density-compact-qty">Quantity</label><input class="oc-input" id="oc-density-compact-qty" value="2"></div>
+    <div class="oc-field"><label class="oc-field-label" for="oc-density-compact-vat">VAT</label><select class="oc-select" id="oc-density-compact-vat"><option>21%</option><option>6%</option></select></div>
+  </div>
+  <div style="display:flex;gap:0.5rem"><button class="oc-btn oc-btn--sm" type="submit"><iconify-icon icon="mdi:content-save-outline" aria-hidden="true"></iconify-icon>Save</button><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Cancel</button></div>
+</form>
+</div>

package/snippets/form-section.html

@@ -0,0 +1,47 @@
+<!-- OmniaUI component: form-section - Collapsible part of a long form with an icon, title, hint and status; red edge while a field inside is invalid. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/form-section.html | Map: form section demo markup.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-form-section: A <details>; same name on siblings = one open at a time.
+       .oc-form-section__summary: Icon, heading (title + hint), status and a chevron.
+       .oc-form-section__icon: The webicon of the section in a tinted square.
+       .oc-form-section__status: Free slot: a badge (Complete, 1 error), a count …
+       .oc-form-section__body: The fields in a responsive grid; .oc-form-section__wide spans the full row.
+       :user-invalid / [aria-invalid]: A field that fails validation after the user touched it colors the section red.
+-->
+<form style="inline-size:min(100%,44rem)" onsubmit="event.preventDefault()">
+<details class="oc-form-section" name="contact" open>
+  <summary class="oc-form-section__summary">
+    <span class="oc-form-section__icon"><iconify-icon icon="mdi:card-account-details-outline" aria-hidden="true"></iconify-icon></span>
+    <span class="oc-form-section__heading"><span class="oc-form-section__title">General</span><span class="oc-form-section__hint">Name, VAT number and type</span></span>
+    <span class="oc-form-section__status"><span class="oc-badge oc-badge--success">Complete</span></span>
+  </summary>
+  <div class="oc-form-section__body">
+    <div class="oc-field"><label class="oc-field-label" for="fs-name">Name</label><input class="oc-input" id="fs-name" type="text" value="Company 1"></div>
+    <div class="oc-field"><label class="oc-field-label" for="fs-vat">VAT number</label><input class="oc-input" id="fs-vat" type="text" value="BE0000.000.001"></div>
+    <div class="oc-field"><label class="oc-field-label" for="fs-type">Type</label><input class="oc-input" id="fs-type" type="text" value="Company"></div>
+  </div>
+</details>
+<details class="oc-form-section" name="contact">
+  <summary class="oc-form-section__summary">
+    <span class="oc-form-section__icon"><iconify-icon icon="mdi:map-marker-outline" aria-hidden="true"></iconify-icon></span>
+    <span class="oc-form-section__heading"><span class="oc-form-section__title">Address</span><span class="oc-form-section__hint">Invoice and delivery address</span></span>
+    <span class="oc-form-section__status"></span>
+  </summary>
+  <div class="oc-form-section__body">
+    <div class="oc-field oc-form-section__wide"><label class="oc-field-label" for="fs-street">Street and number</label><input class="oc-input" id="fs-street" type="text" value="Company address 1"></div>
+    <div class="oc-field"><label class="oc-field-label" for="fs-zip">Postal code</label><input class="oc-input" id="fs-zip" type="text" value="1000"></div>
+    <div class="oc-field"><label class="oc-field-label" for="fs-city">City</label><input class="oc-input" id="fs-city" type="text" value="City 1"></div>
+  </div>
+</details>
+<details class="oc-form-section" name="contact">
+  <summary class="oc-form-section__summary">
+    <span class="oc-form-section__icon"><iconify-icon icon="mdi:email-outline" aria-hidden="true"></iconify-icon></span>
+    <span class="oc-form-section__heading"><span class="oc-form-section__title">Contact</span><span class="oc-form-section__hint">E-mail and phone</span></span>
+    <span class="oc-form-section__status"><span class="oc-badge oc-badge--destructive">1 error</span></span>
+  </summary>
+  <div class="oc-form-section__body">
+    <div class="oc-field"><label class="oc-field-label" for="fs-mail">E-mail</label><input class="oc-input" id="fs-mail" type="email" value="info@company1" required></div>
+    <div class="oc-field"><label class="oc-field-label" for="fs-phone">Phone</label><input class="oc-input" id="fs-phone" type="tel" value="+32 012 34 56 71"></div>
+  </div>
+</details>
+</form>

package/snippets/gallery.html

@@ -0,0 +1,25 @@
+<!-- OmniaUI component: gallery - Product photos with thumbnails: one large photo and a row (or column) of thumbnails. No JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/gallery.html | Map: gallery.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-gallery: The gallery (a container): __stage with one figure.oc-gallery__slide per photo, then __thumbs.
+       fieldset.oc-gallery__thumbs: The thumbnails: one label.oc-gallery__thumb per photo with a radio (same name) and an image with alt text. The first photo shows when none is checked.
+       .oc-gallery__badge: A badge on the photo ("-20%", "New").
+       .oc-gallery--side: Thumbnails in a column on the left once the gallery is 32rem wide or more.
+       --oc-gallery-ratio / --oc-gallery-fit / --oc-gallery-thumb: Photo ratio (default 4 / 3), contain or cover, thumbnail size (4rem).
+-->
+<div class="oc-gallery oc-gallery--side" style="inline-size:min(100%,34rem)">
+  <div class="oc-gallery__stage">
+    <span class="oc-badge oc-badge--destructive oc-gallery__badge">-20%</span>
+    <figure class="oc-gallery__slide"><img src="/img/shop/product-1-front.svg" alt="Product 1, front" width="800" height="600"></figure>
+    <figure class="oc-gallery__slide"><img src="/img/shop/product-1-angle.svg" alt="Product 1, from the side" width="800" height="600" loading="lazy"></figure>
+    <figure class="oc-gallery__slide"><img src="/img/shop/product-1-detail.svg" alt="Product 1, the shade from below" width="800" height="600" loading="lazy"></figure>
+    <figure class="oc-gallery__slide"><img src="/img/shop/product-1-box.svg" alt="Product 1, in its box" width="800" height="600" loading="lazy"></figure>
+  </div>
+  <fieldset class="oc-gallery__thumbs">
+    <legend>Photos of Product 1</legend>
+    <label class="oc-gallery__thumb"><input type="radio" name="oc-gallery-demo" checked><img src="/img/shop/product-1-front.svg" alt="Front"></label>
+    <label class="oc-gallery__thumb"><input type="radio" name="oc-gallery-demo"><img src="/img/shop/product-1-angle.svg" alt="Side"></label>
+    <label class="oc-gallery__thumb"><input type="radio" name="oc-gallery-demo"><img src="/img/shop/product-1-detail.svg" alt="Shade from below"></label>
+    <label class="oc-gallery__thumb"><input type="radio" name="oc-gallery-demo"><img src="/img/shop/product-1-box.svg" alt="In its box"></label>
+  </fieldset>
+</div>

package/snippets/lazy.html

@@ -0,0 +1,39 @@
+<!-- OmniaUI component: lazy - Images that load when they come near the screen, with a shimmer or a blurred preview until they are there, and sections drawn only when needed. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/lazy.html | Map: lazy images -> lazy table -> placeholder while loading.
+     Class API (modifiers are extra classes / attributes on the same element):
+       figure.oc-lazy > img[loading=lazy]: The image box: keeps its aspect ratio (--oc-lazy-ratio, 16 / 10), a shimmer until the photo is there. Give the image width and height.
+       --oc-lazy-preview: A tiny copy of the photo (a few hundred bytes) shown blurred instead of the shimmer: style="--oc-lazy-preview: url(photo-24px.webp)".
+       .is-loaded / .is-error: Added by lazy.js: the photo fades in / the placeholder stays. Without the script the photo shows when it is there.
+       figcaption: Optional caption over the bottom of the image.
+       .oc-lazy--thumb: A small square thumbnail (2.5rem) for a table row or a list item.
+       tr.oc-lazy-row / .oc-lazy-bar: Placeholder rows while the next page of a table loads: bars that pulse, --oc-lazy-bar sets their width. Give the rows aria-hidden="true" and say what is loading in a role="status".
+       .oc-lazy-section: A section the browser lays out and draws only when it comes near the screen (content-visibility: auto); --oc-lazy-size is its estimated height (600px).
+       watchLazy(img) / initLazy(scope): Exported from @birdycom/omniaui/lazy.js; npx omniaui copy-js lazy gives /js/oc-lazy.js that starts on its own.
+-->
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem;inline-size:100%">
+  <figure class="oc-lazy"><img src="/img/blocks/dashboard-01.jpg" alt="Dashboard" loading="lazy" decoding="async" width="640" height="400"></figure>
+  <figure class="oc-lazy"><img src="/img/blocks/shop-catalog.jpg" alt="Shop catalog" loading="lazy" decoding="async" width="640" height="400"></figure>
+  <figure class="oc-lazy"><img src="/img/blocks/product-detail.jpg" alt="Product detail" loading="lazy" decoding="async" width="640" height="400"></figure>
+  <figure class="oc-lazy" style="--oc-lazy-ratio: 2 / 3"><img src="/img/blocks/auth-split-photo.webp" alt="Hieroglyphs in the Valley of the Kings, photo by Serge Cools" loading="lazy" decoding="async" width="640" height="400"><figcaption>Photo: Serge Cools</figcaption></figure>
+  <figure class="oc-lazy"><img src="/img/blocks/chat-inbox.jpg" alt="Chat inbox" loading="lazy" decoding="async" width="640" height="400"></figure>
+  <figure class="oc-lazy"><img src="/img/blocks/quote-lines.jpg" alt="Quote lines" loading="lazy" decoding="async" width="640" height="400"></figure>
+</div>
+<table class="oc-table" style="inline-size:100%">
+  <thead><tr><th>Product</th><th>Category</th><th data-numeric>Price</th></tr></thead>
+  <tbody>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-1-front.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 1</strong><br><small class="text-muted">PRD-0001</small></span></div></td><td>Lighting</td><td data-numeric>€ 179,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-2.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 2</strong><br><small class="text-muted">PRD-0002</small></span></div></td><td>Furniture</td><td data-numeric>€ 265,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-3.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 3</strong><br><small class="text-muted">PRD-0003</small></span></div></td><td>Furniture</td><td data-numeric>€ 589,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-4.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 4</strong><br><small class="text-muted">PRD-0004</small></span></div></td><td>Garden</td><td data-numeric>€ 22,40</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-5.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 5</strong><br><small class="text-muted">PRD-0005</small></span></div></td><td>Electronics</td><td data-numeric>€ 129,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-6.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 6</strong><br><small class="text-muted">PRD-0006</small></span></div></td><td>Kitchen</td><td data-numeric>€ 11,95</td></tr>
+      <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
+      <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
+      <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
+  </tbody>
+  <caption class="text-muted" style="caption-side:bottom;padding-block-start:0.5rem;font-size:0.8125rem" role="status">Loading 20 more products…</caption>
+</table>
+<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem;inline-size:100%">
+  <figure class="oc-lazy" role="img" aria-label="Loading"></figure>
+  <figure class="oc-lazy" style="--oc-lazy-preview: url(/img/blocks/shop-cart.jpg)" role="img" aria-label="Loading"></figure>
+</div>

package/snippets/message-thread.html

@@ -16,9 +16,9 @@
   <header class="oc-message-thread__header">
     <div class="oc-message-thread__heading">
       <h3 class="oc-message-thread__title" id="oc-thread-demo-title">Kitchen worktop: which finish?</h3>
-      <p class="oc-message-thread__meta"><strong>Villa Dewitte</strong> · Lisa Verbeke → Tom Peeters · 14 Oct 2026</p>
+      <p class="oc-message-thread__meta"><strong>Project 1</strong> · Customer 1 → Customer 6 · 14 Oct 2026</p>
     </div>
-    <div class="oc-avatar-group oc-message-thread__people" aria-label="2 participants"><span class="oc-avatar" title="Lisa Verbeke">LV</span><span class="oc-avatar" title="Tom Peeters">TP</span></div>
+    <div class="oc-avatar-group oc-message-thread__people" aria-label="2 participants"><span class="oc-avatar" title="Customer 1">C1</span><span class="oc-avatar" title="Customer 6">C6</span></div>
     <div class="oc-message-thread__actions">
       <span class="oc-badge oc-badge--destructive">Urgent</span>
       <button type="button" class="oc-message-thread__icon-btn" popovertarget="oc-thread-demo-menu" aria-label="Conversation actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg></button>
@@ -35,35 +35,35 @@
     <div class="oc-message-list">
       <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
       <article class="oc-message">
-        <span class="oc-avatar oc-message__avatar">LV</span>
+        <span class="oc-avatar oc-message__avatar">C1</span>
         <div class="oc-message__bubble">
-          <p class="oc-message__sender">Lisa Verbeke</p>
+          <p class="oc-message__sender">Customer 1</p>
           <div class="oc-message__text"><p>The supplier dropped off two worktop samples at the workshop. Photo attached.</p></div>
           <div class="oc-message__attachments"><a class="oc-attachment-image" href="#samples.jpg"><span class="oc-media-art oc-media-art--6" role="img" aria-label="Two worktop samples on the workbench"></span><span class="oc-attachment-image__caption">samples.jpg · 2.1 MB</span></a></div>
           <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
         </div>
       </article>
       <article class="oc-message oc-message--continued">
-        <span class="oc-avatar oc-message__avatar">LV</span>
+        <span class="oc-avatar oc-message__avatar">C1</span>
         <div class="oc-message__bubble">
           <div class="oc-message__text"><p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p></div>
           <p class="oc-message__meta"><time datetime="2026-10-14T09:13">09:13</time></p>
         </div>
       </article>
       <article class="oc-message oc-message--out">
-        <span class="oc-avatar oc-message__avatar">TP</span>
+        <span class="oc-avatar oc-message__avatar">C6</span>
         <div class="oc-message__bubble">
           <div class="oc-message__text"><p>Calacatta matt, 20 mm. I'll send the updated quote to the client today.</p></div>
-          <div class="oc-message__attachments"><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf" download><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Dewitte v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></div>
+          <div class="oc-message__attachments"><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf"><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Project 1 v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></div>
           <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read">Read</span></p>
         </div>
         <div class="oc-message__actions"><button type="button" class="oc-message__action oc-message__action--destructive" aria-label="Delete this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg></button></div>
       </article>
       <div class="oc-message-divider"><span>Today</span></div>
       <article class="oc-message">
-        <span class="oc-avatar oc-message__avatar">LV</span>
+        <span class="oc-avatar oc-message__avatar">C1</span>
         <div class="oc-message__bubble">
-          <p class="oc-message__sender">Lisa Verbeke</p>
+          <p class="oc-message__sender">Customer 1</p>
           <div class="oc-message__text"><p>Client signed. Can you confirm the edge profile before 16:00?</p></div>
           <p class="oc-message__meta"><time datetime="2026-10-24T10:02">10:02</time></p>
         </div>
@@ -77,11 +77,11 @@
       <textarea class="oc-chat-composer__input" id="oc-thread-demo-input" name="message" rows="1" placeholder="Type your reply…" required></textarea>
       <div class="oc-chat-composer__bar">
         <div class="oc-chat-composer__tools">
-          <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file">&#128206;</button>
-          <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
+          <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file"><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 type="button" class="oc-chat-composer__tool" aria-label="Insert 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 class="oc-chat-composer__hint">Ctrl + Enter to send</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>
   </div>

package/snippets/message.html

@@ -11,19 +11,19 @@
        .oc-message-divider > span: Date divider. Modifier: --system (a centred notice without lines)
      No JavaScript. Escape user text on the server; the markup only expects paragraphs, lists and links.
 -->
-<div class="oc-message-list" role="log" aria-label="Conversation with Lisa Verbeke" style="max-inline-size:36rem">
+<div class="oc-message-list" role="log" aria-label="Conversation with Customer 1" style="max-inline-size:36rem">
   <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
 
-  <article class="oc-message" aria-label="Lisa Verbeke, 09:12">
-    <span class="oc-avatar oc-message__avatar">LV</span>
+  <article class="oc-message" aria-label="Customer 1, 09:12">
+    <span class="oc-avatar oc-message__avatar">C1</span>
     <div class="oc-message__bubble">
-      <p class="oc-message__sender">Lisa Verbeke</p>
-      <div class="oc-message__text"><p>Morning Tom! The worktop supplier sent two samples for Villa Dewitte.</p></div>
+      <p class="oc-message__sender">Customer 1</p>
+      <div class="oc-message__text"><p>Morning Tom! The worktop supplier sent two samples for Project 1.</p></div>
       <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
     </div>
   </article>
-  <article class="oc-message oc-message--continued" id="oc-message-demo-question" aria-label="Lisa Verbeke, 09:13">
-    <span class="oc-avatar oc-message__avatar">LV</span>
+  <article class="oc-message oc-message--continued" id="oc-message-demo-question" aria-label="Customer 1, 09:13">
+    <span class="oc-avatar oc-message__avatar">C1</span>
     <div class="oc-message__bubble">
       <div class="oc-message__text">
         <p>Which finish should we order?</p>
@@ -35,9 +35,9 @@
   </article>
 
   <article class="oc-message oc-message--out" aria-label="You, 09:20">
-    <span class="oc-avatar oc-message__avatar">TP</span>
+    <span class="oc-avatar oc-message__avatar">C6</span>
     <div class="oc-message__bubble">
-      <a class="oc-message__quote" href="#oc-message-demo-question"><strong>Lisa Verbeke</strong><span>Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm</span></a>
+      <a class="oc-message__quote" href="#oc-message-demo-question"><strong>Customer 1</strong><span>Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm</span></a>
       <div class="oc-message__text"><p>Calacatta matt. The client wants the lighter look next to the oak fronts.</p></div>
       <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9"/></svg>Read</span></p>
     </div>
@@ -47,5 +47,5 @@
     </div>
   </article>
 
-  <div class="oc-message-divider oc-message-divider--system" role="note"><span>Lisa Verbeke marked this question as answered</span></div>
+  <div class="oc-message-divider oc-message-divider--system" role="note"><span>Customer 1 marked this question as answered</span></div>
 </div>