@birdycom/omniaui 0.0.0-stage → 0.11.0

package/snippets/site-header.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: site-header - Top bar with brand, site navigation (pill menu) and actions. Needs @birdycom/omniaui CSS.
+     Class API: .oc-topbar (header; --fixed pins it to the top, --collapsible = CSS-only burger menu on small screens) · .oc-topbar-brand ·
+       .oc-topbar-nav (nav wrapper) · .oc-navmenu.oc-navmenu--site + .oc-navmenu-link (aria-current="page" = current section) · .oc-navmenu-icon (icon link) ·
+       .oc-topbar-actions (right side) · .oc-topbar-toggle + .oc-topbar-burger (mobile menu)
+-->
+<header class="oc-topbar oc-topbar--collapsible">
+  <a class="oc-topbar-brand" href="#">OmniaCSS <span class="oc-badge-version">v1</span></a>
+  <input type="checkbox" id="oc-topbar-demo" class="oc-topbar-toggle" aria-label="Toggle menu">
+  <label class="oc-topbar-burger" for="oc-topbar-demo" aria-hidden="true">&#9776;</label>
+  <nav class="oc-topbar-nav" aria-label="Main">
+    <ul class="oc-navmenu oc-navmenu--site">
+      <li><a class="oc-navmenu-link" href="#">Home</a></li>
+      <li><a class="oc-navmenu-link" href="#" aria-current="page">Docs</a></li>
+      <li><a class="oc-navmenu-link" href="#">Components</a></li>
+      <li><a class="oc-navmenu-link" href="#">Blocks</a></li>
+      <li><a class="oc-navmenu-link" href="#" aria-label="GitHub"><svg class="oc-navmenu-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"/></svg></a></li>
+    </ul>
+  </nav>
+  <div class="oc-topbar-actions">
+    <fieldset class="oc-theme-switch" aria-label="Color theme">
+      <label><input type="radio" name="oc-topbar-theme" value="system" checked> System</label>
+      <label><input type="radio" name="oc-topbar-theme" value="light"> Light</label>
+      <label><input type="radio" name="oc-topbar-theme" value="dark"> Dark</label>
+    </fieldset>
+  </div>
+</header>

package/snippets/skeleton.html

@@ -0,0 +1,4 @@
+<!-- OmniaUI component: skeleton — Loading skeleton. Needs @birdycom/omniaui CSS. -->
+<div class="oc-skeleton oc-skeleton--circle"></div>
+<div class="oc-skeleton oc-skeleton--title"></div>
+<div class="oc-skeleton oc-skeleton--text"></div>

package/snippets/slider.html

@@ -0,0 +1,17 @@
+<!-- OmniaUI component: slider - Slider: native range input with themed track, fill and thumb. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       input.oc-slider[type=range]: the slider. Modifier: --vertical
+       --oc-slider-progress: fill length for Chromium/WebKit (Firefox fills natively). Update with a one-line oninput
+       --oc-slider-track / --oc-slider-thumb: sizes
+-->
+<div class="oc-field" style="max-inline-size:20rem">
+  <label class="oc-field-label" for="oc-slider-volume">Volume</label>
+  <input class="oc-slider" id="oc-slider-volume" type="range" min="0" max="100" value="40" style="--oc-slider-progress: 40%"
+         oninput="this.style.setProperty('--oc-slider-progress', (this.value - this.min) / (this.max - this.min) * 100 + '%')">
+</div>
+
+<div style="display:flex;align-items:center;gap:2rem;flex-wrap:wrap">
+  <input class="oc-slider" type="range" min="0" max="10" step="1" value="3" aria-label="Rating" style="--oc-slider-progress: 30%;max-inline-size:12rem" oninput="this.style.setProperty('--oc-slider-progress', (this.value - this.min) / (this.max - this.min) * 100 + '%')">
+  <input class="oc-slider" type="range" value="60" disabled aria-label="Disabled" style="--oc-slider-progress: 60%;max-inline-size:10rem">
+  <input class="oc-slider oc-slider--vertical" type="range" value="70" aria-label="Level" style="--oc-slider-progress: 70%">
+</div>

package/snippets/sortable-row.html

@@ -0,0 +1,31 @@
+<!-- OmniaUI component: sortable-row - Table row with a drag grip and drag / drop states (styling only). Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/sortable-row.html | Map: table -> grip column -> normal row -> dragging row -> drop target row
+     Class API (modifiers are extra classes / attributes on the same element):
+       tr.oc-sortable-row[draggable="true"]: Row that can be moved. States: .is-dragging (row being moved), .is-drop-before / .is-drop-after (drop line on the target row).
+       td.oc-sortable-row-grip-cell: Narrow first cell
+       button.oc-sortable-row-grip: Grip with six dots (aria-label "Move ..."). States: aria-pressed="true" (picked up with the keyboard), disabled (locked row).
+     Slots: grip cell + the normal row cells. Behaviour (native drag and drop or keys) comes from your own code.
+-->
+<div class="oc-table-wrap">
+  <table class="oc-table">
+    <thead><tr><th class="oc-sortable-row-grip-cell"><span class="oc-visually-hidden">Order</span></th><th>Step</th><th>Owner</th></tr></thead>
+    <tbody>
+      <tr class="oc-sortable-row" draggable="true">
+        <td class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Measure the room"></button></td>
+        <td>Measure the room</td><td>Ada</td>
+      </tr>
+      <tr class="oc-sortable-row is-dragging" draggable="true">
+        <td class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Order materials"></button></td>
+        <td>Order materials</td><td>Alan</td>
+      </tr>
+      <tr class="oc-sortable-row is-drop-after" draggable="true">
+        <td class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Move Install"></button></td>
+        <td>Install</td><td>Grace</td>
+      </tr>
+      <tr class="oc-sortable-row">
+        <td class="oc-sortable-row-grip-cell"><button class="oc-sortable-row-grip" type="button" aria-label="Final check (locked)" disabled></button></td>
+        <td>Final check</td><td>Ada</td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/snippets/spinner.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: spinner - Spinner: loading ring in sizes sm to xl, inherits currentColor. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-spinner: the ring (role="status" + aria-label). Sizes: --sm, --lg, --xl. Colors: --primary, --muted (or set `color`)
+       --oc-spinner-size: custom size
+-->
+<div style="display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap">
+  <span class="oc-spinner oc-spinner--sm" role="status" aria-label="Loading"></span>
+  <span class="oc-spinner" role="status" aria-label="Loading"></span>
+  <span class="oc-spinner oc-spinner--lg oc-spinner--primary" role="status" aria-label="Loading"></span>
+  <span class="oc-spinner oc-spinner--xl oc-spinner--muted" role="status" aria-label="Loading"></span>
+</div>
+
+<button class="oc-btn" type="button" disabled aria-busy="true"><span class="oc-spinner oc-spinner--sm" aria-hidden="true"></span> Saving&hellip;</button>
+<button class="oc-btn oc-btn--outline" type="button" disabled aria-busy="true"><span class="oc-spinner oc-spinner--sm" aria-hidden="true"></span> Loading</button>

package/snippets/stack-card.html

@@ -0,0 +1,17 @@
+<!-- OmniaUI component: stack-card — Playlist or course cover drawn as a stacked deck with a count badge. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/stack-card.html | Map: card -> deck (cover thumb + count badge) -> title link + meta
+     Class API: article.oc-stack-card > .oc-stack-card__deck > .oc-media-thumb (cover) + .oc-stack-card__count ·
+       h3.oc-stack-card__title > a (covers the card) · p.oc-stack-card__meta.
+     Modifiers: .oc-stack-card--panel (count as a dark side panel). The two layers behind the cover are ::before / ::after
+       and fan out on hover (skipped with reduced motion). No JavaScript.
+-->
+<article class="oc-stack-card" style="max-inline-size:20rem">
+  <div class="oc-stack-card__deck">
+    <div class="oc-media-thumb"><div class="oc-media-art oc-media-art--4"></div></div>
+    <span class="oc-stack-card__count"><span aria-hidden="true">&#9776;</span> 12 videos</span>
+  </div>
+  <div>
+    <h3 class="oc-stack-card__title"><a href="#">Cabin build, start to finish</a></h3>
+    <p class="oc-stack-card__meta">North Studio · Updated yesterday</p>
+  </div>
+</article>

package/snippets/stack-list.html

@@ -0,0 +1,16 @@
+<!-- OmniaUI component: stack-list - Technology pills for a product or project tech stack. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/stack-list.html | Map: ul.oc-stack-list -> li.oc-stack-list__item (optional __icon)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-stack-list: The list (aria-label names it). Modifiers: --neutral (no accent tint), --sm
+       .oc-stack-list__item: One pill
+       .oc-stack-list__icon: Optional glyph or SVG before the name (aria-hidden)
+       .oc-accent--*: Accent preset for the tint
+     Slots: items
+-->
+<ul class="oc-stack-list oc-accent--violet" aria-label="Tech stack">
+  <li class="oc-stack-list__item">PHP 8.4</li>
+  <li class="oc-stack-list__item">MySQL</li>
+  <li class="oc-stack-list__item">TypeScript</li>
+  <li class="oc-stack-list__item">Vue 3</li>
+  <li class="oc-stack-list__item">Docker</li>
+</ul>

package/snippets/stat-card.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI component: stat-card - KPI tile with an icon tile, a big number, a label and an optional trend; tone modifiers and a clickable variant. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/stat-card.html | Map: grid -> default card -> card with trend -> clickable accent card
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-stat-card-grid: Responsive grid for a row of cards
+       .oc-stat-card: Card (div, or a / button for a clickable card with hover lift). Modifiers: --accent (needs attention), --success, --warning, --stripe (start edge stripe).
+       .oc-stat-card-icon: Tinted icon tile
+       .oc-stat-card-body / -value / -label: Text column, big number, small label
+       .oc-stat-card-trend: Chip after the value. Modifiers: --up, --down.
+     Slots: icon, value, label, trend
+-->
+<div class="oc-stat-card-grid">
+  <div class="oc-stat-card">
+    <span class="oc-stat-card-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
+    <div class="oc-stat-card-body"><span class="oc-stat-card-value">248</span><span class="oc-stat-card-label">Active customers</span></div>
+  </div>
+  <div class="oc-stat-card oc-stat-card--success">
+    <span class="oc-stat-card-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg></span>
+    <div class="oc-stat-card-body"><span class="oc-stat-card-value">&euro;18.4k<span class="oc-stat-card-trend oc-stat-card-trend--up">+12%</span></span><span class="oc-stat-card-label">Revenue this month</span></div>
+  </div>
+  <a class="oc-stat-card oc-stat-card--accent oc-stat-card--stripe" href="#">
+    <span class="oc-stat-card-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8l-9-5-9 5 9 5 9-5z"/><path d="M3 8v8l9 5 9-5V8"/></svg></span>
+    <span class="oc-stat-card-body"><span class="oc-stat-card-value">7</span><span class="oc-stat-card-label">Open orders - needs attention</span></span>
+  </a>
+</div>

package/snippets/stepper.html

@@ -0,0 +1,13 @@
+<!-- OmniaUI component: stepper - Wizard step navigation: done, active and upcoming steps (vertical or horizontal). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-stepper: ol wrapper. Modifier: --horizontal.
+       .oc-stepper-item: Step (button). Modifiers: --done, --active (or aria-current="step"); default = upcoming (add disabled).
+       .oc-stepper-label: Step title
+       .oc-stepper-meta: Optional small text (e.g. 2/4)
+-->
+<ol class="oc-stepper" aria-label="Setup steps">
+  <li><button class="oc-stepper-item oc-stepper-item--done" type="button"><span><span class="oc-stepper-label">Company</span><span class="oc-stepper-meta">1/4</span></span></button></li>
+  <li><button class="oc-stepper-item oc-stepper-item--active" type="button" aria-current="step"><span><span class="oc-stepper-label">Invoicing</span><span class="oc-stepper-meta">2/4</span></span></button></li>
+  <li><button class="oc-stepper-item" type="button" disabled><span><span class="oc-stepper-label">Banking</span><span class="oc-stepper-meta">3/4</span></span></button></li>
+  <li><button class="oc-stepper-item" type="button" disabled><span><span class="oc-stepper-label">Team</span><span class="oc-stepper-meta">4/4</span></span></button></li>
+</ol>

package/snippets/switch.html

@@ -0,0 +1,6 @@
+<!-- OmniaUI component: switch - Toggle switch on a checkbox. Needs @birdycom/omniaui CSS.
+-->
+<label class="oc-switch">
+  <input type="checkbox" role="switch" checked>
+  <span class="oc-switch-track"></span>
+</label>

package/snippets/table-actions.html

@@ -0,0 +1,39 @@
+<!-- OmniaUI component: table-actions - Row actions as small icon buttons or as one overflow menu (popover) - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/table-actions.html | Map: table -> row with icon actions -> row with overflow menu
+     Class API (modifiers are extra classes / attributes on the same element):
+       td.oc-table-actions: Actions cell from the table component (right aligned, no wrap). Modifier: --icons (tighter gap).
+       .oc-table-actions-icon: Square icon action (a or button) with aria-label + title. Tones: --primary, --success, --destructive. State: disabled / aria-disabled="true".
+       .oc-table-actions-more[popovertarget]: Overflow trigger (three dots). Stays highlighted while its menu is open.
+       .oc-dropdown-menu[popover]: The overflow menu (dropdown component); opens toward the inline start.
+     Slots: icon actions, or trigger + menu items (.oc-dropdown-item, --destructive, .oc-dropdown-separator)
+-->
+<div class="oc-table-wrap">
+  <table class="oc-table">
+    <thead>
+      <tr><th>Name</th><th>E-mail</th><th style="width:7rem"><span class="oc-visually-hidden">Actions</span></th></tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Ada Lovelace</td><td>ada@example.com</td>
+        <td class="oc-table-actions oc-table-actions--icons">
+          <a class="oc-table-actions-icon oc-table-actions-icon--primary" href="#" aria-label="View Ada" title="View"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></a>
+          <a class="oc-table-actions-icon" href="#" aria-label="Edit Ada" title="Edit"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg></a>
+          <button class="oc-table-actions-icon oc-table-actions-icon--destructive" type="button" aria-label="Delete Ada" title="Delete"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/></svg></button>
+        </td>
+      </tr>
+      <tr>
+        <td>Alan Turing</td><td>alan@example.com</td>
+        <td class="oc-table-actions">
+          <button class="oc-table-actions-more" type="button" popovertarget="oc-table-actions-menu-alan" aria-label="Actions for Alan"></button>
+          <div class="oc-dropdown-menu" id="oc-table-actions-menu-alan" popover>
+            <a class="oc-dropdown-item" href="#">View</a>
+            <a class="oc-dropdown-item" href="#">Edit</a>
+            <button class="oc-dropdown-item" type="button">Duplicate</button>
+            <div class="oc-dropdown-separator"></div>
+            <button class="oc-dropdown-item oc-dropdown-item--destructive" type="button">Delete</button>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/snippets/table-compact.html

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

package/snippets/table.html

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

package/snippets/tabs.html

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

package/snippets/tag-input.html

@@ -0,0 +1,17 @@
+<!-- OmniaUI component: tag-input - Chips with remove buttons and a free-text input with suggestions. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-tag: Chip
+       .oc-tag-remove: Remove button inside a chip
+       .oc-tag-input: Bordered container holding chips and one <input>
+       .oc-tag-suggestions: Row of suggestion buttons below the control
+-->
+<div class="oc-tag-input">
+  <span class="oc-tag">design <button class="oc-tag-remove" type="button" aria-label="Remove design">&times;</button></span>
+  <span class="oc-tag">internal <button class="oc-tag-remove" type="button" aria-label="Remove internal">&times;</button></span>
+  <input type="text" placeholder="Add tag..." aria-label="Add tag" list="oc-tag-options">
+</div>
+<div class="oc-tag-suggestions">
+  <button type="button">customer</button>
+  <button type="button">supplier</button>
+  <button type="button">partner</button>
+</div>

package/snippets/terminal-log.html

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

package/snippets/textarea.html

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

package/snippets/theme-switch.html

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

package/snippets/time-input.html

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

package/snippets/timeline.html

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

package/snippets/toast-stack.html

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

package/snippets/toast.html

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

package/snippets/toc.html

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

package/snippets/toggle-field.html

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

package/snippets/toggle.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI component: toggle - Toggle and toggle group: pressed state on checkbox/radio or aria-pressed. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-toggle: label (around input) or button. On state: input:checked, [aria-pressed=true], [data-state=on]. Variants: --outline. Sizes: --sm, --lg. --icon: square
+       .oc-toggle-group: connected toggles (radio inputs = single, checkbox inputs = multiple). Modifier: --spaced
+-->
+<div class="oc-toggle-group" role="group" aria-label="Text formatting">
+  <label class="oc-toggle oc-toggle--outline oc-toggle--icon" title="Bold"><input type="checkbox" name="fmt" value="bold" aria-label="Bold" checked><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="M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z"/></svg></label>
+  <label class="oc-toggle oc-toggle--outline oc-toggle--icon" title="Italic"><input type="checkbox" name="fmt" value="italic" aria-label="Italic"><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="M19 4h-9M14 20H5M15 4 9 20"/></svg></label>
+  <label class="oc-toggle oc-toggle--outline oc-toggle--icon" title="Underline"><input type="checkbox" name="fmt" value="underline" aria-label="Underline"><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="M6 4v6a6 6 0 0 0 12 0V4M4 21h16"/></svg></label>
+</div>
+
+<div class="oc-toggle-group" role="radiogroup" aria-label="Alignment">
+  <label class="oc-toggle oc-toggle--icon"><input type="radio" name="oc-align" value="left" aria-label="Left" checked><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="M4 6h16M4 12h10M4 18h14"/></svg></label>
+  <label class="oc-toggle oc-toggle--icon"><input type="radio" name="oc-align" value="center" aria-label="Center"><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="M4 6h16M7 12h10M5 18h14"/></svg></label>
+  <label class="oc-toggle oc-toggle--icon"><input type="radio" name="oc-align" value="right" aria-label="Right"><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="M4 6h16M10 12h10M6 18h14"/></svg></label>
+</div>
+
+<label class="oc-toggle oc-toggle--outline"><input type="checkbox"> Italic</label>
+<label class="oc-toggle oc-toggle--outline oc-toggle--sm"><input type="checkbox" checked> Small</label>
+<label class="oc-toggle oc-toggle--outline oc-toggle--lg"><input type="checkbox"> Large</label>
+<button class="oc-toggle oc-toggle--outline" type="button" aria-pressed="true">Pressed button</button>
+<div class="oc-toggle-group oc-toggle-group--spaced" role="group" aria-label="Spaced"><label class="oc-toggle oc-toggle--outline"><input type="checkbox" checked> A</label><label class="oc-toggle oc-toggle--outline"><input type="checkbox"> B</label></div>

package/snippets/tooltip.html

@@ -0,0 +1,4 @@
+<!-- OmniaUI component: tooltip — Tooltip (CSS only). Needs @birdycom/omniaui CSS. -->
+<span class="oc-tooltip" data-tooltip="Saved to your library">
+  <button class="oc-btn oc-btn--outline">Hover me</button>
+</span>

package/snippets/top-progress.html

@@ -0,0 +1,12 @@
+<!-- OmniaUI component: top-progress - Thin page-top loading bar on a native progress element (indeterminate or with a value). Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/top-progress.html | Map: indeterminate bar -> determinate bar (value) -> static bar in a card
+     Class API (modifiers are extra classes / attributes on the same element):
+       progress.oc-top-progress: Fixed to the top of the window. Without value = indeterminate (sliding segment); value + max = determinate.
+       Modifiers: --success, --warning, --danger, --brand (colors), --lg (4px), --static (in the normal flow, e.g. inside a card).
+       States: .is-done (fades out), hidden (removed)
+       Custom properties: --oc-top-progress-color, --oc-top-progress-height
+     Slots: none (use aria-label for the screen reader name)
+-->
+<progress class="oc-top-progress" aria-label="Loading page"></progress>
+
+<progress class="oc-top-progress oc-top-progress--static" value="40" max="100" aria-label="Uploading, 40 percent"></progress>