@birdycom/omniaui 0.0.0-stage → 0.11.0

package/snippets/item.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: item - Item: list row with media, content and actions. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-item: flex row (div, li or a). Variants: --outline, --muted, --sm, --interactive
+       .oc-item-media: left slot. Modifiers: --icon (boxed icon), --image
+       .oc-item-content: grows; holds .oc-item-title and .oc-item-description
+       .oc-item-actions: right slot (buttons)
+       .oc-item-header / .oc-item-footer: full-width rows above/below
+       .oc-item-group: vertical list of items; .oc-item-separator between them
+-->
+<div class="oc-item oc-item--outline">
+  <div class="oc-item-media oc-item-media--icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></div>
+  <div class="oc-item-content">
+    <p class="oc-item-title">Two-factor authentication</p>
+    <p class="oc-item-description">Verify sign-ins with an authenticator app.</p>
+  </div>
+  <div class="oc-item-actions"><button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Enable</button></div>
+</div>
+
+<div class="oc-item-group oc-item--outline" style="border:1px solid var(--oc-border);border-radius:var(--oc-radius);padding:.25rem">
+  <a class="oc-item oc-item--sm" href="#a"><div class="oc-item-media oc-item-media--icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg></div><div class="oc-item-content"><p class="oc-item-title">invoice-2026-014.pdf</p><p class="oc-item-description">128 KB &middot; today</p></div><div class="oc-item-actions"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></div></a>
+  <hr class="oc-item-separator">
+  <a class="oc-item oc-item--sm" href="#b"><div class="oc-item-media oc-item-media--icon"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></div><div class="oc-item-content"><p class="oc-item-title">Contracts</p><p class="oc-item-description">12 files</p></div><div class="oc-item-actions"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></div></a>
+</div>
+<div class="oc-item oc-item--muted">
+  <div class="oc-item-content"><p class="oc-item-title">Muted background, no media</p><p class="oc-item-description">Useful for inline notices and read-only rows.</p></div>
+</div>

package/snippets/kbd.html

@@ -0,0 +1,13 @@
+<!-- OmniaUI component: kbd - Keyboard key and shortcut group. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-kbd: one key (use on <kbd>)
+       .oc-kbd-group: row of keys with a gap; .oc-kbd-sep for a '+' between them
+-->
+<p style="margin:0;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.875rem">
+  Open the command palette with
+  <span class="oc-kbd-group"><kbd class="oc-kbd">Ctrl</kbd><kbd class="oc-kbd">K</kbd></span>
+  or press <kbd class="oc-kbd">/</kbd> to search.
+</p>
+
+<button class="oc-btn oc-btn--outline" type="button">Save <span class="oc-kbd-group"><kbd class="oc-kbd">&#8984;</kbd><kbd class="oc-kbd">S</kbd></span></button>
+<span class="oc-kbd-group"><kbd class="oc-kbd">Ctrl</kbd><span class="oc-kbd-sep">+</span><kbd class="oc-kbd">Shift</kbd><span class="oc-kbd-sep">+</span><kbd class="oc-kbd">P</kbd></span>

package/snippets/label.html

@@ -0,0 +1,9 @@
+<!-- OmniaUI component: label - Form label: block, inline (around a control), required mark, muted. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-label: block label above a control. Modifiers: --required (red asterisk), --inline (wraps a checkbox/radio), --muted (secondary text)
+-->
+<div class="oc-form-group">
+  <label class="oc-label oc-label--required" for="oc-label-email">E-mail</label>
+  <input class="oc-input" id="oc-label-email" type="email" placeholder="name@example.com">
+</div>
+<label class="oc-label oc-label--inline"><input class="oc-checkbox" type="checkbox"> Accept terms and conditions</label>

package/snippets/language-select.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: language-select - Compact language or currency switcher for a site header. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/language-select.html | Map: language pill (globe icon + select) -> currency pill (symbol + select)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-language-select: Pill frame around icon and select. Modifiers: --ghost (no frame), --currency (symbol in primary color).
+       .oc-language-select-icon: Leading icon (inline SVG) or symbol; aria-hidden="true"
+       .oc-language-select-control: The native <select> (give it an aria-label)
+     States: :focus-within (ring), disabled select (dimmed)
+     Behaviour: the app listens to "change" (navigate to /nl/..., set a cookie, or submit the form).
+-->
+<label class="oc-language-select">
+  <span class="oc-language-select-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg></span>
+  <select class="oc-language-select-control" name="locale" aria-label="Language">
+    <option value="en" selected>English</option>
+    <option value="nl">Nederlands</option>
+    <option value="fr">Fran&ccedil;ais</option>
+    <option value="de">Deutsch</option>
+  </select>
+</label>
+<label class="oc-language-select oc-language-select--currency">
+  <span class="oc-language-select-icon" aria-hidden="true">&euro;</span>
+  <select class="oc-language-select-control" name="currency" aria-label="Currency">
+    <option value="EUR" selected>EUR</option>
+    <option value="USD">USD</option>
+    <option value="GBP">GBP</option>
+  </select>
+</label>

package/snippets/launcher-card.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: launcher-card - Large clickable card with icon, title and description (module hub, settings sections). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-launcher: Card (link or button). State: aria-current="true" / .is-active, aria-disabled="true".
+       .oc-launcher-icon: Tinted icon tile
+       .oc-launcher-title: Title (may contain a badge)
+       .oc-launcher-description: Muted description
+       .oc-launcher-footer: Optional footer text (e.g. why it is disabled)
+     Slots: icon, title (+ trailing badge), description, footer
+-->
+<a class="oc-launcher" href="#" style="max-width:20rem">
+  <span class="oc-launcher-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
+  <h3 class="oc-launcher-title">Contacts <span class="oc-badge oc-badge--success">Active</span></h3>
+  <p class="oc-launcher-description">Customers, suppliers and the people who work there.</p>
+</a>

package/snippets/lightbox.html

@@ -0,0 +1,50 @@
+<!-- OmniaUI component: lightbox — Image viewer on a native <dialog> with prev / next, counter and caption. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/lightbox.html | Map: thumbnails -> dialog (bar, track of slides) -> optional script
+     Class API: .oc-lightbox-thumbs > button.oc-lightbox-thumb (command="show-modal" commandfor="<dialog id>") ·
+       dialog.oc-lightbox > .oc-lightbox__bar (.oc-lightbox__title, button.oc-lightbox__close) ·
+       .oc-lightbox__track (tabindex=0, autofocus) > figure.oc-lightbox__slide#id >
+         .oc-lightbox__media (img) · a.oc-lightbox__nav--prev / --next (href="#<slide id>") · figcaption.oc-lightbox__caption (.oc-lightbox__counter).
+     Modifiers: .oc-lightbox--single (hides nav + counter). Slots: any img / video / .oc-media-art in .oc-lightbox__media.
+     No JavaScript needed: the thumbnails open the dialog, links jump between slides, Esc / backdrop close it.
+     The optional script below only makes a thumbnail open the viewer at its own slide (data-oc-lightbox-slide).
+-->
+<div class="oc-lightbox-thumbs">
+  <button type="button" class="oc-lightbox-thumb" command="show-modal" commandfor="oc-lightbox-demo" data-oc-lightbox-slide="oc-lightbox-demo-1" aria-label="Open photo 1: Harbour at dawn"><span class="oc-media-art"></span></button>
+  <button type="button" class="oc-lightbox-thumb" command="show-modal" commandfor="oc-lightbox-demo" data-oc-lightbox-slide="oc-lightbox-demo-2" aria-label="Open photo 2: Forest trail"><span class="oc-media-art oc-media-art--4"></span></button>
+  <button type="button" class="oc-lightbox-thumb" command="show-modal" commandfor="oc-lightbox-demo" data-oc-lightbox-slide="oc-lightbox-demo-3" aria-label="Open photo 3: Desert road"><span class="oc-media-art oc-media-art--6"></span></button>
+</div>
+
+<dialog class="oc-lightbox" id="oc-lightbox-demo" closedby="any" aria-label="Photo viewer">
+  <div class="oc-lightbox__bar">
+    <h2 class="oc-lightbox__title">Holiday photos</h2>
+    <button type="button" class="oc-lightbox__close" command="close" commandfor="oc-lightbox-demo" aria-label="Close">&#10005;</button>
+  </div>
+  <div class="oc-lightbox__track" tabindex="0" autofocus aria-label="Photos, use the arrow keys">
+    <figure class="oc-lightbox__slide" id="oc-lightbox-demo-1">
+      <div class="oc-lightbox__media"><div class="oc-media-art" role="img" aria-label="Harbour at dawn"></div></div>
+      <a class="oc-lightbox__nav oc-lightbox__nav--prev" href="#oc-lightbox-demo-3" aria-label="Previous photo">&#8592;</a>
+      <a class="oc-lightbox__nav oc-lightbox__nav--next" href="#oc-lightbox-demo-2" aria-label="Next photo">&#8594;</a>
+      <figcaption class="oc-lightbox__caption"><span class="oc-lightbox__counter">1 / 3</span> Harbour at dawn</figcaption>
+    </figure>
+    <figure class="oc-lightbox__slide" id="oc-lightbox-demo-2">
+      <div class="oc-lightbox__media"><div class="oc-media-art oc-media-art--4" role="img" aria-label="Forest trail"></div></div>
+      <a class="oc-lightbox__nav oc-lightbox__nav--prev" href="#oc-lightbox-demo-1" aria-label="Previous photo">&#8592;</a>
+      <a class="oc-lightbox__nav oc-lightbox__nav--next" href="#oc-lightbox-demo-3" aria-label="Next photo">&#8594;</a>
+      <figcaption class="oc-lightbox__caption"><span class="oc-lightbox__counter">2 / 3</span> Forest trail</figcaption>
+    </figure>
+    <figure class="oc-lightbox__slide" id="oc-lightbox-demo-3">
+      <div class="oc-lightbox__media"><div class="oc-media-art oc-media-art--6" role="img" aria-label="Desert road"></div></div>
+      <a class="oc-lightbox__nav oc-lightbox__nav--prev" href="#oc-lightbox-demo-2" aria-label="Previous photo">&#8592;</a>
+      <a class="oc-lightbox__nav oc-lightbox__nav--next" href="#oc-lightbox-demo-1" aria-label="Next photo">&#8594;</a>
+      <figcaption class="oc-lightbox__caption"><span class="oc-lightbox__counter">3 / 3</span> Desert road</figcaption>
+    </figure>
+  </div>
+</dialog>
+<script>
+// Optional: open the viewer at the clicked thumbnail. The "command" event fires before the dialog opens,
+// so the jump waits one frame. Without this script the viewer opens at the first (or last viewed) photo.
+document.addEventListener("command", (e) => {
+  const id = e.source?.dataset.ocLightboxSlide;
+  if (id) requestAnimationFrame(() => document.getElementById(id)?.scrollIntoView({ behavior: "instant", block: "nearest", inline: "center" }));
+}, true);
+</script>

package/snippets/link-arrow.html

@@ -0,0 +1,10 @@
+<!-- OmniaUI component: link-arrow - Text link with an arrow that moves on hover and focus. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/link-arrow.html | Map: a.oc-link-arrow per variant
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-link-arrow: Link with "→" after the text (brand color)
+       Modifiers: --back (← before the text), --external (↗), --accent (element accent), --muted, --sm, --lg
+     Slots: text
+-->
+<a class="oc-link-arrow" href="#more">Read the case study</a>
+<a class="oc-link-arrow oc-link-arrow--back oc-link-arrow--muted" href="#back">All projects</a>
+<a class="oc-link-arrow oc-link-arrow--external" href="#docs" rel="noopener">Documentation</a>

package/snippets/list-toolbar.html

@@ -0,0 +1,33 @@
+<!-- OmniaUI component: list-toolbar - Search, result count, cards / table view toggle and actions above a list; the toggle switches views with :has() - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/list-toolbar.html | Map: scope -> toolbar (search, count, spacer, view toggle, actions) -> cards panel -> table panel
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-list-toolbar: Toolbar row (wraps). Modifiers: --sticky (sticks to the top), --bordered (framed bar).
+       .oc-list-toolbar-search: Search area (holds an .oc-input type="search")
+       .oc-list-toolbar-count / -spacer / -actions: Result count, flexible gap, end buttons
+       .oc-list-toolbar-views: Radio group (role="radiogroup") for the view
+       .oc-list-toolbar-view: label + input[type=radio][value=cards|table|list] + icon; checked = active
+       .oc-list-toolbar-scope: Optional wrapper; shows only the .oc-list-toolbar-panel[data-view] that matches the checked radio
+     Slots: search, count, views, actions, panels
+-->
+<div class="oc-list-toolbar-scope">
+  <div class="oc-list-toolbar" role="toolbar" aria-label="Products">
+    <div class="oc-list-toolbar-search"><input class="oc-input" type="search" placeholder="Search products" aria-label="Search products"></div>
+    <span class="oc-list-toolbar-count">3 items</span>
+    <span class="oc-list-toolbar-spacer"></span>
+    <div class="oc-list-toolbar-views" role="radiogroup" aria-label="View">
+      <label class="oc-list-toolbar-view" title="Cards"><input type="radio" name="oc-list-view" value="cards" checked aria-label="Cards"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></label>
+      <label class="oc-list-toolbar-view" title="Table"><input type="radio" name="oc-list-view" value="table" aria-label="Table"><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 5h18M3 12h18M3 19h18"/></svg></label>
+    </div>
+    <div class="oc-list-toolbar-actions"><button class="oc-btn oc-btn--sm" type="button">New product</button></div>
+  </div>
+  <div class="oc-list-toolbar-panel" data-view="cards">
+    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem">
+      <div class="oc-card oc-card--sm"><div class="oc-card-content">Oak table</div></div>
+      <div class="oc-card oc-card--sm"><div class="oc-card-content">Linen chair</div></div>
+      <div class="oc-card oc-card--sm"><div class="oc-card-content">Brass lamp</div></div>
+    </div>
+  </div>
+  <div class="oc-list-toolbar-panel" data-view="table">
+    <table class="oc-table"><thead><tr><th>Product</th></tr></thead><tbody><tr><td>Oak table</td></tr><tr><td>Linen chair</td></tr><tr><td>Brass lamp</td></tr></tbody></table>
+  </div>
+</div>

package/snippets/marquee.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: marquee - Endless scrolling strip of chips; pauses on hover and focus, static with reduced motion. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/marquee.html | Map: .oc-marquee -> .oc-marquee__track -> items + aria-hidden copies
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-marquee: Clipping wrapper (aria-label describes the list). Modifiers: --reverse, --slow, --fast, --plain (text only), --no-fade
+       .oc-marquee__track: The moving row. Render the items twice; the second set gets aria-hidden="true"
+       .oc-marquee__item: One chip
+       --oc-marquee-duration: Custom speed (default 40s)
+     Slots: items (rendered twice for a seamless loop)
+-->
+<div class="oc-marquee" aria-label="Technologies">
+  <div class="oc-marquee__track">
+    <span class="oc-marquee__item">HTML</span><span class="oc-marquee__item">CSS</span><span class="oc-marquee__item">PHP</span><span class="oc-marquee__item">MySQL</span><span class="oc-marquee__item">TypeScript</span><span class="oc-marquee__item">Node.js</span>
+    <span class="oc-marquee__item" aria-hidden="true">HTML</span><span class="oc-marquee__item" aria-hidden="true">CSS</span><span class="oc-marquee__item" aria-hidden="true">PHP</span><span class="oc-marquee__item" aria-hidden="true">MySQL</span><span class="oc-marquee__item" aria-hidden="true">TypeScript</span><span class="oc-marquee__item" aria-hidden="true">Node.js</span>
+  </div>
+</div>

package/snippets/media-card.html

@@ -0,0 +1,28 @@
+<!-- OmniaUI component: media-card — Video card: thumb, avatar, two-line title, meta and an overflow menu. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/media-card.html | Map: card -> media thumb -> body (avatar, text, menu button) -> dropdown menu (popover)
+     Class API: article.oc-media-card > .oc-media-thumb (see media-thumb) · .oc-media-card__body >
+       .oc-media-card__avatar (img or initials) · .oc-media-card__text (h3.oc-media-card__title > a, p.oc-media-card__meta) ·
+       button.oc-media-card__menu (popovertarget → any .oc-dropdown-menu).
+     Modifiers: .oc-media-card--compact. The title link covers the whole card; meta links and the menu stay clickable.
+-->
+<article class="oc-media-card" style="max-inline-size:20rem">
+  <div class="oc-media-thumb">
+    <div class="oc-media-art oc-media-art--2"></div>
+    <span class="oc-media-thumb__duration">18:32</span>
+    <progress class="oc-media-thumb__progress" value="65" max="100" aria-label="Watched 65%">65%</progress>
+  </div>
+  <div class="oc-media-card__body">
+    <span class="oc-media-card__avatar" aria-hidden="true">NS</span>
+    <div class="oc-media-card__text">
+      <h3 class="oc-media-card__title"><a href="#">Building a cabin by the lake, part 3: the roof goes on</a></h3>
+      <p class="oc-media-card__meta"><a href="#">North Studio</a> · 24K views · 3 days ago</p>
+    </div>
+    <button type="button" class="oc-media-card__menu" popovertarget="oc-media-card-menu" aria-label="More actions">&#8942;</button>
+  </div>
+  <div class="oc-dropdown-menu" id="oc-media-card-menu" popover>
+    <a class="oc-dropdown-item" href="#">Save to playlist</a>
+    <a class="oc-dropdown-item" href="#">Share</a>
+    <div class="oc-dropdown-separator"></div>
+    <a class="oc-dropdown-item" href="#">Not interested</a>
+  </div>
+</article>

package/snippets/media-row.html

@@ -0,0 +1,21 @@
+<!-- OmniaUI component: media-row — Compact horizontal media item for up-next lists and numbered playlists. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/media-row.html | Map: list -> row (thumb, text, menu) -> numbered playlist variant
+     Class API: ul/ol.oc-media-row-list > li.oc-media-row > .oc-media-thumb (see media-thumb) ·
+       .oc-media-row__text (h3.oc-media-row__title > a, p.oc-media-row__meta) · button.oc-media-row__menu (optional).
+     Modifiers: .oc-media-row-list--numbered (CSS counter column). States: aria-current="true" (now playing).
+     The title link covers the row; the menu button stays clickable. No JavaScript.
+-->
+<ol class="oc-media-row-list oc-media-row-list--numbered" aria-label="Playlist: Cabin build" style="max-inline-size:26rem">
+  <li class="oc-media-row">
+    <div class="oc-media-thumb"><div class="oc-media-art"></div><span class="oc-media-thumb__duration">9:12</span><progress class="oc-media-thumb__progress" value="100" max="100" aria-label="Watched">100%</progress></div>
+    <div class="oc-media-row__text"><h3 class="oc-media-row__title"><a href="#">Part 1: clearing the site</a></h3><p class="oc-media-row__meta">North Studio</p></div>
+  </li>
+  <li class="oc-media-row" aria-current="true">
+    <div class="oc-media-thumb"><div class="oc-media-art oc-media-art--2"></div><span class="oc-media-thumb__duration">14:40</span><progress class="oc-media-thumb__progress" value="30" max="100" aria-label="Watched 30%">30%</progress></div>
+    <div class="oc-media-row__text"><h3 class="oc-media-row__title"><a href="#">Part 2: walls and windows</a></h3><p class="oc-media-row__meta">North Studio</p></div>
+  </li>
+  <li class="oc-media-row">
+    <div class="oc-media-thumb"><div class="oc-media-art oc-media-art--4"></div><span class="oc-media-thumb__duration">18:32</span></div>
+    <div class="oc-media-row__text"><h3 class="oc-media-row__title"><a href="#">Part 3: the roof goes on</a></h3><p class="oc-media-row__meta">North Studio</p></div>
+  </li>
+</ol>

package/snippets/media-thumb.html

@@ -0,0 +1,12 @@
+<!-- OmniaUI component: media-thumb — 16:9 video thumbnail with duration badge and watch-progress bar. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/media-thumb.html | Map: thumb link -> picture -> badge -> duration -> progress
+     Class API: a.oc-media-thumb (or div) > img / video / .oc-media-art · .oc-media-thumb__badge (top left, --live = red) ·
+       .oc-media-thumb__duration (bottom right) · progress.oc-media-thumb__progress (value / max = watched part).
+     Modifiers: .oc-media-thumb--square / --portrait. States: .is-watched (dimmed picture). No JavaScript.
+-->
+<a class="oc-media-thumb" href="#" style="inline-size:20rem" aria-label="Morning light in the dunes, 12 minutes 4 seconds">
+  <div class="oc-media-art oc-media-art--3"></div>
+  <span class="oc-media-thumb__badge">New</span>
+  <span class="oc-media-thumb__duration">12:04</span>
+  <progress class="oc-media-thumb__progress" value="40" max="100" aria-label="Watched 40%">40%</progress>
+</a>

package/snippets/menubar.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: menubar - Menubar: horizontal menu bar built from popover dropdown menus. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-menubar: the bar (role="menubar")
+       .oc-menubar-trigger: button with popovertarget
+       .oc-dropdown-menu[popover]: each menu (+ .oc-dropdown-item, -label, -separator, -shortcut, -sub)
+-->
+<div class="oc-menubar" role="menubar" aria-label="Application">
+  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-file" aria-haspopup="menu">File</button>
+  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-view" aria-haspopup="menu">View</button>
+</div>
+<div class="oc-dropdown-menu" id="oc-mb-file" popover role="menu">
+  <button class="oc-dropdown-item" type="button" role="menuitem">New tab <span class="oc-dropdown-shortcut">Ctrl T</span></button>
+  <button class="oc-dropdown-item" type="button" role="menuitem">New window <span class="oc-dropdown-shortcut">Ctrl N</span></button>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <div class="oc-dropdown-sub">
+    <button class="oc-dropdown-item" type="button" role="menuitem" aria-haspopup="menu">Share</button>
+    <div class="oc-dropdown-submenu" role="menu">
+      <button class="oc-dropdown-item" type="button" role="menuitem">E-mail link</button>
+      <button class="oc-dropdown-item" type="button" role="menuitem">Messages</button>
+    </div>
+  </div>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <button class="oc-dropdown-item" type="button" role="menuitem">Print <span class="oc-dropdown-shortcut">Ctrl P</span></button>
+</div>
+<div class="oc-dropdown-menu" id="oc-mb-view" popover role="menu">
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="true">Always show bookmarks</button>
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="false">Always show full URLs</button>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <button class="oc-dropdown-item" type="button" role="menuitem">Reload <span class="oc-dropdown-shortcut">Ctrl R</span></button>
+</div>

package/snippets/message-thread.html

@@ -0,0 +1,123 @@
+<!-- OmniaUI component: message-thread — Scrolling conversation: header with subject, people, status and actions menu, messages that start at the bottom, composer and a sending overlay. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/message-thread.html | Map: thread -> header (heading, people, badge, menu) -> scroll (message list) -> footer (attachments + chat-composer) -> busy overlay -> optional script
+     Class API (modifiers are extra classes / attributes on the same element):
+       section.oc-message-thread: Grid frame, height from --oc-message-thread-height (32rem). Modifier: --plain (no wallpaper).
+         State: aria-busy="true" shows the sending overlay
+       .oc-message-thread__header > .oc-message-thread__heading (__title, __meta), .oc-avatar-group.oc-message-thread__people,
+         .oc-message-thread__actions > .oc-badge, button.oc-message-thread__icon-btn (popovertarget) + .oc-dropdown-menu[popover]
+       .oc-message-thread__scroll (tabindex="0", role="log"): Scroll area; column-reverse, so it opens at the newest message.
+         Holds one .oc-message-list (message component)
+       .oc-message-thread__footer: Bottom bar with an optional .oc-attachment-list and the chat-composer, or a .oc-message-thread__note
+       .oc-message-thread__busy (role="status"): Overlay with .oc-spinner, strong and span
+     Optional script (end of this snippet): appends what you type as an outgoing message after a short "Sending" state and
+       sends with Ctrl/Cmd + Enter. In an app, post the form and render the new message on the server instead.
+-->
+<section class="oc-message-thread" aria-labelledby="oc-thread-demo-title" style="inline-size:100%;max-inline-size:40rem">
+  <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>
+    </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-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>
+      <div class="oc-dropdown-menu" id="oc-thread-demo-menu" popover role="menu">
+        <button type="button" class="oc-dropdown-item" role="menuitem">Mark as unread</button>
+        <button type="button" class="oc-dropdown-item" role="menuitem">Move to archive</button>
+        <div class="oc-dropdown-separator" role="separator"></div>
+        <button type="button" class="oc-dropdown-item oc-dropdown-item--destructive" role="menuitem">Delete conversation</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="oc-message-thread__scroll" tabindex="0" role="log" aria-label="Messages" aria-live="polite">
+    <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>
+        <div class="oc-message__bubble">
+          <p class="oc-message__sender">Lisa Verbeke</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>
+        <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>
+        <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>
+          <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>
+        <div class="oc-message__bubble">
+          <p class="oc-message__sender">Lisa Verbeke</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>
+      </article>
+    </div>
+  </div>
+
+  <div class="oc-message-thread__footer">
+    <form class="oc-chat-composer" action="#" aria-label="Reply">
+      <label class="oc-visually-hidden" for="oc-thread-demo-input">Message</label>
+      <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>
+        </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>
+      </div>
+    </form>
+  </div>
+
+  <div class="oc-message-thread__busy" role="status">
+    <span class="oc-spinner oc-spinner--lg" aria-hidden="true"></span>
+    <strong>Sending message…</strong>
+    <span>Please wait, do not close this conversation.</span>
+  </div>
+</section>
+<script>
+// Optional: append the typed message as an outgoing bubble (demo behaviour; an app posts the form instead).
+document.addEventListener("submit", (e) => {
+  const form = e.target.closest(".oc-message-thread form.oc-chat-composer");
+  if (!form || e.defaultPrevented) return;
+  e.preventDefault();
+  const thread = form.closest(".oc-message-thread"), field = form.querySelector("textarea"), text = field.value.trim();
+  if (!text) return;
+  thread.setAttribute("aria-busy", "true");
+  setTimeout(() => {
+    const list = thread.querySelector(".oc-message-list"), last = list.lastElementChild;
+    const msg = document.createElement("article");
+    msg.className = "oc-message oc-message--out" + (last?.matches(".oc-message--out") ? " oc-message--continued" : "");
+    msg.innerHTML = '<span class="oc-avatar oc-message__avatar"></span><div class="oc-message__bubble"><div class="oc-message__text"><p></p></div><p class="oc-message__meta"><time></time><span class="oc-message__status">Sent</span></p></div>';
+    msg.querySelector(".oc-avatar").textContent = list.querySelector(".oc-message--out .oc-avatar")?.textContent || "Me";
+    msg.querySelector("p").textContent = text;
+    msg.querySelector("time").textContent = new Date().toTimeString().slice(0, 5);
+    list.append(msg);
+    field.value = "";
+    thread.removeAttribute("aria-busy");
+    field.focus();
+  }, 600);
+});
+document.addEventListener("keydown", (e) => {
+  if (e.defaultPrevented || e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || !e.target.matches(".oc-message-thread .oc-chat-composer__input")) return;
+  e.preventDefault();
+  e.target.form.requestSubmit();
+});
+</script>

package/snippets/message.html

@@ -0,0 +1,51 @@
+<!-- OmniaUI component: message — Chat bubble: incoming and outgoing, sender, avatar, time, read receipt, hover actions, grouping, reply quote and date divider. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/message.html | Map: list -> date divider -> incoming group (2) -> outgoing with quote + receipt -> system line
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-message-list: Column of messages and dividers (role="log" when it updates live). Custom properties: --oc-message-in, --oc-message-out
+       article.oc-message: One row. Modifiers: --out (right, primary tint), --continued (follows a message of the same sender:
+         no name, the avatar moves to the last message of the group via :has())
+       .oc-avatar.oc-message__avatar: Avatar (avatar component); keep it on every message so the grouping can hide it
+       .oc-message__bubble > .oc-message__sender, a.oc-message__quote (strong + span), .oc-message__text (p, ul, ol, a, strong, code),
+         .oc-message__attachments (attachment component), .oc-message__meta > time + .oc-message__status (--read, --failed)
+       .oc-message__actions > button.oc-message__action (--destructive): Shown on hover and keyboard focus, always on touch screens
+       .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-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>
+    <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__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>
+    <div class="oc-message__bubble">
+      <div class="oc-message__text">
+        <p>Which finish should we order?</p>
+        <ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul>
+        <p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>
+      </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" aria-label="You, 09:20">
+    <span class="oc-avatar oc-message__avatar">TP</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>
+      <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>
+    <div class="oc-message__actions">
+      <button type="button" class="oc-message__action" aria-label="Reply to 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="M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4"/></svg></button>
+      <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 oc-message-divider--system" role="note"><span>Lisa Verbeke marked this question as answered</span></div>
+</div>

package/snippets/modal.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: modal — Modal on <dialog> — opens with invoker commands, no JavaScript. Needs @birdycom/omniaui CSS. -->
+<button class="oc-btn" command="show-modal" commandfor="oc-modal-demo">Open modal</button>
+
+<dialog class="oc-modal" id="oc-modal-demo" closedby="any" aria-labelledby="oc-modal-demo-title">
+  <div class="oc-modal-content">
+    <div class="oc-modal-header">
+      <h2 class="oc-modal-title" id="oc-modal-demo-title">Are you sure?</h2>
+      <p class="oc-modal-description">This action cannot be undone.</p>
+    </div>
+    <div class="oc-modal-footer">
+      <button class="oc-btn oc-btn--outline" command="close" commandfor="oc-modal-demo">Cancel</button>
+      <button class="oc-btn oc-btn--destructive" command="close" commandfor="oc-modal-demo">Delete</button>
+    </div>
+  </div>
+</dialog>

package/snippets/native-select.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: native-select - Native select: themed <select>; optional base-select picker styling. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       select.oc-select: themed select (existing)
+       select.oc-select.oc-select--custom: also styles ::picker(select), options, checkmark where appearance: base-select is supported; elsewhere it looks like .oc-select
+-->
+<div class="oc-field" style="max-inline-size:16rem">
+  <label class="oc-field-label" for="oc-ns-fruit">Fruit</label>
+  <select class="oc-select oc-select--custom" id="oc-ns-fruit">
+    <option>Apple</option>
+    <option selected>Banana</option>
+    <option>Blueberry</option>
+    <option>Grapes</option>
+    <option>Pineapple</option>
+  </select>
+</div>

package/snippets/navmenu.html

@@ -0,0 +1,23 @@
+<!-- OmniaUI component: navmenu - Horizontal navigation links with optional dropdown children. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-navmenu: ul row of items
+       .oc-navmenu-link: Link or button. State: aria-current="page" or .is-active
+       .oc-navmenu-link--caret: Adds a chevron (trigger of a dropdown)
+       .oc-dropdown-menu[popover]: Child menu, from the dropdown component
+-->
+<nav aria-label="Module navigation">
+  <ul class="oc-navmenu">
+    <li><a class="oc-navmenu-link" href="#" aria-current="page">Overview</a></li>
+    <li><a class="oc-navmenu-link" href="#">Contacts</a></li>
+    <li>
+      <button class="oc-navmenu-link oc-navmenu-link--caret" type="button" popovertarget="oc-navmenu-sales">Sales</button>
+      <div class="oc-dropdown-menu" id="oc-navmenu-sales" popover>
+        <div class="oc-dropdown-label">Documents</div>
+        <a class="oc-dropdown-item" href="#">Quotes</a>
+        <a class="oc-dropdown-item" href="#">Orders</a>
+        <a class="oc-dropdown-item" href="#">Invoices</a>
+      </div>
+    </li>
+    <li><a class="oc-navmenu-link" href="#">Reports</a></li>
+  </ul>
+</nav>

package/snippets/next-teaser.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: next-teaser - "Next product" teaser card with label, name, mark and an arrow tagline. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/next-teaser.html | Map: a.oc-next-teaser -> __label -> __name (mark + text) -> __tagline
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-next-teaser: The card (an <a>). Modifier: --prev ("Previous" link, arrow left before the tagline)
+       .oc-next-teaser__label: Small uppercase label
+       .oc-next-teaser__name: Name; may start with an .oc-product-mark
+       .oc-next-teaser__tagline: Short line with a moving arrow
+       .oc-accent--*: Accent preset
+     Slots: label, name, mark, tagline
+-->
+<a class="oc-next-teaser oc-accent--violet" href="#next">
+  <span class="oc-next-teaser__label">Next product</span>
+  <span class="oc-next-teaser__name"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet" aria-hidden="true">&#9673;</span>Acme Design</span>
+  <span class="oc-next-teaser__tagline">The design system behind our apps</span>
+</a>