@birdycom/omniaui 0.11.0 → 0.11.2

package/snippets/next-teaser.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: next-teaser - "Next product" teaser card with label, name, mark and an arrow tagline. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/next-teaser.html | Map: a.oc-next-teaser -> __label -> __name (mark + text) -> __tagline
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-next-teaser: The card (an <a>). Modifier: --prev ("Previous" link, arrow left before the tagline)
-       .oc-next-teaser__label: Small uppercase label
-       .oc-next-teaser__name: Name; may start with an .oc-product-mark
-       .oc-next-teaser__tagline: Short line with a moving arrow
-       .oc-accent--*: Accent preset
-     Slots: label, name, mark, tagline
--->
-<a class="oc-next-teaser oc-accent--violet" href="#next">
-  <span class="oc-next-teaser__label">Next product</span>
-  <span class="oc-next-teaser__name"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet" aria-hidden="true">&#9673;</span>Acme Design</span>
-  <span class="oc-next-teaser__tagline">The design system behind our apps</span>
-</a>
+<!-- OmniaUI component: next-teaser - "Next product" teaser card with label, name, mark and an arrow tagline. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/next-teaser.html | Map: a.oc-next-teaser -> __label -> __name (mark + text) -> __tagline
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-next-teaser: The card (an <a>). Modifier: --prev ("Previous" link, arrow left before the tagline)
+       .oc-next-teaser__label: Small uppercase label
+       .oc-next-teaser__name: Name; may start with an .oc-product-mark
+       .oc-next-teaser__tagline: Short line with a moving arrow
+       .oc-accent--*: Accent preset
+     Slots: label, name, mark, tagline
+-->
+<a class="oc-next-teaser oc-accent--violet" href="#next">
+  <span class="oc-next-teaser__label">Next product</span>
+  <span class="oc-next-teaser__name"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet" aria-hidden="true">&#9673;</span>Acme Design</span>
+  <span class="oc-next-teaser__tagline">The design system behind our apps</span>
+</a>

package/snippets/number-input.html

@@ -1,27 +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>
+<!-- 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

@@ -1,9 +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>
+<!-- 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

@@ -1,24 +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>
+<!-- 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

@@ -1,6 +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>
+<!-- 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

@@ -1,24 +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>
+<!-- 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

@@ -1,30 +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>
+<!-- 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

@@ -1,22 +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>
+<!-- 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

@@ -1,15 +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>
+<!-- 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

@@ -1,34 +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>
+<!-- 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

@@ -1,13 +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>
+<!-- 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

@@ -1,4 +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>
+<!-- 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

@@ -1,23 +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>
+<!-- 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>