@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/emoji-picker.html

@@ -1,51 +1,51 @@
-<!-- OmniaUI component: emoji-picker — Compact popover grid of emoji buttons, anchored to its trigger. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/emoji-picker.html | Map: target field -> trigger -> popover (groups: label + grid of buttons) -> optional script
-     Class API: button.oc-emoji-picker__trigger (popovertarget) · div.oc-emoji-picker[popover] (data-oc-emoji-target = selector of a field) >
-       .oc-emoji-picker__label + .oc-emoji-picker__grid > button.oc-emoji-picker__item.
-     Modifiers: .oc-emoji-picker--inline (always visible, no popover). Open / close / Esc / light dismiss: native popover.
-     The optional script inserts the clicked emoji at the cursor of the target field and closes the panel.
--->
-<div style="display:flex;gap:0.5rem;align-items:center">
-  <input class="oc-input" id="oc-emoji-field" placeholder="Say something nice" style="inline-size:16rem">
-  <button type="button" class="oc-emoji-picker__trigger" popovertarget="oc-emoji-demo" aria-label="Insert emoji">&#128578;</button>
-</div>
-<div class="oc-emoji-picker" id="oc-emoji-demo" popover data-oc-emoji-target="#oc-emoji-field" aria-label="Emoji">
-  <p class="oc-emoji-picker__label">Smileys</p>
-  <div class="oc-emoji-picker__grid">
-    <button type="button" class="oc-emoji-picker__item">&#128512;</button><button type="button" class="oc-emoji-picker__item">&#128515;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128516;</button><button type="button" class="oc-emoji-picker__item">&#128513;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128514;</button><button type="button" class="oc-emoji-picker__item">&#128578;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128521;</button><button type="button" class="oc-emoji-picker__item">&#128525;</button>
-    <button type="button" class="oc-emoji-picker__item">&#129300;</button><button type="button" class="oc-emoji-picker__item">&#128526;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128546;</button><button type="button" class="oc-emoji-picker__item">&#128564;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128559;</button><button type="button" class="oc-emoji-picker__item">&#129395;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128548;</button><button type="button" class="oc-emoji-picker__item">&#129303;</button>
-  </div>
-  <p class="oc-emoji-picker__label">Gestures</p>
-  <div class="oc-emoji-picker__grid">
-    <button type="button" class="oc-emoji-picker__item">&#128077;</button><button type="button" class="oc-emoji-picker__item">&#128078;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128079;</button><button type="button" class="oc-emoji-picker__item">&#128588;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128075;</button><button type="button" class="oc-emoji-picker__item">&#128591;</button>
-    <button type="button" class="oc-emoji-picker__item">&#9996;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#128170;</button>
-  </div>
-  <p class="oc-emoji-picker__label">Objects</p>
-  <div class="oc-emoji-picker__grid">
-    <button type="button" class="oc-emoji-picker__item">&#10084;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#11088;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128293;</button><button type="button" class="oc-emoji-picker__item">&#127881;</button>
-    <button type="button" class="oc-emoji-picker__item">&#9989;</button><button type="button" class="oc-emoji-picker__item">&#128640;</button>
-    <button type="button" class="oc-emoji-picker__item">&#128161;</button><button type="button" class="oc-emoji-picker__item">&#9749;</button>
-  </div>
-</div>
-<script>
-// Optional: put the clicked emoji at the cursor of the field in data-oc-emoji-target, then close the picker.
-document.addEventListener("click", (e) => {
-  const item = e.target.closest(".oc-emoji-picker__item");
-  const picker = item?.closest(".oc-emoji-picker");
-  const field = picker?.dataset.ocEmojiTarget && document.querySelector(picker.dataset.ocEmojiTarget);
-  if (!field) return;
-  field.setRangeText(item.textContent, field.selectionStart ?? field.value.length, field.selectionEnd ?? field.value.length, "end");
-  field.dispatchEvent(new Event("input", { bubbles: true }));
-  picker.hidePopover?.();
-  field.focus();
-});
-</script>
+<!-- OmniaUI component: emoji-picker — Compact popover grid of emoji buttons, anchored to its trigger. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/emoji-picker.html | Map: target field -> trigger -> popover (groups: label + grid of buttons) -> optional script
+     Class API: button.oc-emoji-picker__trigger (popovertarget) · div.oc-emoji-picker[popover] (data-oc-emoji-target = selector of a field) >
+       .oc-emoji-picker__label + .oc-emoji-picker__grid > button.oc-emoji-picker__item.
+     Modifiers: .oc-emoji-picker--inline (always visible, no popover). Open / close / Esc / light dismiss: native popover.
+     The optional script inserts the clicked emoji at the cursor of the target field and closes the panel.
+-->
+<div style="display:flex;gap:0.5rem;align-items:center">
+  <input class="oc-input" id="oc-emoji-field" placeholder="Say something nice" style="inline-size:16rem">
+  <button type="button" class="oc-emoji-picker__trigger" popovertarget="oc-emoji-demo" aria-label="Insert emoji">&#128578;</button>
+</div>
+<div class="oc-emoji-picker" id="oc-emoji-demo" popover data-oc-emoji-target="#oc-emoji-field" aria-label="Emoji">
+  <p class="oc-emoji-picker__label">Smileys</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#128512;</button><button type="button" class="oc-emoji-picker__item">&#128515;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128516;</button><button type="button" class="oc-emoji-picker__item">&#128513;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128514;</button><button type="button" class="oc-emoji-picker__item">&#128578;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128521;</button><button type="button" class="oc-emoji-picker__item">&#128525;</button>
+    <button type="button" class="oc-emoji-picker__item">&#129300;</button><button type="button" class="oc-emoji-picker__item">&#128526;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128546;</button><button type="button" class="oc-emoji-picker__item">&#128564;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128559;</button><button type="button" class="oc-emoji-picker__item">&#129395;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128548;</button><button type="button" class="oc-emoji-picker__item">&#129303;</button>
+  </div>
+  <p class="oc-emoji-picker__label">Gestures</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#128077;</button><button type="button" class="oc-emoji-picker__item">&#128078;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128079;</button><button type="button" class="oc-emoji-picker__item">&#128588;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128075;</button><button type="button" class="oc-emoji-picker__item">&#128591;</button>
+    <button type="button" class="oc-emoji-picker__item">&#9996;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#128170;</button>
+  </div>
+  <p class="oc-emoji-picker__label">Objects</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#10084;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#11088;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128293;</button><button type="button" class="oc-emoji-picker__item">&#127881;</button>
+    <button type="button" class="oc-emoji-picker__item">&#9989;</button><button type="button" class="oc-emoji-picker__item">&#128640;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128161;</button><button type="button" class="oc-emoji-picker__item">&#9749;</button>
+  </div>
+</div>
+<script>
+// Optional: put the clicked emoji at the cursor of the field in data-oc-emoji-target, then close the picker.
+document.addEventListener("click", (e) => {
+  const item = e.target.closest(".oc-emoji-picker__item");
+  const picker = item?.closest(".oc-emoji-picker");
+  const field = picker?.dataset.ocEmojiTarget && document.querySelector(picker.dataset.ocEmojiTarget);
+  if (!field) return;
+  field.setRangeText(item.textContent, field.selectionStart ?? field.value.length, field.selectionEnd ?? field.value.length, "end");
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+  picker.hidePopover?.();
+  field.focus();
+});
+</script>

package/snippets/empty-state.html

@@ -1,17 +1,17 @@
-<!-- OmniaUI component: empty-state - Icon, title, text and actions for lists without data. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-empty: Centered column wrapper
-       .oc-empty-icon: Round icon holder (glyph, emoji or inline SVG)
-       .oc-empty-title: Heading
-       .oc-empty-text: Explanation
-       .oc-empty-actions: Row for buttons (optional)
--->
-<div class="oc-empty">
-  <span class="oc-empty-icon" aria-hidden="true">+</span>
-  <h3 class="oc-empty-title">No contacts yet</h3>
-  <p class="oc-empty-text">Add your first contact to start tracking conversations and invoices.</p>
-  <div class="oc-empty-actions">
-    <button class="oc-btn" type="button">New contact</button>
-    <button class="oc-btn oc-btn--outline" type="button">Import</button>
-  </div>
-</div>
+<!-- OmniaUI component: empty-state - Icon, title, text and actions for lists without data. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-empty: Centered column wrapper
+       .oc-empty-icon: Round icon holder (glyph, emoji or inline SVG)
+       .oc-empty-title: Heading
+       .oc-empty-text: Explanation
+       .oc-empty-actions: Row for buttons (optional)
+-->
+<div class="oc-empty">
+  <span class="oc-empty-icon" aria-hidden="true">+</span>
+  <h3 class="oc-empty-title">No contacts yet</h3>
+  <p class="oc-empty-text">Add your first contact to start tracking conversations and invoices.</p>
+  <div class="oc-empty-actions">
+    <button class="oc-btn" type="button">New contact</button>
+    <button class="oc-btn oc-btn--outline" type="button">Import</button>
+  </div>
+</div>

package/snippets/entity-card.html

@@ -1,26 +1,26 @@
-<!-- OmniaUI component: entity-card — Framed media cell (image, glyph, icon) next to a detail column with facts. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/entity-card.html | Map: card -> grid (frame | body: eyebrow, title, description, facts) -> footer
-     Class API: article.oc-entity-card > .oc-entity-card__grid > .oc-entity-card__frame (img / svg / .oc-entity-card__glyph;
-       --contain keeps a margin) + .oc-entity-card__body (.oc-entity-card__eyebrow, h3.oc-entity-card__title,
-       p.oc-entity-card__description, dl.oc-entity-card__facts) · .oc-entity-card__footer (tags, actions; optional).
-     Modifiers: .oc-entity-card--stacked (frame on top), --sm. Stacks by itself in containers under 22rem. No JavaScript.
--->
-<article class="oc-entity-card" style="max-inline-size:34rem">
-  <div class="oc-entity-card__grid">
-    <div class="oc-entity-card__frame"><span class="oc-entity-card__glyph" aria-hidden="true">&#9765;</span></div>
-    <div class="oc-entity-card__body">
-      <p class="oc-entity-card__eyebrow">Symbol · Ancient Egypt</p>
-      <h3 class="oc-entity-card__title">Ankh</h3>
-      <p class="oc-entity-card__description">The sign of life. Often held by gods in temple reliefs.</p>
-      <dl class="oc-entity-card__facts">
-        <dt>Code</dt><dd>S34</dd>
-        <dt>Period</dt><dd>Early Dynastic onwards</dd>
-        <dt>Reading</dt><dd>ʿnḫ</dd>
-      </dl>
-    </div>
-  </div>
-  <div class="oc-entity-card__footer">
-    <span class="oc-badge oc-badge--secondary">Life</span>
-    <span class="oc-badge oc-badge--secondary">Amulet</span>
-  </div>
-</article>
+<!-- OmniaUI component: entity-card — Framed media cell (image, glyph, icon) next to a detail column with facts. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/entity-card.html | Map: card -> grid (frame | body: eyebrow, title, description, facts) -> footer
+     Class API: article.oc-entity-card > .oc-entity-card__grid > .oc-entity-card__frame (img / svg / .oc-entity-card__glyph;
+       --contain keeps a margin) + .oc-entity-card__body (.oc-entity-card__eyebrow, h3.oc-entity-card__title,
+       p.oc-entity-card__description, dl.oc-entity-card__facts) · .oc-entity-card__footer (tags, actions; optional).
+     Modifiers: .oc-entity-card--stacked (frame on top), --sm. Stacks by itself in containers under 22rem. No JavaScript.
+-->
+<article class="oc-entity-card" style="max-inline-size:34rem">
+  <div class="oc-entity-card__grid">
+    <div class="oc-entity-card__frame"><span class="oc-entity-card__glyph" aria-hidden="true">&#9765;</span></div>
+    <div class="oc-entity-card__body">
+      <p class="oc-entity-card__eyebrow">Symbol · Ancient Egypt</p>
+      <h3 class="oc-entity-card__title">Ankh</h3>
+      <p class="oc-entity-card__description">The sign of life. Often held by gods in temple reliefs.</p>
+      <dl class="oc-entity-card__facts">
+        <dt>Code</dt><dd>S34</dd>
+        <dt>Period</dt><dd>Early Dynastic onwards</dd>
+        <dt>Reading</dt><dd>ʿnḫ</dd>
+      </dl>
+    </div>
+  </div>
+  <div class="oc-entity-card__footer">
+    <span class="oc-badge oc-badge--secondary">Life</span>
+    <span class="oc-badge oc-badge--secondary">Amulet</span>
+  </div>
+</article>

package/snippets/expandable-table.html

@@ -1,26 +1,26 @@
-<!-- OmniaUI component: expandable-table - Table that shows the first rows, "Show more" reveals the rest (CSS only). Needs @birdycom/omniaui CSS.
-     Class API: .oc-expandable-table (wrapper) · .oc-expandable-table__row-dimmed (last visible row, faded) · .oc-expandable-table__row-more (hidden rows) ·
-       .oc-expandable-table__wrap (+ --full) holds the toggle · label.oc-expandable-table__trigger.oc-btn > input.oc-expandable-table__toggle + .__more / .__less
-     Generic toggle button: label.oc-btn.oc-btn--toggle > input[type=checkbox] + .oc-btn-toggle__off / .oc-btn-toggle__on ; reveal area: .oc-showmore > .oc-showmore__extra
--->
-<div class="oc-expandable-table">
-  <table class="oc-table-ref">
-    <thead><tr><th>Class</th><th>Description</th></tr></thead>
-    <tbody>
-      <tr><td><code>.oc-btn</code></td><td>Primary button</td></tr>
-      <tr><td><code>.oc-btn--secondary</code></td><td>Quiet button</td></tr>
-      <tr class="oc-expandable-table__row-dimmed"><td><code>.oc-btn--outline</code></td><td>Outlined button</td></tr>
-      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--ghost</code></td><td>Frameless button</td></tr>
-      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--link</code></td><td>Looks like a link</td></tr>
-    </tbody>
-  </table>
-  <div class="oc-expandable-table__wrap oc-expandable-table__wrap--full">
-    <label class="oc-btn oc-btn--secondary oc-expandable-table__trigger"><input type="checkbox" class="oc-expandable-table__toggle"><span class="oc-expandable-table__more">Show more</span><span class="oc-expandable-table__less">Show less</span></label>
-  </div>
-</div>
-
-<div class="oc-showmore">
-  <p>Short text that is always visible.</p>
-  <p class="oc-showmore__extra">Extra text that appears after pressing the button.</p>
-  <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"><span class="oc-btn-toggle__off">Show more</span><span class="oc-btn-toggle__on">Show less</span></label>
-</div>
+<!-- OmniaUI component: expandable-table - Table that shows the first rows, "Show more" reveals the rest (CSS only). Needs @birdycom/omniaui CSS.
+     Class API: .oc-expandable-table (wrapper) · .oc-expandable-table__row-dimmed (last visible row, faded) · .oc-expandable-table__row-more (hidden rows) ·
+       .oc-expandable-table__wrap (+ --full) holds the toggle · label.oc-expandable-table__trigger.oc-btn > input.oc-expandable-table__toggle + .__more / .__less
+     Generic toggle button: label.oc-btn.oc-btn--toggle > input[type=checkbox] + .oc-btn-toggle__off / .oc-btn-toggle__on ; reveal area: .oc-showmore > .oc-showmore__extra
+-->
+<div class="oc-expandable-table">
+  <table class="oc-table-ref">
+    <thead><tr><th>Class</th><th>Description</th></tr></thead>
+    <tbody>
+      <tr><td><code>.oc-btn</code></td><td>Primary button</td></tr>
+      <tr><td><code>.oc-btn--secondary</code></td><td>Quiet button</td></tr>
+      <tr class="oc-expandable-table__row-dimmed"><td><code>.oc-btn--outline</code></td><td>Outlined button</td></tr>
+      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--ghost</code></td><td>Frameless button</td></tr>
+      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--link</code></td><td>Looks like a link</td></tr>
+    </tbody>
+  </table>
+  <div class="oc-expandable-table__wrap oc-expandable-table__wrap--full">
+    <label class="oc-btn oc-btn--secondary oc-expandable-table__trigger"><input type="checkbox" class="oc-expandable-table__toggle"><span class="oc-expandable-table__more">Show more</span><span class="oc-expandable-table__less">Show less</span></label>
+  </div>
+</div>
+
+<div class="oc-showmore">
+  <p>Short text that is always visible.</p>
+  <p class="oc-showmore__extra">Extra text that appears after pressing the button.</p>
+  <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"><span class="oc-btn-toggle__off">Show more</span><span class="oc-btn-toggle__on">Show less</span></label>
+</div>

package/snippets/fact-list.html

@@ -1,14 +1,14 @@
-<!-- OmniaUI component: fact-list - Key / value product facts in a card, a variant of the definition list. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/fact-list.html | Map: dl.oc-fact-list -> div rows (dt label + dd value)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-fact-list: The dl (card with a line between rows)
-       Modifiers: --plain (no card), --compact, --stacked (value below label), --accent (values in the accent)
-       Rows: <div><dt>Label</dt><dd>Value</dd></div>
-     Slots: rows (label + value)
--->
-<dl class="oc-fact-list">
-  <div><dt>Platform</dt><dd>Web, desktop</dd></div>
-  <div><dt>Built with</dt><dd>PHP 8.4, MySQL</dd></div>
-  <div><dt>License</dt><dd>Subscription</dd></div>
-  <div><dt>Status</dt><dd>Live since 2021</dd></div>
-</dl>
+<!-- OmniaUI component: fact-list - Key / value product facts in a card, a variant of the definition list. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/fact-list.html | Map: dl.oc-fact-list -> div rows (dt label + dd value)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-fact-list: The dl (card with a line between rows)
+       Modifiers: --plain (no card), --compact, --stacked (value below label), --accent (values in the accent)
+       Rows: <div><dt>Label</dt><dd>Value</dd></div>
+     Slots: rows (label + value)
+-->
+<dl class="oc-fact-list">
+  <div><dt>Platform</dt><dd>Web, desktop</dd></div>
+  <div><dt>Built with</dt><dd>PHP 8.4, MySQL</dd></div>
+  <div><dt>License</dt><dd>Subscription</dd></div>
+  <div><dt>Status</dt><dd>Live since 2021</dd></div>
+</dl>

package/snippets/filter-counts.html

@@ -1,30 +1,30 @@
-<!-- OmniaUI component: filter-counts - View filter tiles with counts (active / deleted / all) - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/filter-counts.html | Map: group (fieldset) -> one tile per view (radio + value + label + hint)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-filter-counts: Group of tiles (a <fieldset> or role="radiogroup"). Modifier: --compact (inline pills "Active 12").
-       .oc-filter-counts-item: Tile label around one radio. Tones: --success, --destructive, --muted (default primary).
-       .oc-filter-counts-value: The count (big number)
-       .oc-filter-counts-label: Name of the view
-       .oc-filter-counts-hint: Short description (hidden in --compact)
-     States: checked (accent border + background), :focus-visible (outline), disabled (faded)
--->
-<fieldset class="oc-filter-counts" aria-label="Show transactions">
-  <label class="oc-filter-counts-item oc-filter-counts-item--success">
-    <input type="radio" name="view" value="active" checked>
-    <span class="oc-filter-counts-value">128</span>
-    <span class="oc-filter-counts-label">Active</span>
-    <span class="oc-filter-counts-hint">Visible in reports</span>
-  </label>
-  <label class="oc-filter-counts-item oc-filter-counts-item--destructive">
-    <input type="radio" name="view" value="deleted">
-    <span class="oc-filter-counts-value">6</span>
-    <span class="oc-filter-counts-label">Deleted</span>
-    <span class="oc-filter-counts-hint">Can be restored</span>
-  </label>
-  <label class="oc-filter-counts-item">
-    <input type="radio" name="view" value="all">
-    <span class="oc-filter-counts-value">134</span>
-    <span class="oc-filter-counts-label">All</span>
-    <span class="oc-filter-counts-hint">Everything together</span>
-  </label>
-</fieldset>
+<!-- OmniaUI component: filter-counts - View filter tiles with counts (active / deleted / all) - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/filter-counts.html | Map: group (fieldset) -> one tile per view (radio + value + label + hint)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-filter-counts: Group of tiles (a <fieldset> or role="radiogroup"). Modifier: --compact (inline pills "Active 12").
+       .oc-filter-counts-item: Tile label around one radio. Tones: --success, --destructive, --muted (default primary).
+       .oc-filter-counts-value: The count (big number)
+       .oc-filter-counts-label: Name of the view
+       .oc-filter-counts-hint: Short description (hidden in --compact)
+     States: checked (accent border + background), :focus-visible (outline), disabled (faded)
+-->
+<fieldset class="oc-filter-counts" aria-label="Show transactions">
+  <label class="oc-filter-counts-item oc-filter-counts-item--success">
+    <input type="radio" name="view" value="active" checked>
+    <span class="oc-filter-counts-value">128</span>
+    <span class="oc-filter-counts-label">Active</span>
+    <span class="oc-filter-counts-hint">Visible in reports</span>
+  </label>
+  <label class="oc-filter-counts-item oc-filter-counts-item--destructive">
+    <input type="radio" name="view" value="deleted">
+    <span class="oc-filter-counts-value">6</span>
+    <span class="oc-filter-counts-label">Deleted</span>
+    <span class="oc-filter-counts-hint">Can be restored</span>
+  </label>
+  <label class="oc-filter-counts-item">
+    <input type="radio" name="view" value="all">
+    <span class="oc-filter-counts-value">134</span>
+    <span class="oc-filter-counts-label">All</span>
+    <span class="oc-filter-counts-hint">Everything together</span>
+  </label>
+</fieldset>

package/snippets/flip-card.html

@@ -1,22 +1,22 @@
-<!-- OmniaUI component: flip-card — 3D flip card (front / back) on a checkbox toggle or on hover and focus. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/flip-card.html | Map: card -> hidden checkbox -> inner -> front face (+ flip label) -> back face (+ flip label)
-     Class API: .oc-flip-card > input.oc-flip-card__toggle[type=checkbox] (optional) + .oc-flip-card__inner >
-       .oc-flip-card__face--front / --back (.oc-flip-card__title, .oc-flip-card__text, label.oc-flip-card__flip for the checkbox).
-     Modifiers: .oc-flip-card--hover (flip on hover / focus; give the card tabindex="0"), .oc-flip-card--vertical.
-     States: checkbox :checked or .is-flipped. Reduced motion: no 3D turn, the faces cross-fade. No JavaScript.
--->
-<div class="oc-flip-card" style="max-inline-size:18rem">
-  <input type="checkbox" class="oc-flip-card__toggle" id="oc-flip-demo">
-  <div class="oc-flip-card__inner">
-    <div class="oc-flip-card__face oc-flip-card__face--front">
-      <p class="oc-flip-card__text">Translate</p>
-      <h3 class="oc-flip-card__title">la mariposa</h3>
-      <label class="oc-flip-card__flip" for="oc-flip-demo">Show answer</label>
-    </div>
-    <div class="oc-flip-card__face oc-flip-card__face--back">
-      <p class="oc-flip-card__text">Spanish → English</p>
-      <h3 class="oc-flip-card__title">the butterfly</h3>
-      <label class="oc-flip-card__flip" for="oc-flip-demo">Back to question</label>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI component: flip-card — 3D flip card (front / back) on a checkbox toggle or on hover and focus. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/flip-card.html | Map: card -> hidden checkbox -> inner -> front face (+ flip label) -> back face (+ flip label)
+     Class API: .oc-flip-card > input.oc-flip-card__toggle[type=checkbox] (optional) + .oc-flip-card__inner >
+       .oc-flip-card__face--front / --back (.oc-flip-card__title, .oc-flip-card__text, label.oc-flip-card__flip for the checkbox).
+     Modifiers: .oc-flip-card--hover (flip on hover / focus; give the card tabindex="0"), .oc-flip-card--vertical.
+     States: checkbox :checked or .is-flipped. Reduced motion: no 3D turn, the faces cross-fade. No JavaScript.
+-->
+<div class="oc-flip-card" style="max-inline-size:18rem">
+  <input type="checkbox" class="oc-flip-card__toggle" id="oc-flip-demo">
+  <div class="oc-flip-card__inner">
+    <div class="oc-flip-card__face oc-flip-card__face--front">
+      <p class="oc-flip-card__text">Translate</p>
+      <h3 class="oc-flip-card__title">la mariposa</h3>
+      <label class="oc-flip-card__flip" for="oc-flip-demo">Show answer</label>
+    </div>
+    <div class="oc-flip-card__face oc-flip-card__face--back">
+      <p class="oc-flip-card__text">Spanish → English</p>
+      <h3 class="oc-flip-card__title">the butterfly</h3>
+      <label class="oc-flip-card__flip" for="oc-flip-demo">Back to question</label>
+    </div>
+  </div>
+</div>

package/snippets/form-field.html

@@ -1,6 +1,6 @@
-<!-- OmniaUI component: form-field — Form field with label, description and error. Needs @birdycom/omniaui CSS. -->
-<div class="oc-field">
-  <label class="oc-field-label" for="email">Email</label>
-  <input class="oc-input" id="email" type="email" placeholder="you@example.com" aria-describedby="email-help">
-  <p class="oc-field-description" id="email-help">We never share your email.</p>
-</div>
+<!-- OmniaUI component: form-field — Form field with label, description and error. Needs @birdycom/omniaui CSS. -->
+<div class="oc-field">
+  <label class="oc-field-label" for="email">Email</label>
+  <input class="oc-input" id="email" type="email" placeholder="you@example.com" aria-describedby="email-help">
+  <p class="oc-field-description" id="email-help">We never share your email.</p>
+</div>

package/snippets/greeting.html

@@ -1,22 +1,22 @@
-<!-- OmniaUI component: greeting - Dashboard header with a time-of-day greeting, the date and actions. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/greeting.html | Map: header -> icon tile -> body (eyebrow, title with name, date) -> actions
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-greeting: Header row. Modifiers: --morning / --afternoon / --evening (tint, chosen by your app or wrapper), --lg.
-       .oc-greeting-icon: Tinted icon tile (sun, moon)
-       .oc-greeting-body / -eyebrow / -title / -name: Text column, small label, heading and the highlighted name
-       time.oc-greeting-date: Today's date (datetime attribute)
-       .oc-greeting-actions: Buttons at the end
-     Slots: icon, eyebrow, title, date, actions
--->
-<header class="oc-greeting oc-greeting--morning">
-  <span class="oc-greeting-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="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
-  <div class="oc-greeting-body">
-    <p class="oc-greeting-eyebrow">Dashboard</p>
-    <h1 class="oc-greeting-title">Good morning, <span class="oc-greeting-name">Ada</span></h1>
-    <time class="oc-greeting-date" datetime="2026-10-15">Thursday 15 October 2026</time>
-  </div>
-  <div class="oc-greeting-actions">
-    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Agenda</a>
-    <button class="oc-btn oc-btn--sm" type="button">New project</button>
-  </div>
-</header>
+<!-- OmniaUI component: greeting - Dashboard header with a time-of-day greeting, the date and actions. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/greeting.html | Map: header -> icon tile -> body (eyebrow, title with name, date) -> actions
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-greeting: Header row. Modifiers: --morning / --afternoon / --evening (tint, chosen by your app or wrapper), --lg.
+       .oc-greeting-icon: Tinted icon tile (sun, moon)
+       .oc-greeting-body / -eyebrow / -title / -name: Text column, small label, heading and the highlighted name
+       time.oc-greeting-date: Today's date (datetime attribute)
+       .oc-greeting-actions: Buttons at the end
+     Slots: icon, eyebrow, title, date, actions
+-->
+<header class="oc-greeting oc-greeting--morning">
+  <span class="oc-greeting-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="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
+  <div class="oc-greeting-body">
+    <p class="oc-greeting-eyebrow">Dashboard</p>
+    <h1 class="oc-greeting-title">Good morning, <span class="oc-greeting-name">Ada</span></h1>
+    <time class="oc-greeting-date" datetime="2026-10-15">Thursday 15 October 2026</time>
+  </div>
+  <div class="oc-greeting-actions">
+    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Agenda</a>
+    <button class="oc-btn oc-btn--sm" type="button">New project</button>
+  </div>
+</header>

package/snippets/heading.html

@@ -1,14 +1,14 @@
-<!-- OmniaUI component: heading - Page or section title with a muted description. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-heading: Wrapper (title + description). Modifier: --sm for a section heading.
-       .oc-heading-title: Title (use h1-h3 as fits the outline)
-       .oc-heading-description: Muted description (optional)
--->
-<div class="oc-heading">
-  <h2 class="oc-heading-title">Profile</h2>
-  <p class="oc-heading-description">Update your name and e-mail address.</p>
-</div>
-<div class="oc-heading oc-heading--sm">
-  <h3 class="oc-heading-title">Password</h3>
-  <p class="oc-heading-description">Use a long, random password.</p>
-</div>
+<!-- OmniaUI component: heading - Page or section title with a muted description. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-heading: Wrapper (title + description). Modifier: --sm for a section heading.
+       .oc-heading-title: Title (use h1-h3 as fits the outline)
+       .oc-heading-description: Muted description (optional)
+-->
+<div class="oc-heading">
+  <h2 class="oc-heading-title">Profile</h2>
+  <p class="oc-heading-description">Update your name and e-mail address.</p>
+</div>
+<div class="oc-heading oc-heading--sm">
+  <h3 class="oc-heading-title">Password</h3>
+  <p class="oc-heading-description">Use a long, random password.</p>
+</div>

package/snippets/hover-card.html

@@ -1,18 +1,18 @@
-<!-- OmniaUI component: hover-card - Hover card: preview on hover/focus via interestfor + popover, CSS hover fallback. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-hover-card: inline wrapper (anchor scope)
-       .oc-hover-card-trigger: the link/button (add interestfor="id" for the popover engine)
-       .oc-hover-card-content: the card (id, popover, role="tooltip" or region). Sizes: --sm. Wrapper modifier: .oc-hover-card--top
--->
-<span class="oc-hover-card">
-  <a class="oc-hover-card-trigger" href="#omniacss" interestfor="oc-hc-demo">@omniacss</a>
-  <div class="oc-hover-card-content" id="oc-hc-demo" popover>
-    <div class="oc-item oc-item--sm" style="padding:0">
-      <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"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></div>
-      <div class="oc-item-content">
-        <p class="oc-item-title">OmniaCSS</p>
-        <p class="oc-item-description">CSS-first components and utilities. Light, dark and no build step.</p>
-      </div>
-    </div>
-  </div>
-</span>
+<!-- OmniaUI component: hover-card - Hover card: preview on hover/focus via interestfor + popover, CSS hover fallback. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-hover-card: inline wrapper (anchor scope)
+       .oc-hover-card-trigger: the link/button (add interestfor="id" for the popover engine)
+       .oc-hover-card-content: the card (id, popover, role="tooltip" or region). Sizes: --sm. Wrapper modifier: .oc-hover-card--top
+-->
+<span class="oc-hover-card">
+  <a class="oc-hover-card-trigger" href="#omniacss" interestfor="oc-hc-demo">@omniacss</a>
+  <div class="oc-hover-card-content" id="oc-hc-demo" popover>
+    <div class="oc-item oc-item--sm" style="padding:0">
+      <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"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></div>
+      <div class="oc-item-content">
+        <p class="oc-item-title">OmniaCSS</p>
+        <p class="oc-item-description">CSS-first components and utilities. Light, dark and no build step.</p>
+      </div>
+    </div>
+  </div>
+</span>

package/snippets/image-zoom.html

@@ -1,30 +1,30 @@
-<!-- OmniaUI component: image-zoom — Zoom and pan viewport with CSS-only zoom levels. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/image-zoom.html | Map: root -> toolbar (radio chips) -> viewport -> canvas (img)
-     Class API: .oc-image-zoom > .oc-image-zoom__toolbar (.oc-image-zoom__label, label.oc-image-zoom__level > input[type=radio][value]) ·
-       .oc-image-zoom__viewport (tabindex=0, scroll = pan) > .oc-image-zoom__canvas > img / svg / .oc-media-art.
-     Zoom levels: radio values 1, 1.5, 2, 3, 4 (picked up with :has()), or a fixed class .oc-image-zoom--150 / --200 / --300,
-       or style="--oc-zoom: 2.5". Ratio: 16 / 9 default, .oc-image-zoom--square / --photo or --oc-image-zoom-ratio.
-     Pan: scrollbars, mouse wheel (Shift = sideways), touch drag, or arrow keys on the focused viewport. No JavaScript.
--->
-<div class="oc-image-zoom">
-  <div class="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
-    <span class="oc-image-zoom__label">Zoom</span>
-    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1" checked>100%</label>
-    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1.5">150%</label>
-    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="2">200%</label>
-    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="3">300%</label>
-  </div>
-  <div class="oc-image-zoom__viewport" tabindex="0" role="region" aria-label="Harbour map, scroll to pan">
-    <div class="oc-image-zoom__canvas">
-      <div class="oc-media-art oc-media-art--2">
-        <svg viewBox="0 0 160 90" role="img" aria-label="Harbour map" style="display:block;inline-size:100%;block-size:100%;color:var(--color-white-50)">
-          <path d="M0 15H160M0 30H160M0 45H160M0 60H160M0 75H160M20 0V90M40 0V90M60 0V90M80 0V90M100 0V90M120 0V90M140 0V90" fill="none" stroke="currentColor" stroke-opacity=".35" stroke-width=".3"/>
-          <path d="M10 70C40 50 60 80 90 55S140 30 150 20" fill="none" stroke="currentColor" stroke-width="1.2"/>
-          <circle cx="90" cy="55" r="3" fill="currentColor"/>
-          <text x="95" y="52" font-size="5" fill="currentColor">Harbour</text>
-          <text x="12" y="76" font-size="2" fill="currentColor">Small print: zoom in to read this line.</text>
-        </svg>
-      </div>
-    </div>
-  </div>
-</div>
+<!-- OmniaUI component: image-zoom — Zoom and pan viewport with CSS-only zoom levels. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/image-zoom.html | Map: root -> toolbar (radio chips) -> viewport -> canvas (img)
+     Class API: .oc-image-zoom > .oc-image-zoom__toolbar (.oc-image-zoom__label, label.oc-image-zoom__level > input[type=radio][value]) ·
+       .oc-image-zoom__viewport (tabindex=0, scroll = pan) > .oc-image-zoom__canvas > img / svg / .oc-media-art.
+     Zoom levels: radio values 1, 1.5, 2, 3, 4 (picked up with :has()), or a fixed class .oc-image-zoom--150 / --200 / --300,
+       or style="--oc-zoom: 2.5". Ratio: 16 / 9 default, .oc-image-zoom--square / --photo or --oc-image-zoom-ratio.
+     Pan: scrollbars, mouse wheel (Shift = sideways), touch drag, or arrow keys on the focused viewport. No JavaScript.
+-->
+<div class="oc-image-zoom">
+  <div class="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
+    <span class="oc-image-zoom__label">Zoom</span>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1" checked>100%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1.5">150%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="2">200%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="3">300%</label>
+  </div>
+  <div class="oc-image-zoom__viewport" tabindex="0" role="region" aria-label="Harbour map, scroll to pan">
+    <div class="oc-image-zoom__canvas">
+      <div class="oc-media-art oc-media-art--2">
+        <svg viewBox="0 0 160 90" role="img" aria-label="Harbour map" style="display:block;inline-size:100%;block-size:100%;color:var(--color-white-50)">
+          <path d="M0 15H160M0 30H160M0 45H160M0 60H160M0 75H160M20 0V90M40 0V90M60 0V90M80 0V90M100 0V90M120 0V90M140 0V90" fill="none" stroke="currentColor" stroke-opacity=".35" stroke-width=".3"/>
+          <path d="M10 70C40 50 60 80 90 55S140 30 150 20" fill="none" stroke="currentColor" stroke-width="1.2"/>
+          <circle cx="90" cy="55" r="3" fill="currentColor"/>
+          <text x="95" y="52" font-size="5" fill="currentColor">Harbour</text>
+          <text x="12" y="76" font-size="2" fill="currentColor">Small print: zoom in to read this line.</text>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>