@birdycom/omniaui 0.0.0-stage → 0.11.1

package/snippets/tree.html

@@ -0,0 +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>

package/snippets/upgrade-banner.html

@@ -0,0 +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>

package/snippets/user.html

@@ -0,0 +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>

package/snippets/version-banner.html

@@ -0,0 +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>