@birdycom/omniaui 0.0.0-stage → 0.11.1

package/snippets/number-input.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI component: number-input - Number field with minus and plus step buttons. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/number-input.html | Map: wrapper -> minus button -> number field -> plus button -> optional script
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-number-input: Frame around buttons and field. Modifiers: --sm, --block (full width), --error.
+       .oc-number-input-step: Minus / plus button (data-oc-step="-1" or "1")
+       .oc-number-input-field: input type="number" (min, max, step work natively; spinners hidden)
+     States: :focus-within (ring), :user-invalid outside min/max (red), disabled field (dimmed)
+     The field works without JavaScript (arrow keys). The script below makes the buttons call stepDown()/stepUp().
+-->
+<div class="oc-number-input">
+  <button class="oc-number-input-step" type="button" data-oc-step="-1" aria-label="Decrease">&minus;</button>
+  <input class="oc-number-input-field" type="number" name="quantity" value="2" min="0" max="99" step="1" aria-label="Quantity">
+  <button class="oc-number-input-step" type="button" data-oc-step="1" aria-label="Increase">+</button>
+</div>
+<script>
+  // One listener for every number input on the page. stepUp/stepDown respect min, max and step.
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.oc-number-input-step');
+    if (!btn) return;
+    const input = btn.parentElement.querySelector('.oc-number-input-field');
+    if (!input || input.disabled) return;
+    btn.dataset.ocStep === '-1' ? input.stepDown() : input.stepUp();
+    // Let forms and frameworks know the value changed.
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  });
+</script>

package/snippets/otp-input.html

@@ -0,0 +1,9 @@
+<!-- OmniaUI component: otp-input - One-time code field drawn as separate cells on a single real input. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-otp: The input. Set style="--oc-otp-length: 6" and maxlength to the code length. aria-invalid="true" shows the error state.
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-otp-demo">Authentication code</label>
+  <input class="oc-otp" id="oc-otp-demo" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6" value="123">
+  <p class="oc-field-description">Enter the 6-digit code from your authenticator app.</p>
+</div>

package/snippets/page-header.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI component: page-header - Page title row with back link, subtitle, meta and actions; actions move under the title in narrow containers. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/page-header.html | Map: header -> back row -> main (text: title + badge, subtitle, meta | actions)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-page-header: Header (size container). Modifiers: --bordered (line under it), --sticky, --sm.
+       .oc-page-header-back: Optional row for an .oc-back-link
+       .oc-page-header-main: Text block + actions (side by side from a 36rem container width)
+       .oc-page-header-text / -title / -subtitle / -meta: Text column, h1 (may hold a badge), sub line, meta row
+       .oc-page-header-actions: Buttons
+     Slots: back, title, subtitle, meta, actions
+-->
+<header class="oc-page-header oc-page-header--bordered">
+  <div class="oc-page-header-back"><a class="oc-back-link" href="#">Projects</a></div>
+  <div class="oc-page-header-main">
+    <div class="oc-page-header-text">
+      <h1 class="oc-page-header-title">Kitchen renovation <span class="oc-badge oc-badge--success">Active</span></h1>
+      <p class="oc-page-header-subtitle">Main street 12, Ghent - started 2 September 2026.</p>
+      <div class="oc-page-header-meta"><span>Owner: Ada Lovelace</span><span>Updated 2 hours ago</span></div>
+    </div>
+    <div class="oc-page-header-actions">
+      <button class="oc-btn oc-btn--outline" type="button">Share</button>
+      <button class="oc-btn" type="button">New quote</button>
+    </div>
+  </div>
+</header>

package/snippets/pagination.html

@@ -0,0 +1,6 @@
+<!-- OmniaUI component: pagination — Pagination. Needs @birdycom/omniaui CSS. -->
+<nav class="oc-pagination" aria-label="Pagination">
+  <a class="oc-pagination-item" href="?page=1">1</a>
+  <a class="oc-pagination-item" href="?page=2" aria-current="page">2</a>
+  <a class="oc-pagination-item" href="?page=3">3</a>
+</nav>

package/snippets/password-input.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI component: password-input - Password field with show/hide button. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-input-reveal: Wrapper (relative)
+       .oc-input: The password input
+       .oc-input-reveal-button: Toggle button (aria-pressed reflects the state)
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-password-demo">Password</label>
+  <div class="oc-input-reveal">
+    <input class="oc-input" id="oc-password-demo" type="password" autocomplete="current-password" value="secret-value">
+    <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+  </div>
+</div>
+<script>
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.oc-input-reveal-button');
+    if (!btn) return;
+    const input = btn.parentElement.querySelector('input');
+    const show = input.type === 'password';
+    input.type = show ? 'text' : 'password';
+    btn.setAttribute('aria-pressed', String(show));
+    btn.textContent = show ? 'Hide' : 'Show';
+  });
+</script>

package/snippets/password-requirements.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: password-requirements - Live checklist of password rules under a password field. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/password-requirements.html | Map: field (label + password input) -> rule list -> optional script
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-password-requirements: The list (aria-live="polite"). Modifier: --inline (rules side by side).
+       .oc-password-requirement: One rule. Modifier: --met (green with a check mark).
+     Optional script attributes: data-oc-password-for="<input id>" on the list; per rule data-min="8" or data-pattern="[A-Z]".
+     Without JavaScript the list is a static hint; the script (or a React/Vue wrapper) toggles --met while typing.
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-password-rules-demo">New password</label>
+  <input class="oc-input" id="oc-password-rules-demo" type="password" autocomplete="new-password" aria-describedby="oc-password-rules-demo-list" value="Secret1">
+  <ul class="oc-password-requirements" id="oc-password-rules-demo-list" aria-live="polite" data-oc-password-for="oc-password-rules-demo">
+    <li class="oc-password-requirement" data-min="8">At least 8 characters</li>
+    <li class="oc-password-requirement oc-password-requirement--met" data-pattern="[A-Z]">One uppercase letter</li>
+    <li class="oc-password-requirement oc-password-requirement--met" data-pattern="[0-9]">One number</li>
+    <li class="oc-password-requirement" data-pattern="[^A-Za-z0-9]">One symbol</li>
+  </ul>
+</div>
+<script>
+  // Re-check every rule of a linked list when its password field changes.
+  document.addEventListener('input', (e) => {
+    const list = e.target.id && document.querySelector(`[data-oc-password-for="${e.target.id}"]`);
+    if (!list) return;
+    for (const rule of list.querySelectorAll('.oc-password-requirement')) {
+      const value = e.target.value;
+      const met = rule.dataset.min ? value.length >= Number(rule.dataset.min) : new RegExp(rule.dataset.pattern).test(value);
+      rule.classList.toggle('oc-password-requirement--met', met);
+    }
+  });
+</script>

package/snippets/phone-input.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI component: phone-input - Phone field with a country dial code select and the national number. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/phone-input.html | Map: field wrapper -> label -> phone frame (dial select + tel input) -> hint
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-phone-input: Frame around both parts. Modifiers: --sm, --error.
+       .oc-phone-input-dial: Native select with the dial codes (+32, +31...)
+       .oc-phone-input-number: The national number (type="tel", autocomplete="tel-national")
+     States: :focus-within (ring), aria-invalid="true" or :user-invalid on the number (red), disabled number (dimmed)
+     Slots: one <option> per country; the value of the form is dial code + number (join them on the server)
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-phone-demo">Mobile number</label>
+  <div class="oc-phone-input">
+    <select class="oc-phone-input-dial" name="phone_dial" aria-label="Country code">
+      <option value="+32" selected>BE +32</option>
+      <option value="+31">NL +31</option>
+      <option value="+33">FR +33</option>
+      <option value="+49">DE +49</option>
+    </select>
+    <input class="oc-phone-input-number" id="oc-phone-demo" name="phone" type="tel" inputmode="tel" autocomplete="tel-national" placeholder="470 12 34 56" pattern="[0-9 ]{8,14}">
+  </div>
+  <p class="oc-field-description">Digits only; spaces are fine.</p>
+</div>

package/snippets/popover.html

@@ -0,0 +1,15 @@
+<!-- OmniaUI component: popover - Floating panel on popover + anchor positioning - no JavaScript. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-popover[popover]: The panel. Sizes: --sm, --lg.
+       .oc-popover-title / -text: Optional heading and body text
+       button[popovertarget]: Trigger
+-->
+<button class="oc-btn oc-btn--outline" type="button" popovertarget="oc-popover-demo">Dimensions</button>
+<div class="oc-popover" id="oc-popover-demo" popover>
+  <h3 class="oc-popover-title">Dimensions</h3>
+  <p class="oc-popover-text">Set the width and height of the layer.</p>
+  <div class="oc-field" style="margin-top:.75rem">
+    <label class="oc-field-label" for="oc-popover-width">Width</label>
+    <input class="oc-input" id="oc-popover-width" value="100%">
+  </div>
+</div>

package/snippets/price-card.html

@@ -0,0 +1,34 @@
+<!-- OmniaUI component: price-card - Plan card with a monthly / yearly toggle (radio + :has), discount badge and included / excluded features. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/price-card.html | Map: article.oc-price-card -> head (name + discount) -> toggle -> prices -> features -> cta
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-price-card: The card. Modifier: --featured (accent border + glow; use with .oc-accent--*)
+       .oc-price-card__head / __name / __desc: Title row, plan name, short description
+       .oc-price-card__discount: Badge ("Save 20%"), dimmed while monthly is selected
+       .oc-price-card__toggle: Put on an .oc-segmented with radios value="monthly" and value="yearly" (unique name per card)
+       .oc-price-card__price--monthly / --yearly: Price rows; the checked radio decides which one shows
+       .oc-price-card__amount / __period / __was / __note: Big number, "/month", old price (<s>), small note
+       .oc-price-card__features: List. .oc-price-card__feature (✓), modifier --excluded (✕ + muted)
+       .oc-price-card__cta: Full-width button
+     Slots: name, discount, description, prices, features, cta
+-->
+<article class="oc-price-card">
+  <div class="oc-price-card__head">
+    <h3 class="oc-price-card__name">Pro</h3>
+    <span class="oc-price-card__discount">Save 20%</span>
+  </div>
+  <p class="oc-price-card__desc">For small teams that send invoices every week.</p>
+  <div class="oc-segmented oc-price-card__toggle" role="radiogroup" aria-label="Billing period">
+    <label class="oc-segmented-item"><input type="radio" name="oc-price-pro" value="monthly" checked> Monthly</label>
+    <label class="oc-segmented-item"><input type="radio" name="oc-price-pro" value="yearly"> Yearly</label>
+  </div>
+  <p class="oc-price-card__price oc-price-card__price--monthly"><span class="oc-price-card__amount">&euro;12</span><span class="oc-price-card__period">/month</span></p>
+  <p class="oc-price-card__price oc-price-card__price--yearly"><span class="oc-price-card__amount">&euro;115</span><span class="oc-price-card__period">/year</span><s class="oc-price-card__was">&euro;144</s><span class="oc-price-card__note">Billed once a year</span></p>
+  <ul class="oc-price-card__features">
+    <li class="oc-price-card__feature">Unlimited invoices</li>
+    <li class="oc-price-card__feature">5 team members</li>
+    <li class="oc-price-card__feature">Bank import</li>
+    <li class="oc-price-card__feature oc-price-card__feature--excluded">Custom domain</li>
+    <li class="oc-price-card__feature oc-price-card__feature--excluded">Priority support</li>
+  </ul>
+  <a class="oc-btn oc-price-card__cta" href="#signup">Choose Pro</a>
+</article>

package/snippets/product-mark.html

@@ -0,0 +1,13 @@
+<!-- OmniaUI component: product-mark - Squircle app icon tile in the accent gradient (sm / lg / xl). Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/product-mark.html | Map: span.oc-product-mark (glyph, img or svg) per size
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-product-mark: The tile. Uses corner-shape: squircle where supported, a rounded square otherwise.
+         Sizes: --sm, (default), --lg, --xl. Styles: --soft (tinted), --glow, --cover (full-bleed img)
+       .oc-accent--*: Accent preset (green, violet, orange, cyan, red, yellow, blue)
+       --oc-mark-size: Custom size
+     Slots: content (glyph, emoji, <img alt=""> or inline SVG)
+-->
+<span class="oc-product-mark oc-product-mark--sm oc-accent--green" aria-hidden="true">&#9670;</span>
+<span class="oc-product-mark oc-accent--violet" aria-hidden="true">&#9673;</span>
+<span class="oc-product-mark oc-product-mark--lg oc-accent--orange" aria-hidden="true">&#9650;</span>
+<span class="oc-product-mark oc-product-mark--xl oc-accent--cyan" aria-hidden="true">&#9733;</span>

package/snippets/progress.html

@@ -0,0 +1,4 @@
+<!-- OmniaUI component: progress — Progress bar. Needs @birdycom/omniaui CSS. -->
+<div class="oc-progress" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
+  <div class="oc-progress-bar" style="width: 60%"></div>
+</div>

package/snippets/project-card.html

@@ -0,0 +1,23 @@
+<!-- OmniaUI component: project-card - Portfolio card with a browser-like preview, type badge, name, meta and an arrow link. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/project-card.html | Map: a.oc-project-card -> __frame (__bar + __shot) -> __body (type, name, meta, more)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-project-card: The card (usually an <a>, the whole card is clickable). Modifier: --flat (edge-to-edge preview)
+       .oc-project-card__frame: Preview window. .oc-project-card__bar: title bar with three <i> dots
+       .oc-project-card__shot: Screenshot <img>, or an empty <span> for a gradient placeholder
+       .oc-project-card__body: Text column
+       .oc-project-card__type / __name / __meta / __more: Badge, title, sector line, "View" link with arrow
+       .oc-accent--*: Accent preset for the badge, dot, border and placeholder
+     Slots: shot (image), type, name, meta, more
+-->
+<a class="oc-project-card oc-accent--green" href="#project">
+  <span class="oc-project-card__frame">
+    <span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span>
+    <span class="oc-project-card__shot" role="img" aria-label="Northwind Bakery website, screenshot"></span>
+  </span>
+  <span class="oc-project-card__body">
+    <span class="oc-project-card__type">Website</span>
+    <span class="oc-project-card__name">Northwind Bakery</span>
+    <span class="oc-project-card__meta">Food &amp; retail &middot; Antwerp</span>
+    <span class="oc-project-card__more">View project</span>
+  </span>
+</a>

package/snippets/prose.html

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

package/snippets/radio.html

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

package/snippets/recovery-codes.html

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

package/snippets/resizable.html

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

package/snippets/scroll-area.html

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

package/snippets/search.html

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

package/snippets/segmented.html

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

package/snippets/select.html

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

package/snippets/separator.html

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

package/snippets/severity-card.html

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

package/snippets/sheet.html

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

package/snippets/sidebar-docs.html

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

package/snippets/sidebar.html

@@ -0,0 +1,55 @@
+<!-- OmniaUI component: sidebar - Vertical navigation: header, groups, menu items, badges, nested menu, footer, icon-only mode. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-sidebar: Root (aside/nav). Modifiers: --collapsed (icon only), --right, --floating. Width via --oc-sidebar-width / --oc-sidebar-width-icon.
+       .oc-sidebar-header / -footer: Fixed top / bottom area (logo, workspace switcher / user)
+       .oc-sidebar-content: Scrolling middle area
+       .oc-sidebar-group: Group of items; optional .oc-sidebar-group-label heading
+       .oc-sidebar-separator: Divider line
+       .oc-sidebar-menu: ul of items
+       .oc-sidebar-menu-button: Link or button of an item. State: aria-current="page" or .is-active; aria-disabled="true". Modifier: --lg.
+       .oc-sidebar-menu-icon: 16px icon (inline SVG)
+       .oc-sidebar-menu-label: Label (hidden when collapsed)
+       .oc-sidebar-menu-badge: Count pill on the right
+       .oc-sidebar-menu-sub: Nested ul with a guide line
+       details.oc-sidebar-collapsible: Expandable item: <summary class="oc-sidebar-menu-button"> + .oc-sidebar-menu-sub
+     Slots: header, group label, menu items (default), nested items (.oc-sidebar-menu-sub), footer
+-->
+<aside class="oc-sidebar " aria-label="Main navigation">
+  <div class="oc-sidebar-header">
+    <a class="oc-sidebar-menu-button oc-sidebar-menu-button--lg" href="#">
+      <svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>
+      <span class="oc-sidebar-menu-label"><strong>OmniaDesk</strong></span>
+    </a>
+  </div>
+  <div class="oc-sidebar-content">
+    <div class="oc-sidebar-group">
+      <div class="oc-sidebar-group-label">Platform</div>
+      <ul class="oc-sidebar-menu">
+        <li><a class="oc-sidebar-menu-button" href="#" aria-current="page"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v10a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="oc-sidebar-menu-label">Dashboard</span></a></li>
+        <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" 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 class="oc-sidebar-menu-label">Contacts</span><span class="oc-sidebar-menu-badge">12</span></a></li>
+        <li>
+          <details class="oc-sidebar-collapsible" open>
+            <summary class="oc-sidebar-menu-button"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 2h8l5 5v15H6z"/><path d="M14 2v5h5"/></svg><span class="oc-sidebar-menu-label">Invoices</span></summary>
+            <ul class="oc-sidebar-menu-sub">
+              <li><a class="oc-sidebar-menu-button" href="#">Sales</a></li>
+              <li><a class="oc-sidebar-menu-button" href="#">Purchases</a></li>
+            </ul>
+          </details>
+        </li>
+        <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg><span class="oc-sidebar-menu-label">Reports</span></a></li>
+      </ul>
+    </div>
+    <div class="oc-sidebar-separator"></div>
+    <div class="oc-sidebar-group">
+      <ul class="oc-sidebar-menu">
+        <li><a class="oc-sidebar-menu-button" href="#"><svg class="oc-sidebar-menu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/></svg><span class="oc-sidebar-menu-label">Settings</span></a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="oc-sidebar-footer">
+    <div class="oc-user">
+      <span class="oc-avatar oc-avatar--sm">SC</span>
+      <span class="oc-user-text"><span class="oc-user-name">Serge Cools</span><span class="oc-user-email">serge@example.com</span></span>
+    </div>
+  </div>
+</aside>

package/snippets/site-footer.html

@@ -0,0 +1,6 @@
+<!-- OmniaUI component: site-footer - Slim footer bar. Needs @birdycom/omniaui CSS.
+     Class API: .oc-footerbar (footer; --fixed pins it to the bottom of the viewport). Links inside use the primary color. Tokens: --ocm-footer-height, --ocm-footer-bg
+-->
+<footer class="oc-footerbar">
+  OmniaCSS v1 &mdash; modern CSS, utilities, components and blocks &middot; <a href="#">Docs</a> &middot; <a href="#">GitHub</a>
+</footer>