@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/input-group.html

@@ -1,10 +1,10 @@
-<!-- OmniaUI component: input-group - Input with prefix/suffix addon (currency, percent, units). Needs @birdycom/omniaui CSS.
--->
-<div class="oc-input-group">
-  <span class="oc-input-addon">&euro;</span>
-  <input class="oc-input" type="text" inputmode="decimal" value="125.00" aria-label="Amount">
-</div>
-<div class="oc-input-group">
-  <input class="oc-input" type="text" inputmode="decimal" value="21" aria-label="VAT rate">
-  <span class="oc-input-addon">%</span>
-</div>
+<!-- OmniaUI component: input-group - Input with prefix/suffix addon (currency, percent, units). Needs @birdycom/omniaui CSS.
+-->
+<div class="oc-input-group">
+  <span class="oc-input-addon">&euro;</span>
+  <input class="oc-input" type="text" inputmode="decimal" value="125.00" aria-label="Amount">
+</div>
+<div class="oc-input-group">
+  <input class="oc-input" type="text" inputmode="decimal" value="21" aria-label="VAT rate">
+  <span class="oc-input-addon">%</span>
+</div>

package/snippets/input.html

@@ -1,5 +1,5 @@
-<!-- OmniaUI component: input - Text input with states (default, error, disabled). Needs @birdycom/omniaui CSS.
--->
-<input class="oc-input" type="text" placeholder="Name">
-<input class="oc-input oc-input--error" type="text" value="Invalid" aria-invalid="true">
-<input class="oc-input" type="text" value="Disabled" disabled>
+<!-- OmniaUI component: input - Text input with states (default, error, disabled). Needs @birdycom/omniaui CSS.
+-->
+<input class="oc-input" type="text" placeholder="Name">
+<input class="oc-input oc-input--error" type="text" value="Invalid" aria-invalid="true">
+<input class="oc-input" type="text" value="Disabled" disabled>

package/snippets/item.html

@@ -1,26 +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>
+<!-- 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

@@ -1,13 +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>
+<!-- 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

@@ -1,9 +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>
+<!-- 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

@@ -1,26 +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>
+<!-- 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

@@ -1,14 +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>
+<!-- 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

@@ -1,50 +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>
+<!-- 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

@@ -1,10 +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>
+<!-- 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

@@ -1,33 +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>
+<!-- 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

@@ -1,15 +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>
+<!-- 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

@@ -1,28 +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>
+<!-- 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

@@ -1,21 +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>
+<!-- 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>