@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/barcode-input.html

@@ -1,18 +1,18 @@
-<!-- OmniaUI component: barcode-input - Code field with a barcode icon in the left column. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/barcode-input.html | Map: labeled field (icon column + value) -> optional preview
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-barcode-input: Wrapper when you also show a preview under the field
-       .oc-input-group--affix + .oc-input-addon: The icon column (same chrome as the euro and percent fields)
-       .oc-barcode-input-field: Add to .oc-input
-       .oc-barcode-preview: Optional preview under the field. Modifier: --empty
-     States: aria-invalid="true" on the field turns the frame and the preview red
-     Slots: replace .oc-barcode-preview-bars with your own svg, canvas or img
--->
-<div class="oc-field">
-  <label class="oc-field-label" for="oc-barcode-demo">Our barcode</label>
-  <div class="oc-input-group oc-input-group--affix">
-    <span class="oc-input-addon" aria-hidden="true"><svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z"/></svg></span>
-    <input class="oc-input oc-barcode-input-field" id="oc-barcode-demo" name="ean" type="text" maxlength="80" placeholder="EAN-13 or internal code" autocomplete="off" spellcheck="false">
-  </div>
-  <p class="oc-field-description">13 digits is an EAN-13. Anything else is an internal code.</p>
-</div>
+<!-- OmniaUI component: barcode-input - Code field with a barcode icon in the left column. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/barcode-input.html | Map: labeled field (icon column + value) -> optional preview
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-barcode-input: Wrapper when you also show a preview under the field
+       .oc-input-group--affix + .oc-input-addon: The icon column (same chrome as the euro and percent fields)
+       .oc-barcode-input-field: Add to .oc-input
+       .oc-barcode-preview: Optional preview under the field. Modifier: --empty
+     States: aria-invalid="true" on the field turns the frame and the preview red
+     Slots: replace .oc-barcode-preview-bars with your own svg, canvas or img
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-barcode-demo">Our barcode</label>
+  <div class="oc-input-group oc-input-group--affix">
+    <span class="oc-input-addon" aria-hidden="true"><svg viewBox="0 0 16 16"><path fill="currentColor" d="M1 1h1.4v14H1zm2.2 0h.7v14h-.7zm1.6 0h1.5v14H4.8zm2.4 0h.7v14H7.2zm1.6 0h.7v14H8.8zm1.5 0h1.4v14h-1.4zm2.2 0H15v14h-.9z"/></svg></span>
+    <input class="oc-input oc-barcode-input-field" id="oc-barcode-demo" name="ean" type="text" maxlength="80" placeholder="EAN-13 or internal code" autocomplete="off" spellcheck="false">
+  </div>
+  <p class="oc-field-description">13 digits is an EAN-13. Anything else is an internal code.</p>
+</div>

package/snippets/breadcrumb.html

@@ -1,6 +1,6 @@
-<!-- OmniaUI component: breadcrumb — Breadcrumb. Needs @birdycom/omniaui CSS. -->
-<nav class="oc-breadcrumb" aria-label="Breadcrumb">
-  <a class="oc-breadcrumb-item" href="/">Home</a>
-  <a class="oc-breadcrumb-item" href="/docs/">Docs</a>
-  <span class="oc-breadcrumb-item" aria-current="page">Components</span>
-</nav>
+<!-- OmniaUI component: breadcrumb — Breadcrumb. Needs @birdycom/omniaui CSS. -->
+<nav class="oc-breadcrumb" aria-label="Breadcrumb">
+  <a class="oc-breadcrumb-item" href="/">Home</a>
+  <a class="oc-breadcrumb-item" href="/docs/">Docs</a>
+  <span class="oc-breadcrumb-item" aria-current="page">Components</span>
+</nav>

package/snippets/browser-frame.html

@@ -1,18 +1,18 @@
-<!-- OmniaUI component: browser-frame — Fake browser chrome around a screenshot or live content. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/browser-frame.html | Map: figure -> bar (dots, address, actions) -> view (screenshot slot) -> caption
-     Class API: figure.oc-browser-frame > .oc-browser-frame__bar (3 × <i>, .oc-browser-frame__address, .oc-browser-frame__actions) ·
-       .oc-browser-frame__view > img / video / iframe / any content · figcaption.oc-browser-frame__caption (optional).
-     Modifiers: --minimal (dots only), --dark (dark chrome), --tilt (3D angle, straightens on hover), --auto (free height).
-     Ratio: --oc-browser-frame-ratio (default 16 / 10). No JavaScript.
--->
-<figure class="oc-browser-frame" style="max-inline-size:36rem">
-  <div class="oc-browser-frame__bar">
-    <i></i><i></i><i></i>
-    <span class="oc-browser-frame__address">shop.example.com/collections/spring</span>
-    <span class="oc-browser-frame__actions" aria-hidden="true">&#8635; &#8942;</span>
-  </div>
-  <div class="oc-browser-frame__view">
-    <div class="oc-media-art oc-media-art--5" role="img" aria-label="Screenshot of the spring collection page"></div>
-  </div>
-  <figcaption class="oc-browser-frame__caption">Spring collection, 2026 redesign</figcaption>
-</figure>
+<!-- OmniaUI component: browser-frame — Fake browser chrome around a screenshot or live content. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/browser-frame.html | Map: figure -> bar (dots, address, actions) -> view (screenshot slot) -> caption
+     Class API: figure.oc-browser-frame > .oc-browser-frame__bar (3 × <i>, .oc-browser-frame__address, .oc-browser-frame__actions) ·
+       .oc-browser-frame__view > img / video / iframe / any content · figcaption.oc-browser-frame__caption (optional).
+     Modifiers: --minimal (dots only), --dark (dark chrome), --tilt (3D angle, straightens on hover), --auto (free height).
+     Ratio: --oc-browser-frame-ratio (default 16 / 10). No JavaScript.
+-->
+<figure class="oc-browser-frame" style="max-inline-size:36rem">
+  <div class="oc-browser-frame__bar">
+    <i></i><i></i><i></i>
+    <span class="oc-browser-frame__address">shop.example.com/collections/spring</span>
+    <span class="oc-browser-frame__actions" aria-hidden="true">&#8635; &#8942;</span>
+  </div>
+  <div class="oc-browser-frame__view">
+    <div class="oc-media-art oc-media-art--5" role="img" aria-label="Screenshot of the spring collection page"></div>
+  </div>
+  <figcaption class="oc-browser-frame__caption">Spring collection, 2026 redesign</figcaption>
+</figure>

package/snippets/busy-overlay.html

@@ -1,31 +1,31 @@
-<!-- OmniaUI component: busy-overlay — Modal "please wait" overlay while a long form submit or upload runs. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/busy-overlay.html | Map: form[data-oc-busy] -> dialog (spinner or progress, title, text) -> script
-     Class API (modifiers are extra classes / attributes on the same element):
-       dialog.oc-busy-overlay[closedby="none"]: The overlay; modal, so the page is inert and Esc does not close it
-       .oc-spinner (or .oc-progress > .oc-progress-bar for a known percentage): Activity
-       .oc-busy-overlay__title / __text: What is happening and how long it may take
-       form[data-oc-busy="<dialog id>"]: Opens the overlay when the form is submitted (after the browser's own validation)
-     The overlay appears after 300ms, so quick requests never flash. The page that loads next replaces it;
-     after a fetch() call close it yourself with dialog.close().
--->
-<form class="oc-form-group" data-oc-busy="oc-busy-overlay-demo" action="/photos" method="post" enctype="multipart/form-data">
-  <label class="oc-dropzone">
-    <input type="file" name="photos[]" accept="image/*" multiple>
-    <span><strong>Choose photos</strong> to upload</span>
-    <span class="oc-dropzone-hint">They are resized to 600px and 1080px after saving</span>
-  </label>
-  <button class="oc-btn" type="submit">Save</button>
-</form>
-
-<dialog class="oc-busy-overlay" id="oc-busy-overlay-demo" closedby="none" aria-labelledby="oc-busy-overlay-demo-title" aria-describedby="oc-busy-overlay-demo-text">
-  <span class="oc-spinner" role="status" aria-label="Busy"></span>
-  <h2 class="oc-busy-overlay__title" id="oc-busy-overlay-demo-title">Saving…</h2>
-  <p class="oc-busy-overlay__text" id="oc-busy-overlay-demo-text">The photos are being processed. This can take a minute; please keep this page open.</p>
-</dialog>
-<script>
-// Open the busy overlay of a form when it is submitted (the submit event only fires when the form is valid).
-document.addEventListener("submit", (e) => {
-  const id = e.target.dataset?.ocBusy;
-  if (id) document.getElementById(id)?.showModal();
-});
-</script>
+<!-- OmniaUI component: busy-overlay — Modal "please wait" overlay while a long form submit or upload runs. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/busy-overlay.html | Map: form[data-oc-busy] -> dialog (spinner or progress, title, text) -> script
+     Class API (modifiers are extra classes / attributes on the same element):
+       dialog.oc-busy-overlay[closedby="none"]: The overlay; modal, so the page is inert and Esc does not close it
+       .oc-spinner (or .oc-progress > .oc-progress-bar for a known percentage): Activity
+       .oc-busy-overlay__title / __text: What is happening and how long it may take
+       form[data-oc-busy="<dialog id>"]: Opens the overlay when the form is submitted (after the browser's own validation)
+     The overlay appears after 300ms, so quick requests never flash. The page that loads next replaces it;
+     after a fetch() call close it yourself with dialog.close().
+-->
+<form class="oc-form-group" data-oc-busy="oc-busy-overlay-demo" action="/photos" method="post" enctype="multipart/form-data">
+  <label class="oc-dropzone">
+    <input type="file" name="photos[]" accept="image/*" multiple>
+    <span><strong>Choose photos</strong> to upload</span>
+    <span class="oc-dropzone-hint">They are resized to 600px and 1080px after saving</span>
+  </label>
+  <button class="oc-btn" type="submit">Save</button>
+</form>
+
+<dialog class="oc-busy-overlay" id="oc-busy-overlay-demo" closedby="none" aria-labelledby="oc-busy-overlay-demo-title" aria-describedby="oc-busy-overlay-demo-text">
+  <span class="oc-spinner" role="status" aria-label="Busy"></span>
+  <h2 class="oc-busy-overlay__title" id="oc-busy-overlay-demo-title">Saving…</h2>
+  <p class="oc-busy-overlay__text" id="oc-busy-overlay-demo-text">The photos are being processed. This can take a minute; please keep this page open.</p>
+</dialog>
+<script>
+// Open the busy overlay of a form when it is submitted (the submit event only fires when the form is valid).
+document.addEventListener("submit", (e) => {
+  const id = e.target.dataset?.ocBusy;
+  if (id) document.getElementById(id)?.showModal();
+});
+</script>

package/snippets/button-group.html

@@ -1,21 +1,21 @@
-<!-- OmniaUI component: button-group - Joined buttons with shared borders: horizontal, vertical, text addon. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-btn-group: inline-flex wrapper (role="group" + aria-label). Modifier: --vertical.
-       .oc-btn: any button variant inside the group
-       .oc-btn-group-text: static text cell (a count, a unit) next to a button
--->
-<div class="oc-btn-group" role="group" aria-label="Text alignment">
-  <button class="oc-btn oc-btn--outline" type="button">Left</button>
-  <button class="oc-btn oc-btn--outline" type="button">Center</button>
-  <button class="oc-btn oc-btn--outline" type="button">Right</button>
-</div>
-
-<div class="oc-btn-group oc-btn-group--vertical" role="group" aria-label="Zoom">
-  <button class="oc-btn oc-btn--outline" type="button">Zoom in</button>
-  <button class="oc-btn oc-btn--outline" type="button">Zoom out</button>
-</div>
-<div class="oc-btn-group" role="group" aria-label="Quantity">
-  <button class="oc-btn oc-btn--outline" type="button" aria-label="Decrease">&minus;</button>
-  <span class="oc-btn-group-text">3 items</span>
-  <button class="oc-btn oc-btn--outline" type="button" aria-label="Increase">+</button>
-</div>
+<!-- OmniaUI component: button-group - Joined buttons with shared borders: horizontal, vertical, text addon. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-btn-group: inline-flex wrapper (role="group" + aria-label). Modifier: --vertical.
+       .oc-btn: any button variant inside the group
+       .oc-btn-group-text: static text cell (a count, a unit) next to a button
+-->
+<div class="oc-btn-group" role="group" aria-label="Text alignment">
+  <button class="oc-btn oc-btn--outline" type="button">Left</button>
+  <button class="oc-btn oc-btn--outline" type="button">Center</button>
+  <button class="oc-btn oc-btn--outline" type="button">Right</button>
+</div>
+
+<div class="oc-btn-group oc-btn-group--vertical" role="group" aria-label="Zoom">
+  <button class="oc-btn oc-btn--outline" type="button">Zoom in</button>
+  <button class="oc-btn oc-btn--outline" type="button">Zoom out</button>
+</div>
+<div class="oc-btn-group" role="group" aria-label="Quantity">
+  <button class="oc-btn oc-btn--outline" type="button" aria-label="Decrease">&minus;</button>
+  <span class="oc-btn-group-text">3 items</span>
+  <button class="oc-btn oc-btn--outline" type="button" aria-label="Increase">+</button>
+</div>

package/snippets/button.html

@@ -1,8 +1,8 @@
-<!-- OmniaUI component: button — Buttons: default, secondary, outline, ghost, destructive and sizes. Needs @birdycom/omniaui CSS. -->
-<button class="oc-btn">Default</button>
-<button class="oc-btn oc-btn--secondary">Secondary</button>
-<button class="oc-btn oc-btn--outline">Outline</button>
-<button class="oc-btn oc-btn--ghost">Ghost</button>
-<button class="oc-btn oc-btn--destructive">Delete</button>
-<button class="oc-btn oc-btn--sm">Small</button>
-<button class="oc-btn oc-btn--lg">Large</button>
+<!-- OmniaUI component: button — Buttons: default, secondary, outline, ghost, destructive and sizes. Needs @birdycom/omniaui CSS. -->
+<button class="oc-btn">Default</button>
+<button class="oc-btn oc-btn--secondary">Secondary</button>
+<button class="oc-btn oc-btn--outline">Outline</button>
+<button class="oc-btn oc-btn--ghost">Ghost</button>
+<button class="oc-btn oc-btn--destructive">Delete</button>
+<button class="oc-btn oc-btn--sm">Small</button>
+<button class="oc-btn oc-btn--lg">Large</button>

package/snippets/calendar.html

@@ -1,43 +1,43 @@
-<!-- OmniaUI component: calendar - Calendar: month grid markup with selected, today, range and outside-day states. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-calendar: container. .oc-calendar-header > .oc-calendar-nav (prev/next) + .oc-calendar-title
-       table.oc-calendar-grid[role=grid] > th.oc-calendar-weekday + td > button.oc-calendar-day
-       Day states: [aria-selected=true] | --today | --outside | --range-start / --range-middle / --range-end | :disabled
--->
-<div class="oc-calendar" role="group" aria-label="October 2026">
-  <div class="oc-calendar-header">
-    <button class="oc-calendar-nav" type="button" aria-label="Previous month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
-    <h3 class="oc-calendar-title" aria-live="polite">October 2026</h3>
-    <button class="oc-calendar-nav" type="button" aria-label="Next month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
-  </div>
-  <table class="oc-calendar-grid" role="grid" aria-label="October 2026">
-    <thead><tr><th class="oc-calendar-weekday" scope="col" abbr="Monday">Mo</th><th class="oc-calendar-weekday" scope="col" abbr="Tuesday">Tu</th><th class="oc-calendar-weekday" scope="col" abbr="Wednesday">We</th><th class="oc-calendar-weekday" scope="col" abbr="Thursday">Th</th><th class="oc-calendar-weekday" scope="col" abbr="Friday">Fr</th><th class="oc-calendar-weekday" scope="col" abbr="Saturday">Sa</th><th class="oc-calendar-weekday" scope="col" abbr="Sunday">Su</th></tr></thead>
-    <tbody>
-      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-28" tabindex="-1">28</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-29" tabindex="-1">29</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-30" tabindex="-1">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-01">1</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-02">2</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-03">3</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-04">4</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-05">5</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-06">6</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-07">7</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-08">8</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-09">9</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-10">10</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-11">11</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-12">12</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-13">13</button></td><td><button class="oc-calendar-day oc-calendar-day--today" type="button" data-date="2026-10-14" aria-current="date">14</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-15">15</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-16" aria-selected="true">16</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-17">17</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-18">18</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-19">19</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-20">20</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-21">21</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-22">22</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-23">23</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-24">24</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-25">25</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-26">26</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-27">27</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-28">28</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-29">29</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-30">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-31">31</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-01" tabindex="-1">1</button></td></tr>
-      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-02" tabindex="-1">2</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-03" tabindex="-1">3</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-04" tabindex="-1">4</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-05" tabindex="-1">5</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-06" tabindex="-1">6</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-07" tabindex="-1">7</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-08" tabindex="-1">8</button></td></tr>
-    </tbody>
-  </table>
-</div>
-
-<div class="oc-calendar" role="group" aria-label="October 2026">
-  <div class="oc-calendar-header">
-    <button class="oc-calendar-nav" type="button" aria-label="Previous month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
-    <h3 class="oc-calendar-title" aria-live="polite">October 2026</h3>
-    <button class="oc-calendar-nav" type="button" aria-label="Next month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
-  </div>
-  <table class="oc-calendar-grid" role="grid" aria-label="October 2026">
-    <thead><tr><th class="oc-calendar-weekday" scope="col" abbr="Monday">Mo</th><th class="oc-calendar-weekday" scope="col" abbr="Tuesday">Tu</th><th class="oc-calendar-weekday" scope="col" abbr="Wednesday">We</th><th class="oc-calendar-weekday" scope="col" abbr="Thursday">Th</th><th class="oc-calendar-weekday" scope="col" abbr="Friday">Fr</th><th class="oc-calendar-weekday" scope="col" abbr="Saturday">Sa</th><th class="oc-calendar-weekday" scope="col" abbr="Sunday">Su</th></tr></thead>
-    <tbody>
-      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-28" tabindex="-1">28</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-29" tabindex="-1">29</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-30" tabindex="-1">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-01">1</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-02">2</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-03">3</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-04">4</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-05">5</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-06">6</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-07">7</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-08">8</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-09">9</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-10">10</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-11">11</button></td></tr>
-      <tr><td><button class="oc-calendar-day oc-calendar-day--range-start" type="button" data-date="2026-10-12">12</button></td><td><button class="oc-calendar-day oc-calendar-day--range-middle" type="button" data-date="2026-10-13">13</button></td><td><button class="oc-calendar-day oc-calendar-day--today oc-calendar-day--range-middle" type="button" data-date="2026-10-14" aria-current="date">14</button></td><td><button class="oc-calendar-day oc-calendar-day--range-middle" type="button" data-date="2026-10-15">15</button></td><td><button class="oc-calendar-day oc-calendar-day--range-end" type="button" data-date="2026-10-16">16</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-17">17</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-18">18</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-19">19</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-20">20</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-21">21</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-22">22</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-23">23</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-24">24</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-25">25</button></td></tr>
-      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-26">26</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-27">27</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-28">28</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-29">29</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-30">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-31">31</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-01" tabindex="-1">1</button></td></tr>
-      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-02" tabindex="-1">2</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-03" tabindex="-1">3</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-04" tabindex="-1">4</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-05" tabindex="-1">5</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-06" tabindex="-1">6</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-07" tabindex="-1">7</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-08" tabindex="-1">8</button></td></tr>
-    </tbody>
-  </table>
-</div>
+<!-- OmniaUI component: calendar - Calendar: month grid markup with selected, today, range and outside-day states. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-calendar: container. .oc-calendar-header > .oc-calendar-nav (prev/next) + .oc-calendar-title
+       table.oc-calendar-grid[role=grid] > th.oc-calendar-weekday + td > button.oc-calendar-day
+       Day states: [aria-selected=true] | --today | --outside | --range-start / --range-middle / --range-end | :disabled
+-->
+<div class="oc-calendar" role="group" aria-label="October 2026">
+  <div class="oc-calendar-header">
+    <button class="oc-calendar-nav" type="button" aria-label="Previous month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
+    <h3 class="oc-calendar-title" aria-live="polite">October 2026</h3>
+    <button class="oc-calendar-nav" type="button" aria-label="Next month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
+  </div>
+  <table class="oc-calendar-grid" role="grid" aria-label="October 2026">
+    <thead><tr><th class="oc-calendar-weekday" scope="col" abbr="Monday">Mo</th><th class="oc-calendar-weekday" scope="col" abbr="Tuesday">Tu</th><th class="oc-calendar-weekday" scope="col" abbr="Wednesday">We</th><th class="oc-calendar-weekday" scope="col" abbr="Thursday">Th</th><th class="oc-calendar-weekday" scope="col" abbr="Friday">Fr</th><th class="oc-calendar-weekday" scope="col" abbr="Saturday">Sa</th><th class="oc-calendar-weekday" scope="col" abbr="Sunday">Su</th></tr></thead>
+    <tbody>
+      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-28" tabindex="-1">28</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-29" tabindex="-1">29</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-30" tabindex="-1">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-01">1</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-02">2</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-03">3</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-04">4</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-05">5</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-06">6</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-07">7</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-08">8</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-09">9</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-10">10</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-11">11</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-12">12</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-13">13</button></td><td><button class="oc-calendar-day oc-calendar-day--today" type="button" data-date="2026-10-14" aria-current="date">14</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-15">15</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-16" aria-selected="true">16</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-17">17</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-18">18</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-19">19</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-20">20</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-21">21</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-22">22</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-23">23</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-24">24</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-25">25</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-26">26</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-27">27</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-28">28</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-29">29</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-30">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-31">31</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-01" tabindex="-1">1</button></td></tr>
+      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-02" tabindex="-1">2</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-03" tabindex="-1">3</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-04" tabindex="-1">4</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-05" tabindex="-1">5</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-06" tabindex="-1">6</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-07" tabindex="-1">7</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-08" tabindex="-1">8</button></td></tr>
+    </tbody>
+  </table>
+</div>
+
+<div class="oc-calendar" role="group" aria-label="October 2026">
+  <div class="oc-calendar-header">
+    <button class="oc-calendar-nav" type="button" aria-label="Previous month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button>
+    <h3 class="oc-calendar-title" aria-live="polite">October 2026</h3>
+    <button class="oc-calendar-nav" type="button" aria-label="Next month"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></button>
+  </div>
+  <table class="oc-calendar-grid" role="grid" aria-label="October 2026">
+    <thead><tr><th class="oc-calendar-weekday" scope="col" abbr="Monday">Mo</th><th class="oc-calendar-weekday" scope="col" abbr="Tuesday">Tu</th><th class="oc-calendar-weekday" scope="col" abbr="Wednesday">We</th><th class="oc-calendar-weekday" scope="col" abbr="Thursday">Th</th><th class="oc-calendar-weekday" scope="col" abbr="Friday">Fr</th><th class="oc-calendar-weekday" scope="col" abbr="Saturday">Sa</th><th class="oc-calendar-weekday" scope="col" abbr="Sunday">Su</th></tr></thead>
+    <tbody>
+      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-28" tabindex="-1">28</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-29" tabindex="-1">29</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-30" tabindex="-1">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-01">1</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-02">2</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-03">3</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-04">4</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-05">5</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-06">6</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-07">7</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-08">8</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-09">9</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-10">10</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-11">11</button></td></tr>
+      <tr><td><button class="oc-calendar-day oc-calendar-day--range-start" type="button" data-date="2026-10-12">12</button></td><td><button class="oc-calendar-day oc-calendar-day--range-middle" type="button" data-date="2026-10-13">13</button></td><td><button class="oc-calendar-day oc-calendar-day--today oc-calendar-day--range-middle" type="button" data-date="2026-10-14" aria-current="date">14</button></td><td><button class="oc-calendar-day oc-calendar-day--range-middle" type="button" data-date="2026-10-15">15</button></td><td><button class="oc-calendar-day oc-calendar-day--range-end" type="button" data-date="2026-10-16">16</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-17">17</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-18">18</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-19">19</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-20">20</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-21">21</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-22">22</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-23">23</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-24">24</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-25">25</button></td></tr>
+      <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-26">26</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-27">27</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-28">28</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-29">29</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-30">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-31">31</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-01" tabindex="-1">1</button></td></tr>
+      <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-02" tabindex="-1">2</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-03" tabindex="-1">3</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-04" tabindex="-1">4</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-05" tabindex="-1">5</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-06" tabindex="-1">6</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-07" tabindex="-1">7</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-08" tabindex="-1">8</button></td></tr>
+    </tbody>
+  </table>
+</div>

package/snippets/card.html

@@ -1,17 +1,17 @@
-<!-- OmniaUI component: card — Card with header, content, footer. Needs @birdycom/omniaui CSS. -->
-<div class="oc-card">
-  <div class="oc-card-header">
-    <h3 class="oc-card-title">Create project</h3>
-    <p class="oc-card-description">Deploy your new project in one click.</p>
-  </div>
-  <div class="oc-card-content">
-    <div class="oc-field">
-      <label class="oc-field-label" for="project-name">Name</label>
-      <input class="oc-input" id="project-name" placeholder="My project">
-    </div>
-  </div>
-  <div class="oc-card-footer">
-    <button class="oc-btn oc-btn--outline">Cancel</button>
-    <button class="oc-btn">Deploy</button>
-  </div>
-</div>
+<!-- OmniaUI component: card — Card with header, content, footer. Needs @birdycom/omniaui CSS. -->
+<div class="oc-card">
+  <div class="oc-card-header">
+    <h3 class="oc-card-title">Create project</h3>
+    <p class="oc-card-description">Deploy your new project in one click.</p>
+  </div>
+  <div class="oc-card-content">
+    <div class="oc-field">
+      <label class="oc-field-label" for="project-name">Name</label>
+      <input class="oc-input" id="project-name" placeholder="My project">
+    </div>
+  </div>
+  <div class="oc-card-footer">
+    <button class="oc-btn oc-btn--outline">Cancel</button>
+    <button class="oc-btn">Deploy</button>
+  </div>
+</div>

package/snippets/carousel.html

@@ -1,21 +1,21 @@
-<!-- OmniaUI component: carousel - Carousel: CSS scroll-snap with ::scroll-button arrows and ::scroll-marker dots, fallback links. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-carousel: wrapper (anchor scope). Modifiers: --halves, --thirds (slides per view)
-       .oc-carousel-viewport: the scroller (tabindex="0", role="region", aria-roledescription="carousel")
-       .oc-carousel-item: one slide (role="group" aria-roledescription="slide")
-       .oc-carousel-dots > a.oc-carousel-dot: fallback navigation (hidden where ::scroll-marker works)
--->
-<div class="oc-carousel" style="max-inline-size:34rem">
-  <div class="oc-carousel-viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Highlights">
-    <div class="oc-carousel-item" id="oc-slide-1" role="group" aria-roledescription="slide" aria-label="1 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 1</span></div></div>
-    <div class="oc-carousel-item" id="oc-slide-2" role="group" aria-roledescription="slide" aria-label="2 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 2</span></div></div>
-    <div class="oc-carousel-item" id="oc-slide-3" role="group" aria-roledescription="slide" aria-label="3 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 3</span></div></div>
-    <div class="oc-carousel-item" id="oc-slide-4" role="group" aria-roledescription="slide" aria-label="4 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 4</span></div></div>
-  </div>
-  <nav class="oc-carousel-dots" aria-label="Choose a slide">
-    <a class="oc-carousel-dot" href="#oc-slide-1" aria-label="Slide 1"></a>
-    <a class="oc-carousel-dot" href="#oc-slide-2" aria-label="Slide 2"></a>
-    <a class="oc-carousel-dot" href="#oc-slide-3" aria-label="Slide 3"></a>
-    <a class="oc-carousel-dot" href="#oc-slide-4" aria-label="Slide 4"></a>
-  </nav>
-</div>
+<!-- OmniaUI component: carousel - Carousel: CSS scroll-snap with ::scroll-button arrows and ::scroll-marker dots, fallback links. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-carousel: wrapper (anchor scope). Modifiers: --halves, --thirds (slides per view)
+       .oc-carousel-viewport: the scroller (tabindex="0", role="region", aria-roledescription="carousel")
+       .oc-carousel-item: one slide (role="group" aria-roledescription="slide")
+       .oc-carousel-dots > a.oc-carousel-dot: fallback navigation (hidden where ::scroll-marker works)
+-->
+<div class="oc-carousel" style="max-inline-size:34rem">
+  <div class="oc-carousel-viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Highlights">
+    <div class="oc-carousel-item" id="oc-slide-1" role="group" aria-roledescription="slide" aria-label="1 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 1</span></div></div>
+    <div class="oc-carousel-item" id="oc-slide-2" role="group" aria-roledescription="slide" aria-label="2 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 2</span></div></div>
+    <div class="oc-carousel-item" id="oc-slide-3" role="group" aria-roledescription="slide" aria-label="3 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 3</span></div></div>
+    <div class="oc-carousel-item" id="oc-slide-4" role="group" aria-roledescription="slide" aria-label="4 of 4"><div class="oc-aspect oc-aspect--wide oc-aspect--center"><span class="oc-item-title" style="font-size:1.75rem">Slide 4</span></div></div>
+  </div>
+  <nav class="oc-carousel-dots" aria-label="Choose a slide">
+    <a class="oc-carousel-dot" href="#oc-slide-1" aria-label="Slide 1"></a>
+    <a class="oc-carousel-dot" href="#oc-slide-2" aria-label="Slide 2"></a>
+    <a class="oc-carousel-dot" href="#oc-slide-3" aria-label="Slide 3"></a>
+    <a class="oc-carousel-dot" href="#oc-slide-4" aria-label="Slide 4"></a>
+  </nav>
+</div>

package/snippets/chart-line.html

@@ -1,46 +1,46 @@
-<!-- OmniaUI component: chart-line — Line and area chart in inline SVG with axes, legend and tooltips on hover and focus. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/chart-line.html | Map: figure -> head (title, sub) -> body (y axis, plot: svg series + hover columns, x axis) -> legend
-     Class API (modifiers are extra classes / attributes on the same element):
-       figure.oc-chart-line: Chart. Height from --oc-chart-line-height (12rem). Modifiers: --area (filled areas), --dots (dots always
-         visible), --spark (no axes or grid; 3rem high)
-       .oc-chart-line__head > .oc-chart-line__title, .oc-chart-line__sub, .oc-chart-line__value
-       .oc-chart-line__body > ul.oc-chart-line__y (labels top to bottom), .oc-chart-line__plot, ol.oc-chart-line__x
-       .oc-chart-line__plot (--oc-chart-line-rows: number of gridline rows, 4) > svg.oc-chart-line__svg (viewBox="0 0 100 100"
-         preserveAspectRatio="none") > g.oc-chart-line__series (color by position: --oc-chart-1..5) > path.oc-chart-line__area +
-         path.oc-chart-line__path (--dashed). Coordinates: x = index / (count - 1) * 100, y = 100 - value / max * 100
-       ul.oc-chart-line__cols (--n: number of points) > li.oc-chart-line__col (--x: index, tabindex="0", aria-label with the values)
-         > i.oc-chart-line__dot (--y: value / max in %, one per series) + span.oc-chart-line__tip > strong + span.oc-chart-line__row > b
-       .oc-chart-legend (chart component) below the plot: the swatch colors follow the same order
-     No JavaScript: tooltips open on :hover and :focus-visible. Generate the paths and percentages on the server or at build time.
--->
-<figure class="oc-chart-line oc-chart-line--dots" style="max-inline-size:40rem">
-  <figcaption class="oc-chart-line__head">
-    <span class="oc-chart-line__title">Visitors</span>
-    <span class="oc-chart-line__sub">January – June 2026</span>
-  </figcaption>
-  <div class="oc-chart-line__body">
-    <ul class="oc-chart-line__y" aria-hidden="true"><li>320</li><li>240</li><li>160</li><li>80</li><li>0</li></ul>
-    <div class="oc-chart-line__plot">
-      <svg class="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
-        <g class="oc-chart-line__series">
-          <path class="oc-chart-line__area" d="M0 41.87 C3.33 35.68 13.33 7.34 20 4.69 C26.67 4.69 33.33 13.85 40 25.94 C46.67 38.02 53.33 75.73 60 77.19 C66.67 77.19 73.33 42.03 80 34.69 C86.67 33.13 96.67 33.39 100 33.13 L100 100 L0 100 Z"/>
-          <path class="oc-chart-line__path" d="M0 41.87 C3.33 35.68 13.33 7.34 20 4.69 C26.67 4.69 33.33 13.85 40 25.94 C46.67 38.02 53.33 75.73 60 77.19 C66.67 77.19 73.33 42.03 80 34.69 C86.67 33.13 96.67 33.39 100 33.13"/>
-        </g>
-        <g class="oc-chart-line__series">
-          <path class="oc-chart-line__area" d="M0 75 C3.33 68.75 13.33 39.58 20 37.5 C26.67 37.5 33.33 61.98 40 62.5 C46.67 62.5 53.33 41.15 60 40.63 C66.67 40.63 73.33 56.77 80 59.38 C86.67 59.38 96.67 56.77 100 56.25 L100 100 L0 100 Z"/>
-          <path class="oc-chart-line__path" d="M0 75 C3.33 68.75 13.33 39.58 20 37.5 C26.67 37.5 33.33 61.98 40 62.5 C46.67 62.5 53.33 41.15 60 40.63 C66.67 40.63 73.33 56.77 80 59.38 C86.67 59.38 96.67 56.77 100 56.25"/>
-        </g>
-      </svg>
-      <ul class="oc-chart-line__cols" style="--n:6" aria-label="Visitors per month">
-        <li class="oc-chart-line__col" style="--x:0" tabindex="0" aria-label="January: Desktop 186, Mobile 80"><i class="oc-chart-line__dot" style="--y:58.13%"></i><i class="oc-chart-line__dot" style="--y:25%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>January</strong><span class="oc-chart-line__row">Desktop<b>186</b></span><span class="oc-chart-line__row">Mobile<b>80</b></span></span></li>
-        <li class="oc-chart-line__col" style="--x:1" tabindex="0" aria-label="February: Desktop 305, Mobile 200"><i class="oc-chart-line__dot" style="--y:95.31%"></i><i class="oc-chart-line__dot" style="--y:62.5%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>February</strong><span class="oc-chart-line__row">Desktop<b>305</b></span><span class="oc-chart-line__row">Mobile<b>200</b></span></span></li>
-        <li class="oc-chart-line__col" style="--x:2" tabindex="0" aria-label="March: Desktop 237, Mobile 120"><i class="oc-chart-line__dot" style="--y:74.06%"></i><i class="oc-chart-line__dot" style="--y:37.5%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>March</strong><span class="oc-chart-line__row">Desktop<b>237</b></span><span class="oc-chart-line__row">Mobile<b>120</b></span></span></li>
-        <li class="oc-chart-line__col" style="--x:3" tabindex="0" aria-label="April: Desktop 73, Mobile 190"><i class="oc-chart-line__dot" style="--y:22.81%"></i><i class="oc-chart-line__dot" style="--y:59.38%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>April</strong><span class="oc-chart-line__row">Desktop<b>73</b></span><span class="oc-chart-line__row">Mobile<b>190</b></span></span></li>
-        <li class="oc-chart-line__col" style="--x:4" tabindex="0" aria-label="May: Desktop 209, Mobile 130"><i class="oc-chart-line__dot" style="--y:65.31%"></i><i class="oc-chart-line__dot" style="--y:40.63%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>May</strong><span class="oc-chart-line__row">Desktop<b>209</b></span><span class="oc-chart-line__row">Mobile<b>130</b></span></span></li>
-        <li class="oc-chart-line__col" style="--x:5" tabindex="0" aria-label="June: Desktop 214, Mobile 140"><i class="oc-chart-line__dot" style="--y:66.88%"></i><i class="oc-chart-line__dot" style="--y:43.75%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>June</strong><span class="oc-chart-line__row">Desktop<b>214</b></span><span class="oc-chart-line__row">Mobile<b>140</b></span></span></li>
-      </ul>
-    </div>
-    <ol class="oc-chart-line__x" aria-hidden="true"><li>Jan</li><li>Feb</li><li>Mar</li><li>Apr</li><li>May</li><li>Jun</li></ol>
-  </div>
-  <ul class="oc-chart-legend"><li><span class="oc-chart-swatch"></span>Desktop</li><li><span class="oc-chart-swatch"></span>Mobile</li></ul>
-</figure>
+<!-- OmniaUI component: chart-line — Line and area chart in inline SVG with axes, legend and tooltips on hover and focus. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/chart-line.html | Map: figure -> head (title, sub) -> body (y axis, plot: svg series + hover columns, x axis) -> legend
+     Class API (modifiers are extra classes / attributes on the same element):
+       figure.oc-chart-line: Chart. Height from --oc-chart-line-height (12rem). Modifiers: --area (filled areas), --dots (dots always
+         visible), --spark (no axes or grid; 3rem high)
+       .oc-chart-line__head > .oc-chart-line__title, .oc-chart-line__sub, .oc-chart-line__value
+       .oc-chart-line__body > ul.oc-chart-line__y (labels top to bottom), .oc-chart-line__plot, ol.oc-chart-line__x
+       .oc-chart-line__plot (--oc-chart-line-rows: number of gridline rows, 4) > svg.oc-chart-line__svg (viewBox="0 0 100 100"
+         preserveAspectRatio="none") > g.oc-chart-line__series (color by position: --oc-chart-1..5) > path.oc-chart-line__area +
+         path.oc-chart-line__path (--dashed). Coordinates: x = index / (count - 1) * 100, y = 100 - value / max * 100
+       ul.oc-chart-line__cols (--n: number of points) > li.oc-chart-line__col (--x: index, tabindex="0", aria-label with the values)
+         > i.oc-chart-line__dot (--y: value / max in %, one per series) + span.oc-chart-line__tip > strong + span.oc-chart-line__row > b
+       .oc-chart-legend (chart component) below the plot: the swatch colors follow the same order
+     No JavaScript: tooltips open on :hover and :focus-visible. Generate the paths and percentages on the server or at build time.
+-->
+<figure class="oc-chart-line oc-chart-line--dots" style="max-inline-size:40rem">
+  <figcaption class="oc-chart-line__head">
+    <span class="oc-chart-line__title">Visitors</span>
+    <span class="oc-chart-line__sub">January – June 2026</span>
+  </figcaption>
+  <div class="oc-chart-line__body">
+    <ul class="oc-chart-line__y" aria-hidden="true"><li>320</li><li>240</li><li>160</li><li>80</li><li>0</li></ul>
+    <div class="oc-chart-line__plot">
+      <svg class="oc-chart-line__svg" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+        <g class="oc-chart-line__series">
+          <path class="oc-chart-line__area" d="M0 41.87 C3.33 35.68 13.33 7.34 20 4.69 C26.67 4.69 33.33 13.85 40 25.94 C46.67 38.02 53.33 75.73 60 77.19 C66.67 77.19 73.33 42.03 80 34.69 C86.67 33.13 96.67 33.39 100 33.13 L100 100 L0 100 Z"/>
+          <path class="oc-chart-line__path" d="M0 41.87 C3.33 35.68 13.33 7.34 20 4.69 C26.67 4.69 33.33 13.85 40 25.94 C46.67 38.02 53.33 75.73 60 77.19 C66.67 77.19 73.33 42.03 80 34.69 C86.67 33.13 96.67 33.39 100 33.13"/>
+        </g>
+        <g class="oc-chart-line__series">
+          <path class="oc-chart-line__area" d="M0 75 C3.33 68.75 13.33 39.58 20 37.5 C26.67 37.5 33.33 61.98 40 62.5 C46.67 62.5 53.33 41.15 60 40.63 C66.67 40.63 73.33 56.77 80 59.38 C86.67 59.38 96.67 56.77 100 56.25 L100 100 L0 100 Z"/>
+          <path class="oc-chart-line__path" d="M0 75 C3.33 68.75 13.33 39.58 20 37.5 C26.67 37.5 33.33 61.98 40 62.5 C46.67 62.5 53.33 41.15 60 40.63 C66.67 40.63 73.33 56.77 80 59.38 C86.67 59.38 96.67 56.77 100 56.25"/>
+        </g>
+      </svg>
+      <ul class="oc-chart-line__cols" style="--n:6" aria-label="Visitors per month">
+        <li class="oc-chart-line__col" style="--x:0" tabindex="0" aria-label="January: Desktop 186, Mobile 80"><i class="oc-chart-line__dot" style="--y:58.13%"></i><i class="oc-chart-line__dot" style="--y:25%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>January</strong><span class="oc-chart-line__row">Desktop<b>186</b></span><span class="oc-chart-line__row">Mobile<b>80</b></span></span></li>
+        <li class="oc-chart-line__col" style="--x:1" tabindex="0" aria-label="February: Desktop 305, Mobile 200"><i class="oc-chart-line__dot" style="--y:95.31%"></i><i class="oc-chart-line__dot" style="--y:62.5%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>February</strong><span class="oc-chart-line__row">Desktop<b>305</b></span><span class="oc-chart-line__row">Mobile<b>200</b></span></span></li>
+        <li class="oc-chart-line__col" style="--x:2" tabindex="0" aria-label="March: Desktop 237, Mobile 120"><i class="oc-chart-line__dot" style="--y:74.06%"></i><i class="oc-chart-line__dot" style="--y:37.5%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>March</strong><span class="oc-chart-line__row">Desktop<b>237</b></span><span class="oc-chart-line__row">Mobile<b>120</b></span></span></li>
+        <li class="oc-chart-line__col" style="--x:3" tabindex="0" aria-label="April: Desktop 73, Mobile 190"><i class="oc-chart-line__dot" style="--y:22.81%"></i><i class="oc-chart-line__dot" style="--y:59.38%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>April</strong><span class="oc-chart-line__row">Desktop<b>73</b></span><span class="oc-chart-line__row">Mobile<b>190</b></span></span></li>
+        <li class="oc-chart-line__col" style="--x:4" tabindex="0" aria-label="May: Desktop 209, Mobile 130"><i class="oc-chart-line__dot" style="--y:65.31%"></i><i class="oc-chart-line__dot" style="--y:40.63%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>May</strong><span class="oc-chart-line__row">Desktop<b>209</b></span><span class="oc-chart-line__row">Mobile<b>130</b></span></span></li>
+        <li class="oc-chart-line__col" style="--x:5" tabindex="0" aria-label="June: Desktop 214, Mobile 140"><i class="oc-chart-line__dot" style="--y:66.88%"></i><i class="oc-chart-line__dot" style="--y:43.75%"></i><span class="oc-chart-line__tip" aria-hidden="true"><strong>June</strong><span class="oc-chart-line__row">Desktop<b>214</b></span><span class="oc-chart-line__row">Mobile<b>140</b></span></span></li>
+      </ul>
+    </div>
+    <ol class="oc-chart-line__x" aria-hidden="true"><li>Jan</li><li>Feb</li><li>Mar</li><li>Apr</li><li>May</li><li>Jun</li></ol>
+  </div>
+  <ul class="oc-chart-legend"><li><span class="oc-chart-swatch"></span>Desktop</li><li><span class="oc-chart-swatch"></span>Mobile</li></ul>
+</figure>