@birdycom/omniaui 0.11.0 → 0.11.1

package/snippets/toggle.html

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

package/snippets/tooltip.html

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

package/snippets/top-progress.html

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

package/snippets/tree.html

@@ -1,38 +1,38 @@
-<!-- OmniaUI component: tree - Nested tree list on details / summary with a sticky action column - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/tree.html | Map: tree box -> head row -> list -> folder (details) with child list -> leaf rows
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-tree: Scroll box (card frame). Modifiers: --flush (no frame), --quiet (actions show on hover / focus). Height: --oc-tree-height.
-       .oc-tree-head: Optional root row that sticks to the top
-       ul.oc-tree-list: List; a nested list indents one step (--oc-tree-indent)
-       details.oc-tree-node: Folder (open = expanded); summary.oc-tree-row is its row
-       .oc-tree-row: Row (summary for a folder, div for a leaf). States: aria-current="true" on the row or its label link / .is-selected, .is-muted
-       .oc-tree-icon / -label / -count: Icon, name (never wraps), item count
-       .oc-tree-actions: Action buttons, pinned to the end edge (position: sticky)
-     Slots: head, rows (icon, label, count, actions), nested lists
--->
-<div class="oc-tree" aria-label="Projects" style="--oc-tree-height:18rem">
-  <div class="oc-tree-row oc-tree-head"><span class="oc-tree-label">All projects</span><span class="oc-tree-actions"><button class="oc-btn oc-btn--ghost oc-btn--xs" type="button">New</button></span></div>
-  <ul class="oc-tree-list">
-    <li>
-      <details class="oc-tree-node" open>
-        <summary class="oc-tree-row">
-          <span class="oc-tree-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span>
-          <span class="oc-tree-label">Kitchen renovation - Main street 12</span><span class="oc-tree-count">3</span>
-          <span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Add to Kitchen renovation" title="Add">+</button></span>
-        </summary>
-        <ul class="oc-tree-list">
-          <li><div class="oc-tree-row"><span class="oc-tree-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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><a class="oc-tree-label" href="#" aria-current="true">Quote v2.pdf</a><span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Rename Quote v2.pdf" title="Rename">&#9998;</button></span></div></li>
-          <li><div class="oc-tree-row"><span class="oc-tree-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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><a class="oc-tree-label" href="#">Floor plan with very long file name that scrolls.dwg</a><span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Rename Floor plan" title="Rename">&#9998;</button></span></div></li>
-        </ul>
-      </details>
-    </li>
-    <li>
-      <details class="oc-tree-node">
-        <summary class="oc-tree-row"><span class="oc-tree-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span><span class="oc-tree-label">Bathroom</span><span class="oc-tree-count">1</span></summary>
-        <ul class="oc-tree-list">
-          <li><div class="oc-tree-row is-muted"><span class="oc-tree-label">Photos (archived)</span></div></li>
-        </ul>
-      </details>
-    </li>
-  </ul>
-</div>
+<!-- OmniaUI component: tree - Nested tree list on details / summary with a sticky action column - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/tree.html | Map: tree box -> head row -> list -> folder (details) with child list -> leaf rows
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-tree: Scroll box (card frame). Modifiers: --flush (no frame), --quiet (actions show on hover / focus). Height: --oc-tree-height.
+       .oc-tree-head: Optional root row that sticks to the top
+       ul.oc-tree-list: List; a nested list indents one step (--oc-tree-indent)
+       details.oc-tree-node: Folder (open = expanded); summary.oc-tree-row is its row
+       .oc-tree-row: Row (summary for a folder, div for a leaf). States: aria-current="true" on the row or its label link / .is-selected, .is-muted
+       .oc-tree-icon / -label / -count: Icon, name (never wraps), item count
+       .oc-tree-actions: Action buttons, pinned to the end edge (position: sticky)
+     Slots: head, rows (icon, label, count, actions), nested lists
+-->
+<div class="oc-tree" aria-label="Projects" style="--oc-tree-height:18rem">
+  <div class="oc-tree-row oc-tree-head"><span class="oc-tree-label">All projects</span><span class="oc-tree-actions"><button class="oc-btn oc-btn--ghost oc-btn--xs" type="button">New</button></span></div>
+  <ul class="oc-tree-list">
+    <li>
+      <details class="oc-tree-node" open>
+        <summary class="oc-tree-row">
+          <span class="oc-tree-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span>
+          <span class="oc-tree-label">Kitchen renovation - Main street 12</span><span class="oc-tree-count">3</span>
+          <span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Add to Kitchen renovation" title="Add">+</button></span>
+        </summary>
+        <ul class="oc-tree-list">
+          <li><div class="oc-tree-row"><span class="oc-tree-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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><a class="oc-tree-label" href="#" aria-current="true">Quote v2.pdf</a><span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Rename Quote v2.pdf" title="Rename">&#9998;</button></span></div></li>
+          <li><div class="oc-tree-row"><span class="oc-tree-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="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><a class="oc-tree-label" href="#">Floor plan with very long file name that scrolls.dwg</a><span class="oc-tree-actions"><button class="oc-table-actions-icon" type="button" aria-label="Rename Floor plan" title="Rename">&#9998;</button></span></div></li>
+        </ul>
+      </details>
+    </li>
+    <li>
+      <details class="oc-tree-node">
+        <summary class="oc-tree-row"><span class="oc-tree-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg></span><span class="oc-tree-label">Bathroom</span><span class="oc-tree-count">1</span></summary>
+        <ul class="oc-tree-list">
+          <li><div class="oc-tree-row is-muted"><span class="oc-tree-label">Photos (archived)</span></div></li>
+        </ul>
+      </details>
+    </li>
+  </ul>
+</div>

package/snippets/upgrade-banner.html

@@ -1,28 +1,28 @@
-<!-- OmniaUI component: upgrade-banner - Soft callout for a free plan with limits, a usage meter and an upgrade action. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/upgrade-banner.html | Map: callout -> icon -> body (title + plan, text, usage meter) -> actions -> dismiss
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-upgrade-banner: Callout (role="note" or aside). Modifiers: --premium (brand gradient frame), --compact (one line). State: hidden attribute. Tone: --oc-upgrade-color.
-       .oc-upgrade-banner-icon: Icon in the tone color
-       .oc-upgrade-banner-body / -title / -plan / -text: Text column, title row, plan pill, explanation (may contain links)
-       .oc-upgrade-banner-usage + meter.oc-upgrade-banner-meter: Label, native meter, "3 / 5"
-       .oc-upgrade-banner-actions: Upgrade button and secondary link
-       .oc-upgrade-banner-dismiss: Optional X in the corner (your app sets hidden)
-     Slots: icon, title, plan, text, usage, actions
--->
-<aside class="oc-upgrade-banner" aria-label="Plan limits">
-  <span class="oc-upgrade-banner-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="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/></svg></span>
-  <div class="oc-upgrade-banner-body">
-    <p class="oc-upgrade-banner-title">You are on the free plan <span class="oc-upgrade-banner-plan">Free</span></p>
-    <p class="oc-upgrade-banner-text">Free accounts keep up to 5 projects. Groups, exports and unlimited history come with <a href="#">Premium</a>.</p>
-    <div class="oc-upgrade-banner-usage">
-      <span>Projects</span>
-      <meter class="oc-upgrade-banner-meter" min="0" max="5" low="3" high="4" optimum="0" value="4" aria-label="Projects used">4 of 5</meter>
-      <span>4 / 5</span>
-    </div>
-  </div>
-  <div class="oc-upgrade-banner-actions">
-    <a class="oc-btn oc-btn--sm" href="#">Upgrade</a>
-    <a class="oc-btn oc-btn--ghost oc-btn--sm" href="#">Compare plans</a>
-  </div>
-  <button class="oc-upgrade-banner-dismiss" type="button" aria-label="Dismiss">&times;</button>
-</aside>
+<!-- OmniaUI component: upgrade-banner - Soft callout for a free plan with limits, a usage meter and an upgrade action. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/upgrade-banner.html | Map: callout -> icon -> body (title + plan, text, usage meter) -> actions -> dismiss
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-upgrade-banner: Callout (role="note" or aside). Modifiers: --premium (brand gradient frame), --compact (one line). State: hidden attribute. Tone: --oc-upgrade-color.
+       .oc-upgrade-banner-icon: Icon in the tone color
+       .oc-upgrade-banner-body / -title / -plan / -text: Text column, title row, plan pill, explanation (may contain links)
+       .oc-upgrade-banner-usage + meter.oc-upgrade-banner-meter: Label, native meter, "3 / 5"
+       .oc-upgrade-banner-actions: Upgrade button and secondary link
+       .oc-upgrade-banner-dismiss: Optional X in the corner (your app sets hidden)
+     Slots: icon, title, plan, text, usage, actions
+-->
+<aside class="oc-upgrade-banner" aria-label="Plan limits">
+  <span class="oc-upgrade-banner-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="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/></svg></span>
+  <div class="oc-upgrade-banner-body">
+    <p class="oc-upgrade-banner-title">You are on the free plan <span class="oc-upgrade-banner-plan">Free</span></p>
+    <p class="oc-upgrade-banner-text">Free accounts keep up to 5 projects. Groups, exports and unlimited history come with <a href="#">Premium</a>.</p>
+    <div class="oc-upgrade-banner-usage">
+      <span>Projects</span>
+      <meter class="oc-upgrade-banner-meter" min="0" max="5" low="3" high="4" optimum="0" value="4" aria-label="Projects used">4 of 5</meter>
+      <span>4 / 5</span>
+    </div>
+  </div>
+  <div class="oc-upgrade-banner-actions">
+    <a class="oc-btn oc-btn--sm" href="#">Upgrade</a>
+    <a class="oc-btn oc-btn--ghost oc-btn--sm" href="#">Compare plans</a>
+  </div>
+  <button class="oc-upgrade-banner-dismiss" type="button" aria-label="Dismiss">&times;</button>
+</aside>

package/snippets/user.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: user - Avatar with name and e-mail, truncating. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-user: Flex row wrapper
-       .oc-avatar: Avatar from the avatar component (initials or img)
-       .oc-user-text: Text column
-       .oc-user-name: Name (truncates)
-       .oc-user-email: Secondary line (truncates)
--->
-<div class="oc-user">
-  <span class="oc-avatar">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>
+<!-- OmniaUI component: user - Avatar with name and e-mail, truncating. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-user: Flex row wrapper
+       .oc-avatar: Avatar from the avatar component (initials or img)
+       .oc-user-text: Text column
+       .oc-user-name: Name (truncates)
+       .oc-user-email: Secondary line (truncates)
+-->
+<div class="oc-user">
+  <span class="oc-avatar">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>

package/snippets/version-banner.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: version-banner - Small "new version available - reload" chip; the reload is a plain link to the current page. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/version-banner.html | Map: chip -> dot -> long text -> short text -> reload action
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-version-banner: The chip (role="status"). Modifiers: --info, --success (tone; default warning), --floating (fixed bottom end). State: hidden attribute.
-       .oc-version-banner-dot: Pulsing dot in the tone color
-       .oc-version-banner-text / -short: Long text, and the short text shown instead below 40rem
-       .oc-version-banner-action: Reload link (href="") or button
-     Slots: text, short text, action
--->
-<div class="oc-version-banner" role="status">
-  <span class="oc-version-banner-dot" aria-hidden="true"></span>
-  <span class="oc-version-banner-text">New version (v0.6.0) available - reload the page</span>
-  <span class="oc-version-banner-short">New version</span>
-  <a class="oc-version-banner-action" href="">Reload</a>
-</div>
+<!-- OmniaUI component: version-banner - Small "new version available - reload" chip; the reload is a plain link to the current page. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/version-banner.html | Map: chip -> dot -> long text -> short text -> reload action
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-version-banner: The chip (role="status"). Modifiers: --info, --success (tone; default warning), --floating (fixed bottom end). State: hidden attribute.
+       .oc-version-banner-dot: Pulsing dot in the tone color
+       .oc-version-banner-text / -short: Long text, and the short text shown instead below 40rem
+       .oc-version-banner-action: Reload link (href="") or button
+     Slots: text, short text, action
+-->
+<div class="oc-version-banner" role="status">
+  <span class="oc-version-banner-dot" aria-hidden="true"></span>
+  <span class="oc-version-banner-text">New version (v0.6.0) available - reload the page</span>
+  <span class="oc-version-banner-short">New version</span>
+  <a class="oc-version-banner-action" href="">Reload</a>
+</div>