@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/chart.html

@@ -1,27 +1,27 @@
-<!-- OmniaUI component: chart - Chart tokens --oc-chart-1..5 (light-dark Omnia colors) with legend, bar and pie helpers. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       --oc-chart-1 .. --oc-chart-5: series colors (blue, teal, orange, purple, pink); --oc-chart-grid, --oc-chart-axis
-       .oc-chart-legend > li > .oc-chart-swatch: legend (swatch colors by position)
-       .oc-chart-bars > *: bar per item, height from --oc-bar
-       .oc-chart-pie (+ --donut): conic-gradient pie; stops set inline
--->
-<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-end">
-  <div style="flex:1 1 16rem">
-    <ul class="oc-chart-bars" role="img" aria-label="Revenue by quarter: 40, 65, 50, 85 percent of target">
-      <li style="--oc-bar:40%"></li><li style="--oc-bar:65%"></li><li style="--oc-bar:50%"></li><li style="--oc-bar:85%"></li>
-    </ul>
-    <ul class="oc-chart-legend" style="margin-top:.75rem">
-      <li><span class="oc-chart-swatch"></span>Q1</li><li><span class="oc-chart-swatch"></span>Q2</li><li><span class="oc-chart-swatch"></span>Q3</li><li><span class="oc-chart-swatch"></span>Q4</li>
-    </ul>
-  </div>
-  <div class="oc-chart-pie oc-chart-pie--donut" role="img" aria-label="Share: 40, 25, 17, 18 percent"></div>
-</div>
-
-<svg viewBox="0 0 220 80" width="220" height="80" role="img" aria-label="Line chart with two series">
-  <path d="M0 60 L40 45 L80 50 L120 25 L160 30 L220 10" fill="none" stroke="var(--oc-chart-1)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M0 70 L40 65 L80 55 L120 58 L160 40 L220 35" fill="none" stroke="var(--oc-chart-2)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M0 78 H220" stroke="var(--oc-chart-grid)"/>
-</svg>
-<span class="oc-badge" style="background:var(--oc-chart-3);color:var(--oc-primary-foreground)">chart-3</span>
-<span class="oc-badge" style="background:var(--oc-chart-4);color:var(--oc-primary-foreground)">chart-4</span>
-<span class="oc-badge" style="background:var(--oc-chart-5);color:var(--oc-primary-foreground)">chart-5</span>
+<!-- OmniaUI component: chart - Chart tokens --oc-chart-1..5 (light-dark Omnia colors) with legend, bar and pie helpers. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       --oc-chart-1 .. --oc-chart-5: series colors (blue, teal, orange, purple, pink); --oc-chart-grid, --oc-chart-axis
+       .oc-chart-legend > li > .oc-chart-swatch: legend (swatch colors by position)
+       .oc-chart-bars > *: bar per item, height from --oc-bar
+       .oc-chart-pie (+ --donut): conic-gradient pie; stops set inline
+-->
+<div style="display:flex;gap:2rem;flex-wrap:wrap;align-items:flex-end">
+  <div style="flex:1 1 16rem">
+    <ul class="oc-chart-bars" role="img" aria-label="Revenue by quarter: 40, 65, 50, 85 percent of target">
+      <li style="--oc-bar:40%"></li><li style="--oc-bar:65%"></li><li style="--oc-bar:50%"></li><li style="--oc-bar:85%"></li>
+    </ul>
+    <ul class="oc-chart-legend" style="margin-top:.75rem">
+      <li><span class="oc-chart-swatch"></span>Q1</li><li><span class="oc-chart-swatch"></span>Q2</li><li><span class="oc-chart-swatch"></span>Q3</li><li><span class="oc-chart-swatch"></span>Q4</li>
+    </ul>
+  </div>
+  <div class="oc-chart-pie oc-chart-pie--donut" role="img" aria-label="Share: 40, 25, 17, 18 percent"></div>
+</div>
+
+<svg viewBox="0 0 220 80" width="220" height="80" role="img" aria-label="Line chart with two series">
+  <path d="M0 60 L40 45 L80 50 L120 25 L160 30 L220 10" fill="none" stroke="var(--oc-chart-1)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M0 70 L40 65 L80 55 L120 58 L160 40 L220 35" fill="none" stroke="var(--oc-chart-2)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M0 78 H220" stroke="var(--oc-chart-grid)"/>
+</svg>
+<span class="oc-badge" style="background:var(--oc-chart-3);color:var(--oc-primary-foreground)">chart-3</span>
+<span class="oc-badge" style="background:var(--oc-chart-4);color:var(--oc-primary-foreground)">chart-4</span>
+<span class="oc-badge" style="background:var(--oc-chart-5);color:var(--oc-primary-foreground)">chart-5</span>

package/snippets/chat-composer.html

@@ -1,21 +1,21 @@
-<!-- OmniaUI component: chat-composer — Chat message field with a toolbar and a send button in one frame. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/chat-composer.html | Map: form -> textarea -> bar (tools, hint, send)
-     Class API: form.oc-chat-composer > textarea.oc-chat-composer__input (placeholder + required) · .oc-chat-composer__bar >
-       .oc-chat-composer__tools > button.oc-chat-composer__tool · .oc-chat-composer__hint · button.oc-chat-composer__send (type=submit).
-     Modifiers: .oc-chat-composer--inline (one row). States: :focus-within ring; send is dimmed while the field is empty
-       (:placeholder-shown) or :disabled. The textarea grows with its content (field-sizing). No JavaScript needed.
-     Tip: put an emoji-picker trigger in the tools (see emoji-picker).
--->
-<form class="oc-chat-composer" action="#" style="max-inline-size:32rem">
-  <label class="oc-visually-hidden" for="oc-chat-input">Message</label>
-  <textarea class="oc-chat-composer__input" id="oc-chat-input" name="message" rows="1" placeholder="Write a message…" required></textarea>
-  <div class="oc-chat-composer__bar">
-    <div class="oc-chat-composer__tools">
-      <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file">&#128206;</button>
-      <button type="button" class="oc-chat-composer__tool" aria-label="Mention someone">@</button>
-      <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
-    </div>
-    <span class="oc-chat-composer__hint">Enter for a new line</span>
-    <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
-  </div>
-</form>
+<!-- OmniaUI component: chat-composer — Chat message field with a toolbar and a send button in one frame. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/chat-composer.html | Map: form -> textarea -> bar (tools, hint, send)
+     Class API: form.oc-chat-composer > textarea.oc-chat-composer__input (placeholder + required) · .oc-chat-composer__bar >
+       .oc-chat-composer__tools > button.oc-chat-composer__tool · .oc-chat-composer__hint · button.oc-chat-composer__send (type=submit).
+     Modifiers: .oc-chat-composer--inline (one row). States: :focus-within ring; send is dimmed while the field is empty
+       (:placeholder-shown) or :disabled. The textarea grows with its content (field-sizing). No JavaScript needed.
+     Tip: put an emoji-picker trigger in the tools (see emoji-picker).
+-->
+<form class="oc-chat-composer" action="#" style="max-inline-size:32rem">
+  <label class="oc-visually-hidden" for="oc-chat-input">Message</label>
+  <textarea class="oc-chat-composer__input" id="oc-chat-input" name="message" rows="1" placeholder="Write a message…" required></textarea>
+  <div class="oc-chat-composer__bar">
+    <div class="oc-chat-composer__tools">
+      <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file">&#128206;</button>
+      <button type="button" class="oc-chat-composer__tool" aria-label="Mention someone">@</button>
+      <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
+    </div>
+    <span class="oc-chat-composer__hint">Enter for a new line</span>
+    <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+  </div>
+</form>

package/snippets/checkbox.html

@@ -1,5 +1,5 @@
-<!-- OmniaUI component: checkbox - Checkbox and radio. Needs @birdycom/omniaui CSS.
--->
-<label><input class="oc-checkbox" type="checkbox" checked> Send me updates</label>
-<label><input class="oc-radio" type="radio" name="oc-plan" checked> Monthly</label>
-<label><input class="oc-radio" type="radio" name="oc-plan"> Yearly</label>
+<!-- OmniaUI component: checkbox - Checkbox and radio. Needs @birdycom/omniaui CSS.
+-->
+<label><input class="oc-checkbox" type="checkbox" checked> Send me updates</label>
+<label><input class="oc-radio" type="radio" name="oc-plan" checked> Monthly</label>
+<label><input class="oc-radio" type="radio" name="oc-plan"> Yearly</label>

package/snippets/checklist.html

@@ -1,23 +1,23 @@
-<!-- OmniaUI component: checklist - Rule / step list with met and unmet states (password rules, onboarding). Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-checklist: ul wrapper (use aria-live="polite" for live rules). Modifier: --card (bordered rows with action slot).
-       .oc-checklist-item: Row. State: .is-done / aria-checked="true"
-       .oc-checklist-text / -title / -hint: Text column, title and hint (card variant)
--->
-<ul class="oc-checklist" aria-live="polite" aria-label="Password requirements">
-  <li class="oc-checklist-item is-done">At least 12 characters</li>
-  <li class="oc-checklist-item is-done">One uppercase letter</li>
-  <li class="oc-checklist-item">One number</li>
-  <li class="oc-checklist-item">One symbol</li>
-</ul>
-
-<ul class="oc-checklist oc-checklist--card" style="margin-top:1rem">
-  <li class="oc-checklist-item is-done">
-    <span class="oc-checklist-text"><span class="oc-checklist-title">Add company details</span><span class="oc-checklist-hint">Name, VAT number, address</span></span>
-    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Open</a>
-  </li>
-  <li class="oc-checklist-item">
-    <span class="oc-checklist-text"><span class="oc-checklist-title">Connect your bank</span><span class="oc-checklist-hint">Import transactions automatically</span></span>
-    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Open</a>
-  </li>
-</ul>
+<!-- OmniaUI component: checklist - Rule / step list with met and unmet states (password rules, onboarding). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-checklist: ul wrapper (use aria-live="polite" for live rules). Modifier: --card (bordered rows with action slot).
+       .oc-checklist-item: Row. State: .is-done / aria-checked="true"
+       .oc-checklist-text / -title / -hint: Text column, title and hint (card variant)
+-->
+<ul class="oc-checklist" aria-live="polite" aria-label="Password requirements">
+  <li class="oc-checklist-item is-done">At least 12 characters</li>
+  <li class="oc-checklist-item is-done">One uppercase letter</li>
+  <li class="oc-checklist-item">One number</li>
+  <li class="oc-checklist-item">One symbol</li>
+</ul>
+
+<ul class="oc-checklist oc-checklist--card" style="margin-top:1rem">
+  <li class="oc-checklist-item is-done">
+    <span class="oc-checklist-text"><span class="oc-checklist-title">Add company details</span><span class="oc-checklist-hint">Name, VAT number, address</span></span>
+    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Open</a>
+  </li>
+  <li class="oc-checklist-item">
+    <span class="oc-checklist-text"><span class="oc-checklist-title">Connect your bank</span><span class="oc-checklist-hint">Import transactions automatically</span></span>
+    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Open</a>
+  </li>
+</ul>

package/snippets/chip-filter.html

@@ -1,14 +1,14 @@
-<!-- OmniaUI component: chip-filter - Rounded filter chips (checkboxes for several, radios for one) - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/chip-filter.html | Map: group (fieldset) -> one label per chip (checkbox + text + optional count)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-chip-filter: Group (a <fieldset> or role="group"/"radiogroup"). Modifiers: --scroll (one line, scrolls sideways), --sm.
-       .oc-chip-filter-item: Pill label around one checkbox or radio input
-       .oc-chip-filter-count: Optional count bubble inside a chip
-     States: checked (tinted primary), :focus-visible (outline), disabled (faded)
--->
-<fieldset class="oc-chip-filter" aria-label="Filter by type">
-  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="video" checked> Video <span class="oc-chip-filter-count">24</span></label>
-  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="audio"> Audio <span class="oc-chip-filter-count">8</span></label>
-  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="image" checked> Images <span class="oc-chip-filter-count">112</span></label>
-  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="docs" disabled> Documents <span class="oc-chip-filter-count">0</span></label>
-</fieldset>
+<!-- OmniaUI component: chip-filter - Rounded filter chips (checkboxes for several, radios for one) - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/chip-filter.html | Map: group (fieldset) -> one label per chip (checkbox + text + optional count)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-chip-filter: Group (a <fieldset> or role="group"/"radiogroup"). Modifiers: --scroll (one line, scrolls sideways), --sm.
+       .oc-chip-filter-item: Pill label around one checkbox or radio input
+       .oc-chip-filter-count: Optional count bubble inside a chip
+     States: checked (tinted primary), :focus-visible (outline), disabled (faded)
+-->
+<fieldset class="oc-chip-filter" aria-label="Filter by type">
+  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="video" checked> Video <span class="oc-chip-filter-count">24</span></label>
+  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="audio"> Audio <span class="oc-chip-filter-count">8</span></label>
+  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="image" checked> Images <span class="oc-chip-filter-count">112</span></label>
+  <label class="oc-chip-filter-item"><input type="checkbox" name="type" value="docs" disabled> Documents <span class="oc-chip-filter-count">0</span></label>
+</fieldset>

package/snippets/code-window.html

@@ -1,20 +1,20 @@
-<!-- OmniaUI component: code-window - Window frame around code, with a copy button. Needs @birdycom/omniaui CSS.
-     Class API: .oc-code-window · .oc-code-window__bar (+ <i> dots) · .oc-code-window__title · .oc-code-window__body (plain code) or .oc-code-block (highlighted) ·
-       .oc-code-copy (button; add .is-copied after copying). The one-line script below does the copy; everything else is CSS.
--->
-<div class="oc-code-window">
-  <div class="oc-code-window__bar">
-    <i></i><i></i><i></i>
-    <span class="oc-code-window__title">index.html</span>
-    <button type="button" class="oc-code-copy" data-oc-copy="#oc-sample-code">Copy</button>
-  </div>
-  <pre class="oc-code-window__body"><code id="oc-sample-code">&lt;link rel="stylesheet" href="omnia.css"&gt;
-&lt;button class="oc-btn"&gt;Hello&lt;/button&gt;</code></pre>
-</div>
-<script>
-document.addEventListener("click", async (e) => {
-  const b = e.target.closest("[data-oc-copy]"); if (!b) return;
-  await navigator.clipboard.writeText(document.querySelector(b.dataset.ocCopy).textContent);
-  b.classList.add("is-copied"); b.textContent = "Copied"; setTimeout(() => { b.classList.remove("is-copied"); b.textContent = "Copy"; }, 1500);
-});
-</script>
+<!-- OmniaUI component: code-window - Window frame around code, with a copy button. Needs @birdycom/omniaui CSS.
+     Class API: .oc-code-window · .oc-code-window__bar (+ <i> dots) · .oc-code-window__title · .oc-code-window__body (plain code) or .oc-code-block (highlighted) ·
+       .oc-code-copy (button; add .is-copied after copying). The one-line script below does the copy; everything else is CSS.
+-->
+<div class="oc-code-window">
+  <div class="oc-code-window__bar">
+    <i></i><i></i><i></i>
+    <span class="oc-code-window__title">index.html</span>
+    <button type="button" class="oc-code-copy" data-oc-copy="#oc-sample-code">Copy</button>
+  </div>
+  <pre class="oc-code-window__body"><code id="oc-sample-code">&lt;link rel="stylesheet" href="omnia.css"&gt;
+&lt;button class="oc-btn"&gt;Hello&lt;/button&gt;</code></pre>
+</div>
+<script>
+document.addEventListener("click", async (e) => {
+  const b = e.target.closest("[data-oc-copy]"); if (!b) return;
+  await navigator.clipboard.writeText(document.querySelector(b.dataset.ocCopy).textContent);
+  b.classList.add("is-copied"); b.textContent = "Copied"; setTimeout(() => { b.classList.remove("is-copied"); b.textContent = "Copy"; }, 1500);
+});
+</script>

package/snippets/collapsible.html

@@ -1,19 +1,19 @@
-<!-- OmniaUI component: collapsible - Card-style details/summary form section with icon, title and chevron. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       details.oc-collapsible: Root. Modifier: --dense (compact paddings).
-       summary: Header row with .oc-collapsible-icon + .oc-collapsible-title; the chevron is CSS
-       .oc-collapsible-content: Body with a top border
-     Slots: icon, title (summary), content (default)
--->
-<details class="oc-collapsible" open>
-  <summary>
-    <svg class="oc-collapsible-icon" 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="9"/><path d="M12 11v5M12 8h.01"/></svg>
-    <span class="oc-collapsible-title">General information</span>
-  </summary>
-  <div class="oc-collapsible-content">
-    <div class="oc-field">
-      <label class="oc-field-label" for="oc-collapsible-name">Name</label>
-      <input class="oc-input" id="oc-collapsible-name" value="Birdy Systems BV">
-    </div>
-  </div>
-</details>
+<!-- OmniaUI component: collapsible - Card-style details/summary form section with icon, title and chevron. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       details.oc-collapsible: Root. Modifier: --dense (compact paddings).
+       summary: Header row with .oc-collapsible-icon + .oc-collapsible-title; the chevron is CSS
+       .oc-collapsible-content: Body with a top border
+     Slots: icon, title (summary), content (default)
+-->
+<details class="oc-collapsible" open>
+  <summary>
+    <svg class="oc-collapsible-icon" 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="9"/><path d="M12 11v5M12 8h.01"/></svg>
+    <span class="oc-collapsible-title">General information</span>
+  </summary>
+  <div class="oc-collapsible-content">
+    <div class="oc-field">
+      <label class="oc-field-label" for="oc-collapsible-name">Name</label>
+      <input class="oc-input" id="oc-collapsible-name" value="Birdy Systems BV">
+    </div>
+  </div>
+</details>

package/snippets/color-field.html

@@ -1,13 +1,13 @@
-<!-- OmniaUI component: color-field - Native color picker next to a hex text input. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-color-field: Row wrapper
-       input[type=color]: Native picker swatch
-       .oc-input: Text field with the value (monospaced)
--->
-<div class="oc-field">
-  <label class="oc-field-label" for="oc-color-demo">Brand color</label>
-  <div class="oc-color-field">
-    <input type="color" id="oc-color-demo" value="#3366cc" aria-label="Pick a color">
-    <input class="oc-input" type="text" value="#3366cc" aria-label="Color value">
-  </div>
-</div>
+<!-- OmniaUI component: color-field - Native color picker next to a hex text input. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-color-field: Row wrapper
+       input[type=color]: Native picker swatch
+       .oc-input: Text field with the value (monospaced)
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-color-demo">Brand color</label>
+  <div class="oc-color-field">
+    <input type="color" id="oc-color-demo" value="#3366cc" aria-label="Pick a color">
+    <input class="oc-input" type="text" value="#3366cc" aria-label="Color value">
+  </div>
+</div>

package/snippets/color-select.html

@@ -1,18 +1,18 @@
-<!-- OmniaUI component: color-select - Pick one color from round swatches (or a list with names). Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/color-select.html | Map: fieldset group -> one label per color (radio + swatch + name)
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-color-select: Group (a <fieldset> or role="radiogroup"). Modifiers: --list (rows with names), --sm.
-       .oc-color-select-option: Label around one radio. Set the color with style="--oc-swatch: var(--color-...)".
-       .oc-color-select-swatch: Round color dot
-       .oc-color-select-name: Color name (visible in --list, screen-reader only in the swatch grid)
-     States: checked (double ring), :focus-visible (outline), disabled (faded)
-     Only Omnia palette tokens as colors, e.g. var(--color-red-70) or var(--oc-primary).
--->
-<fieldset class="oc-color-select" role="radiogroup" aria-label="Label color">
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-vividblue-95)"><input type="radio" name="color" value="blue" checked><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Blue</span></label>
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-teal-80)"><input type="radio" name="color" value="teal"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Teal</span></label>
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-green-60)"><input type="radio" name="color" value="green"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Green</span></label>
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-orange-95)"><input type="radio" name="color" value="orange"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Orange</span></label>
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-red-70)"><input type="radio" name="color" value="red"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Red</span></label>
-  <label class="oc-color-select-option" style="--oc-swatch: var(--color-purple-40)"><input type="radio" name="color" value="purple"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Purple</span></label>
-</fieldset>
+<!-- OmniaUI component: color-select - Pick one color from round swatches (or a list with names). Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/color-select.html | Map: fieldset group -> one label per color (radio + swatch + name)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-color-select: Group (a <fieldset> or role="radiogroup"). Modifiers: --list (rows with names), --sm.
+       .oc-color-select-option: Label around one radio. Set the color with style="--oc-swatch: var(--color-...)".
+       .oc-color-select-swatch: Round color dot
+       .oc-color-select-name: Color name (visible in --list, screen-reader only in the swatch grid)
+     States: checked (double ring), :focus-visible (outline), disabled (faded + diagonal line; add a title such as "Purple, in use")
+     Only Omnia palette tokens as colors, e.g. var(--color-red-70) or var(--oc-primary).
+-->
+<fieldset class="oc-color-select" role="radiogroup" aria-label="Label color">
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-vividblue-95)"><input type="radio" name="color" value="blue" checked><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Blue</span></label>
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-teal-80)"><input type="radio" name="color" value="teal"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Teal</span></label>
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-green-60)"><input type="radio" name="color" value="green"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Green</span></label>
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-orange-95)"><input type="radio" name="color" value="orange"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Orange</span></label>
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-red-70)"><input type="radio" name="color" value="red"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Red</span></label>
+  <label class="oc-color-select-option" style="--oc-swatch: var(--color-purple-40)"><input type="radio" name="color" value="purple"><span class="oc-color-select-swatch"></span><span class="oc-color-select-name">Purple</span></label>
+</fieldset>

package/snippets/column-menu.html

@@ -1,38 +1,38 @@
-<!-- OmniaUI component: column-menu - Column visibility checklist in a popover; hides table columns with :has() - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/column-menu.html | Map: scope -> toolbar with trigger -> popover (title, form with checkboxes, reset) -> table
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-column-menu-scope: Wrapper around menu + table. An unchecked [data-col="n"] hides column n (1-10) of the .oc-table inside.
-       .oc-column-menu[popover]: Popover panel, opened with button[popovertarget]
-       .oc-column-menu-title: Small heading
-       form.oc-column-menu-list: The checkbox list (a form, so button type="reset" restores the defaults)
-       .oc-column-menu-item: label + input[type=checkbox][data-col]. State: input disabled = locked column.
-       .oc-column-menu-footer: Row for Reset / Done buttons
-     Slots: title, one item per column, footer buttons
--->
-<div class="oc-column-menu-scope">
-  <div class="oc-table-toolbar">
-    <span class="oc-table-toolbar-spacer"></span>
-    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-column-menu-demo">Columns</button>
-  </div>
-  <div class="oc-column-menu" id="oc-column-menu-demo" popover>
-    <p class="oc-column-menu-title">Visible columns</p>
-    <form class="oc-column-menu-list">
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="1" checked disabled> Name</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="2" checked> E-mail</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="3" checked> City</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="4"> Phone</label>
-      <div class="oc-column-menu-footer">
-        <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">Reset</button>
-      </div>
-    </form>
-  </div>
-  <div class="oc-table-wrap">
-    <table class="oc-table">
-      <thead><tr><th>Name</th><th>E-mail</th><th>City</th><th>Phone</th></tr></thead>
-      <tbody>
-        <tr><td>Ada Lovelace</td><td>ada@example.com</td><td>London</td><td>+44 20 7946 0001</td></tr>
-        <tr><td>Alan Turing</td><td>alan@example.com</td><td>Manchester</td><td>+44 161 496 0002</td></tr>
-      </tbody>
-    </table>
-  </div>
-</div>
+<!-- OmniaUI component: column-menu - Column visibility checklist in a popover; hides table columns with :has() - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/column-menu.html | Map: scope -> toolbar with trigger -> popover (title, form with checkboxes, reset) -> table
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-column-menu-scope: Wrapper around menu + table. An unchecked [data-col="n"] hides column n (1-10) of the .oc-table inside.
+       .oc-column-menu[popover]: Popover panel, opened with button[popovertarget]
+       .oc-column-menu-title: Small heading
+       form.oc-column-menu-list: The checkbox list (a form, so button type="reset" restores the defaults)
+       .oc-column-menu-item: label + input[type=checkbox][data-col]. State: input disabled = locked column.
+       .oc-column-menu-footer: Row for Reset / Done buttons
+     Slots: title, one item per column, footer buttons
+-->
+<div class="oc-column-menu-scope">
+  <div class="oc-table-toolbar">
+    <span class="oc-table-toolbar-spacer"></span>
+    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-column-menu-demo">Columns</button>
+  </div>
+  <div class="oc-column-menu" id="oc-column-menu-demo" popover>
+    <p class="oc-column-menu-title">Visible columns</p>
+    <form class="oc-column-menu-list">
+      <label class="oc-column-menu-item"><input type="checkbox" data-col="1" checked disabled> Name</label>
+      <label class="oc-column-menu-item"><input type="checkbox" data-col="2" checked> E-mail</label>
+      <label class="oc-column-menu-item"><input type="checkbox" data-col="3" checked> City</label>
+      <label class="oc-column-menu-item"><input type="checkbox" data-col="4"> Phone</label>
+      <div class="oc-column-menu-footer">
+        <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">Reset</button>
+      </div>
+    </form>
+  </div>
+  <div class="oc-table-wrap">
+    <table class="oc-table">
+      <thead><tr><th>Name</th><th>E-mail</th><th>City</th><th>Phone</th></tr></thead>
+      <tbody>
+        <tr><td>Ada Lovelace</td><td>ada@example.com</td><td>London</td><td>+44 20 7946 0001</td></tr>
+        <tr><td>Alan Turing</td><td>alan@example.com</td><td>Manchester</td><td>+44 161 496 0002</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/snippets/combobox.html

@@ -1,19 +1,19 @@
-<!-- OmniaUI component: combobox - Combobox: input + listbox styling (filtering and selection are wrapper responsibility). Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-combobox: wrapper (list opens on :focus-within or [data-open])
-       input.oc-input.oc-combobox-input: role="combobox" aria-expanded aria-controls aria-autocomplete="list"
-       ul.oc-combobox-list: role="listbox"
-       li.oc-combobox-option: role="option" tabindex="-1"; aria-selected="true" shows a check; [data-active] marks the keyboard-active option
-       .oc-combobox-group / .oc-combobox-empty: group heading and empty message
--->
-<div class="oc-combobox">
-  <input class="oc-input oc-combobox-input" type="text" role="combobox" aria-expanded="false" aria-controls="oc-cb-list" aria-autocomplete="list" placeholder="Select framework&hellip;" aria-label="Framework">
-  <ul class="oc-combobox-list" id="oc-cb-list" role="listbox" aria-label="Frameworks">
-    <li class="oc-combobox-option" role="option" tabindex="-1">Astro</li>
-    <li class="oc-combobox-option" role="option" tabindex="-1" aria-selected="true">Laravel</li>
-    <li class="oc-combobox-option" role="option" tabindex="-1">Nuxt</li>
-    <li class="oc-combobox-option" role="option" tabindex="-1">React</li>
-    <li class="oc-combobox-option" role="option" tabindex="-1" aria-disabled="true">Svelte (soon)</li>
-    <li class="oc-combobox-option" role="option" tabindex="-1">Vue</li>
-  </ul>
-</div>
+<!-- OmniaUI component: combobox - Combobox: input + listbox styling (filtering and selection are wrapper responsibility). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-combobox: wrapper (list opens on :focus-within or [data-open])
+       input.oc-input.oc-combobox-input: role="combobox" aria-expanded aria-controls aria-autocomplete="list"
+       ul.oc-combobox-list: role="listbox"
+       li.oc-combobox-option: role="option" tabindex="-1"; aria-selected="true" shows a check; [data-active] marks the keyboard-active option
+       .oc-combobox-group / .oc-combobox-empty: group heading and empty message
+-->
+<div class="oc-combobox">
+  <input class="oc-input oc-combobox-input" type="text" role="combobox" aria-expanded="false" aria-controls="oc-cb-list" aria-autocomplete="list" placeholder="Select framework&hellip;" aria-label="Framework">
+  <ul class="oc-combobox-list" id="oc-cb-list" role="listbox" aria-label="Frameworks">
+    <li class="oc-combobox-option" role="option" tabindex="-1">Astro</li>
+    <li class="oc-combobox-option" role="option" tabindex="-1" aria-selected="true">Laravel</li>
+    <li class="oc-combobox-option" role="option" tabindex="-1">Nuxt</li>
+    <li class="oc-combobox-option" role="option" tabindex="-1">React</li>
+    <li class="oc-combobox-option" role="option" tabindex="-1" aria-disabled="true">Svelte (soon)</li>
+    <li class="oc-combobox-option" role="option" tabindex="-1">Vue</li>
+  </ul>
+</div>

package/snippets/command.html

@@ -1,24 +1,24 @@
-<!-- OmniaUI component: command - Command palette / searchable list styling (filter logic in a wrapper). Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-command: Root
-       .oc-command-input: Search input
-       .oc-command-list: Results ul
-       .oc-command-group-label: Group heading
-       .oc-command-item: Result. State: aria-selected="true", aria-disabled="true", hidden
-       .oc-command-shortcut: Keyboard hint on the right
-       .oc-command-separator: Divider
-       .oc-command-empty: Shown when nothing matches
--->
-<div class="oc-command" role="combobox" aria-expanded="true" aria-haspopup="listbox">
-  <input class="oc-command-input" type="search" placeholder="Type a command or search..." aria-label="Search commands">
-  <ul class="oc-command-list" role="listbox">
-    <li class="oc-command-group-label" role="presentation">Suggestions</li>
-    <li class="oc-command-item" role="option" aria-selected="true">New invoice <span class="oc-command-shortcut">Ctrl N</span></li>
-    <li class="oc-command-item" role="option">Open contacts</li>
-    <li class="oc-command-separator" role="separator"></li>
-    <li class="oc-command-group-label" role="presentation">Settings</li>
-    <li class="oc-command-item" role="option">Appearance</li>
-    <li class="oc-command-item" role="option" aria-disabled="true">Billing</li>
-  </ul>
-  <div class="oc-command-empty" hidden>No results found.</div>
-</div>
+<!-- OmniaUI component: command - Command palette / searchable list styling (filter logic in a wrapper). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-command: Root
+       .oc-command-input: Search input
+       .oc-command-list: Results ul
+       .oc-command-group-label: Group heading
+       .oc-command-item: Result. State: aria-selected="true", aria-disabled="true", hidden
+       .oc-command-shortcut: Keyboard hint on the right
+       .oc-command-separator: Divider
+       .oc-command-empty: Shown when nothing matches
+-->
+<div class="oc-command" role="combobox" aria-expanded="true" aria-haspopup="listbox">
+  <input class="oc-command-input" type="search" placeholder="Type a command or search..." aria-label="Search commands">
+  <ul class="oc-command-list" role="listbox">
+    <li class="oc-command-group-label" role="presentation">Suggestions</li>
+    <li class="oc-command-item" role="option" aria-selected="true">New invoice <span class="oc-command-shortcut">Ctrl N</span></li>
+    <li class="oc-command-item" role="option">Open contacts</li>
+    <li class="oc-command-separator" role="separator"></li>
+    <li class="oc-command-group-label" role="presentation">Settings</li>
+    <li class="oc-command-item" role="option">Appearance</li>
+    <li class="oc-command-item" role="option" aria-disabled="true">Billing</li>
+  </ul>
+  <div class="oc-command-empty" hidden>No results found.</div>
+</div>

package/snippets/confirm-dialog.html

@@ -1,32 +1,32 @@
-<!-- OmniaUI component: confirm-dialog - Alert dialog variant: icon ring, close button, typed confirmation and a discard action - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/confirm-dialog.html | Map: trigger -> dialog -> content (close, icon ring, title, form: message, typed field, footer)
-     Class API (modifiers are extra classes / attributes on the same element):
-       dialog.oc-modal + .oc-modal-content.oc-alert-dialog.oc-alert-dialog--<type>: The alert dialog (types: success, error, warning, info, question)
-       .oc-alert-dialog--confirm: Confirm variant on the content box (larger thin icon ring, wider box, wrapping footer)
-       .oc-alert-dialog-close: X button in the top corner (command="close")
-       form.oc-alert-dialog-form[method=dialog]: Wraps body + footer; the submit button closes the dialog with its value as returnValue
-       .oc-alert-dialog-typed: Label + input with pattern="WORD" required; the browser blocks submit until it matches
-       .oc-alert-dialog-confirm: The confirm (submit) button; looks disabled while the typed value is invalid
-       .oc-alert-dialog-discard: Optional third action at the start of the footer ("Don't save")
-     Slots: icon, title, message, typed field (optional), footer buttons (discard, cancel, confirm)
--->
-<button class="oc-btn oc-btn--destructive" type="button" command="show-modal" commandfor="oc-confirm-dialog-demo">Delete project</button>
-
-<dialog class="oc-modal" id="oc-confirm-dialog-demo" closedby="any" aria-labelledby="oc-confirm-dialog-title" aria-describedby="oc-confirm-dialog-text">
-  <div class="oc-modal-content oc-alert-dialog oc-alert-dialog--error oc-alert-dialog--confirm">
-    <button class="oc-alert-dialog-close" type="button" command="close" commandfor="oc-confirm-dialog-demo" aria-label="Close">&times;</button>
-    <span class="oc-alert-dialog-icon" aria-hidden="true">&times;</span>
-    <h2 class="oc-modal-title" id="oc-confirm-dialog-title">Delete "Kitchen renovation"?</h2>
-    <form class="oc-alert-dialog-form" method="dialog">
-      <div class="oc-modal-body" id="oc-confirm-dialog-text">This removes the project, its quotes and all files. This cannot be undone.</div>
-      <label class="oc-alert-dialog-typed">
-        <span>Type <code>DELETE</code> to confirm</span>
-        <input class="oc-input" name="confirm" pattern="DELETE" required autocomplete="off">
-      </label>
-      <div class="oc-modal-footer">
-        <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-confirm-dialog-demo">Cancel</button>
-        <button class="oc-btn oc-btn--destructive oc-alert-dialog-confirm" type="submit" value="confirm">Delete project</button>
-      </div>
-    </form>
-  </div>
-</dialog>
+<!-- OmniaUI component: confirm-dialog - Alert dialog variant: icon ring, close button, typed confirmation and a discard action - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/confirm-dialog.html | Map: trigger -> dialog -> content (close, icon ring, title, form: message, typed field, footer)
+     Class API (modifiers are extra classes / attributes on the same element):
+       dialog.oc-modal + .oc-modal-content.oc-alert-dialog.oc-alert-dialog--<type>: The alert dialog (types: success, error, warning, info, question)
+       .oc-alert-dialog--confirm: Confirm variant on the content box (larger thin icon ring, wider box, wrapping footer)
+       .oc-alert-dialog-close: X button in the top corner (command="close")
+       form.oc-alert-dialog-form[method=dialog]: Wraps body + footer; the submit button closes the dialog with its value as returnValue
+       .oc-alert-dialog-typed: Label + input with pattern="WORD" required; the browser blocks submit until it matches
+       .oc-alert-dialog-confirm: The confirm (submit) button; looks disabled while the typed value is invalid
+       .oc-alert-dialog-discard: Optional third action at the start of the footer ("Don't save")
+     Slots: icon, title, message, typed field (optional), footer buttons (discard, cancel, confirm)
+-->
+<button class="oc-btn oc-btn--destructive" type="button" command="show-modal" commandfor="oc-confirm-dialog-demo">Delete project</button>
+
+<dialog class="oc-modal" id="oc-confirm-dialog-demo" closedby="any" aria-labelledby="oc-confirm-dialog-title" aria-describedby="oc-confirm-dialog-text">
+  <div class="oc-modal-content oc-alert-dialog oc-alert-dialog--error oc-alert-dialog--confirm">
+    <button class="oc-alert-dialog-close" type="button" command="close" commandfor="oc-confirm-dialog-demo" aria-label="Close">&times;</button>
+    <span class="oc-alert-dialog-icon" aria-hidden="true">&times;</span>
+    <h2 class="oc-modal-title" id="oc-confirm-dialog-title">Delete "Kitchen renovation"?</h2>
+    <form class="oc-alert-dialog-form" method="dialog">
+      <div class="oc-modal-body" id="oc-confirm-dialog-text">This removes the project, its quotes and all files. This cannot be undone.</div>
+      <label class="oc-alert-dialog-typed">
+        <span>Type <code>DELETE</code> to confirm</span>
+        <input class="oc-input" name="confirm" pattern="DELETE" required autocomplete="off">
+      </label>
+      <div class="oc-modal-footer">
+        <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-confirm-dialog-demo">Cancel</button>
+        <button class="oc-btn oc-btn--destructive oc-alert-dialog-confirm" type="submit" value="confirm">Delete project</button>
+      </div>
+    </form>
+  </div>
+</dialog>