@birdycom/omniaui 0.11.0 → 0.11.1

package/package.json

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

package/snippets/accordion-accent.html

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

package/snippets/accordion.html

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

package/snippets/affix-input.html

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

package/snippets/alert-dialog.html

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

package/snippets/alert.html

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

package/snippets/alpha-tabs.html

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

package/snippets/aspect-ratio.html

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

package/snippets/attachment.html

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

package/snippets/avatar.html

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

package/snippets/back-link.html

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

package/snippets/badge.html

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