@birdycom/omniaui 0.12.5 → 0.13.0

package/snippets/icon-list.html

@@ -0,0 +1,28 @@
+<!-- OmniaUI component: icon-list - Lists for a company site: rows with an icon in a frame, points with an icon tile, a title and a text, and a list with markers in the accent color. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/icon-list.html | Map: icon rows -> points -> accent list, badges and tagline.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-icon-list: Rows with an icon (svg, iconify-icon) in the primary color, each in a frame.
+       .oc-icon-list--points: Points: an icon tile next to .oc-icon-list__title and .oc-icon-list__text, no frames.
+       .oc-list--accent: Disc list in muted text with markers in --oc-accent-from.
+       .oc-note: Small muted note under a block (0.85rem).
+       .oc-badge-row: Row of badges or pills above a title.
+       .oc-tagline--accent: Tagline in the accent color, lighter in dark mode.
+-->
+<ul class="oc-icon-list" style="inline-size:min(100%, 26rem)">
+  <li><iconify-icon icon="mdi:shield-lock-outline" aria-hidden="true"></iconify-icon>Internal tools behind a login</li>
+  <li><iconify-icon icon="mdi:database-sync-outline" aria-hidden="true"></iconify-icon>Links between existing systems</li>
+  <li><iconify-icon icon="mdi:file-document-outline" aria-hidden="true"></iconify-icon>Reports and exports</li>
+</ul>
+<ul class="oc-icon-list oc-icon-list--points" style="inline-size:min(100%, 30rem)">
+  <li><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:server-security"></iconify-icon></span><span class="oc-icon-list__title">Runs on your own server</span><span class="oc-icon-list__text">Your data does not leave the building.</span></li>
+  <li><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:account-key-outline"></iconify-icon></span><span class="oc-icon-list__title">Only for your team</span><span class="oc-icon-list__text">Sign in with the accounts you already have.</span></li>
+</ul>
+<div class="oc-accent--green" style="inline-size:min(100%, 34rem)">
+  <div class="oc-badge-row"><span class="oc-pill">Web app</span><span class="oc-pill">Since 2020</span></div>
+  <p class="oc-tagline--accent">Plan every shift in one view</p>
+  <ul class="oc-list--accent">
+    <li>Drag a shift to another day.</li>
+    <li>Everyone sees their own schedule on the phone.</li>
+  </ul>
+  <p class="oc-note">The demo resets every hour.</p>
+</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="oc-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="oc-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="oc-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="oc-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="oc-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="oc-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="oc-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>

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 oc-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 oc-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 oc-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 oc-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/page-sections.html

@@ -0,0 +1,50 @@
+<!-- OmniaUI component: page-sections - Building blocks for the pages of a company site: the header of an inner page, a section head, a row of buttons, a group title with a count, a full-width band and a meta line. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/page-sections.html | Map: inner page header -> section head, group title and more row -> centered head and buttons.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-section-pad--page: Header of an inner page: padding clamp(4rem, 10vw, 7rem) on top, clamp(2rem, 5vw, 3rem) below.
+       .oc-display--page: Larger display title for that header: clamp(2.5rem, 6.5vw, 4.75rem).
+       .oc-section-head: Head of a section (eyebrow, title, lead): max 46rem, 3rem below. --center centers it.
+       .oc-section-more: Row under a section (a <em>see all</em> link): 2.5rem above.
+       .oc-actions: Row of buttons that wraps: gap .75rem, 2rem above. --center, --end, --tight (1rem above).
+       .oc-group-title: Title of a group of cards; .oc-group-title__count is the number in a pill.
+       .oc-band: Band over the full width with a line above and below (--oc-band-bg, surface); the content stays in its .oc-container.
+       .oc-meta: Meta line under a title: version · date. Subtle text (--oc-subtle-foreground), 0.9rem.
+-->
+<section class="oc-section-pad--page" style="inline-size:100%">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Contact</p>
+    <h1 class="oc-display oc-display--page">Let's <span class="oc-text-gradient">talk</span></h1>
+    <p class="oc-lead">A new project, a question about one of our apps or help with your IT? We would like to hear from you.</p>
+    <p class="oc-meta">Version 2 · 30 October 2026</p>
+    <div class="oc-actions">
+      <a class="oc-btn oc-btn--lg" href="#form">Send a message</a>
+      <a class="oc-btn oc-btn--outline oc-btn--lg" href="tel:+3230000000">Call us</a>
+    </div>
+  </div>
+</section>
+<section style="inline-size:100%">
+  <div class="oc-section-head">
+    <p class="oc-eyebrow">Software</p>
+    <h2 class="oc-display oc-display--md">Our own products</h2>
+    <p class="oc-lead">Apps we build, sell and maintain ourselves.</p>
+  </div>
+  <h3 class="oc-group-title">Business apps <span class="oc-group-title__count">3</span></h3>
+  <div class="oc-card-grid">
+    <div class="oc-card" style="padding:1.25rem">Product 1</div>
+    <div class="oc-card" style="padding:1.25rem">Product 2</div>
+    <div class="oc-card" style="padding:1.25rem">Product 3</div>
+  </div>
+  <div class="oc-section-more">
+    <a class="oc-link-arrow" href="#products">See all products</a>
+  </div>
+</section>
+<section style="inline-size:100%">
+  <div class="oc-section-head oc-section-head--center">
+    <h2 class="oc-display oc-display--md">Ready for the next step?</h2>
+    <p class="oc-lead" style="margin-inline:auto">Tell us what you need; we answer within one working day.</p>
+    <div class="oc-actions oc-actions--center">
+      <a class="oc-btn oc-btn--lg" href="#contact">Start a project</a>
+      <a class="oc-btn oc-btn--ghost oc-btn--lg" href="#work">See our work</a>
+    </div>
+  </div>
+</section>

package/snippets/panel.html

@@ -0,0 +1,18 @@
+<!-- OmniaUI component: panel - A framed panel on the page for a form, a call to action or a feature: card background, strong border, large radius and an optional soft glow in a corner. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/panel.html | Map: panel with a glow -> glow positions.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-panel: The panel: padding clamp(1.5rem, 4vw, 2.5rem) (--oc-panel-padding), --oc-border-strong, radius 1.2 × --oc-radius-lg, scroll-margin-top from --oc-scroll-offset (6rem).
+       .oc-panel--glow: A soft light in the top start corner in --oc-panel-glow-color (brand 1); --oc-panel-glow-at moves it.
+       .oc-panel--glow-end: The light in the top end corner.
+       .oc-panel--glow-both: Two lights: brand 1 top start and brand 3 bottom end (call to action).
+-->
+<div class="oc-panel oc-panel--glow" style="inline-size:min(100%, 34rem)">
+  <h2 style="margin:0 0 0.5rem;font-size:1.35rem">Send us a message</h2>
+  <p class="oc-text-muted" style="margin:0">We usually answer within one working day.</p>
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem;inline-size:100%">
+  <div class="oc-panel"><strong>.oc-panel</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">No light.</p></div>
+  <div class="oc-panel oc-panel--glow"><strong>--glow</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Top start.</p></div>
+  <div class="oc-panel oc-panel--glow oc-panel--glow-end"><strong>--glow-end</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Top end.</p></div>
+  <div class="oc-panel oc-panel--glow-both"><strong>--glow-both</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Two lights.</p></div>
+</div>

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/result.html

@@ -0,0 +1,31 @@
+<!-- OmniaUI component: result - The outcome of an action in the place where the form was: an icon tile, a title, a short text and a button such as Send another message. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/result.html | Map: message sent -> centered.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-result: The result: tile, title, text and actions stacked, aligned at the start.
+       .oc-result__title: The title (1.2rem).
+       .oc-result__text: Muted text; links in the primary color, underlined.
+       .oc-result__actions: Row of buttons under the text.
+       .oc-result--center: Centers everything (an empty state or a full page).
+       role="status" tabindex="-1": Announces the result and lets the script move the focus to it.
+-->
+<div class="oc-panel" style="inline-size:min(100%, 34rem)">
+  <div class="oc-result" role="status" tabindex="-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:check"></iconify-icon></span>
+    <h2 class="oc-result__title">Thank you, your message was sent</h2>
+    <p class="oc-result__text">You will get a confirmation by e-mail.<br>Urgent? Call us on <a href="tel:+3230000000">+32 3 000 00 00</a>.</p>
+    <div class="oc-result__actions">
+      <a class="oc-btn oc-btn--outline" href="#contact-form">Send another message</a>
+    </div>
+  </div>
+</div>
+<div class="oc-panel" style="inline-size:min(100%, 34rem)">
+  <div class="oc-result oc-result--center" role="status" tabindex="-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--orange" aria-hidden="true"><iconify-icon icon="mdi:clock-outline"></iconify-icon></span>
+    <h2 class="oc-result__title">Your request is waiting for approval</h2>
+    <p class="oc-result__text">Customer 1 gets an e-mail as soon as it is approved.</p>
+    <div class="oc-result__actions">
+      <a class="oc-btn" href="#orders">Back to the orders</a>
+      <a class="oc-btn oc-btn--ghost" href="#request">View the request</a>
+    </div>
+  </div>
+</div>

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="oc-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="oc-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="oc-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="oc-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="oc-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="oc-text-muted">Invoice date</dt><dd style="margin:0">2 November 2026</dd>
+    <dt class="oc-text-muted">Paid on</dt><dd style="margin:0">9 November 2026</dd>
+    <dt class="oc-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>