@birdycom/omniaui 0.12.5 → 0.13.0

package/snippets/shot-grid.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI component: shot-grid - A grid of screenshots with a caption that open in the lightbox, and a browser frame with a glow in the accent color and a product mark on it. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/shot-grid.html | Map: screenshots -> browser frame with a glow.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-shot-grid: Auto-fit grid; --oc-shot-min is the minimum column width (18rem).
+       .oc-shot: Figure: image (or picture) with object-fit: contain, --oc-shot-ratio (16 / 10), caption under it; a link or button around the image shows a zoom cursor.
+       .oc-browser-frame--glow: Browser frame with a shadow in --oc-accent-from; the screenshot zooms in a little on hover.
+       .oc-browser-frame__mark: A product mark or tile on the bottom end corner of the frame.
+-->
+<div class="oc-shot-grid" style="inline-size:100%">
+  <figure class="oc-shot">
+    <a href="/img/blocks/dashboard-01.jpg"><img src="/img/blocks/dashboard-01.jpg" alt="Dashboard" loading="lazy" width="640" height="400"></a>
+    <figcaption>Dashboard with the figures of the day</figcaption>
+  </figure>
+  <figure class="oc-shot">
+    <a href="/img/blocks/data-table.jpg"><img src="/img/blocks/data-table.jpg" alt="Customer list" loading="lazy" width="640" height="400"></a>
+    <figcaption>Customer list with filters</figcaption>
+  </figure>
+  <figure class="oc-shot">
+    <a href="/img/blocks/product-detail.jpg"><img src="/img/blocks/product-detail.jpg" alt="Product page" loading="lazy" width="640" height="400"></a>
+    <figcaption>Product page with stock and documents</figcaption>
+  </figure>
+</div>
+<div class="oc-browser-frame oc-browser-frame--glow oc-accent--green" style="inline-size:min(100%, 34rem)">
+  <div class="oc-browser-frame__bar"><i></i><i></i><i></i></div>
+  <img class="oc-browser-frame__body" src="/img/blocks/dashboard-01.jpg" alt="Dashboard of Product 1" width="640" height="400">
+  <span class="oc-browser-frame__mark oc-icon-tile oc-icon-tile--lg oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:chart-box-outline"></iconify-icon></span>
+</div>

package/snippets/sidebar.html

@@ -18,7 +18,7 @@
   <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>
+      <span class="oc-sidebar-menu-label"><strong>Company 1</strong></span>
     </a>
   </div>
   <div class="oc-sidebar-content">
@@ -48,8 +48,8 @@
   </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>
+      <span class="oc-avatar oc-avatar--sm">U1</span>
+      <span class="oc-user-text"><span class="oc-user-name">User 1</span><span class="oc-user-email">user1@company1.example</span></span>
     </div>
   </div>
 </aside>

package/snippets/spec-list.html

@@ -0,0 +1,34 @@
+<!-- OmniaUI component: spec-list - Technical specifications in named groups: label and value rows, two columns when there is room. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/spec-list.html | Map: specifications.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-spec-list: The list (a container): groups side by side from 40rem wide. --stack keeps one column.
+       .oc-spec-group / __title: A group and its title (small caps, an optional icon).
+       dl.oc-spec-group__rows > .oc-spec-row: The rows: a <div> with <dt> (label) and <dd> (value; a <small> inside is a quiet unit or note).
+-->
+<div class="oc-spec-list">
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Dimensions</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Height</dt><dd>52 cm</dd></div>
+      <div class="oc-spec-row"><dt>Shade diameter</dt><dd>28 cm</dd></div>
+      <div class="oc-spec-row"><dt>Base</dt><dd>18 × 18 cm</dd></div>
+      <div class="oc-spec-row"><dt>Weight</dt><dd>2.4 kg</dd></div>
+    </dl>
+  </section>
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Electrical</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Lamp holder</dt><dd>E27 <small>max. 40 W</small></dd></div>
+      <div class="oc-spec-row"><dt>Cable</dt><dd>1.8 m, with switch</dd></div>
+      <div class="oc-spec-row"><dt>Energy class</dt><dd>A+</dd></div>
+    </dl>
+  </section>
+  <section class="oc-spec-group">
+    <h3 class="oc-spec-group__title">Article</h3>
+    <dl class="oc-spec-group__rows">
+      <div class="oc-spec-row"><dt>Article number</dt><dd>PRD-0001</dd></div>
+      <div class="oc-spec-row"><dt>EAN</dt><dd>5400000000010</dd></div>
+      <div class="oc-spec-row"><dt>Warranty</dt><dd>24 months</dd></div>
+    </dl>
+  </section>
+</div>

package/snippets/stock.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: stock - Stock status with a colored dot: in stock, low, out of stock or on order. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/stock.html | Map: stock.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-stock: A dot and the text. Without data-level the dot is green (in stock).
+       data-level="low" / "out" / "order": Orange (only a few left), red (out of stock), blue (on order).
+       .oc-stock__count / __note: A bold number ("12") and a quiet extra ("delivered in 2–3 days").
+       .oc-stock--badge: A tinted pill for tables and product cards.
+-->
+<div class="flex flex-column gap-1">
+  <span class="oc-stock"><span><span class="oc-stock__count">24</span> in stock</span> <span class="oc-stock__note">· delivered in 1–2 days</span></span>
+  <span class="oc-stock" data-level="low">Only <span class="oc-stock__count">3</span> left</span>
+  <span class="oc-stock" data-level="out">Out of stock</span>
+  <span class="oc-stock" data-level="order">On order <span class="oc-stock__note">· expected 14 November</span></span>
+  <div class="flex flex-wrap gap-0.5">
+    <span class="oc-stock oc-stock--badge">In stock</span>
+    <span class="oc-stock oc-stock--badge" data-level="low">Low</span>
+    <span class="oc-stock oc-stock--badge" data-level="out">Out</span>
+    <span class="oc-stock oc-stock--badge" data-level="order">On order</span>
+  </div>
+</div>

package/snippets/table-actions.html

@@ -14,15 +14,15 @@
     </thead>
     <tbody>
       <tr>
-        <td>Ada Lovelace</td><td>ada@example.com</td>
+        <td>Contact 1</td><td>info@contact1.example</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>
+          <a class="oc-table-actions-icon oc-table-actions-icon--primary" href="#" aria-label="View Contact 1" 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 Contact 1" 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 Contact 1" 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>Contact 2</td><td>info@contact2.example</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>

package/snippets/table.html

@@ -15,12 +15,12 @@
     <tbody>
       <tr aria-selected="true">
         <td><input class="oc-checkbox" type="checkbox" checked aria-label="Select Ada"></td>
-        <td>Ada Lovelace</td><td>ada@example.com</td><td data-numeric>1,250.00</td>
+        <td>Contact 1</td><td>info@contact1.example</td><td data-numeric>1,250.00</td>
         <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
       </tr>
       <tr>
         <td><input class="oc-checkbox" type="checkbox" aria-label="Select Alan"></td>
-        <td>Alan Turing</td><td>alan@example.com</td><td data-numeric>0.00</td>
+        <td>Contact 2</td><td>info@contact2.example</td><td data-numeric>0.00</td>
         <td class="oc-table-actions"><a class="oc-table-row-action" href="#">Edit</a><button class="oc-table-row-action oc-table-row-action--destructive" type="button">Delete</button></td>
       </tr>
     </tbody>

package/snippets/titlebar.html

@@ -12,7 +12,7 @@
 <div class="oc-titlebar-window" style="block-size: 16rem">
   <header class="oc-titlebar">
     <div class="oc-titlebar__main">
-      <span class="oc-titlebar__title">TokenTally</span>
+      <span class="oc-titlebar__title">App 1</span>
       <span class="oc-titlebar__subtitle">Usage</span>
     </div>
     <div class="oc-titlebar__actions">

package/snippets/user.html

@@ -7,9 +7,9 @@
        .oc-user-email: Secondary line (truncates)
 -->
 <div class="oc-user">
-  <span class="oc-avatar">SC</span>
+  <span class="oc-avatar">U1</span>
   <span class="oc-user-text">
-    <span class="oc-user-name">Serge Cools</span>
-    <span class="oc-user-email">serge@example.com</span>
+    <span class="oc-user-name">User 1</span>
+    <span class="oc-user-email">user1@company1.example</span>
   </span>
 </div>

package/dist/parts/app-column-menu.css

@@ -1,85 +0,0 @@
-/* File: packages/ui/src/parts/app-column-menu.css | Map: menu panel -> title + list -> item states -> footer -> CSS-only column hiding (scope) */
-/* Column menu: a popover with one checkbox per table column (column visibility).
-   CSS-only hiding: wrap the menu and the table in .oc-column-menu-scope and give each checkbox
-   data-col="<column number>". An unchecked box hides that column (th and td) through :has(). */
-
-/* Panel look. Without the popover attribute it is a normal block (e.g. inside a sheet or sidebar). */
-.oc-column-menu {
-  inline-size: 14rem;
-  max-inline-size: calc(100vw - 1rem);
-  padding: 0.375rem;
-  font-size: 0.875rem;
-  color: var(--oc-popover-foreground);
-  background: var(--oc-popover);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
-}
-/* As a popover: in the top layer, tethered to its trigger like the dropdown. */
-.oc-column-menu[popover] {
-  position: fixed;
-  inset: auto;
-  margin: 4px 0 0;
-  position-area: block-end span-inline-start;
-  position-try-fallbacks: flip-block, flip-inline;
-  transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
-}
-.oc-column-menu[popover]:popover-open {
-  display: block;
-  @starting-style { opacity: 0; }
-}
-
-/* Small heading above the list ("Columns"). */
-.oc-column-menu-title {
-  margin: 0;
-  padding: 0.375rem 0.5rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--oc-muted-foreground);
-}
-
-/* The list is a <form>, so a native <button type="reset"> restores the default columns. */
-.oc-column-menu-list { display: grid; gap: 1px; margin: 0; max-block-size: 18rem; overflow-y: auto; }
-
-/* One row: label around a checkbox and the column name. */
-.oc-column-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  user-select: none;
-}
-.oc-column-menu-item:hover { background: var(--oc-accent); }
-.oc-column-menu-item:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-column-menu-item input { margin: 0; accent-color: var(--oc-primary); }
-/* Locked column (always visible): <input disabled checked>. */
-.oc-column-menu-item:has(input:disabled) { color: var(--oc-muted-foreground); cursor: default; }
-.oc-column-menu-item:has(input:disabled):hover { background: none; }
-
-/* Footer row with "Reset" (type="reset") or other small buttons. */
-.oc-column-menu-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  margin-block-start: 0.375rem;
-  padding-block-start: 0.375rem;
-  border-block-start: 1px solid var(--oc-border);
-}
-
-/* ---- CSS-only column hiding (columns 1 to 10) ---- */
-.oc-column-menu-scope:has([data-col="1"]:not(:checked)) .oc-table :is(th, td):nth-child(1),
-.oc-column-menu-scope:has([data-col="2"]:not(:checked)) .oc-table :is(th, td):nth-child(2),
-.oc-column-menu-scope:has([data-col="3"]:not(:checked)) .oc-table :is(th, td):nth-child(3),
-.oc-column-menu-scope:has([data-col="4"]:not(:checked)) .oc-table :is(th, td):nth-child(4),
-.oc-column-menu-scope:has([data-col="5"]:not(:checked)) .oc-table :is(th, td):nth-child(5),
-.oc-column-menu-scope:has([data-col="6"]:not(:checked)) .oc-table :is(th, td):nth-child(6),
-.oc-column-menu-scope:has([data-col="7"]:not(:checked)) .oc-table :is(th, td):nth-child(7),
-.oc-column-menu-scope:has([data-col="8"]:not(:checked)) .oc-table :is(th, td):nth-child(8),
-.oc-column-menu-scope:has([data-col="9"]:not(:checked)) .oc-table :is(th, td):nth-child(9),
-.oc-column-menu-scope:has([data-col="10"]:not(:checked)) .oc-table :is(th, td):nth-child(10) { display: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-column-menu[popover] { transition: none; }
-}

package/snippets/column-menu.html

@@ -1,38 +0,0 @@
-<!-- OmniaUI component: column-menu - Column visibility checklist in a popover; hides table columns with :has() - no JavaScript. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/column-menu.html | Map: scope -> toolbar with trigger -> popover (title, form with checkboxes, reset) -> table
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-column-menu-scope: Wrapper around menu + table. An unchecked [data-col="n"] hides column n (1-10) of the .oc-table inside.
-       .oc-column-menu[popover]: Popover panel, opened with button[popovertarget]
-       .oc-column-menu-title: Small heading
-       form.oc-column-menu-list: The checkbox list (a form, so button type="reset" restores the defaults)
-       .oc-column-menu-item: label + input[type=checkbox][data-col]. State: input disabled = locked column.
-       .oc-column-menu-footer: Row for Reset / Done buttons
-     Slots: title, one item per column, footer buttons
--->
-<div class="oc-column-menu-scope">
-  <div class="oc-table-toolbar">
-    <span class="oc-table-toolbar-spacer"></span>
-    <button class="oc-btn oc-btn--outline oc-btn--sm" type="button" popovertarget="oc-column-menu-demo">Columns</button>
-  </div>
-  <div class="oc-column-menu" id="oc-column-menu-demo" popover>
-    <p class="oc-column-menu-title">Visible columns</p>
-    <form class="oc-column-menu-list">
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="1" checked disabled> Name</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="2" checked> E-mail</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="3" checked> City</label>
-      <label class="oc-column-menu-item"><input type="checkbox" data-col="4"> Phone</label>
-      <div class="oc-column-menu-footer">
-        <button class="oc-btn oc-btn--ghost oc-btn--sm" type="reset">Reset</button>
-      </div>
-    </form>
-  </div>
-  <div class="oc-table-wrap">
-    <table class="oc-table">
-      <thead><tr><th>Name</th><th>E-mail</th><th>City</th><th>Phone</th></tr></thead>
-      <tbody>
-        <tr><td>Ada Lovelace</td><td>ada@example.com</td><td>London</td><td>+44 20 7946 0001</td></tr>
-        <tr><td>Alan Turing</td><td>alan@example.com</td><td>Manchester</td><td>+44 161 496 0002</td></tr>
-      </tbody>
-    </table>
-  </div>
-</div>