@birdycom/omniaui 0.11.0 → 0.11.2

package/snippets/sidebar.html

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

package/snippets/site-footer.html

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

package/snippets/site-header.html

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

package/snippets/skeleton.html

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

package/snippets/slider.html

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

package/snippets/sortable-row.html

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

package/snippets/spinner.html

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

package/snippets/stack-card.html

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

package/snippets/stack-list.html

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

package/snippets/stat-card.html

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

package/snippets/stepper.html

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

package/snippets/switch.html

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

package/snippets/table-actions.html

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