@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/prose.html

@@ -1,54 +1,54 @@
-<!-- OmniaUI component: prose — Typography for long-form CMS, blog and help text: headings, lists, quotes, code, tables, figures. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/prose.html | Map: article -> lead -> h2 + list -> figure -> h3 + ordered list -> blockquote -> table -> code -> hr + small print
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-prose: Wrapper around HTML without classes (h1–h4, p, a, strong, em, mark, code, kbd, ul, ol, dl, blockquote,
-         pre, table, figure, img, figcaption, hr). Width is 68ch. Modifiers: --sm, --lg (all spacing scales along), --full (no max width)
-       .oc-prose-lead: Larger intro paragraph
-     Rules use :where(), so they carry no extra weight: a utility class on an element inside the text still wins. No JavaScript.
--->
-<article class="oc-prose">
-  <h1>Planning a kitchen renovation</h1>
-  <p class="oc-prose-lead">A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</p>
-  <h2>Before the first visit</h2>
-  <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
-  <ul>
-    <li>The <strong>budget range</strong> you have in mind, including appliances</li>
-    <li>Which walls, doors and windows can move, and which cannot
-      <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
-    </li>
-    <li>Appliances you want to keep</li>
-  </ul>
-  <figure>
-    <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
-    <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
-  </figure>
-  <h3>From design to installation</h3>
-  <ol>
-    <li>Site visit and measurements (week 1)</li>
-    <li>Design and quote, with two revision rounds (weeks 2–3)</li>
-    <li>Order and production of the cabinets (weeks 4–9)</li>
-    <li>Installation, worktop and finishing (weeks 10–11)</li>
-  </ol>
-  <blockquote>
-    <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
-    <footer>— Ann Dewitte, client in Ghent</footer>
-  </blockquote>
-  <h2>Worktop materials compared</h2>
-  <table>
-    <caption>Prices per running metre, 60 cm deep, installed.</caption>
-    <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
-    <tbody>
-      <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
-      <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
-      <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
-    </tbody>
-  </table>
-  <h3>Sharing your floor plan</h3>
-  <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
-  <pre><code>Project:   2026-114 Villa Dewitte
-Room:      Kitchen, ground floor
-Wall A:    412 cm (window at 160 cm)
-Wall B:    298 cm (door at the left)</code></pre>
-  <hr>
-  <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
-</article>
+<!-- OmniaUI component: prose — Typography for long-form CMS, blog and help text: headings, lists, quotes, code, tables, figures. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/prose.html | Map: article -> lead -> h2 + list -> figure -> h3 + ordered list -> blockquote -> table -> code -> hr + small print
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-prose: Wrapper around HTML without classes (h1–h4, p, a, strong, em, mark, code, kbd, ul, ol, dl, blockquote,
+         pre, table, figure, img, figcaption, hr). Width is 68ch. Modifiers: --sm, --lg (all spacing scales along), --full (no max width)
+       .oc-prose-lead: Larger intro paragraph
+     Rules use :where(), so they carry no extra weight: a utility class on an element inside the text still wins. No JavaScript.
+-->
+<article class="oc-prose">
+  <h1>Planning a kitchen renovation</h1>
+  <p class="oc-prose-lead">A new kitchen takes eight to twelve weeks from the first visit to the last cabinet handle. This guide explains every step, so you know what to expect and when we need you.</p>
+  <h2>Before the first visit</h2>
+  <p>Collect a few photos of kitchens you like and measure the room roughly. Exact measurements are not needed yet: our site manager does that during the visit. Read the <a href="#checklist">preparation checklist</a> if you want to be fully ready.</p>
+  <ul>
+    <li>The <strong>budget range</strong> you have in mind, including appliances</li>
+    <li>Which walls, doors and windows can move, and which cannot
+      <ul><li>Load-bearing walls need a structural engineer</li><li>Moving a window needs a permit in most towns</li></ul>
+    </li>
+    <li>Appliances you want to keep</li>
+  </ul>
+  <figure>
+    <div class="oc-media-art oc-media-art--6" role="img" aria-label="Kitchen with oak fronts and a light stone worktop"></div>
+    <figcaption>Villa Dewitte: oak fronts with a Calacatta matt worktop, finished in October 2026.</figcaption>
+  </figure>
+  <h3>From design to installation</h3>
+  <ol>
+    <li>Site visit and measurements (week 1)</li>
+    <li>Design and quote, with two revision rounds (weeks 2–3)</li>
+    <li>Order and production of the cabinets (weeks 4–9)</li>
+    <li>Installation, worktop and finishing (weeks 10–11)</li>
+  </ol>
+  <blockquote>
+    <p>The planning was clear from day one. We always knew who was coming and when, and the kitchen was ready a week early.</p>
+    <footer>— Ann Dewitte, client in Ghent</footer>
+  </blockquote>
+  <h2>Worktop materials compared</h2>
+  <table>
+    <caption>Prices per running metre, 60 cm deep, installed.</caption>
+    <thead><tr><th>Material</th><th>Thickness</th><th>Heat resistant</th><th>Price</th></tr></thead>
+    <tbody>
+      <tr><td>Compact laminate</td><td>12 mm</td><td>Up to 180 °C</td><td>€ 290</td></tr>
+      <tr><td>Quartz composite</td><td>20 mm</td><td>Up to 150 °C</td><td>€ 540</td></tr>
+      <tr><td>Natural stone</td><td>20 mm</td><td>Yes</td><td>€ 720</td></tr>
+    </tbody>
+  </table>
+  <h3>Sharing your floor plan</h3>
+  <p>Upload a PDF or a photo in the client portal, or send it by e-mail. Press <kbd>Ctrl</kbd> + <kbd>V</kbd> in the chat to paste a screenshot. Files are stored as <code>project-id/plans/</code> and only your project team can see them.</p>
+  <pre><code>Project:   2026-114 Villa Dewitte
+Room:      Kitchen, ground floor
+Wall A:    412 cm (window at 160 cm)
+Wall B:    298 cm (door at the left)</code></pre>
+  <hr>
+  <p><small>Lead times are an estimate. <mark>Natural stone</mark> can take two weeks longer in summer.</small></p>
+</article>

package/snippets/radio.html

@@ -1,17 +1,17 @@
-<!-- OmniaUI component: radio - Radio group: native inputs, stacked or row, descriptions, card style. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-radio: the input (accent-color from the theme)
-       .oc-radio-group: fieldset/div wrapper. Modifier: --row
-       .oc-radio-item: label around input + text. Modifier: --card (bordered, highlights when checked)
--->
-<fieldset class="oc-radio-group">
-  <legend class="oc-label">Plan</legend>
-  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="free" checked> Free</label>
-  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="pro"> Pro</label>
-  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="team" disabled> Team (soon)</label>
-</fieldset>
-
-<div class="oc-radio-group">
-  <label class="oc-radio-item oc-radio-item--card"><input class="oc-radio" type="radio" name="oc-bill" value="month" checked><span>Monthly<small>Billed every month, cancel anytime.</small></span></label>
-  <label class="oc-radio-item oc-radio-item--card"><input class="oc-radio" type="radio" name="oc-bill" value="year"><span>Yearly<small>Two months free.</small></span></label>
-</div>
+<!-- OmniaUI component: radio - Radio group: native inputs, stacked or row, descriptions, card style. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-radio: the input (accent-color from the theme)
+       .oc-radio-group: fieldset/div wrapper. Modifier: --row
+       .oc-radio-item: label around input + text. Modifier: --card (bordered, highlights when checked)
+-->
+<fieldset class="oc-radio-group">
+  <legend class="oc-label">Plan</legend>
+  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="free" checked> Free</label>
+  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="pro"> Pro</label>
+  <label class="oc-radio-item"><input class="oc-radio" type="radio" name="oc-plan" value="team" disabled> Team (soon)</label>
+</fieldset>
+
+<div class="oc-radio-group">
+  <label class="oc-radio-item oc-radio-item--card"><input class="oc-radio" type="radio" name="oc-bill" value="month" checked><span>Monthly<small>Billed every month, cancel anytime.</small></span></label>
+  <label class="oc-radio-item oc-radio-item--card"><input class="oc-radio" type="radio" name="oc-bill" value="year"><span>Yearly<small>Two months free.</small></span></label>
+</div>

package/snippets/recovery-codes.html

@@ -1,20 +1,20 @@
-<!-- OmniaUI component: recovery-codes - Warning panel with a code grid plus copy and download actions. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-recovery-codes: Panel (warning tint)
-       .oc-recovery-codes-title / -warning: Heading and explanation
-       .oc-recovery-codes-list: Two-column monospace grid (selectable with one click)
-       .oc-recovery-codes-actions: Button row
--->
-<div class="oc-recovery-codes">
-  <h3 class="oc-recovery-codes-title">Recovery codes</h3>
-  <p class="oc-recovery-codes-warning">Store these codes somewhere safe. Each code works once.</p>
-  <ul class="oc-recovery-codes-list">
-    <li>4F8K-92QA</li><li>M3ZP-71LD</li>
-    <li>7TQX-0BNE</li><li>C8WV-5YHR</li>
-    <li>2JDA-KE63</li><li>R9UG-X4MS</li>
-  </ul>
-  <div class="oc-recovery-codes-actions">
-    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Copy all</button>
-    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Download .txt</button>
-  </div>
-</div>
+<!-- OmniaUI component: recovery-codes - Warning panel with a code grid plus copy and download actions. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-recovery-codes: Panel (warning tint)
+       .oc-recovery-codes-title / -warning: Heading and explanation
+       .oc-recovery-codes-list: Two-column monospace grid (selectable with one click)
+       .oc-recovery-codes-actions: Button row
+-->
+<div class="oc-recovery-codes">
+  <h3 class="oc-recovery-codes-title">Recovery codes</h3>
+  <p class="oc-recovery-codes-warning">Store these codes somewhere safe. Each code works once.</p>
+  <ul class="oc-recovery-codes-list">
+    <li>4F8K-92QA</li><li>M3ZP-71LD</li>
+    <li>7TQX-0BNE</li><li>C8WV-5YHR</li>
+    <li>2JDA-KE63</li><li>R9UG-X4MS</li>
+  </ul>
+  <div class="oc-recovery-codes-actions">
+    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Copy all</button>
+    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Download .txt</button>
+  </div>
+</div>

package/snippets/resizable.html

@@ -1,16 +1,16 @@
-<!-- OmniaUI component: resizable - Resizable panels using CSS resize (horizontal, vertical, free box). Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-resizable: flex container. Modifier: --vertical
-       .oc-resizable-panel: pane. Modifier: --resizable (gets the resize grip; sets min/max size)
-       .oc-resizable-box: any element with resize: both
--->
-<div class="oc-resizable" style="block-size:11rem">
-  <div class="oc-resizable-panel oc-resizable-panel--resizable"><strong>Sidebar</strong><br>Drag the corner grip to resize.</div>
-  <div class="oc-resizable-panel"><strong>Content</strong><br>Takes the remaining space.</div>
-</div>
-
-<div class="oc-resizable oc-resizable--vertical" style="block-size:14rem">
-  <div class="oc-resizable-panel oc-resizable-panel--resizable"><strong>Editor</strong></div>
-  <div class="oc-resizable-panel"><strong>Preview</strong></div>
-</div>
-<div class="oc-resizable-box oc-resizable" style="inline-size:14rem;block-size:6rem"><div class="oc-resizable-panel">Resize me in both directions</div></div>
+<!-- OmniaUI component: resizable - Resizable panels using CSS resize (horizontal, vertical, free box). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-resizable: flex container. Modifier: --vertical
+       .oc-resizable-panel: pane. Modifier: --resizable (gets the resize grip; sets min/max size)
+       .oc-resizable-box: any element with resize: both
+-->
+<div class="oc-resizable" style="block-size:11rem">
+  <div class="oc-resizable-panel oc-resizable-panel--resizable"><strong>Sidebar</strong><br>Drag the corner grip to resize.</div>
+  <div class="oc-resizable-panel"><strong>Content</strong><br>Takes the remaining space.</div>
+</div>
+
+<div class="oc-resizable oc-resizable--vertical" style="block-size:14rem">
+  <div class="oc-resizable-panel oc-resizable-panel--resizable"><strong>Editor</strong></div>
+  <div class="oc-resizable-panel"><strong>Preview</strong></div>
+</div>
+<div class="oc-resizable-box oc-resizable" style="inline-size:14rem;block-size:6rem"><div class="oc-resizable-panel">Resize me in both directions</div></div>

package/snippets/scroll-area.html

@@ -1,20 +1,20 @@
-<!-- OmniaUI component: scroll-area - Scroll area: bounded scroll region with themed thin scrollbar and edge shadows. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-scroll-area: bordered scroll region (max-block-size 14rem). Modifiers: --x (horizontal), --shadows (edge shadows, CSS only)
-       .oc-scrollbar: themed scrollbar for any overflow element. Modifiers: --thin, --hidden
--->
-<div class="oc-scroll-area oc-scroll-area--shadows" tabindex="0" role="region" aria-label="Release notes">
-  <h4 style="margin:0 0 .5rem">Release notes</h4>
-  <p>Version 0.9.0 &ndash; light-dark() tokens for every component.</p>
-  <p>Version 0.8.0 &ndash; sheet, popover and command on native dialog and popover.</p>
-  <p>Version 0.6.0 &ndash; toast with CSS auto-dismiss.</p>
-  <p>Version 0.6.0 &ndash; segmented control and stepper.</p>
-  <p>Version 0.5.0 &ndash; otp input, tag input and copy field.</p>
-  <p>Version 0.4.0 &ndash; sidebar with icon-only mode.</p>
-  <p>Version 0.3.0 &ndash; tabs, accordion on details.</p>
-  <p>Version 0.2.0 &ndash; alerts and badges.</p>
-</div>
-
-<div class="oc-scroll-area oc-scroll-area--x" tabindex="0" role="region" aria-label="Tags">
-  <span class="oc-badge">design</span> <span class="oc-badge">tokens</span> <span class="oc-badge">dark mode</span> <span class="oc-badge">anchor positioning</span> <span class="oc-badge">popover</span> <span class="oc-badge">container queries</span> <span class="oc-badge">scroll snap</span> <span class="oc-badge">view transitions</span> <span class="oc-badge">oklch</span> <span class="oc-badge">light-dark</span> <span class="oc-badge">color-mix</span>
-</div>
+<!-- OmniaUI component: scroll-area - Scroll area: bounded scroll region with themed thin scrollbar and edge shadows. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-scroll-area: bordered scroll region (max-block-size 14rem). Modifiers: --x (horizontal), --shadows (edge shadows, CSS only)
+       .oc-scrollbar: themed scrollbar for any overflow element. Modifiers: --thin, --hidden
+-->
+<div class="oc-scroll-area oc-scroll-area--shadows" tabindex="0" role="region" aria-label="Release notes">
+  <h4 style="margin:0 0 .5rem">Release notes</h4>
+  <p>Version 0.9.0 &ndash; light-dark() tokens for every component.</p>
+  <p>Version 0.8.0 &ndash; sheet, popover and command on native dialog and popover.</p>
+  <p>Version 0.6.0 &ndash; toast with CSS auto-dismiss.</p>
+  <p>Version 0.6.0 &ndash; segmented control and stepper.</p>
+  <p>Version 0.5.0 &ndash; otp input, tag input and copy field.</p>
+  <p>Version 0.4.0 &ndash; sidebar with icon-only mode.</p>
+  <p>Version 0.3.0 &ndash; tabs, accordion on details.</p>
+  <p>Version 0.2.0 &ndash; alerts and badges.</p>
+</div>
+
+<div class="oc-scroll-area oc-scroll-area--x" tabindex="0" role="region" aria-label="Tags">
+  <span class="oc-badge">design</span> <span class="oc-badge">tokens</span> <span class="oc-badge">dark mode</span> <span class="oc-badge">anchor positioning</span> <span class="oc-badge">popover</span> <span class="oc-badge">container queries</span> <span class="oc-badge">scroll snap</span> <span class="oc-badge">view transitions</span> <span class="oc-badge">oklch</span> <span class="oc-badge">light-dark</span> <span class="oc-badge">color-mix</span>
+</div>

package/snippets/search.html

@@ -1,8 +1,8 @@
-<!-- OmniaUI component: search - Search field. Needs @birdycom/omniaui CSS.
-     Class API: .oc-search (label wrapper) · .oc-search-icon (svg) · .oc-search-input (input type="search") · .oc-search-hint (kbd, hidden while focused)
--->
-<label class="oc-search">
-  <svg class="oc-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
-  <input class="oc-search-input" type="search" name="q" placeholder="Search the docs" aria-label="Search the docs">
-  <kbd class="oc-search-hint">/</kbd>
-</label>
+<!-- OmniaUI component: search - Search field. Needs @birdycom/omniaui CSS.
+     Class API: .oc-search (label wrapper) · .oc-search-icon (svg) · .oc-search-input (input type="search") · .oc-search-hint (kbd, hidden while focused)
+-->
+<label class="oc-search">
+  <svg class="oc-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+  <input class="oc-search-input" type="search" name="q" placeholder="Search the docs" aria-label="Search the docs">
+  <kbd class="oc-search-hint">/</kbd>
+</label>

package/snippets/segmented.html

@@ -1,11 +1,11 @@
-<!-- OmniaUI component: segmented - Radio group as a pill switcher for a single choice - no JavaScript. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-segmented: Group wrapper (role="radiogroup"). Modifiers: --block (full width), --sm.
-       .oc-segmented-item: Label that wraps one radio input and its text
-     Slots: one .oc-segmented-item per option (radio input + label text)
--->
-<div class="oc-segmented" role="radiogroup" aria-label="Period">
-  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="month" checked> Month</label>
-  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="quarter"> Quarter</label>
-  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="year"> Year</label>
-</div>
+<!-- OmniaUI component: segmented - Radio group as a pill switcher for a single choice - no JavaScript. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-segmented: Group wrapper (role="radiogroup"). Modifiers: --block (full width), --sm.
+       .oc-segmented-item: Label that wraps one radio input and its text
+     Slots: one .oc-segmented-item per option (radio input + label text)
+-->
+<div class="oc-segmented" role="radiogroup" aria-label="Period">
+  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="month" checked> Month</label>
+  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="quarter"> Quarter</label>
+  <label class="oc-segmented-item"><input type="radio" name="oc-period" value="year"> Year</label>
+</div>

package/snippets/select.html

@@ -1,7 +1,7 @@
-<!-- OmniaUI component: select - Native select. Needs @birdycom/omniaui CSS.
--->
-<select class="oc-select" aria-label="Country">
-  <option>Belgium</option>
-  <option>Netherlands</option>
-  <option>Germany</option>
-</select>
+<!-- OmniaUI component: select - Native select. Needs @birdycom/omniaui CSS.
+-->
+<select class="oc-select" aria-label="Country">
+  <option>Belgium</option>
+  <option>Netherlands</option>
+  <option>Germany</option>
+</select>

package/snippets/separator.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: separator - Separator: horizontal, vertical and with label. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-separator: 1px divider (use on <hr>). Modifiers: --vertical, --strong
-       .oc-separator-text: divider lines with a centered label
--->
-<p style="margin:0;font-size:.875rem">Content above</p>
-<hr class="oc-separator">
-<p style="margin:0;font-size:.875rem">Content below</p>
-
-<div style="display:flex;align-items:center;block-size:1.5rem;font-size:.875rem">
-  <span>Blog</span><span class="oc-separator oc-separator--vertical" role="separator" aria-orientation="vertical"></span>
-  <span>Docs</span><span class="oc-separator oc-separator--vertical" role="separator" aria-orientation="vertical"></span>
-  <span>Source</span>
-</div>
-<div class="oc-separator-text" role="separator"><span>or continue with</span></div>
+<!-- OmniaUI component: separator - Separator: horizontal, vertical and with label. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-separator: 1px divider (use on <hr>). Modifiers: --vertical, --strong
+       .oc-separator-text: divider lines with a centered label
+-->
+<p style="margin:0;font-size:.875rem">Content above</p>
+<hr class="oc-separator">
+<p style="margin:0;font-size:.875rem">Content below</p>
+
+<div style="display:flex;align-items:center;block-size:1.5rem;font-size:.875rem">
+  <span>Blog</span><span class="oc-separator oc-separator--vertical" role="separator" aria-orientation="vertical"></span>
+  <span>Docs</span><span class="oc-separator oc-separator--vertical" role="separator" aria-orientation="vertical"></span>
+  <span>Source</span>
+</div>
+<div class="oc-separator-text" role="separator"><span>or continue with</span></div>

package/snippets/severity-card.html

@@ -1,35 +1,35 @@
-<!-- OmniaUI component: severity-card - Risk-colored expandable card (low, medium, high, critical) on details / summary - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/severity-card.html | Map: high card (open: head, body, actions) -> low resolved card
-     Class API (modifiers are extra classes / attributes on the same element):
-       details.oc-severity-card: Card. Levels: --low, --medium, --high, --critical. State: .is-resolved (neutral, title struck). Same name="..." = one open at a time.
-       summary.oc-severity-card-head: Head row with chevron
-       .oc-severity-card-icon / -main / -title: Icon, text column, title in the level color
-       .oc-severity-card-tags / -tag: Small monospace tags under the title
-       .oc-severity-card-level: Level badge at the end of the head
-       .oc-severity-card-body / -actions: Details text and action buttons
-     Slots: icon, title, tags, level, body, actions
--->
-<details class="oc-severity-card oc-severity-card--high" name="oc-findings" open>
-  <summary class="oc-severity-card-head">
-    <span class="oc-severity-card-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"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
-    <span class="oc-severity-card-main">
-      <span class="oc-severity-card-title">shop-example.com data breach</span>
-      <span class="oc-severity-card-tags"><span class="oc-severity-card-tag">email</span><span class="oc-severity-card-tag">password</span><span class="oc-severity-card-tag">phone</span></span>
-    </span>
-    <span class="oc-severity-card-level">High</span>
-  </summary>
-  <div class="oc-severity-card-body">
-    <p>Your e-mail address and a hashed password appeared in a leak from March 2026. Change the password on this site and everywhere you reused it.</p>
-    <div class="oc-severity-card-actions">
-      <a class="oc-btn oc-btn--sm" href="#">Change password</a>
-      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Mark as resolved</button>
-    </div>
-  </div>
-</details>
-<details class="oc-severity-card oc-severity-card--low is-resolved" name="oc-findings">
-  <summary class="oc-severity-card-head">
-    <span class="oc-severity-card-main"><span class="oc-severity-card-title">Old forum profile</span></span>
-    <span class="oc-severity-card-level">Resolved</span>
-  </summary>
-  <div class="oc-severity-card-body"><p>The profile was removed on 2 October 2026.</p></div>
-</details>
+<!-- OmniaUI component: severity-card - Risk-colored expandable card (low, medium, high, critical) on details / summary - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/severity-card.html | Map: high card (open: head, body, actions) -> low resolved card
+     Class API (modifiers are extra classes / attributes on the same element):
+       details.oc-severity-card: Card. Levels: --low, --medium, --high, --critical. State: .is-resolved (neutral, title struck). Same name="..." = one open at a time.
+       summary.oc-severity-card-head: Head row with chevron
+       .oc-severity-card-icon / -main / -title: Icon, text column, title in the level color
+       .oc-severity-card-tags / -tag: Small monospace tags under the title
+       .oc-severity-card-level: Level badge at the end of the head
+       .oc-severity-card-body / -actions: Details text and action buttons
+     Slots: icon, title, tags, level, body, actions
+-->
+<details class="oc-severity-card oc-severity-card--high" name="oc-findings" open>
+  <summary class="oc-severity-card-head">
+    <span class="oc-severity-card-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"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/></svg></span>
+    <span class="oc-severity-card-main">
+      <span class="oc-severity-card-title">shop-example.com data breach</span>
+      <span class="oc-severity-card-tags"><span class="oc-severity-card-tag">email</span><span class="oc-severity-card-tag">password</span><span class="oc-severity-card-tag">phone</span></span>
+    </span>
+    <span class="oc-severity-card-level">High</span>
+  </summary>
+  <div class="oc-severity-card-body">
+    <p>Your e-mail address and a hashed password appeared in a leak from March 2026. Change the password on this site and everywhere you reused it.</p>
+    <div class="oc-severity-card-actions">
+      <a class="oc-btn oc-btn--sm" href="#">Change password</a>
+      <button class="oc-btn oc-btn--outline oc-btn--sm" type="button">Mark as resolved</button>
+    </div>
+  </div>
+</details>
+<details class="oc-severity-card oc-severity-card--low is-resolved" name="oc-findings">
+  <summary class="oc-severity-card-head">
+    <span class="oc-severity-card-main"><span class="oc-severity-card-title">Old forum profile</span></span>
+    <span class="oc-severity-card-level">Resolved</span>
+  </summary>
+  <div class="oc-severity-card-body"><p>The profile was removed on 2 October 2026.</p></div>
+</details>

package/snippets/sheet.html

@@ -1,32 +1,32 @@
-<!-- OmniaUI component: sheet - Side panel on <dialog> (right, left, top, bottom) - no JavaScript. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       dialog.oc-sheet: The dialog. Side modifiers: --left, --top, --bottom (default right).
-       .oc-sheet-content: Panel. Modifier: --wide.
-       .oc-sheet-header / -title / -description: Heading area
-       .oc-sheet-body: Scrolling content
-       .oc-sheet-footer: Action row
-       .oc-sheet-close: Close button (command="close")
-     Slots: header (title, description), body (default), footer, trigger button outside the dialog
--->
-<button class="oc-btn oc-btn--outline" type="button" command="show-modal" commandfor="oc-sheet-demo">Open sheet</button>
-
-<dialog class="oc-sheet" id="oc-sheet-demo" closedby="any" aria-labelledby="oc-sheet-demo-title">
-  <div class="oc-sheet-content">
-    <button class="oc-sheet-close" type="button" command="close" commandfor="oc-sheet-demo" aria-label="Close">&times;</button>
-    <div class="oc-sheet-header">
-      <h2 class="oc-sheet-title" id="oc-sheet-demo-title">Table design</h2>
-      <p class="oc-sheet-description">Choose the columns you want to see.</p>
-    </div>
-    <div class="oc-sheet-body">
-      <div class="oc-field-group">
-        <label><input class="oc-checkbox" type="checkbox" checked> Name</label>
-        <label><input class="oc-checkbox" type="checkbox" checked> E-mail</label>
-        <label><input class="oc-checkbox" type="checkbox"> Phone</label>
-      </div>
-    </div>
-    <div class="oc-sheet-footer">
-      <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-sheet-demo">Cancel</button>
-      <button class="oc-btn" type="button" command="close" commandfor="oc-sheet-demo">Save</button>
-    </div>
-  </div>
-</dialog>
+<!-- OmniaUI component: sheet - Side panel on <dialog> (right, left, top, bottom) - no JavaScript. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       dialog.oc-sheet: The dialog. Side modifiers: --left, --top, --bottom (default right).
+       .oc-sheet-content: Panel. Modifier: --wide.
+       .oc-sheet-header / -title / -description: Heading area
+       .oc-sheet-body: Scrolling content
+       .oc-sheet-footer: Action row
+       .oc-sheet-close: Close button (command="close")
+     Slots: header (title, description), body (default), footer, trigger button outside the dialog
+-->
+<button class="oc-btn oc-btn--outline" type="button" command="show-modal" commandfor="oc-sheet-demo">Open sheet</button>
+
+<dialog class="oc-sheet" id="oc-sheet-demo" closedby="any" aria-labelledby="oc-sheet-demo-title">
+  <div class="oc-sheet-content">
+    <button class="oc-sheet-close" type="button" command="close" commandfor="oc-sheet-demo" aria-label="Close">&times;</button>
+    <div class="oc-sheet-header">
+      <h2 class="oc-sheet-title" id="oc-sheet-demo-title">Table design</h2>
+      <p class="oc-sheet-description">Choose the columns you want to see.</p>
+    </div>
+    <div class="oc-sheet-body">
+      <div class="oc-field-group">
+        <label><input class="oc-checkbox" type="checkbox" checked> Name</label>
+        <label><input class="oc-checkbox" type="checkbox" checked> E-mail</label>
+        <label><input class="oc-checkbox" type="checkbox"> Phone</label>
+      </div>
+    </div>
+    <div class="oc-sheet-footer">
+      <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-sheet-demo">Cancel</button>
+      <button class="oc-btn" type="button" command="close" commandfor="oc-sheet-demo">Save</button>
+    </div>
+  </div>
+</dialog>

package/snippets/sidebar-docs.html

@@ -1,24 +1,24 @@
-<!-- OmniaUI component: sidebar-docs - The navigation used on the left of the OmniaCSS documentation (variant of the sidebar). Needs @birdycom/omniaui CSS.
-     Class API: .oc-sidebar.oc-sidebar--docs (root nav) · .oc-sidebar-title · .oc-sidebar-group-label · .oc-sidebar-menu (ul) ·
-       .oc-sidebar-menu-button (a; aria-current="page" = current page, .is-active = section that contains it) · .oc-sidebar-menu-sub (nested ul)
--->
-<nav class="oc-sidebar oc-sidebar--docs" aria-label="Documentation">
-  <h2 class="oc-sidebar-title">Documentation</h2>
-  <p class="oc-sidebar-group-label">Getting started</p>
-  <ul class="oc-sidebar-menu">
-    <li><a class="oc-sidebar-menu-button" href="#">Introduction</a></li>
-    <li><a class="oc-sidebar-menu-button" href="#">Installation</a></li>
-  </ul>
-  <p class="oc-sidebar-group-label">Layout</p>
-  <ul class="oc-sidebar-menu">
-    <li>
-      <a class="oc-sidebar-menu-button is-active" href="#">Flexbox</a>
-      <ul class="oc-sidebar-menu-sub">
-        <li><a class="oc-sidebar-menu-button" aria-current="page" href="#">Flex direction</a></li>
-        <li><a class="oc-sidebar-menu-button" href="#">Flex wrap</a></li>
-      </ul>
-    </li>
-    <li><a class="oc-sidebar-menu-button" href="#">Grid</a></li>
-  </ul>
-</nav>
-
+<!-- OmniaUI component: sidebar-docs - The navigation used on the left of the OmniaCSS documentation (variant of the sidebar). Needs @birdycom/omniaui CSS.
+     Class API: .oc-sidebar.oc-sidebar--docs (root nav) · .oc-sidebar-title · .oc-sidebar-group-label · .oc-sidebar-menu (ul) ·
+       .oc-sidebar-menu-button (a; aria-current="page" = current page, .is-active = section that contains it) · .oc-sidebar-menu-sub (nested ul)
+-->
+<nav class="oc-sidebar oc-sidebar--docs" aria-label="Documentation">
+  <h2 class="oc-sidebar-title">Documentation</h2>
+  <p class="oc-sidebar-group-label">Getting started</p>
+  <ul class="oc-sidebar-menu">
+    <li><a class="oc-sidebar-menu-button" href="#">Introduction</a></li>
+    <li><a class="oc-sidebar-menu-button" href="#">Installation</a></li>
+  </ul>
+  <p class="oc-sidebar-group-label">Layout</p>
+  <ul class="oc-sidebar-menu">
+    <li>
+      <a class="oc-sidebar-menu-button is-active" href="#">Flexbox</a>
+      <ul class="oc-sidebar-menu-sub">
+        <li><a class="oc-sidebar-menu-button" aria-current="page" href="#">Flex direction</a></li>
+        <li><a class="oc-sidebar-menu-button" href="#">Flex wrap</a></li>
+      </ul>
+    </li>
+    <li><a class="oc-sidebar-menu-button" href="#">Grid</a></li>
+  </ul>
+</nav>
+