@birdycom/omniaui 0.12.5 → 0.13.0

package/snippets/barcode.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: barcode - EAN-13, EAN-8, UPC-A or Code 128 drawn as SVG from a value, no dependency. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/barcode.html | Map: barcode demo markup. Behaviour: barcode.js.
+     Class API (modifiers are extra classes / attributes on the same element):
+       figure.oc-barcode[data-value]: The barcode. The script replaces its content with the SVG and the digits.
+       data-format: auto (default: 12–13 digits EAN-13, 7–8 EAN-8, 11 UPC-A, else Code 128), EAN13, EAN8, UPC or CODE128.
+       data-digits="false": Bars only, no digits.
+       .oc-barcode--hero / --compact: Large (product page, label) or small (table cell).
+       --oc-barcode-height: Height of the bars (4rem).
+       [data-error]: Set when the value cannot be encoded (wrong check digit, non-ASCII in Code 128); the reason shows instead of bars.
+       encodeBarcode(value, format): Exported: the module string and the text, for your own canvas or PDF.
+       barcodeFile(value, { format, digits, moduleWidth, height }): Exported: a print-ready SVG file as text.
+       The barcode maker (live preview, download) is the OmniaUI Pro block packages/pro/blocks/barcode-maker.html.
+-->
+<div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center">
+  <figure class="oc-barcode oc-barcode--hero" data-value="5400000000010"></figure>
+  <figure class="oc-barcode" data-value="SKU-000105"></figure>
+  <figure class="oc-barcode" data-value="96385074"></figure>
+  <figure class="oc-barcode oc-barcode--compact" data-value="012345678905" data-format="UPC" data-digits="false"></figure>
+  <figure class="oc-barcode" data-value="5400000000018"></figure>
+</div>

package/snippets/brand-mark.html

@@ -0,0 +1,41 @@
+<!-- OmniaUI component: brand-mark - A logo from an icon and text: the mark with a glow in the brand color, a word mark with one part in the brand gradient and a small tagline. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/brand-mark.html | Map: in the header -> sizes.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-brand-mark: The logo: a link or a span with the icon and the text side by side.
+       .oc-brand-mark__icon: The mark (svg or img), 2.25rem, with a drop shadow in brand 1.
+       .oc-brand-mark__text: Word mark and tagline stacked.
+       .oc-brand-mark__word: The name: --oc-font-display, 800, tight letter spacing.
+       .oc-brand-mark__accent: The part of the name in the gradient brand 1 → brand 2.
+       .oc-brand-mark__tagline: Mono, uppercase, wide letter spacing, muted.
+       .oc-brand-mark--sm / --lg: Smaller (footer) or larger (hero, ecosystem map). The sizes are tokens: --oc-brand-mark-icon, --oc-brand-mark-word, --oc-brand-mark-tagline.
+-->
+<a class="oc-brand-mark" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<div style="display:flex;flex-wrap:wrap;align-items:center;gap:2.5rem">
+<a class="oc-brand-mark oc-brand-mark--sm" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-sm" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-sm)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<a class="oc-brand-mark" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-md" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-md)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+<a class="oc-brand-mark oc-brand-mark--lg" href="#home" aria-label="Company 1, home">
+  <svg class="oc-brand-mark__icon" viewBox="0 0 40 40" aria-hidden="true"><defs><linearGradient id="oc-brand-grad-lg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="var(--oc-brand-1)"/><stop offset="1" stop-color="var(--oc-brand-2)"/></linearGradient></defs><rect width="40" height="40" rx="10" fill="url(#oc-brand-grad-lg)"/><path d="M12 27V13h9a5 5 0 0 1 0 10h-5v4z" fill="var(--oc-background)"/></svg>
+  <span class="oc-brand-mark__text">
+    <span class="oc-brand-mark__word">Company<span class="oc-brand-mark__accent">1</span></span>
+    <span class="oc-brand-mark__tagline">Software &amp; IT</span>
+  </span>
+</a>
+</div>

package/snippets/chat-composer.html

@@ -11,11 +11,11 @@
   <textarea class="oc-chat-composer__input" id="oc-chat-input" name="message" rows="1" placeholder="Write a message…" 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="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="Mention someone">@</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="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">Enter for a new line</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>

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/feature-card.html

@@ -0,0 +1,52 @@
+<!-- OmniaUI component: feature-card - Cards for services and features (icon tile, title, text) and cards that are links, in a grid whose column width you set. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/feature-card.html | Map: services -> link cards -> brand chips.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-feature-card: Card: tile, title, text; surface background, the border turns strong on hover.
+       .oc-feature-card__title / __text: Title (display font, 1.2rem) and muted text.
+       .oc-link-card: A card that is an <a>: __title, __text, __more (arrow moves on hover); the border takes the accent color on hover (.oc-accent--violet …).
+       .oc-card-grid: Auto-fill grid; --oc-card-min is the minimum column width (17rem), --oc-card-gap the gap.
+       .oc-card-grid--wide: Wide cards (projects): from 32rem, three in a row from 1280px.
+       .oc-tag-list--neutral / --lg: Chips without the accent color / larger chips in the display font (a strip of brand names).
+-->
+<div class="oc-card-grid" style="--oc-card-min: 15.5rem; inline-size:100%">
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:application-outline"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Business apps</h3>
+    <p class="oc-feature-card__text">Software built around how your company works.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:web"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Websites</h3>
+    <p class="oc-feature-card__text">Fast sites you can edit yourself.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:laptop"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Hardware</h3>
+    <p class="oc-feature-card__text">Computers, screens and networks, installed on site.</p>
+  </article>
+  <article class="oc-feature-card">
+    <span class="oc-icon-tile oc-icon-tile--sm" aria-hidden="true"><iconify-icon icon="mdi:headset"></iconify-icon></span>
+    <h3 class="oc-feature-card__title">Support</h3>
+    <p class="oc-feature-card__text">One point of contact for every question.</p>
+  </article>
+</div>
+<div class="oc-card-grid" style="--oc-card-min: 16rem; inline-size:100%">
+  <a class="oc-link-card oc-accent--violet" href="#agent-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:robot-outline"></iconify-icon></span>
+    <span class="oc-link-card__title">Agent 1</span>
+    <span class="oc-link-card__text">Answers questions about your own documents.</span>
+    <span class="oc-link-card__more">Read more</span>
+  </a>
+  <a class="oc-link-card oc-accent--violet" href="#agent-2">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:file-search-outline"></iconify-icon></span>
+    <span class="oc-link-card__title">Agent 2</span>
+    <span class="oc-link-card__text">Reads incoming invoices and fills in the booking.</span>
+    <span class="oc-link-card__more">Read more</span>
+  </a>
+</div>
+<div style="display:grid;gap:1rem">
+  <ul class="oc-tag-list oc-tag-list--neutral oc-tag-list--lg" aria-label="Brands we work with">
+    <li>Brand 1</li><li>Brand 2</li><li>Brand 3</li><li>Brand 4</li><li>Brand 5</li>
+  </ul>
+  <p class="oc-note" style="margin:0">Other brands on request.</p>
+</div>

package/snippets/fly-in.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: fly-in - Cards that fly in from the middle of their row when they scroll into view, with a hover lift that keeps working, and a New badge in a product card. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/fly-in.html | Map: product cards.
+     Behaviour: fly.js (npx omniaui copy-js fly); works without it.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-reveal--fly: A card that flies in. Hidden only while html.oc-fly-ready is set (by fly.js) and the card is not yet .is-visible.
+       --oc-fly-x: Start offset from the middle of the row; fly.js sets it per card.
+       .is-visible: Added by fly.js when the card comes into view; the card flies to its place.
+       .oc-product-card__badge: A small New label after the name of a product card (with .oc-pill).
+       initFly(scope): Exported from @birdycom/omniaui/fly.js; returns a function that stops watching.
+-->
+<div class="oc-card-grid" style="inline-size:100%">
+  <a class="oc-product-card oc-reveal--fly oc-accent--blue" href="#product-1">
+    <h3 class="oc-product-card__name">Product 1</h3>
+    <p class="oc-product-card__tagline">Plan every shift</p>
+    <p class="oc-product-card__summary">Schedules and leave in one view.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+  <a class="oc-product-card oc-reveal--fly oc-accent--green" href="#product-2">
+    <h3 class="oc-product-card__name">Product 2 <span class="oc-product-card__badge oc-pill oc-pill--accent">New</span></h3>
+    <p class="oc-product-card__tagline">Quotes in minutes</p>
+    <p class="oc-product-card__summary">From quote to invoice without typing twice.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+  <a class="oc-product-card oc-reveal--fly oc-accent--violet" href="#product-3">
+    <h3 class="oc-product-card__name">Product 3</h3>
+    <p class="oc-product-card__tagline">Your shop online</p>
+    <p class="oc-product-card__summary">Products, stock and orders in one place.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+</div>

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/hover-effects.html

@@ -0,0 +1,19 @@
+<!-- OmniaUI component: hover-effects - Choose how a card reacts to the mouse: lift, grow, glow or stay still, with one smooth curve for all of them. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/hover-effects.html | Map: four effects -> your own distance and speed.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-hover-lift: Moves up (--oc-hover-lift, 6px) with a soft shadow. The product card does this by default.
+       .oc-hover-grow: Grows a little in place (--oc-hover-scale, 1.02).
+       .oc-hover-glow: Stays in place, with a ring and glow in the accent color (--oc-accent-from, e.g. with .oc-accent--violet).
+       .oc-hover-none: No movement; also turns off the default lift of a product or price card.
+       --oc-hover-duration / --oc-hover-ease: Speed (0.45s) and curve (cubic-bezier(0.22, 1, 0.36, 1), a soft ease-out) of every effect.
+-->
+<div class="oc-card-grid" style="inline-size:100%">
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--blue" aria-hidden="true"><iconify-icon icon="mdi:arrow-up-bold-outline"></iconify-icon></span><h3 class="oc-feature-card__title">Lift</h3><p class="oc-feature-card__text">Moves up 6px with a soft shadow. <code>.oc-hover-lift</code></p></article>
+  <article class="oc-feature-card oc-hover-grow"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:arrow-expand"></iconify-icon></span><h3 class="oc-feature-card__title">Grow</h3><p class="oc-feature-card__text">Grows a little in place. <code>.oc-hover-grow</code></p></article>
+  <article class="oc-feature-card oc-hover-glow oc-accent--violet"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:white-balance-sunny"></iconify-icon></span><h3 class="oc-feature-card__title">Glow</h3><p class="oc-feature-card__text">Stays in place, glows in the accent color. <code>.oc-hover-glow</code></p></article>
+  <article class="oc-feature-card oc-hover-none"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--cyan" aria-hidden="true"><iconify-icon icon="mdi:pause-circle-outline"></iconify-icon></span><h3 class="oc-feature-card__title">None</h3><p class="oc-feature-card__text">No movement. <code>.oc-hover-none</code></p></article>
+</div>
+<div class="oc-card-grid" style="inline-size:100%; --oc-hover-lift: 10px; --oc-hover-duration: 0.7s">
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--blue" aria-hidden="true"><iconify-icon icon="mdi:tune-variant"></iconify-icon></span><h3 class="oc-feature-card__title">Slow and high</h3><p class="oc-feature-card__text"><code>--oc-hover-lift: 10px</code> and <code>--oc-hover-duration: 0.7s</code> on the grid.</p></article>
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:view-grid-outline"></iconify-icon></span><h3 class="oc-feature-card__title">Same grid</h3><p class="oc-feature-card__text">Every card in the grid follows the tokens.</p></article>
+</div>