@birdycom/omniaui 0.12.5 → 0.12.6

package/snippets/meter-row.html

@@ -0,0 +1,29 @@
+<!-- OmniaUI component: meter-row - Usage line with a label, the amount as text, a colored bar and when it resets. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/meter-row.html | Map: meter row demo markup.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-meter-row: Grid: label and value on the first line, the bar and the reset line below.
+       --oc-meter: The fill, 0–100% (inline style or your code).
+       data-level="warn" / "critical": Orange / red bar (and a red value at critical). Without it the bar is green.
+       .oc-meter-row__bar[role=meter]: The bar; give it aria-valuenow and a label for screen readers.
+       .oc-meter-list (--compact): A stack of rows; --compact for a small widget.
+-->
+<div class="oc-meter-list" style="inline-size:min(100%,28rem)">
+  <div class="oc-meter-row" style="--oc-meter: 62%">
+    <span class="oc-meter-row__label">Session (5 hours)</span>
+    <span class="oc-meter-row__value"><strong>62%</strong> · 31k / 50k tokens</span>
+    <span class="oc-meter-row__bar" role="meter" aria-label="Session (5 hours)" aria-valuemin="0" aria-valuemax="100" aria-valuenow="62"></span>
+    <span class="oc-meter-row__reset"><iconify-icon icon="mdi:timer-sand" aria-hidden="true"></iconify-icon>Resets in 2 h 14 min</span>
+  </div>
+  <div class="oc-meter-row" data-level="warn" style="--oc-meter: 81%">
+    <span class="oc-meter-row__label">Week</span>
+    <span class="oc-meter-row__value"><strong>81%</strong> · 1.6M / 2M tokens</span>
+    <span class="oc-meter-row__bar" role="meter" aria-label="Week" aria-valuemin="0" aria-valuemax="100" aria-valuenow="81"></span>
+    <span class="oc-meter-row__reset"><iconify-icon icon="mdi:timer-sand" aria-hidden="true"></iconify-icon>Resets Monday 09:00</span>
+  </div>
+  <div class="oc-meter-row" data-level="critical" style="--oc-meter: 96%">
+    <span class="oc-meter-row__label">Storage</span>
+    <span class="oc-meter-row__value"><strong>96%</strong> · 9.6 / 10 GB</span>
+    <span class="oc-meter-row__bar" role="meter" aria-label="Storage" aria-valuemin="0" aria-valuemax="100" aria-valuenow="96"></span>
+    <span class="oc-meter-row__reset"><iconify-icon icon="mdi:timer-sand" aria-hidden="true"></iconify-icon>Upgrade or clean up to keep syncing</span>
+  </div>
+</div>

package/snippets/name-card.html

@@ -0,0 +1,72 @@
+<!-- OmniaUI component: name-card - Collapsible card with a name, rename pencil, amount and delete button; nests for titles and parts. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/name-card.html | Map: name card demo markup. Behaviour: form-extras.js.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-name-card: The card: a <details>; open shows the content.
+       .oc-name-card__head: The <summary>: chevron, name, rename, meta, amount and actions on one line.
+       .oc-name-card__title / __meta / __amount: Name (cut with an ellipsis), a quiet extra ("6 articles") and the amount (tabular numbers, pushed right).
+       .oc-name-card__actions: Buttons on the right, e.g. a soft destructive delete.
+       [data-oc-rename]: With form-extras.js: the pencil turns the name into an input; Enter or leaving the field saves (oc-namecard-rename event with the name), Escape cancels.
+       .oc-name-card__body: The content. Name cards inside it are the parts of a title (quieter surface).
+       .oc-name-card--total: The amount of this card in the primary color (a total).
+-->
+<div style="display:grid;gap:0.5rem;inline-size:min(100%,40rem)">
+<details class="oc-name-card oc-name-card--total" open>
+  <summary class="oc-name-card__head">
+    <span class="oc-name-card__title">Kitchen – ground floor</span>
+    <button type="button" class="oc-btn oc-btn--plain" data-oc-rename aria-label="Rename Kitchen – ground floor" title="Rename"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
+    
+    <span class="oc-name-card__amount">€ 8.480,00</span>
+    <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Kitchen – ground floor" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
+  </summary>
+  <div class="oc-name-card__body">
+<details class="oc-name-card">
+  <summary class="oc-name-card__head">
+    <span class="oc-name-card__title">Base cabinets</span>
+    <button type="button" class="oc-btn oc-btn--plain" data-oc-rename aria-label="Rename Base cabinets" title="Rename"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
+    <span class="oc-name-card__meta">6 articles</span>
+    <span class="oc-name-card__amount">€ 4.180,00</span>
+    <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Base cabinets" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
+  </summary>
+  <div class="oc-name-card__body">
+    <p class="m-0 text-muted">6 articles · 2 options</p>
+  </div>
+</details>
+<details class="oc-name-card">
+  <summary class="oc-name-card__head">
+    <span class="oc-name-card__title">Wall cabinets</span>
+    <button type="button" class="oc-btn oc-btn--plain" data-oc-rename aria-label="Rename Wall cabinets" title="Rename"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
+    <span class="oc-name-card__meta">4 articles</span>
+    <span class="oc-name-card__amount">€ 2.360,00</span>
+    <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Wall cabinets" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
+  </summary>
+  <div class="oc-name-card__body">
+    <p class="m-0 text-muted">4 articles</p>
+  </div>
+</details>
+<details class="oc-name-card">
+  <summary class="oc-name-card__head">
+    <span class="oc-name-card__title">Worktop</span>
+    <button type="button" class="oc-btn oc-btn--plain" data-oc-rename aria-label="Rename Worktop" title="Rename"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
+    <span class="oc-name-card__meta">1 article</span>
+    <span class="oc-name-card__amount">€ 1.940,00</span>
+    <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Worktop" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
+  </summary>
+  <div class="oc-name-card__body">
+    <p class="m-0 text-muted">1 article · cut to size</p>
+  </div>
+</details>
+  </div>
+</details>
+<details class="oc-name-card">
+  <summary class="oc-name-card__head">
+    <span class="oc-name-card__title">Bathroom – first floor</span>
+    <button type="button" class="oc-btn oc-btn--plain" data-oc-rename aria-label="Rename Bathroom – first floor" title="Rename"><iconify-icon icon="mdi:pencil-outline" aria-hidden="true"></iconify-icon></button>
+    
+    <span class="oc-name-card__amount">€ 3.215,50</span>
+    <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Bathroom – first floor" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
+  </summary>
+  <div class="oc-name-card__body">
+    <p class="m-0 text-muted">Add a part with the button below.</p>
+  </div>
+</details>
+</div>

package/snippets/page-header.html

@@ -14,7 +14,7 @@
     <div class="oc-page-header-text">
       <h1 class="oc-page-header-title">Kitchen renovation <span class="oc-badge oc-badge--success">Active</span></h1>
       <p class="oc-page-header-subtitle">Main street 12, Ghent - started 2 September 2026.</p>
-      <div class="oc-page-header-meta"><span>Owner: Ada Lovelace</span><span>Updated 2 hours ago</span></div>
+      <div class="oc-page-header-meta"><span>Owner: Contact 1</span><span>Updated 2 hours ago</span></div>
     </div>
     <div class="oc-page-header-actions">
       <button class="oc-btn oc-btn--outline" type="button">Share</button>

package/snippets/price.html

@@ -0,0 +1,25 @@
+<!-- OmniaUI component: price - A price with old price, discount, VAT note and the amount incl. or excl. VAT. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/price.html | Map: prices.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-price: The block: __main line, then __note and __alt below.
+       .oc-price__amount: The price (bold, tabular digits, never wraps).
+       .oc-price__old: The old price, struck through. Add an .oc-badge in __main for the discount.
+       .oc-price__note / __alt: A quiet note ("excl. VAT") and the other amount ("€ 121,00 incl. VAT").
+       .oc-price--sm / --lg / --sale: Smaller or larger amount; --sale colors the amount red.
+       .oc-price--inline / --end: Amount and note on one line (lists); right aligned (also automatic in a td[data-numeric]).
+-->
+<div class="flex flex-wrap gap-2 align-items-start">
+  <div class="oc-price oc-price--lg">
+    <div class="oc-price__main"><span class="oc-price__amount">€ 149,00</span></div>
+    <span class="oc-price__note">excl. VAT</span>
+    <span class="oc-price__alt">€ 180,29 incl. VAT</span>
+  </div>
+  <div class="oc-price oc-price--lg oc-price--sale">
+    <div class="oc-price__main"><span class="oc-price__amount">€ 119,00</span><s class="oc-price__old">€ 149,00</s><span class="oc-badge oc-badge--destructive">-20%</span></div>
+    <span class="oc-price__note">incl. VAT · free delivery</span>
+  </div>
+  <div class="oc-price oc-price--sm">
+    <div class="oc-price__main"><span class="oc-price__amount">€ 6,40</span></div>
+    <span class="oc-price__note">per piece · from 10 pieces € 5,90</span>
+  </div>
+</div>

package/snippets/prose.html

@@ -20,7 +20,7 @@
   </ul>
   <figure>
     <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
-    <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+    <figcaption>Project 1: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
   </figure>
   <h3>From design to installation</h3>
   <ol>
@@ -31,7 +31,7 @@
   </ol>
   <blockquote>
     <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-    <footer>— Ann Dewitte, client in Ghent</footer>
+    <footer>— Customer 8, client in Ghent</footer>
   </blockquote>
   <h2>Worktop materials compared</h2>
   <table>
@@ -45,7 +45,7 @@
   </table>
   <h3>Sharing your floor plan</h3>
   <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-  <pre><code>Project:   2026-114 Villa Dewitte
+  <pre><code>Project:   2026-114 Project 1
 Room:      Kitchen, ground floor
 Wall A:    412 cm (window at 160 cm)
 Wall B:    298 cm (door at the left)</code></pre>

package/snippets/quantity.html

@@ -0,0 +1,12 @@
+<!-- OmniaUI component: quantity - Number field with minus and plus buttons for amounts in carts, orders and stock. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/quantity.html | Map: quantity.
+     Behaviour: form-extras.js (npx omniaui copy-js form-extras); works without it.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-quantity: The frame. --sm for a 2rem field in tables and carts.
+       .oc-quantity__input: A native type="number" with min, max, step and name; the spinners are hidden.
+       [data-oc-step="-1"] / [data-oc-step="1"]: The minus and plus buttons (.oc-quantity__step); with form-extras.js they change the value and fire input and change.
+-->
+<div class="flex flex-wrap gap-2 align-items-center">
+  <div class="oc-quantity"><button class="oc-quantity__step" type="button" data-oc-step="-1" aria-label="Decrease quantity"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13H5v-2h14z"/></svg></button><input class="oc-quantity__input" id="oc-qty-demo-1" type="number" inputmode="numeric" name="quantity" value="1" min="1" max="10" step="1" aria-label="Quantity"><button class="oc-quantity__step" type="button" data-oc-step="1" aria-label="Increase quantity"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg></button></div>
+  <div class="oc-quantity oc-quantity--sm"><button class="oc-quantity__step" type="button" data-oc-step="-1" aria-label="Decrease pieces"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13H5v-2h14z"/></svg></button><input class="oc-quantity__input" id="oc-qty-demo-2" type="number" inputmode="numeric" name="quantity" value="12" min="0" max="500" step="1" aria-label="Pieces"><button class="oc-quantity__step" type="button" data-oc-step="1" aria-label="Increase pieces"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></svg></button></div>
+</div>

package/snippets/rating.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: rating - Star rating: show a score with halves, or let people pick 1 to 5 stars. No JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/rating.html | Map: score and summary -> pick a rating.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-rating: The stars of a score. --oc-rating is the score (decimals work), --oc-rating-max the number of stars (default 5). Give it role="img" and an aria-label ("4.5 out of 5").
+       .oc-rating--sm / --lg: Smaller or larger stars (--oc-rating-size sets any size).
+       .oc-rating-summary: Stars, the score (__score) and the number of reviews (__count, a link or text) on one line.
+       fieldset.oc-rating-input: Five <label>s with a radio inside (value 1–5) and a hidden text ("3 stars"). The checked or hovered star fills the stars before it. --sm / --lg sizes.
+       --oc-rating-color / --oc-rating-empty: Colors of the filled and empty stars (default: the warning token and a light muted tone).
+-->
+<div class="flex flex-column gap-1">
+  <span class="oc-rating" style="--oc-rating: 4.5" role="img" aria-label="4.5 out of 5"></span>
+  <div class="oc-rating-summary">
+    <span class="oc-rating oc-rating--sm" style="--oc-rating: 4.2" role="img" aria-label="4.2 out of 5"></span>
+    <span class="oc-rating-summary__score">4.2</span>
+    <a class="oc-rating-summary__count" href="#reviews">128 reviews</a>
+  </div>
+  <span class="oc-rating oc-rating--lg" style="--oc-rating: 3" role="img" aria-label="3 out of 5"></span>
+</div>
+<fieldset class="oc-rating-input oc-rating-input--lg">
+  <legend>Your rating</legend>
+  <label><input type="radio" name="oc-rating-demo" value="1"><span>1 star</span></label>
+  <label><input type="radio" name="oc-rating-demo" value="2"><span>2 stars</span></label>
+  <label><input type="radio" name="oc-rating-demo" value="3"><span>3 stars</span></label>
+  <label><input type="radio" name="oc-rating-demo" value="4" checked><span>4 stars</span></label>
+  <label><input type="radio" name="oc-rating-demo" value="5"><span>5 stars</span></label>
+</fieldset>

package/snippets/ribbon.html

@@ -0,0 +1,48 @@
+<!-- OmniaUI component: ribbon - A diagonal band across a corner of a card, image or document: Paid, New, Sale. Pick the corner and the tone. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/ribbon.html | Map: pick a corner -> on a document -> tones and sizes.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-ribbon: The band, a child of the card or image box. That box gets position: relative and clips the band automatically (:has(), zero specificity).
+       .oc-ribbon--top-start / --bottom-start / --bottom-end: The corner; without a modifier it sits top end (top right in a left-to-right page). Start and end follow the writing direction.
+       .oc-ribbon--success / --warning / --destructive / --muted: Tone; the default is the primary color.
+       .oc-ribbon--sm / --lg: A smaller band (product card) or a larger one (document, hero image).
+       --oc-ribbon-inset: Distance from the corner to the middle of the band (2.25rem); the band length follows it.
+       --oc-ribbon-bg / --oc-ribbon-fg: Your own colors, for example a brand color or a gradient.
+-->
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;inline-size:100%">
+  <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
+    <span class="oc-ribbon oc-ribbon--top-start">New</span>
+    <div><strong>Top start</strong><br><small class="text-muted">--top-start</small></div>
+  </div>
+  <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
+    <span class="oc-ribbon oc-ribbon--success">Paid</span>
+    <div><strong>Top end</strong><br><small class="text-muted">default</small></div>
+  </div>
+  <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
+    <span class="oc-ribbon oc-ribbon--bottom-start oc-ribbon--warning">Due soon</span>
+    <div><strong>Bottom start</strong><br><small class="text-muted">--bottom-start</small></div>
+  </div>
+  <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
+    <span class="oc-ribbon oc-ribbon--bottom-end oc-ribbon--destructive">Overdue</span>
+    <div><strong>Bottom end</strong><br><small class="text-muted">--bottom-end</small></div>
+  </div>
+</div>
+<article class="oc-card" style="max-inline-size:30rem;inline-size:100%;padding:1.5rem;display:grid;gap:1rem">
+  <span class="oc-ribbon oc-ribbon--success oc-ribbon--lg">Paid</span>
+  <header style="display:grid;gap:0.25rem">
+    <span class="text-muted" style="font-size:0.8125rem">Invoice</span>
+    <strong style="font-size:1.25rem">2026-0042</strong>
+    <span style="font-size:0.875rem">Customer 1 · info@company1.example</span>
+  </header>
+  <dl style="display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1rem;margin:0;font-size:0.875rem">
+    <dt class="text-muted">Invoice date</dt><dd style="margin:0">2 November 2026</dd>
+    <dt class="text-muted">Paid on</dt><dd style="margin:0">9 November 2026</dd>
+    <dt class="text-muted">Total</dt><dd style="margin:0"><strong>€ 1.210,00</strong></dd>
+  </dl>
+</article>
+<div style="display:flex;flex-wrap:wrap;gap:1rem">
+  <div class="oc-card" style="inline-size:9rem;block-size:7rem"><span class="oc-ribbon oc-ribbon--sm">New</span></div>
+  <div class="oc-card" style="inline-size:9rem;block-size:7rem"><span class="oc-ribbon oc-ribbon--sm oc-ribbon--destructive">Sale</span></div>
+  <div class="oc-card" style="inline-size:9rem;block-size:7rem"><span class="oc-ribbon oc-ribbon--sm oc-ribbon--muted">Draft</span></div>
+  <div class="oc-card" style="inline-size:11rem;block-size:7rem"><span class="oc-ribbon oc-ribbon--warning">Beta</span></div>
+  <div class="oc-card" style="inline-size:13rem;block-size:7rem"><span class="oc-ribbon oc-ribbon--lg" style="--oc-ribbon-bg:linear-gradient(90deg,var(--oc-accent-from,var(--oc-primary)),var(--oc-accent-to,var(--oc-primary)))">Pro</span></div>
+</div>

package/snippets/sidebar.html

@@ -18,7 +18,7 @@
   <div class="oc-sidebar-header">
     <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
       <svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
-      <span class="oc-sidebar-menu-label"><strong>OmniaDesk</strong></span>
+      <span class="oc-sidebar-menu-label"><strong>Company 1</strong></span>
     </a>
   </div>
   <div class="oc-sidebar-content">
@@ -48,8 +48,8 @@
   </div>
   <div class="oc-sidebar-footer">
     <div class="oc-user">
-      <span class="oc-avatar oc-avatar--sm">SC</span>
-      <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+      <span class="oc-avatar oc-avatar--sm">U1</span>
+      <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
     </div>
   </div>
 </aside>

package/snippets/spec-list.html

@@ -0,0 +1,34 @@
+<!-- OmniaUI component: spec-list - Technical specifications in named groups: label and value rows, two columns when there is room. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/spec-list.html | Map: specifications.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-spec-list: The list (a container): groups side by side from 40rem wide. --stack keeps one column.
+       .oc-spec-group / __title: A group and its title (small caps, an optional icon).
+       dl.oc-spec-group__rows > .oc-spec-row: The rows: a <div> with <dt> (label) and <dd> (value; a <small> inside is a quiet unit or note).
+-->
+<div class="oc-spec-list">
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Dimensions</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Height</dt><dd>52 cm</dd></div>
+      <div class="oc-spec-row"><dt>Shade diameter</dt><dd>28 cm</dd></div>
+      <div class="oc-spec-row"><dt>Base</dt><dd>18 × 18 cm</dd></div>
+      <div class="oc-spec-row"><dt>Weight</dt><dd>2.4 kg</dd></div>
+    </dl>
+  </section>
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Electrical</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Lamp holder</dt><dd>E27 <small>max. 40 W</small></dd></div>
+      <div class="oc-spec-row"><dt>Cable</dt><dd>1.8 m, with switch</dd></div>
+      <div class="oc-spec-row"><dt>Energy class</dt><dd>A+</dd></div>
+    </dl>
+  </section>
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Article</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Article number</dt><dd>PRD-0001</dd></div>
+      <div class="oc-spec-row"><dt>EAN</dt><dd>5400000000010</dd></div>
+      <div class="oc-spec-row"><dt>Warranty</dt><dd>24 months</dd></div>
+    </dl>
+  </section>
+</div>

package/snippets/stock.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: stock - Stock status with a colored dot: in stock, low, out of stock or on order. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/stock.html | Map: stock.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-stock: A dot and the text. Without data-level the dot is green (in stock).
+       data-level="low" / "out" / "order": Orange (only a few left), red (out of stock), blue (on order).
+       .oc-stock__count / __note: A bold number ("12") and a quiet extra ("delivered in 2–3 days").
+       .oc-stock--badge: A tinted pill for tables and product cards.
+-->
+<div class="flex flex-column gap-1">
+  <span class="oc-stock"><span><span class="oc-stock__count">24</span> in stock</span> <span class="oc-stock__note">· delivered in 1–2 days</span></span>
+  <span class="oc-stock" data-level="low">Only <span class="oc-stock__count">3</span> left</span>
+  <span class="oc-stock" data-level="out">Out of stock</span>
+  <span class="oc-stock" data-level="order">On order <span class="oc-stock__note">· expected 14 November</span></span>
+  <div class="flex flex-wrap gap-0.5">
+    <span class="oc-stock oc-stock--badge">In stock</span>
+    <span class="oc-stock oc-stock--badge" data-level="low">Low</span>
+    <span class="oc-stock oc-stock--badge" data-level="out">Out</span>
+    <span class="oc-stock oc-stock--badge" data-level="order">On order</span>
+  </div>
+</div>

package/snippets/table-actions.html

@@ -14,15 +14,15 @@
     </thead>
     <tbody>
       <tr>
-        <td>Ada Lovelace</td><td>ada@example.com</td>
+        <td>Contact 1</td><td>info@contact1.example</td>
         <td class="oc-table-actions oc-table-actions--icons">
-          <a class="oc-table-actions-icon oc-table-actions-icon--primary" href="#" aria-label="View Ada" title="View"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></a>
-          <a class="oc-table-actions-icon" href="#" aria-label="Edit Ada" title="Edit"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></a>
-          <button class="oc-table-actions-icon oc-table-actions-icon--destructive" type="button" aria-label="Delete Ada" title="Delete"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
+          <a class="oc-table-actions-icon oc-table-actions-icon--primary" href="#" aria-label="View Contact 1" title="View"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></a>
+          <a class="oc-table-actions-icon" href="#" aria-label="Edit Contact 1" title="Edit"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></a>
+          <button class="oc-table-actions-icon oc-table-actions-icon--destructive" type="button" aria-label="Delete Contact 1" title="Delete"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
         </td>
       </tr>
       <tr>
-        <td>Alan Turing</td><td>alan@example.com</td>
+        <td>Contact 2</td><td>info@contact2.example</td>
         <td class="oc-table-actions">
           <button class="oc-table-actions-more" type="button" popovertarget="oc-table-actions-menu-alan" aria-label="Actions for Alan"></button>
           <div class="oc-dropdown-menu" id="oc-table-actions-menu-alan" popover>

package/snippets/table.html

@@ -15,12 +15,12 @@
     <tbody>
       <tr aria-selected="true">
         <td><input class="oc-checkbox" type="checkbox" checked aria-label="Select Ada"></td>
-        <td>Ada Lovelace</td><td>ada@example.com</td><td data-numeric>1,250.00</td>
+        <td>Contact 1</td><td>info@contact1.example</td><td data-numeric>1,250.00</td>
         <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
       </tr>
       <tr>
         <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan"></td>
-        <td>Alan Turing</td><td>alan@example.com</td><td data-numeric>0.00</td>
+        <td>Contact 2</td><td>info@contact2.example</td><td data-numeric>0.00</td>
         <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
       </tr>
     </tbody>

package/snippets/titlebar.html

@@ -12,7 +12,7 @@
 <div class="oc-titlebar-window" style="block-size: 16rem">
   <header class="oc-titlebar">
     <div class="oc-titlebar__main">
-      <span class="oc-titlebar__title">TokenTally</span>
+      <span class="oc-titlebar__title">App 1</span>
       <span class="oc-titlebar__subtitle">Usage</span>
     </div>
     <div class="oc-titlebar__actions">

package/snippets/user.html

@@ -7,9 +7,9 @@
        .oc-user-email: Secondary line (truncates)
 -->
 <div class="oc-user">
-  <span class="oc-avatar">SC</span>
+  <span class="oc-avatar">U1</span>
   <span class="oc-user-text">
-    <span class="oc-user-name">Serge Cools</span>
-    <span class="oc-user-email">serge@example.com</span>
+    <span class="oc-user-name">User 1</span>
+    <span class="oc-user-email">user1@company1.example</span>
   </span>
 </div>

package/dist/parts/app-column-menu.css

@@ -1,85 +0,0 @@
-/* File: packages/ui/src/parts/app-column-menu.css | Map: menu panel -> title + list -> item states -> footer -> CSS-only column hiding (scope) */
-/* Column menu: a popover with one checkbox per table column (column visibility).
-   CSS-only hiding: wrap the menu and the table in .oc-column-menu-scope and give each checkbox
-   data-col="<column number>". An unchecked box hides that column (th and td) through :has(). */
-
-/* Panel look. Without the popover attribute it is a normal block (e.g. inside a sheet or sidebar). */
-.oc-column-menu {
-  inline-size: 14rem;
-  max-inline-size: calc(100vw - 1rem);
-  padding: 0.375rem;
-  font-size: 0.875rem;
-  color: var(--oc-popover-foreground);
-  background: var(--oc-popover);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
-}
-/* As a popover: in the top layer, tethered to its trigger like the dropdown. */
-.oc-column-menu[popover] {
-  position: fixed;
-  inset: auto;
-  margin: 4px 0 0;
-  position-area: block-end span-inline-start;
-  position-try-fallbacks: flip-block, flip-inline;
-  transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
-}
-.oc-column-menu[popover]:popover-open {
-  display: block;
-  @starting-style { opacity: 0; }
-}
-
-/* Small heading above the list ("Columns"). */
-.oc-column-menu-title {
-  margin: 0;
-  padding: 0.375rem 0.5rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--oc-muted-foreground);
-}
-
-/* The list is a <form>, so a native <button type="reset"> restores the default columns. */
-.oc-column-menu-list { display: grid; gap: 1px; margin: 0; max-block-size: 18rem; overflow-y: auto; }
-
-/* One row: label around a checkbox and the column name. */
-.oc-column-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  user-select: none;
-}
-.oc-column-menu-item:hover { background: var(--oc-accent); }
-.oc-column-menu-item:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-column-menu-item input { margin: 0; accent-color: var(--oc-primary); }
-/* Locked column (always visible): <input disabled checked>. */
-.oc-column-menu-item:has(input:disabled) { color: var(--oc-muted-foreground); cursor: default; }
-.oc-column-menu-item:has(input:disabled):hover { background: none; }
-
-/* Footer row with "Reset" (type="reset") or other small buttons. */
-.oc-column-menu-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  margin-block-start: 0.375rem;
-  padding-block-start: 0.375rem;
-  border-block-start: 1px solid var(--oc-border);
-}
-
-/* ---- CSS-only column hiding (columns 1 to 10) ---- */
-.oc-column-menu-scope:has([data-col="1"]:not(:checked)) .oc-table :is(th, td):nth-child(1),
-.oc-column-menu-scope:has([data-col="2"]:not(:checked)) .oc-table :is(th, td):nth-child(2),
-.oc-column-menu-scope:has([data-col="3"]:not(:checked)) .oc-table :is(th, td):nth-child(3),
-.oc-column-menu-scope:has([data-col="4"]:not(:checked)) .oc-table :is(th, td):nth-child(4),
-.oc-column-menu-scope:has([data-col="5"]:not(:checked)) .oc-table :is(th, td):nth-child(5),
-.oc-column-menu-scope:has([data-col="6"]:not(:checked)) .oc-table :is(th, td):nth-child(6),
-.oc-column-menu-scope:has([data-col="7"]:not(:checked)) .oc-table :is(th, td):nth-child(7),
-.oc-column-menu-scope:has([data-col="8"]:not(:checked)) .oc-table :is(th, td):nth-child(8),
-.oc-column-menu-scope:has([data-col="9"]:not(:checked)) .oc-table :is(th, td):nth-child(9),
-.oc-column-menu-scope:has([data-col="10"]:not(:checked)) .oc-table :is(th, td):nth-child(10) { display: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-column-menu[popover] { transition: none; }
-}

package/snippets/column-menu.html

@@ -1,38 +0,0 @@
-<!-- OmniaUI component: column-menu - Column visibility checklist in a popover; hides table columns with :has() - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/column-menu.html | Map: scope -> toolbar with trigger -> popover (title, form with checkboxes, reset) -> table
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-column-menu-scope: Wrapper around menu + table. An unchecked [data-col="n"] hides column n (1-10) of the .oc-table inside.
-       .oc-column-menu[popover]: Popover panel, opened with button[popovertarget]
-       .oc-column-menu-title: Small heading
-       form.oc-column-menu-list: The checkbox list (a form, so button type="reset" restores the defaults)
-       .oc-column-menu-item: label + input[type=checkbox][data-col]. State: input disabled = locked column.
-       .oc-column-menu-footer: Row for Reset / Done buttons
-     Slots: title, one item per column, footer buttons
--->
-<div class="oc-column-menu-scope">
-  <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-column-menu-demo">Columns</button>
-  </div>
-  <div class="oc-column-menu" id="oc-column-menu-demo" 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="1" checked disabled> Name</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="2" checked> E-mail</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="3" checked> City</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="4"> Phone</label>
-      <div class="oc-column-menu-footer">
-        <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">Reset</button>
-      </div>
-    </form>
-  </div>
-  <div class="oc-table-wrap">
-    <table class="oc-table">
-      <thead><tr><th>Name</th><th>E-mail</th><th>City</th><th>Phone</th></tr></thead>
-      <tbody>
-        <tr><td>Ada Lovelace</td><td>ada@example.com</td><td>London</td><td>+44 20 7946 0001</td></tr>
-        <tr><td>Alan Turing</td><td>alan@example.com</td><td>Manchester</td><td>+44 161 496 0002</td></tr>
-      </tbody>
-    </table>
-  </div>
-</div>