@birdycom/omniaui 0.11.0 → 0.11.2

package/snippets/table-compact.html

@@ -1,24 +1,24 @@
-<!-- OmniaUI component: table-compact - Table variant: compact striped table without outer cell borders, for inside cards and side panels. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/table-compact.html | Map: card -> header -> compact wrapper -> table (head, striped body, total footer)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-table-compact: Wrapper around a table.oc-table (scrolls sideways when needed). Modifiers: --bordered (own frame), --plain (no stripes, no head background).
-       th / td [data-numeric]: Right aligned tabular numbers (table component). [data-wrap]: the cell may wrap.
-       tfoot row: Bold total row with a stronger line above it
-       .oc-table-compact-muted: Muted secondary text in a cell
-     Slots: thead, tbody rows, optional tfoot
--->
-<div class="oc-card" style="max-width:28rem">
-  <div class="oc-card-header"><h3 class="oc-card-title">Materials</h3></div>
-  <div class="oc-table-compact">
-    <table class="oc-table">
-      <thead><tr><th>Item</th><th data-numeric>Qty</th><th data-numeric>Price</th></tr></thead>
-      <tbody>
-        <tr><td>Oak worktop <span class="oc-table-compact-muted">(3 m)</span></td><td data-numeric>1</td><td data-numeric>&euro; 640.00</td></tr>
-        <tr><td>Cabinet 60 cm</td><td data-numeric>2</td><td data-numeric>&euro; 380.00</td></tr>
-        <tr><td>Sink</td><td data-numeric>1</td><td data-numeric>&euro; 210.00</td></tr>
-        <tr><td>Tap</td><td data-numeric>1</td><td data-numeric>&euro; 95.00</td></tr>
-      </tbody>
-      <tfoot><tr><td colspan="2">Total</td><td data-numeric>&euro; 1,325.00</td></tr></tfoot>
-    </table>
-  </div>
-</div>
+<!-- OmniaUI component: table-compact - Table variant: compact striped table without outer cell borders, for inside cards and side panels. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/table-compact.html | Map: card -> header -> compact wrapper -> table (head, striped body, total footer)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-table-compact: Wrapper around a table.oc-table (scrolls sideways when needed). Modifiers: --bordered (own frame), --plain (no stripes, no head background).
+       th / td [data-numeric]: Right aligned tabular numbers (table component). [data-wrap]: the cell may wrap.
+       tfoot row: Bold total row with a stronger line above it
+       .oc-table-compact-muted: Muted secondary text in a cell
+     Slots: thead, tbody rows, optional tfoot
+-->
+<div class="oc-card" style="max-width:28rem">
+  <div class="oc-card-header"><h3 class="oc-card-title">Materials</h3></div>
+  <div class="oc-table-compact">
+    <table class="oc-table">
+      <thead><tr><th>Item</th><th data-numeric>Qty</th><th data-numeric>Price</th></tr></thead>
+      <tbody>
+        <tr><td>Oak worktop <span class="oc-table-compact-muted">(3 m)</span></td><td data-numeric>1</td><td data-numeric>&euro; 640.00</td></tr>
+        <tr><td>Cabinet 60 cm</td><td data-numeric>2</td><td data-numeric>&euro; 380.00</td></tr>
+        <tr><td>Sink</td><td data-numeric>1</td><td data-numeric>&euro; 210.00</td></tr>
+        <tr><td>Tap</td><td data-numeric>1</td><td data-numeric>&euro; 95.00</td></tr>
+      </tbody>
+      <tfoot><tr><td colspan="2">Total</td><td data-numeric>&euro; 1,325.00</td></tr></tfoot>
+    </table>
+  </div>
+</div>

package/snippets/table.html

@@ -1,29 +1,29 @@
-<!-- OmniaUI component: table - Data table: sortable header, selection, row actions, empty state, density modifiers. Needs @birdycom/omniaui CSS.
--->
-<div class="oc-table-wrap">
-  <table class="oc-table oc-table--striped">
-    <caption>Contacts</caption>
-    <thead>
-      <tr>
-        <th style="width:2.5rem"><input class="oc-checkbox" type="checkbox" aria-label="Select all"></th>
-        <th aria-sort="ascending"><a class="oc-table-sort" href="?sort=name">Name</a></th>
-        <th><a class="oc-table-sort" href="?sort=email">E-mail</a></th>
-        <th data-numeric>Balance</th>
-        <th><span class="oc-visually-hidden">Actions</span></th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr aria-selected="true">
-        <td><input class="oc-checkbox" type="checkbox" checked aria-label="Select Ada"></td>
-        <td>Ada Lovelace</td><td>ada@example.com</td><td data-numeric>1,250.00</td>
-        <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
-      </tr>
-      <tr>
-        <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan"></td>
-        <td>Alan Turing</td><td>alan@example.com</td><td data-numeric>0.00</td>
-        <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<!-- Empty state: <tbody><tr class="oc-table-empty"><td colspan="5"><div class="oc-empty">...</div></td></tr></tbody> -->
+<!-- OmniaUI component: table - Data table: sortable header, selection, row actions, empty state, density modifiers. Needs @birdycom/omniaui CSS.
+-->
+<div class="oc-table-wrap">
+  <table class="oc-table oc-table--striped">
+    <caption>Contacts</caption>
+    <thead>
+      <tr>
+        <th style="width:2.5rem"><input class="oc-checkbox" type="checkbox" aria-label="Select all"></th>
+        <th aria-sort="ascending"><a class="oc-table-sort" href="?sort=name">Name</a></th>
+        <th><a class="oc-table-sort" href="?sort=email">E-mail</a></th>
+        <th data-numeric>Balance</th>
+        <th><span class="oc-visually-hidden">Actions</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr aria-selected="true">
+        <td><input class="oc-checkbox" type="checkbox" checked aria-label="Select Ada"></td>
+        <td>Ada Lovelace</td><td>ada@example.com</td><td data-numeric>1,250.00</td>
+        <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+      </tr>
+      <tr>
+        <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan"></td>
+        <td>Alan Turing</td><td>alan@example.com</td><td data-numeric>0.00</td>
+        <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<!-- Empty state: <tbody><tr class="oc-table-empty"><td colspan="5"><div class="oc-empty">...</div></td></tr></tbody> -->

package/snippets/tabs.html

@@ -1,9 +1,9 @@
-<!-- OmniaUI component: tabs — Tabs with radio inputs and :has() — no JavaScript. Needs @birdycom/omniaui CSS. -->
-<div class="oc-tabset">
-  <div class="oc-tab-list" role="tablist">
-    <label class="oc-tab-trigger"><input type="radio" name="oc-tabs-demo" checked> Account</label>
-    <label class="oc-tab-trigger"><input type="radio" name="oc-tabs-demo"> Password</label>
-  </div>
-  <div class="oc-tab-panel">Make changes to your account here.</div>
-  <div class="oc-tab-panel">Change your password here.</div>
-</div>
+<!-- OmniaUI component: tabs — Tabs with radio inputs and :has() — no JavaScript. Needs @birdycom/omniaui CSS. -->
+<div class="oc-tabset">
+  <div class="oc-tab-list" role="tablist">
+    <label class="oc-tab-trigger"><input type="radio" name="oc-tabs-demo" checked> Account</label>
+    <label class="oc-tab-trigger"><input type="radio" name="oc-tabs-demo"> Password</label>
+  </div>
+  <div class="oc-tab-panel">Make changes to your account here.</div>
+  <div class="oc-tab-panel">Change your password here.</div>
+</div>

package/snippets/tag-input.html

@@ -1,17 +1,60 @@
-<!-- OmniaUI component: tag-input - Chips with remove buttons and a free-text input with suggestions. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-tag: Chip
-       .oc-tag-remove: Remove button inside a chip
-       .oc-tag-input: Bordered container holding chips and one <input>
-       .oc-tag-suggestions: Row of suggestion buttons below the control
--->
-<div class="oc-tag-input">
-  <span class="oc-tag">design <button class="oc-tag-remove" type="button" aria-label="Remove design">&times;</button></span>
-  <span class="oc-tag">internal <button class="oc-tag-remove" type="button" aria-label="Remove internal">&times;</button></span>
-  <input type="text" placeholder="Add tag..." aria-label="Add tag" list="oc-tag-options">
-</div>
-<div class="oc-tag-suggestions">
-  <button type="button">customer</button>
-  <button type="button">supplier</button>
-  <button type="button">partner</button>
-</div>
+<!-- OmniaUI component: tag-input - Chips with remove buttons and a free-text input with suggestions. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-tag: Chip
+       .oc-tag-remove: Remove button inside a chip
+       .oc-tag-input: Bordered container holding chips and one <input>
+       .oc-tag-suggestions: Row of suggestion buttons below the control
+     Optional script (below): Enter/comma adds, × removes, Backspace removes the last tag, suggestions add.
+     data-name="tags[]" on .oc-tag-input gives every tag a hidden field, so a form submits the tags.
+-->
+<div class="oc-tag-input" data-name="tags[]">
+  <span class="oc-tag">design <button class="oc-tag-remove" type="button" aria-label="Remove design">&times;</button></span>
+  <span class="oc-tag">internal <button class="oc-tag-remove" type="button" aria-label="Remove internal">&times;</button></span>
+  <input type="text" placeholder="Add tag..." aria-label="Add tag" list="oc-tag-options">
+</div>
+<div class="oc-tag-suggestions">
+  <button type="button">customer</button>
+  <button type="button">supplier</button>
+  <button type="button">partner</button>
+</div>
+<script>
+  // Tag input: Enter or comma adds a tag, × removes one, Backspace in the empty field removes the last one,
+  // a suggestion button adds its text. With data-name="tags[]" on .oc-tag-input every tag carries a hidden field.
+  (() => {
+    const field = (box) => box.querySelector("input:not([type=hidden])");
+    const tags = (box) => [...box.querySelectorAll(".oc-tag")];
+    const label = (tag) => tag.firstChild.textContent.trim();
+    const addTag = (box, text) => {
+      const value = text.trim().replace(/,+$/, "");
+      if (!value || tags(box).some((t) => label(t) === value)) return;
+      const tag = document.createElement("span");
+      tag.className = "oc-tag";
+      tag.append(`${value} `);
+      const remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "oc-tag-remove";
+      remove.setAttribute("aria-label", `Remove ${value}`);
+      remove.textContent = "×";
+      tag.append(remove);
+      if (box.dataset.name) {
+        const hidden = document.createElement("input");
+        hidden.type = "hidden"; hidden.name = box.dataset.name; hidden.value = value;
+        tag.append(hidden);
+      }
+      box.insertBefore(tag, field(box));
+    };
+    document.addEventListener("keydown", (e) => {
+      const box = e.target.closest?.(".oc-tag-input");
+      if (!box || e.target !== field(box)) return;
+      if (e.key === "Enter" || e.key === ",") { e.preventDefault(); addTag(box, e.target.value); e.target.value = ""; }
+      else if (e.key === "Backspace" && !e.target.value) tags(box).pop()?.remove();
+    });
+    document.addEventListener("click", (e) => {
+      const remove = e.target.closest?.(".oc-tag-remove");
+      if (remove) { const box = remove.closest(".oc-tag-input"); remove.closest(".oc-tag").remove(); field(box)?.focus(); return; }
+      const suggestion = e.target.closest?.(".oc-tag-suggestions button");
+      const box = suggestion?.closest(".oc-tag-suggestions").previousElementSibling;
+      if (box?.matches(".oc-tag-input")) addTag(box, suggestion.textContent);
+    });
+  })();
+</script>

package/snippets/terminal-log.html

@@ -1,23 +1,23 @@
-<!-- OmniaUI component: terminal-log — Console window with traffic lights, level colors and a blinking cursor. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/terminal-log.html | Map: frame -> bar (dots, title, status) -> body (role=log) -> lines -> prompt
-     Class API: .oc-terminal-log > .oc-terminal-log__bar (3 × <i>, .oc-terminal-log__title, .oc-terminal-log__status) ·
-       .oc-terminal-log__body (role="log", tabindex=0) > p.oc-terminal-log__line (time.oc-terminal-log__time optional,
-       span.oc-terminal-log__level, span.oc-terminal-log__msg) · p.oc-terminal-log__prompt (last line, blinking cursor).
-     Modifiers (on a line): --info, --success, --warn, --error, --debug. Height: --oc-terminal-log-height (default 18rem).
-     Always dark (color-scheme: dark). Cursor blink and live pulse stop with reduced motion. Appending lines is up to your app.
--->
-<div class="oc-terminal-log" style="max-inline-size:40rem">
-  <div class="oc-terminal-log__bar">
-    <i></i><i></i><i></i>
-    <span class="oc-terminal-log__title">scan — example.com</span>
-    <span class="oc-terminal-log__status">Live</span>
-  </div>
-  <div class="oc-terminal-log__body" role="log" aria-live="polite" aria-label="Scan output" tabindex="0">
-    <p class="oc-terminal-log__line oc-terminal-log__line--info"><time class="oc-terminal-log__time">09:41:02</time><span class="oc-terminal-log__level">info</span><span class="oc-terminal-log__msg">Starting scan of https://example.com</span></p>
-    <p class="oc-terminal-log__line oc-terminal-log__line--debug"><time class="oc-terminal-log__time">09:41:02</time><span class="oc-terminal-log__level">debug</span><span class="oc-terminal-log__msg">Resolved 3 hosts, 14 paths queued</span></p>
-    <p class="oc-terminal-log__line oc-terminal-log__line--success"><time class="oc-terminal-log__time">09:41:04</time><span class="oc-terminal-log__level">ok</span><span class="oc-terminal-log__msg">TLS certificate valid for 82 days</span></p>
-    <p class="oc-terminal-log__line oc-terminal-log__line--warn"><time class="oc-terminal-log__time">09:41:06</time><span class="oc-terminal-log__level">warn</span><span class="oc-terminal-log__msg">Missing header: Content-Security-Policy</span></p>
-    <p class="oc-terminal-log__line oc-terminal-log__line--error"><time class="oc-terminal-log__time">09:41:07</time><span class="oc-terminal-log__level">error</span><span class="oc-terminal-log__msg">/admin answered 200 without login</span></p>
-    <p class="oc-terminal-log__prompt">waiting for next host</p>
-  </div>
-</div>
+<!-- OmniaUI component: terminal-log — Console window with traffic lights, level colors and a blinking cursor. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/terminal-log.html | Map: frame -> bar (dots, title, status) -> body (role=log) -> lines -> prompt
+     Class API: .oc-terminal-log > .oc-terminal-log__bar (3 × <i>, .oc-terminal-log__title, .oc-terminal-log__status) ·
+       .oc-terminal-log__body (role="log", tabindex=0) > p.oc-terminal-log__line (time.oc-terminal-log__time optional,
+       span.oc-terminal-log__level, span.oc-terminal-log__msg) · p.oc-terminal-log__prompt (last line, blinking cursor).
+     Modifiers (on a line): --info, --success, --warn, --error, --debug. Height: --oc-terminal-log-height (default 18rem).
+     Always dark (color-scheme: dark). Cursor blink and live pulse stop with reduced motion. Appending lines is up to your app.
+-->
+<div class="oc-terminal-log" style="max-inline-size:40rem">
+  <div class="oc-terminal-log__bar">
+    <i></i><i></i><i></i>
+    <span class="oc-terminal-log__title">scan — example.com</span>
+    <span class="oc-terminal-log__status">Live</span>
+  </div>
+  <div class="oc-terminal-log__body" role="log" aria-live="polite" aria-label="Scan output" tabindex="0">
+    <p class="oc-terminal-log__line oc-terminal-log__line--info"><time class="oc-terminal-log__time">09:41:02</time><span class="oc-terminal-log__level">info</span><span class="oc-terminal-log__msg">Starting scan of https://example.com</span></p>
+    <p class="oc-terminal-log__line oc-terminal-log__line--debug"><time class="oc-terminal-log__time">09:41:02</time><span class="oc-terminal-log__level">debug</span><span class="oc-terminal-log__msg">Resolved 3 hosts, 14 paths queued</span></p>
+    <p class="oc-terminal-log__line oc-terminal-log__line--success"><time class="oc-terminal-log__time">09:41:04</time><span class="oc-terminal-log__level">ok</span><span class="oc-terminal-log__msg">TLS certificate valid for 82 days</span></p>
+    <p class="oc-terminal-log__line oc-terminal-log__line--warn"><time class="oc-terminal-log__time">09:41:06</time><span class="oc-terminal-log__level">warn</span><span class="oc-terminal-log__msg">Missing header: Content-Security-Policy</span></p>
+    <p class="oc-terminal-log__line oc-terminal-log__line--error"><time class="oc-terminal-log__time">09:41:07</time><span class="oc-terminal-log__level">error</span><span class="oc-terminal-log__msg">/admin answered 200 without login</span></p>
+    <p class="oc-terminal-log__prompt">waiting for next host</p>
+  </div>
+</div>

package/snippets/textarea.html

@@ -1,3 +1,3 @@
-<!-- OmniaUI component: textarea - Multi-line input. Needs @birdycom/omniaui CSS.
--->
-<textarea class="oc-input" rows="4" placeholder="Notes"></textarea>
+<!-- OmniaUI component: textarea - Multi-line input. Needs @birdycom/omniaui CSS.
+-->
+<textarea class="oc-input" rows="4" placeholder="Notes"></textarea>

package/snippets/theme-switch.html

@@ -1,6 +1,6 @@
-<!-- OmniaUI component: theme-switch — System / light / dark switch — CSS only (color-scheme + :has()). Needs @birdycom/omniaui CSS. -->
-<fieldset class="oc-theme-switch" aria-label="Color theme">
-  <label><input type="radio" name="oc-theme" value="system" checked> System</label>
-  <label><input type="radio" name="oc-theme" value="light"> Light</label>
-  <label><input type="radio" name="oc-theme" value="dark"> Dark</label>
-</fieldset>
+<!-- OmniaUI component: theme-switch — System / light / dark switch — CSS only (color-scheme + :has()). Needs @birdycom/omniaui CSS. -->
+<fieldset class="oc-theme-switch" aria-label="Color theme">
+  <label><input type="radio" name="oc-theme" value="system" checked> System</label>
+  <label><input type="radio" name="oc-theme" value="light"> Light</label>
+  <label><input type="radio" name="oc-theme" value="dark"> Dark</label>
+</fieldset>

package/snippets/time-input.html

@@ -1,26 +1,26 @@
-<!-- OmniaUI component: time-input - 24h time field (HH:mm) with suggested slots and an optional slot list. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/time-input.html | Map: field + datalist of slots -> slot list (radio chips)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-time-input: Add to .oc-input. Narrow centered field; pattern checks HH:mm (00:00 - 23:59).
-       .oc-time-slots: Grid of slot chips (role="radiogroup"). Modifier: --sm.
-       .oc-time-slot: Label with one radio input and the time text
-     States: :user-invalid on a wrong time (red), checked slot (primary), disabled slot (struck through)
-     Slots: <datalist> options = suggestions while typing; one .oc-time-slot per time in the list.
--->
-<div class="oc-field">
-  <label class="oc-field-label" for="oc-time-demo">Start time</label>
-  <input class="oc-input oc-time-input" id="oc-time-demo" name="start" type="text" inputmode="numeric" placeholder="hh:mm" maxlength="5" pattern="([01][0-9]|2[0-3]):[0-5][0-9]" list="oc-time-demo-slots" value="08:30">
-  <datalist id="oc-time-demo-slots">
-    <option value="08:00"></option>
-    <option value="08:30"></option>
-    <option value="09:00"></option>
-    <option value="09:30"></option>
-  </datalist>
-</div>
-<div class="oc-time-slots" role="radiogroup" aria-label="Pick a time slot">
-  <label class="oc-time-slot"><input type="radio" name="slot" value="09:00"> 09:00</label>
-  <label class="oc-time-slot"><input type="radio" name="slot" value="09:30" checked> 09:30</label>
-  <label class="oc-time-slot"><input type="radio" name="slot" value="10:00" disabled> 10:00</label>
-  <label class="oc-time-slot"><input type="radio" name="slot" value="10:30"> 10:30</label>
-  <label class="oc-time-slot"><input type="radio" name="slot" value="11:00"> 11:00</label>
-</div>
+<!-- OmniaUI component: time-input - 24h time field (HH:mm) with suggested slots and an optional slot list. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/time-input.html | Map: field + datalist of slots -> slot list (radio chips)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-time-input: Add to .oc-input. Narrow centered field; pattern checks HH:mm (00:00 - 23:59).
+       .oc-time-slots: Grid of slot chips (role="radiogroup"). Modifier: --sm.
+       .oc-time-slot: Label with one radio input and the time text
+     States: :user-invalid on a wrong time (red), checked slot (primary), disabled slot (struck through)
+     Slots: <datalist> options = suggestions while typing; one .oc-time-slot per time in the list.
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-time-demo">Start time</label>
+  <input class="oc-input oc-time-input" id="oc-time-demo" name="start" type="text" inputmode="numeric" placeholder="hh:mm" maxlength="5" pattern="([01][0-9]|2[0-3]):[0-5][0-9]" list="oc-time-demo-slots" value="08:30">
+  <datalist id="oc-time-demo-slots">
+    <option value="08:00"></option>
+    <option value="08:30"></option>
+    <option value="09:00"></option>
+    <option value="09:30"></option>
+  </datalist>
+</div>
+<div class="oc-time-slots" role="radiogroup" aria-label="Pick a time slot">
+  <label class="oc-time-slot"><input type="radio" name="slot" value="09:00"> 09:00</label>
+  <label class="oc-time-slot"><input type="radio" name="slot" value="09:30" checked> 09:30</label>
+  <label class="oc-time-slot"><input type="radio" name="slot" value="10:00" disabled> 10:00</label>
+  <label class="oc-time-slot"><input type="radio" name="slot" value="10:30"> 10:30</label>
+  <label class="oc-time-slot"><input type="radio" name="slot" value="11:00"> 11:00</label>
+</div>

package/snippets/timeline.html

@@ -1,28 +1,28 @@
-<!-- OmniaUI component: timeline - Vertical timeline with dated entries and an accent dot per item. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/timeline.html | Map: ol.oc-timeline -> li.oc-timeline__item (date, title, text)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-timeline: The list (ol or ul) with the vertical line. Modifiers: --lg (more space), --accent (accent line)
-       .oc-timeline__item: One entry with a dot on the line. Modifier: --current (filled dot + ring)
-       .oc-timeline__date: Year or date label (use <time> for real dates)
-       .oc-timeline__title / .oc-timeline__text: Entry heading and description
-       Simple form (no item classes): <li><strong>2001</strong><span>Text</span></li>
-     Accent: --oc-accent-from, or an .oc-accent--* preset on the list.
-     Slots: items (date, title, text)
--->
-<ol class="oc-timeline">
-  <li class="oc-timeline__item">
-    <time class="oc-timeline__date" datetime="2012">2012</time>
-    <h3 class="oc-timeline__title">Acme is founded</h3>
-    <p class="oc-timeline__text">Two developers start building websites for local shops.</p>
-  </li>
-  <li class="oc-timeline__item">
-    <time class="oc-timeline__date" datetime="2019">2019</time>
-    <h3 class="oc-timeline__title">First own product</h3>
-    <p class="oc-timeline__text">A small invoicing app grows into a modular business suite.</p>
-  </li>
-  <li class="oc-timeline__item oc-timeline__item--current">
-    <span class="oc-timeline__date">Today</span>
-    <h3 class="oc-timeline__title">Products and custom work</h3>
-    <p class="oc-timeline__text">Web apps, desktop tools and plugins for clients across Europe.</p>
-  </li>
-</ol>
+<!-- OmniaUI component: timeline - Vertical timeline with dated entries and an accent dot per item. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/timeline.html | Map: ol.oc-timeline -> li.oc-timeline__item (date, title, text)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-timeline: The list (ol or ul) with the vertical line. Modifiers: --lg (more space), --accent (accent line)
+       .oc-timeline__item: One entry with a dot on the line. Modifier: --current (filled dot + ring)
+       .oc-timeline__date: Year or date label (use <time> for real dates)
+       .oc-timeline__title / .oc-timeline__text: Entry heading and description
+       Simple form (no item classes): <li><strong>2001</strong><span>Text</span></li>
+     Accent: --oc-accent-from, or an .oc-accent--* preset on the list.
+     Slots: items (date, title, text)
+-->
+<ol class="oc-timeline">
+  <li class="oc-timeline__item">
+    <time class="oc-timeline__date" datetime="2012">2012</time>
+    <h3 class="oc-timeline__title">Acme is founded</h3>
+    <p class="oc-timeline__text">Two developers start building websites for local shops.</p>
+  </li>
+  <li class="oc-timeline__item">
+    <time class="oc-timeline__date" datetime="2019">2019</time>
+    <h3 class="oc-timeline__title">First own product</h3>
+    <p class="oc-timeline__text">A small invoicing app grows into a modular business suite.</p>
+  </li>
+  <li class="oc-timeline__item oc-timeline__item--current">
+    <span class="oc-timeline__date">Today</span>
+    <h3 class="oc-timeline__title">Products and custom work</h3>
+    <p class="oc-timeline__text">Web apps, desktop tools and plugins for clients across Europe.</p>
+  </li>
+</ol>

package/snippets/toast-stack.html

@@ -1,10 +1,10 @@
-<!-- OmniaUI component: toast-stack - Toast stack: overlapping toasts that expand on hover or focus. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-toast-container.oc-toast-container--stack: stacking container (add --static for in-flow, --top to dock to the top)
-       Newest .oc-toast LAST; the last four layers are visible (scale, offset and opacity by depth)
--->
-<div class="oc-toast-container oc-toast-container--static oc-toast-container--stack" tabindex="0" aria-label="Notifications">
-  <div class="oc-toast oc-toast--info" role="status"><span class="oc-toast-icon" aria-hidden="true">i</span><div class="oc-toast-body"><p class="oc-toast-title">Update available</p><p class="oc-toast-description">Version 0.9 is ready.</p></div></div>
-  <div class="oc-toast oc-toast--warning" role="status"><span class="oc-toast-icon" aria-hidden="true">!</span><div class="oc-toast-body"><p class="oc-toast-title">Storage almost full</p><p class="oc-toast-description">92% of 5 GB used.</p></div></div>
-  <div class="oc-toast oc-toast--success" role="status"><span class="oc-toast-icon" aria-hidden="true">&#10003;</span><div class="oc-toast-body"><p class="oc-toast-title">Invoice sent</p><p class="oc-toast-description">Hover to expand the stack.</p></div><button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button></div>
-</div>
+<!-- OmniaUI component: toast-stack - Toast stack: overlapping toasts that expand on hover or focus. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-toast-container.oc-toast-container--stack: stacking container (add --static for in-flow, --top to dock to the top)
+       Newest .oc-toast LAST; the last four layers are visible (scale, offset and opacity by depth)
+-->
+<div class="oc-toast-container oc-toast-container--static oc-toast-container--stack" tabindex="0" aria-label="Notifications">
+  <div class="oc-toast oc-toast--info" role="status"><span class="oc-toast-icon" aria-hidden="true">i</span><div class="oc-toast-body"><p class="oc-toast-title">Update available</p><p class="oc-toast-description">Version 0.9 is ready.</p></div></div>
+  <div class="oc-toast oc-toast--warning" role="status"><span class="oc-toast-icon" aria-hidden="true">!</span><div class="oc-toast-body"><p class="oc-toast-title">Storage almost full</p><p class="oc-toast-description">92% of 5 GB used.</p></div></div>
+  <div class="oc-toast oc-toast--success" role="status"><span class="oc-toast-icon" aria-hidden="true">&#10003;</span><div class="oc-toast-body"><p class="oc-toast-title">Invoice sent</p><p class="oc-toast-description">Hover to expand the stack.</p></div><button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button></div>
+</div>

package/snippets/toast.html

@@ -1,36 +1,36 @@
-<!-- OmniaUI component: toast - Transient notifications (success, error, warning, info) with optional CSS auto-dismiss. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-toast-container: Fixed stack (bottom right). Modifiers: --top, --static (in-flow, for docs).
-       .oc-toast: One notification (role="status"; use role="alert" for errors). Variants: --success, --error, --warning, --info. --auto = CSS auto-dismiss.
-       .oc-toast-icon: Status glyph
-       .oc-toast-body: Text column
-       .oc-toast-title / -description: Heading and optional text
-       .oc-toast-close: Dismiss button
-     Slots: icon, title, description, close
--->
-<div class="oc-toast-container oc-toast-container--static">
-  <div class="oc-toast oc-toast--success" role="status">
-    <span class="oc-toast-icon" aria-hidden="true">&#10003;</span>
-    <div class="oc-toast-body">
-      <p class="oc-toast-title">Contact saved</p>
-      <p class="oc-toast-description">Your changes are stored.</p>
-    </div>
-    <button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button>
-  </div>
-  <div class="oc-toast oc-toast--error" role="alert">
-    <span class="oc-toast-icon" aria-hidden="true">!</span>
-    <div class="oc-toast-body">
-      <p class="oc-toast-title">Could not send invoice</p>
-      <p class="oc-toast-description">The e-mail address is invalid.</p>
-    </div>
-    <button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button>
-  </div>
-  <div class="oc-toast oc-toast--warning" role="status">
-    <span class="oc-toast-icon" aria-hidden="true">!</span>
-    <div class="oc-toast-body"><p class="oc-toast-title">License expires in 3 days</p></div>
-  </div>
-  <div class="oc-toast oc-toast--info" role="status">
-    <span class="oc-toast-icon" aria-hidden="true">i</span>
-    <div class="oc-toast-body"><p class="oc-toast-title">A new version is available</p></div>
-  </div>
-</div>
+<!-- OmniaUI component: toast - Transient notifications (success, error, warning, info) with optional CSS auto-dismiss. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-toast-container: Fixed stack (bottom right). Modifiers: --top, --static (in-flow, for docs).
+       .oc-toast: One notification (role="status"; use role="alert" for errors). Variants: --success, --error, --warning, --info. --auto = CSS auto-dismiss.
+       .oc-toast-icon: Status glyph
+       .oc-toast-body: Text column
+       .oc-toast-title / -description: Heading and optional text
+       .oc-toast-close: Dismiss button
+     Slots: icon, title, description, close
+-->
+<div class="oc-toast-container oc-toast-container--static">
+  <div class="oc-toast oc-toast--success" role="status">
+    <span class="oc-toast-icon" aria-hidden="true">&#10003;</span>
+    <div class="oc-toast-body">
+      <p class="oc-toast-title">Contact saved</p>
+      <p class="oc-toast-description">Your changes are stored.</p>
+    </div>
+    <button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button>
+  </div>
+  <div class="oc-toast oc-toast--error" role="alert">
+    <span class="oc-toast-icon" aria-hidden="true">!</span>
+    <div class="oc-toast-body">
+      <p class="oc-toast-title">Could not send invoice</p>
+      <p class="oc-toast-description">The e-mail address is invalid.</p>
+    </div>
+    <button class="oc-toast-close" type="button" aria-label="Dismiss">&times;</button>
+  </div>
+  <div class="oc-toast oc-toast--warning" role="status">
+    <span class="oc-toast-icon" aria-hidden="true">!</span>
+    <div class="oc-toast-body"><p class="oc-toast-title">License expires in 3 days</p></div>
+  </div>
+  <div class="oc-toast oc-toast--info" role="status">
+    <span class="oc-toast-icon" aria-hidden="true">i</span>
+    <div class="oc-toast-body"><p class="oc-toast-title">A new version is available</p></div>
+  </div>
+</div>

package/snippets/toc.html

@@ -1,13 +1,13 @@
-<!-- OmniaUI component: toc - "On this page" list of heading links. Needs @birdycom/omniaui CSS.
-     Class API: .oc-toc (root nav, sticky) · .oc-toc-title · .oc-toc-list (ul) · .oc-toc-link (a; aria-current / .is-active = current heading) · .oc-toc-item--sub (li, sub heading)
--->
-<nav class="oc-toc" aria-label="On this page">
-  <p class="oc-toc-title">On this page</p>
-  <ul class="oc-toc-list">
-    <li><a class="oc-toc-link" href="#overview">Overview</a></li>
-    <li><a class="oc-toc-link" href="#install" aria-current="true">Install</a></li>
-    <li class="oc-toc-item--sub"><a class="oc-toc-link" href="#npm">With npm</a></li>
-    <li class="oc-toc-item--sub"><a class="oc-toc-link" href="#cdn">From a CDN</a></li>
-    <li><a class="oc-toc-link" href="#usage">Usage</a></li>
-  </ul>
-</nav>
+<!-- OmniaUI component: toc - "On this page" list of heading links. Needs @birdycom/omniaui CSS.
+     Class API: .oc-toc (root nav, sticky) · .oc-toc-title · .oc-toc-list (ul) · .oc-toc-link (a; aria-current / .is-active = current heading) · .oc-toc-item--sub (li, sub heading)
+-->
+<nav class="oc-toc" aria-label="On this page">
+  <p class="oc-toc-title">On this page</p>
+  <ul class="oc-toc-list">
+    <li><a class="oc-toc-link" href="#overview">Overview</a></li>
+    <li><a class="oc-toc-link" href="#install" aria-current="true">Install</a></li>
+    <li class="oc-toc-item--sub"><a class="oc-toc-link" href="#npm">With npm</a></li>
+    <li class="oc-toc-item--sub"><a class="oc-toc-link" href="#cdn">From a CDN</a></li>
+    <li><a class="oc-toc-link" href="#usage">Usage</a></li>
+  </ul>
+</nav>

package/snippets/toggle-field.html

@@ -1,20 +1,20 @@
-<!-- OmniaUI component: toggle-field - Settings row with a title, a description and a switch. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/toggle-field.html | Map: row label -> text (label + description) -> switch (span.oc-switch + checkbox)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-toggle-field: Row; it is the <label>, so the whole row flips the switch. Modifiers: --card (bordered box), --reverse (switch first).
-       .oc-toggle-field-text: Text block
-       .oc-toggle-field-label: Title
-       .oc-toggle-field-description: Muted help text (link it with aria-describedby)
-       .oc-switch: Use a <span class="oc-switch"> here (a label inside a label is invalid HTML)
-     States: checked (card border turns primary), disabled (row dimmed), :focus-visible (card outline)
--->
-<label class="oc-toggle-field">
-  <span class="oc-toggle-field-text">
-    <span class="oc-toggle-field-label">Email notifications</span>
-    <span class="oc-toggle-field-description" id="oc-toggle-field-demo-desc">Get a message when a receipt is processed.</span>
-  </span>
-  <span class="oc-switch">
-    <input type="checkbox" role="switch" name="notify_email" checked aria-describedby="oc-toggle-field-demo-desc">
-    <span class="oc-switch-track"></span>
-  </span>
-</label>
+<!-- OmniaUI component: toggle-field - Settings row with a title, a description and a switch. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/toggle-field.html | Map: row label -> text (label + description) -> switch (span.oc-switch + checkbox)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-toggle-field: Row; it is the <label>, so the whole row flips the switch. Modifiers: --card (bordered box), --reverse (switch first).
+       .oc-toggle-field-text: Text block
+       .oc-toggle-field-label: Title
+       .oc-toggle-field-description: Muted help text (link it with aria-describedby)
+       .oc-switch: Use a <span class="oc-switch"> here (a label inside a label is invalid HTML)
+     States: checked (card border turns primary), disabled (row dimmed), :focus-visible (card outline)
+-->
+<label class="oc-toggle-field">
+  <span class="oc-toggle-field-text">
+    <span class="oc-toggle-field-label">Email notifications</span>
+    <span class="oc-toggle-field-description" id="oc-toggle-field-demo-desc">Get a message when a receipt is processed.</span>
+  </span>
+  <span class="oc-switch">
+    <input type="checkbox" role="switch" name="notify_email" checked aria-describedby="oc-toggle-field-demo-desc">
+    <span class="oc-switch-track"></span>
+  </span>
+</label>