@birdycom/omniaui 0.0.0-stage → 0.11.1

package/package.json

@@ -1,6 +1,69 @@
-{
-  "name": "@birdycom/omniaui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "@birdycom/omniaui",
+  "version": "0.11.1",
+  "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
+  "type": "module",
+  "license": "MIT",
+  "author": "Serge Cools (Birdycom)",
+  "homepage": "https://omniaui.eu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Birdycom/OmniaUI.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/Birdycom/OmniaUI/issues"
+  },
+  "keywords": [
+    "css",
+    "components",
+    "dialog",
+    "popover",
+    "dark-mode",
+    "omniaui",
+    "omniacss"
+  ],
+  "exports": {
+    ".": "./dist/components.css",
+    "./min": "./dist/components.min.css",
+    "./showcase.css": "./dist/showcase.css",
+    "./snippets/*": "./snippets/*",
+    "./data-table.js": "./dist/data-table.js",
+    "./manifest.json": "./manifest.json",
+    "./package.json": "./package.json"
+  },
+  "style": "./dist/components.css",
+  "files": [
+    "dist",
+    "snippets",
+    "bin",
+    "manifest.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "unpkg": "./dist/components.min.css",
+  "jsdelivr": "./dist/components.min.css",
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "omniaui": "./bin/omniaui.mjs"
+  },
+  "peerDependencies": {
+    "@birdycom/omniacss": "^0.11.1"
+  },
+  "peerDependenciesMeta": {
+    "@birdycom/omniacss": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs"
+  }
+}

package/snippets/accordion-accent.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI component: accordion-accent - Accordion variant: every item is a card with a colored accent edge; presets or semantic colors per item - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/accordion-accent.html | Map: accordion (accent) -> item (default primary) -> item (preset color) -> item (semantic color)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-accordion.oc-accordion--accent: Separate item cards with a 3px colored start edge. Combine with --flush for edge-only cards.
+       Colors: an .oc-accent--blue / cyan / green / orange / red / violet / yellow preset on the accordion or one item,
+               or .oc-accordion-item--success / --warning / --danger (or .oc-accordion--success / --warning / --danger for all items).
+       Custom property: --oc-accordion-accent (any Omnia color token)
+       .oc-accordion-accent-meta: Small accent-colored label at the end of the trigger
+     Slots: items (details.oc-accordion-item + summary.oc-accordion-trigger + .oc-accordion-content)
+-->
+<div class="oc-accordion oc-accordion--accent">
+  <details class="oc-accordion-item" name="oc-accent-demo" open>
+    <summary class="oc-accordion-trigger">Customer details <span class="oc-accordion-accent-meta">Complete</span></summary>
+    <div class="oc-accordion-content">Ada Lovelace, Main street 12, Ghent.</div>
+  </details>
+  <details class="oc-accordion-item oc-accent--violet" name="oc-accent-demo">
+    <summary class="oc-accordion-trigger">Materials <span class="oc-accordion-accent-meta">4 items</span></summary>
+    <div class="oc-accordion-content">Oak worktop, two cabinets, a sink and the tap.</div>
+  </details>
+  <details class="oc-accordion-item oc-accordion-item--warning" name="oc-accent-demo">
+    <summary class="oc-accordion-trigger">Planning <span class="oc-accordion-accent-meta">Needs a date</span></summary>
+    <div class="oc-accordion-content">Pick a start date with the customer.</div>
+  </details>
+</div>

package/snippets/accordion.html

@@ -0,0 +1,11 @@
+<!-- OmniaUI component: accordion — Exclusive accordion on <details name> — no JavaScript. Needs @birdycom/omniaui CSS. -->
+<div class="oc-accordion">
+  <details class="oc-accordion-item" name="faq" open>
+    <summary class="oc-accordion-trigger">Is it accessible?</summary>
+    <div class="oc-accordion-content">Yes. It uses the native details/summary elements.</div>
+  </details>
+  <details class="oc-accordion-item" name="faq">
+    <summary class="oc-accordion-trigger">Does it need JavaScript?</summary>
+    <div class="oc-accordion-content">No. Items with the same name open one at a time.</div>
+  </details>
+</div>

package/snippets/affix-input.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: affix-input - Price, margin and email fields. The symbol sits in its own column. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/affix-input.html | Map: euro column -> percent column -> email column
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-input-group--affix: Add to .oc-input-group. The frame is the wrapper; .oc-input-addon is a column with a divider.
+       .oc-input-group--end: Optional. Right-aligns the value.
+       .oc-input-group--error: Red frame (also via aria-invalid="true" or :user-invalid on the input)
+       .oc-input-addon: The symbol column. Before the input = left (euro, percent, @). After the input = right.
+     States: :focus-within (ring), :user-invalid (red), disabled input (dimmed)
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-price">Selling price excl. VAT</label>
+  <div class="oc-input-group oc-input-group--affix">
+    <span class="oc-input-addon" aria-hidden="true">&euro;</span>
+    <input class="oc-input" id="oc-price" type="text" inputmode="decimal" name="price" value="5,15">
+  </div>
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-margin">Margin %</label>
+  <div class="oc-input-group oc-input-group--affix">
+    <span class="oc-input-addon" aria-hidden="true">%</span>
+    <input class="oc-input" id="oc-margin" type="text" inputmode="decimal" name="margin" value="30">
+  </div>
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-mail">Email</label>
+  <div class="oc-input-group oc-input-group--affix">
+    <span class="oc-input-addon" aria-hidden="true">@</span>
+    <input class="oc-input" id="oc-mail" type="email" name="email" autocomplete="email" placeholder="name@company.com">
+  </div>
+</div>

package/snippets/alert-dialog.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI component: alert-dialog - Confirmation modal with a status icon (success, error, warning, info, question). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       dialog.oc-modal: Native dialog from the modal component
+       .oc-modal-content.oc-modal-content--sm.oc-alert-dialog: Centered content box
+       .oc-alert-dialog--success / --error / --warning / --info / --question: Type modifier on the content element (sets the icon color)
+       .oc-alert-dialog-icon: Round icon holder with a glyph (!, &#10003;, ?, i, &times;)
+       .oc-modal-title / -body / -footer: Title, message and the buttons (secondary left, primary right)
+     Slots: icon, title, message (body), footer buttons (secondary + primary)
+-->
+<button class="oc-btn oc-btn--destructive" type="button" command="show-modal" commandfor="oc-alert-dialog-demo">Delete contact</button>
+
+<dialog class="oc-modal" id="oc-alert-dialog-demo" closedby="closerequest" aria-labelledby="oc-alert-dialog-title" aria-describedby="oc-alert-dialog-text">
+  <div class="oc-modal-content oc-modal-content--sm oc-alert-dialog oc-alert-dialog--warning">
+    <span class="oc-alert-dialog-icon" aria-hidden="true">!</span>
+    <h2 class="oc-modal-title" id="oc-alert-dialog-title">Delete this contact?</h2>
+    <div class="oc-modal-body" id="oc-alert-dialog-text">All related documents stay, but the link to this contact is removed.</div>
+    <div class="oc-modal-footer">
+      <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-alert-dialog-demo">Cancel</button>
+      <button class="oc-btn oc-btn--destructive" type="button" command="close" commandfor="oc-alert-dialog-demo">Delete</button>
+    </div>
+  </div>
+</dialog>

package/snippets/alert.html

@@ -0,0 +1,5 @@
+<!-- OmniaUI component: alert — Alerts: info, success, warning, danger. Needs @birdycom/omniaui CSS. -->
+<div class="oc-alert oc-alert--info" role="status">
+  <h4 class="oc-alert-title">Heads up!</h4>
+  <p class="oc-alert-description">You can add components with the OmniaCSS CLI.</p>
+</div>

package/snippets/alpha-tabs.html

@@ -0,0 +1,37 @@
+<!-- OmniaUI component: alpha-tabs - All + A-Z letter filter bar for long lists; scrolls sideways on small screens. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/alpha-tabs.html | Map: nav -> "All" item -> letter items (current, empty)
+     Class API (modifiers are extra classes / attributes on the same element):
+       nav.oc-alpha-tabs: Letter bar. Modifiers: --wrap (wrap instead of scroll), --sm, --plain (no frame).
+       .oc-alpha-tabs-item: One letter (a href="?letter=A" or button). States: aria-current="true" / .is-active, aria-disabled="true" (no entries).
+       .oc-alpha-tabs-item--all: The wider "All" item at the start
+     Slots: one item per letter (render only the letters you need, or all with empty ones disabled)
+-->
+<nav class="oc-alpha-tabs" aria-label="Filter by letter">
+  <a class="oc-alpha-tabs-item oc-alpha-tabs-item--all" href="?letter=all">All</a>
+  <a class="oc-alpha-tabs-item" href="?letter=A">A</a>
+  <a class="oc-alpha-tabs-item" href="?letter=B" aria-current="true">B</a>
+  <a class="oc-alpha-tabs-item" href="?letter=C">C</a>
+  <a class="oc-alpha-tabs-item" href="?letter=D">D</a>
+  <a class="oc-alpha-tabs-item" aria-disabled="true">E</a>
+  <a class="oc-alpha-tabs-item" href="?letter=F">F</a>
+  <a class="oc-alpha-tabs-item" href="?letter=G">G</a>
+  <a class="oc-alpha-tabs-item" href="?letter=H">H</a>
+  <a class="oc-alpha-tabs-item" href="?letter=I">I</a>
+  <a class="oc-alpha-tabs-item" href="?letter=J">J</a>
+  <a class="oc-alpha-tabs-item" href="?letter=K">K</a>
+  <a class="oc-alpha-tabs-item" href="?letter=L">L</a>
+  <a class="oc-alpha-tabs-item" href="?letter=M">M</a>
+  <a class="oc-alpha-tabs-item" href="?letter=N">N</a>
+  <a class="oc-alpha-tabs-item" href="?letter=O">O</a>
+  <a class="oc-alpha-tabs-item" href="?letter=P">P</a>
+  <a class="oc-alpha-tabs-item" aria-disabled="true">Q</a>
+  <a class="oc-alpha-tabs-item" href="?letter=R">R</a>
+  <a class="oc-alpha-tabs-item" href="?letter=S">S</a>
+  <a class="oc-alpha-tabs-item" href="?letter=T">T</a>
+  <a class="oc-alpha-tabs-item" href="?letter=U">U</a>
+  <a class="oc-alpha-tabs-item" href="?letter=V">V</a>
+  <a class="oc-alpha-tabs-item" href="?letter=W">W</a>
+  <a class="oc-alpha-tabs-item" aria-disabled="true">X</a>
+  <a class="oc-alpha-tabs-item" href="?letter=Y">Y</a>
+  <a class="oc-alpha-tabs-item" href="?letter=Z">Z</a>
+</nav>

package/snippets/aspect-ratio.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: aspect-ratio - Aspect-ratio box with presets and fill behaviour for img/video/iframe. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-aspect: ratio box (default 16 / 9). Presets: --square, --photo (4/3), --portrait (3/4), --wide (21/9). --center centers text
+       --oc-aspect: custom ratio, e.g. style="--oc-aspect: 5 / 2"
+-->
+<div style="max-inline-size:24rem">
+  <div class="oc-aspect oc-aspect--center"><span class="oc-item-description">16 / 9</span></div>
+</div>
+
+<div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start">
+  <div class="oc-aspect oc-aspect--square oc-aspect--center" style="inline-size:7rem"><span class="oc-item-description">1 / 1</span></div>
+  <div class="oc-aspect oc-aspect--photo oc-aspect--center" style="inline-size:9rem"><span class="oc-item-description">4 / 3</span></div>
+  <div class="oc-aspect oc-aspect--portrait oc-aspect--center" style="inline-size:6rem"><span class="oc-item-description">3 / 4</span></div>
+  <div class="oc-aspect oc-aspect--center" style="inline-size:12rem;--oc-aspect: 5 / 2"><span class="oc-item-description">5 / 2</span></div>
+</div>

package/snippets/attachment.html

@@ -0,0 +1,43 @@
+<!-- OmniaUI component: attachment — File chip and image preview for chat messages and composers: icon by type, name, size, remove and upload states. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/attachment.html | Map: file chips (types) -> image preview -> composer row (thumb, uploading, error, remove)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-attachment-list: Wrapping row of chips (ul or div). Modifier: --stack (one per line, full width)
+       a.oc-attachment | div.oc-attachment: File chip. Types: --pdf, --doc, --sheet, --zip, --image (tint of the icon tile).
+         States: --uploading (progress line from --oc-attachment-progress), --error
+       .oc-attachment__icon: Page tile with the extension text, or an img for a small preview
+       .oc-attachment__body > .oc-attachment__name + .oc-attachment__size
+       button.oc-attachment__remove: Remove button (composer); give it an aria-label with the file name
+       a.oc-attachment-image > img + .oc-attachment-image__caption: Image preview inside a message (4 : 3, max 18rem wide)
+       .oc-attachment-thumb > img + button.oc-attachment__remove: Square thumbnail of a pasted screenshot
+     No JavaScript. Removing a file or tracking upload progress is up to your app; set --oc-attachment-progress inline.
+-->
+<div style="display:grid;gap:1.25rem;inline-size:100%;max-inline-size:40rem">
+  <ul class="oc-attachment-list" aria-label="Files in this message">
+    <li><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf" download><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Dewitte v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--sheet" href="#measurements.xlsx" download><span class="oc-attachment__icon" aria-hidden="true">XLS</span><span class="oc-attachment__body"><span class="oc-attachment__name">Measurements ground floor.xlsx</span><span class="oc-attachment__size">86 KB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--doc" href="#contract.docx" download><span class="oc-attachment__icon" aria-hidden="true">DOC</span><span class="oc-attachment__body"><span class="oc-attachment__name">Contract addendum.docx</span><span class="oc-attachment__size">240 KB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--zip" href="#plans.zip" download><span class="oc-attachment__icon" aria-hidden="true">ZIP</span><span class="oc-attachment__body"><span class="oc-attachment__name">Plans architect.zip</span><span class="oc-attachment__size">14.8 MB</span></span></a></li>
+  </ul>
+
+  <a class="oc-attachment-image" href="#worktop-sample.jpg">
+    <span class="oc-media-art oc-media-art--6" role="img" aria-label="Photo of the Calacatta worktop sample"></span>
+    <span class="oc-attachment-image__caption">worktop-sample.jpg · 2.1 MB</span>
+  </a>
+
+  <div class="oc-attachment-list" aria-label="Files to send">
+    <div class="oc-attachment-thumb">
+      <span class="oc-media-art oc-media-art--2" role="img" aria-label="Pasted screenshot"></span>
+      <button type="button" class="oc-attachment__remove" aria-label="Remove screenshot.png">&#10005;</button>
+    </div>
+    <div class="oc-attachment oc-attachment--pdf oc-attachment--uploading" style="--oc-attachment-progress:65%">
+      <span class="oc-attachment__icon" aria-hidden="true">PDF</span>
+      <span class="oc-attachment__body"><span class="oc-attachment__name">Delivery note 4471.pdf</span><span class="oc-attachment__size" role="status">Uploading… 65%</span></span>
+      <button type="button" class="oc-attachment__remove" aria-label="Cancel upload of Delivery note 4471.pdf">&#10005;</button>
+    </div>
+    <div class="oc-attachment oc-attachment--image oc-attachment--error">
+      <span class="oc-attachment__icon" aria-hidden="true">HEIC</span>
+      <span class="oc-attachment__body"><span class="oc-attachment__name">IMG_2048.heic</span><span class="oc-attachment__size">Larger than 25 MB</span></span>
+      <button type="button" class="oc-attachment__remove" aria-label="Remove IMG_2048.heic">&#10005;</button>
+    </div>
+  </div>
+</div>

package/snippets/avatar.html

@@ -0,0 +1,6 @@
+<!-- OmniaUI component: avatar — Avatars and avatar group. Needs @birdycom/omniaui CSS. -->
+<div class="oc-avatar-group">
+  <span class="oc-avatar">SC</span>
+  <span class="oc-avatar">BC</span>
+  <span class="oc-avatar oc-avatar--lg">OM</span>
+</div>

package/snippets/back-link.html

@@ -0,0 +1,5 @@
+<!-- OmniaUI component: back-link - Outline link that names its destination (Back to Products). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-back-link: Anchor styled as an outline button with a leading arrow
+-->
+<a class="oc-back-link" href="#">Back to Products</a>

package/snippets/badge.html

@@ -0,0 +1,5 @@
+<!-- OmniaUI component: badge — Badges. Needs @birdycom/omniaui CSS. -->
+<span class="oc-badge">Badge</span>
+<span class="oc-badge oc-badge--secondary">Secondary</span>
+<span class="oc-badge oc-badge--outline">Outline</span>
+<span class="oc-badge oc-badge--destructive">Error</span>

package/snippets/barcode-input.html

@@ -0,0 +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>

package/snippets/breadcrumb.html

@@ -0,0 +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>

package/snippets/browser-frame.html

@@ -0,0 +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>

package/snippets/busy-overlay.html

@@ -0,0 +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>

package/snippets/button-group.html

@@ -0,0 +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>

package/snippets/button.html

@@ -0,0 +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>

package/snippets/calendar.html

@@ -0,0 +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>

package/snippets/card.html

@@ -0,0 +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>

package/snippets/carousel.html

@@ -0,0 +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>

package/snippets/chart-line.html

@@ -0,0 +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>