@birdycom/omniaui 0.0.0-stage → 0.11.0

package/snippets/date-picker.html

@@ -0,0 +1,32 @@
+<!-- OmniaUI component: date-picker - Date picker: trigger button with a calendar popover, or a native date input. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       button.oc-btn.oc-btn--outline.oc-date-picker-trigger[popovertarget]: shows the value ([data-empty] = placeholder)
+       div.oc-popover.oc-popover--calendar[popover] > .oc-calendar
+       input.oc-input[type=date]: native alternative (color-scheme aware)
+-->
+<div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:center">
+  <button class="oc-btn oc-btn--outline oc-date-picker-trigger" type="button" popovertarget="oc-dp-pop" aria-haspopup="dialog">
+    <span>16 October 2026</span> <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"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>
+  </button>
+  <div class="oc-popover oc-popover--calendar" id="oc-dp-pop" popover>
+    <div class="oc-calendar" role="group" aria-label="October 2026">
+      <div class="oc-calendar-header">
+        <button class="oc-calendar-nav" type="button" aria-label="Previous month"><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="m15 6-6 6 6 6"/></svg></button>
+        <h3 class="oc-calendar-title" aria-live="polite">October 2026</h3>
+        <button class="oc-calendar-nav" type="button" aria-label="Next month"><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="m9 6 6 6-6 6"/></svg></button>
+      </div>
+      <table class="oc-calendar-grid" role="grid" aria-label="October 2026">
+        <thead><tr><th class="oc-calendar-weekday" scope="col" abbr="Monday">Mo</th><th class="oc-calendar-weekday" scope="col" abbr="Tuesday">Tu</th><th class="oc-calendar-weekday" scope="col" abbr="Wednesday">We</th><th class="oc-calendar-weekday" scope="col" abbr="Thursday">Th</th><th class="oc-calendar-weekday" scope="col" abbr="Friday">Fr</th><th class="oc-calendar-weekday" scope="col" abbr="Saturday">Sa</th><th class="oc-calendar-weekday" scope="col" abbr="Sunday">Su</th></tr></thead>
+        <tbody>
+          <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-28" tabindex="-1">28</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-29" tabindex="-1">29</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-09-30" tabindex="-1">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-01">1</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-02">2</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-03">3</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-04">4</button></td></tr>
+          <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-05">5</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-06">6</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-07">7</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-08">8</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-09">9</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-10">10</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-11">11</button></td></tr>
+          <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-12">12</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-13">13</button></td><td><button class="oc-calendar-day oc-calendar-day--today" type="button" data-date="2026-10-14" aria-current="date">14</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-15">15</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-16" aria-selected="true">16</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-17">17</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-18">18</button></td></tr>
+          <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-19">19</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-20">20</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-21">21</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-22">22</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-23">23</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-24">24</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-25">25</button></td></tr>
+          <tr><td><button class="oc-calendar-day" type="button" data-date="2026-10-26">26</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-27">27</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-28">28</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-29">29</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-30">30</button></td><td><button class="oc-calendar-day" type="button" data-date="2026-10-31">31</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-01" tabindex="-1">1</button></td></tr>
+          <tr><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-02" tabindex="-1">2</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-03" tabindex="-1">3</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-04" tabindex="-1">4</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-05" tabindex="-1">5</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-06" tabindex="-1">6</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-07" tabindex="-1">7</button></td><td><button class="oc-calendar-day oc-calendar-day--outside" type="button" data-date="2026-11-08" tabindex="-1">8</button></td></tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <input class="oc-input" type="date" value="2026-10-16" aria-label="Date (native)">
+</div>

package/snippets/decimal-input.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: decimal-input - Text field for locale decimals like 1.234,56, with an optional unit. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/decimal-input.html | Map: plain field -> field with unit (wrapper + unit)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-decimal-input: Add to .oc-input. Right-aligned tabular digits. Modifier: --start (left-aligned).
+       .oc-decimal-field: Optional frame around the input and a unit
+       .oc-decimal-field-unit: Unit text after the value (m², kg, h)
+     States: :user-invalid when the pattern does not match (red), aria-invalid="true", disabled
+     Pattern below accepts 1234,5 / 1.234,56 (comma decimals). For dot decimals use [0-9,]*(\.[0-9]+)?
+-->
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-decimal-demo">Amount</label>
+  <input class="oc-input oc-decimal-input" id="oc-decimal-demo" name="amount" type="text" inputmode="decimal" value="1.234,56" pattern="[0-9.]*(,[0-9]{1,2})?">
+</div>
+<div class="oc-field">
+  <label class="oc-field-label" for="oc-decimal-unit-demo">Surface</label>
+  <div class="oc-decimal-field">
+    <input class="oc-input oc-decimal-input" id="oc-decimal-unit-demo" name="surface" type="text" inputmode="decimal" value="42,5" pattern="[0-9.]*(,[0-9]{1,2})?">
+    <span class="oc-decimal-field-unit">m&sup2;</span>
+  </div>
+</div>

package/snippets/definition-list.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: definition-list - Label / value rows in a panel (dl). Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-dl-panel: Panel wrapper (role="region")
+       .oc-dl-title / -description: Panel heading and note
+       .oc-dl: The dl
+       .oc-dl-row: div grouping one term and detail
+       .oc-dl-term / .oc-dl-detail: dt / dd
+       .oc-dl-footer: Optional footer (actions)
+     Slots: title, description, rows (term + detail), footer
+-->
+<div class="oc-dl-panel" role="region" aria-label="Company data">
+  <h3 class="oc-dl-title">Company data found</h3>
+  <p class="oc-dl-description">Retrieved from the VAT register.</p>
+  <dl class="oc-dl">
+    <div class="oc-dl-row"><dt class="oc-dl-term">Name</dt><dd class="oc-dl-detail">Birdy Systems BV</dd></div>
+    <div class="oc-dl-row"><dt class="oc-dl-term">Enterprise number</dt><dd class="oc-dl-detail">BE 0123.456.789</dd></div>
+    <div class="oc-dl-row"><dt class="oc-dl-term">Address</dt><dd class="oc-dl-detail">Main Street 1, 2000 Antwerp</dd></div>
+  </dl>
+  <div class="oc-dl-footer"><button class="oc-btn oc-btn--sm" type="button">Use these details</button></div>
+</div>

package/snippets/demo-panel.html

@@ -0,0 +1,18 @@
+<!-- OmniaUI component: demo-panel - Live preview + code, stacked or in tabs. Needs @birdycom/omniaui CSS.
+     Class API: .oc-demo (--tabs = preview/code tabs) · .oc-preview__title (small heading) · .oc-demo__preview (--tall, --center) ·
+       .oc-demo__tablist > label.oc-demo__tab > input[type=radio] (first = preview, second = code) · .oc-demo__code (code panel in the tabs variant)
+-->
+<div class="oc-demo oc-demo--tabs">
+  <div class="oc-demo__tablist" role="radiogroup" aria-label="View">
+    <label class="oc-demo__tab"><input type="radio" name="oc-demo-view" checked> Preview</label>
+    <label class="oc-demo__tab"><input type="radio" name="oc-demo-view"> Code</label>
+  </div>
+  <div class="oc-demo__preview">
+    <button class="oc-btn">Save</button>
+    <button class="oc-btn oc-btn--outline">Cancel</button>
+  </div>
+  <div class="oc-demo__code">
+    <pre class="oc-code-window__body"><code>&lt;button class="oc-btn"&gt;Save&lt;/button&gt;
+&lt;button class="oc-btn oc-btn--outline"&gt;Cancel&lt;/button&gt;</code></pre>
+  </div>
+</div>

package/snippets/doc-viewer.html

@@ -0,0 +1,58 @@
+<!-- OmniaUI component: doc-viewer — PDF, video or image in a card with a label and a full-screen view on a native <dialog>. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/doc-viewer.html | Map: grid -> card (bar: label + expand button, frame) -> full-screen dialog
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-doc-viewer-grid: Optional grid of viewers (auto-fill, min 15rem)
+       figure.oc-doc-viewer: One card. Modifiers: --video (16/9, dark), --image (natural height). Default frame is A4 (PDF).
+       .oc-doc-viewer__bar > .oc-doc-viewer__label, .oc-doc-viewer__meta, button.oc-doc-viewer__expand (command="show-modal" commandfor="<dialog id>")
+       .oc-doc-viewer__frame > iframe | video | img | object: The inline preview
+       button.oc-doc-viewer__open: Optional, inside the frame: the whole preview opens the dialog ("Click for full screen")
+       dialog.oc-doc-viewer-dialog (--video): Full-screen view > .oc-doc-viewer-dialog__bar (__title, __actions, __close) + .oc-doc-viewer-dialog__body
+     No JavaScript: the buttons open the dialog with invoker commands; Esc, the close button or a click on the backdrop close it.
+     PDF: <iframe src="file.pdf#toolbar=0&view=FitH" title="…" loading="lazy">. Video: <video src="…" controls preload="metadata">.
+-->
+<div class="oc-doc-viewer-grid">
+  <figure class="oc-doc-viewer">
+    <figcaption class="oc-doc-viewer__bar">
+      <span class="oc-doc-viewer__label">Brochure 2026</span>
+      <span class="oc-doc-viewer__meta">PDF · 2.4 MB</span>
+      <button type="button" class="oc-doc-viewer__expand" command="show-modal" commandfor="oc-doc-viewer-demo-pdf" aria-label="Open Brochure 2026 full screen">&#10530;</button>
+    </figcaption>
+    <div class="oc-doc-viewer__frame">
+      <div class="oc-media-art oc-media-art--2" role="img" aria-label="First page of Brochure 2026"></div>
+    </div>
+  </figure>
+
+  <figure class="oc-doc-viewer oc-doc-viewer--video">
+    <figcaption class="oc-doc-viewer__bar">
+      <span class="oc-doc-viewer__label">Site visit</span>
+      <span class="oc-doc-viewer__meta">1:42</span>
+    </figcaption>
+    <div class="oc-doc-viewer__frame">
+      <div class="oc-media-art oc-media-art--5" role="img" aria-label="Video still: site visit"></div>
+      <button type="button" class="oc-doc-viewer__open" command="show-modal" commandfor="oc-doc-viewer-demo-video">Click for full screen</button>
+    </div>
+  </figure>
+</div>
+
+<dialog class="oc-doc-viewer-dialog" id="oc-doc-viewer-demo-pdf" closedby="any" aria-labelledby="oc-doc-viewer-demo-pdf-title">
+  <div class="oc-doc-viewer-dialog__bar">
+    <h2 class="oc-doc-viewer-dialog__title" id="oc-doc-viewer-demo-pdf-title">Brochure 2026</h2>
+    <div class="oc-doc-viewer-dialog__actions">
+      <a class="oc-btn oc-btn--outline oc-btn--sm" href="#brochure.pdf" download>Download</a>
+      <button type="button" class="oc-doc-viewer-dialog__close" command="close" commandfor="oc-doc-viewer-demo-pdf" aria-label="Close">&#10005;</button>
+    </div>
+  </div>
+  <div class="oc-doc-viewer-dialog__body">
+    <div class="oc-media-art oc-media-art--2" role="img" aria-label="Brochure 2026"></div>
+  </div>
+</dialog>
+
+<dialog class="oc-doc-viewer-dialog oc-doc-viewer-dialog--video" id="oc-doc-viewer-demo-video" closedby="any" aria-labelledby="oc-doc-viewer-demo-video-title">
+  <div class="oc-doc-viewer-dialog__bar">
+    <h2 class="oc-doc-viewer-dialog__title" id="oc-doc-viewer-demo-video-title">Site visit</h2>
+    <button type="button" class="oc-doc-viewer-dialog__close" command="close" commandfor="oc-doc-viewer-demo-video" aria-label="Close">&#10005;</button>
+  </div>
+  <div class="oc-doc-viewer-dialog__body">
+    <div class="oc-media-art oc-media-art--5" role="img" aria-label="Site visit video"></div>
+  </div>
+</dialog>

package/snippets/drawer.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: drawer - Drawer: bottom sheet on dialog with drag handle look, no JavaScript. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       dialog.oc-drawer: the dialog (closedby="any"). Modifier: --center (centered from 40rem up)
+       .oc-drawer-content: the panel
+       .oc-drawer-handle: grabber bar (decorative)
+       .oc-drawer-header / -title / -description: heading
+       .oc-drawer-body: scrolling content
+       .oc-drawer-footer: stacked actions
+-->
+<button class="oc-btn oc-btn--outline" type="button" command="show-modal" commandfor="oc-drawer-demo">Open drawer</button>
+
+<dialog class="oc-drawer" id="oc-drawer-demo" closedby="any" aria-labelledby="oc-drawer-demo-title">
+  <div class="oc-drawer-content">
+    <div class="oc-drawer-handle" aria-hidden="true"></div>
+    <div class="oc-drawer-header">
+      <h2 class="oc-drawer-title" id="oc-drawer-demo-title">Move goal</h2>
+      <p class="oc-drawer-description">Set your daily activity goal.</p>
+    </div>
+    <div class="oc-drawer-body">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-drawer-goal">Calories per day</label>
+        <input class="oc-slider" id="oc-drawer-goal" type="range" min="100" max="600" value="350" style="--oc-slider-progress: 50%" oninput="this.style.setProperty('--oc-slider-progress', (this.value - this.min) / (this.max - this.min) * 100 + '%')">
+      </div>
+    </div>
+    <div class="oc-drawer-footer">
+      <button class="oc-btn" type="button" command="close" commandfor="oc-drawer-demo">Submit</button>
+      <button class="oc-btn oc-btn--outline" type="button" command="close" commandfor="oc-drawer-demo">Cancel</button>
+    </div>
+  </div>
+</dialog>

package/snippets/dropdown-menu.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI component: dropdown-menu - Dropdown extras: sub-menus, checkbox and radio items, shortcuts, destructive/disabled items. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-dropdown-sub > button.oc-dropdown-item + .oc-dropdown-submenu: nested menu (opens on hover and focus-within, chevron added)
+       .oc-dropdown-item[role="menuitemcheckbox"|"menuitemradio"][aria-checked]: check mark / dot indicator
+       .oc-dropdown-shortcut: right aligned key hint
+       .oc-dropdown-item--destructive | --inset | [aria-disabled=true]
+-->
+<button class="oc-btn oc-btn--outline" type="button" popovertarget="oc-dd-extras">Open menu</button>
+<div class="oc-dropdown-menu" id="oc-dd-extras" popover role="menu">
+  <div class="oc-dropdown-label">Appearance</div>
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="true">Status bar <span class="oc-dropdown-shortcut">Ctrl B</span></button>
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="false">Activity bar</button>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <div class="oc-dropdown-label">Panel position</div>
+  <button class="oc-dropdown-item" type="button" role="menuitemradio" aria-checked="false">Top</button>
+  <button class="oc-dropdown-item" type="button" role="menuitemradio" aria-checked="true">Bottom</button>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <div class="oc-dropdown-sub">
+    <button class="oc-dropdown-item" type="button" role="menuitem" aria-haspopup="menu">More tools</button>
+    <div class="oc-dropdown-submenu" role="menu">
+      <button class="oc-dropdown-item" type="button" role="menuitem">Save page as&hellip;</button>
+      <button class="oc-dropdown-item" type="button" role="menuitem">Developer tools</button>
+    </div>
+  </div>
+  <button class="oc-dropdown-item" type="button" role="menuitem" aria-disabled="true">Disabled item</button>
+  <button class="oc-dropdown-item oc-dropdown-item--destructive" type="button" role="menuitem">Delete</button>
+</div>

package/snippets/dropdown.html

@@ -0,0 +1,9 @@
+<!-- OmniaUI component: dropdown — Dropdown menu on popover + anchor positioning — no JavaScript. Needs @birdycom/omniaui CSS. -->
+<button class="oc-btn oc-btn--outline" popovertarget="oc-menu-demo">Options</button>
+<div class="oc-dropdown-menu" id="oc-menu-demo" popover>
+  <div class="oc-dropdown-label">My account</div>
+  <a class="oc-dropdown-item" href="#profile">Profile</a>
+  <a class="oc-dropdown-item" href="#settings">Settings</a>
+  <div class="oc-dropdown-separator"></div>
+  <a class="oc-dropdown-item" href="#logout">Log out</a>
+</div>

package/snippets/dropzone.html

@@ -0,0 +1,13 @@
+<!-- OmniaUI component: dropzone - File upload target - a label around a real file input. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-dropzone: Label wrapper. State: .is-dragover; disabled via the input.
+       input[type=file]: The real input, stretched over the zone
+       .oc-dropzone-icon: Optional icon
+       .oc-dropzone-hint: Small hint text (accepted types, size)
+-->
+<label class="oc-dropzone">
+  <input type="file" accept=".pdf,.xml" multiple>
+  <span class="oc-dropzone-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 16V4M7 9l5-5 5 5M4 20h16"/></svg></span>
+  <span><strong>Drop invoices here</strong> or click to choose</span>
+  <span class="oc-dropzone-hint">PDF or UBL XML, up to 10 MB</span>
+</label>

package/snippets/emoji-picker.html

@@ -0,0 +1,51 @@
+<!-- OmniaUI component: emoji-picker — Compact popover grid of emoji buttons, anchored to its trigger. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/emoji-picker.html | Map: target field -> trigger -> popover (groups: label + grid of buttons) -> optional script
+     Class API: button.oc-emoji-picker__trigger (popovertarget) · div.oc-emoji-picker[popover] (data-oc-emoji-target = selector of a field) >
+       .oc-emoji-picker__label + .oc-emoji-picker__grid > button.oc-emoji-picker__item.
+     Modifiers: .oc-emoji-picker--inline (always visible, no popover). Open / close / Esc / light dismiss: native popover.
+     The optional script inserts the clicked emoji at the cursor of the target field and closes the panel.
+-->
+<div style="display:flex;gap:0.5rem;align-items:center">
+  <input class="oc-input" id="oc-emoji-field" placeholder="Say something nice" style="inline-size:16rem">
+  <button type="button" class="oc-emoji-picker__trigger" popovertarget="oc-emoji-demo" aria-label="Insert emoji">&#128578;</button>
+</div>
+<div class="oc-emoji-picker" id="oc-emoji-demo" popover data-oc-emoji-target="#oc-emoji-field" aria-label="Emoji">
+  <p class="oc-emoji-picker__label">Smileys</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#128512;</button><button type="button" class="oc-emoji-picker__item">&#128515;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128516;</button><button type="button" class="oc-emoji-picker__item">&#128513;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128514;</button><button type="button" class="oc-emoji-picker__item">&#128578;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128521;</button><button type="button" class="oc-emoji-picker__item">&#128525;</button>
+    <button type="button" class="oc-emoji-picker__item">&#129300;</button><button type="button" class="oc-emoji-picker__item">&#128526;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128546;</button><button type="button" class="oc-emoji-picker__item">&#128564;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128559;</button><button type="button" class="oc-emoji-picker__item">&#129395;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128548;</button><button type="button" class="oc-emoji-picker__item">&#129303;</button>
+  </div>
+  <p class="oc-emoji-picker__label">Gestures</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#128077;</button><button type="button" class="oc-emoji-picker__item">&#128078;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128079;</button><button type="button" class="oc-emoji-picker__item">&#128588;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128075;</button><button type="button" class="oc-emoji-picker__item">&#128591;</button>
+    <button type="button" class="oc-emoji-picker__item">&#9996;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#128170;</button>
+  </div>
+  <p class="oc-emoji-picker__label">Objects</p>
+  <div class="oc-emoji-picker__grid">
+    <button type="button" class="oc-emoji-picker__item">&#10084;&#65039;</button><button type="button" class="oc-emoji-picker__item">&#11088;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128293;</button><button type="button" class="oc-emoji-picker__item">&#127881;</button>
+    <button type="button" class="oc-emoji-picker__item">&#9989;</button><button type="button" class="oc-emoji-picker__item">&#128640;</button>
+    <button type="button" class="oc-emoji-picker__item">&#128161;</button><button type="button" class="oc-emoji-picker__item">&#9749;</button>
+  </div>
+</div>
+<script>
+// Optional: put the clicked emoji at the cursor of the field in data-oc-emoji-target, then close the picker.
+document.addEventListener("click", (e) => {
+  const item = e.target.closest(".oc-emoji-picker__item");
+  const picker = item?.closest(".oc-emoji-picker");
+  const field = picker?.dataset.ocEmojiTarget && document.querySelector(picker.dataset.ocEmojiTarget);
+  if (!field) return;
+  field.setRangeText(item.textContent, field.selectionStart ?? field.value.length, field.selectionEnd ?? field.value.length, "end");
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+  picker.hidePopover?.();
+  field.focus();
+});
+</script>

package/snippets/empty-state.html

@@ -0,0 +1,17 @@
+<!-- OmniaUI component: empty-state - Icon, title, text and actions for lists without data. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-empty: Centered column wrapper
+       .oc-empty-icon: Round icon holder (glyph, emoji or inline SVG)
+       .oc-empty-title: Heading
+       .oc-empty-text: Explanation
+       .oc-empty-actions: Row for buttons (optional)
+-->
+<div class="oc-empty">
+  <span class="oc-empty-icon" aria-hidden="true">+</span>
+  <h3 class="oc-empty-title">No contacts yet</h3>
+  <p class="oc-empty-text">Add your first contact to start tracking conversations and invoices.</p>
+  <div class="oc-empty-actions">
+    <button class="oc-btn" type="button">New contact</button>
+    <button class="oc-btn oc-btn--outline" type="button">Import</button>
+  </div>
+</div>

package/snippets/entity-card.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: entity-card — Framed media cell (image, glyph, icon) next to a detail column with facts. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/entity-card.html | Map: card -> grid (frame | body: eyebrow, title, description, facts) -> footer
+     Class API: article.oc-entity-card > .oc-entity-card__grid > .oc-entity-card__frame (img / svg / .oc-entity-card__glyph;
+       --contain keeps a margin) + .oc-entity-card__body (.oc-entity-card__eyebrow, h3.oc-entity-card__title,
+       p.oc-entity-card__description, dl.oc-entity-card__facts) · .oc-entity-card__footer (tags, actions; optional).
+     Modifiers: .oc-entity-card--stacked (frame on top), --sm. Stacks by itself in containers under 22rem. No JavaScript.
+-->
+<article class="oc-entity-card" style="max-inline-size:34rem">
+  <div class="oc-entity-card__grid">
+    <div class="oc-entity-card__frame"><span class="oc-entity-card__glyph" aria-hidden="true">&#9765;</span></div>
+    <div class="oc-entity-card__body">
+      <p class="oc-entity-card__eyebrow">Symbol · Ancient Egypt</p>
+      <h3 class="oc-entity-card__title">Ankh</h3>
+      <p class="oc-entity-card__description">The sign of life. Often held by gods in temple reliefs.</p>
+      <dl class="oc-entity-card__facts">
+        <dt>Code</dt><dd>S34</dd>
+        <dt>Period</dt><dd>Early Dynastic onwards</dd>
+        <dt>Reading</dt><dd>ʿnḫ</dd>
+      </dl>
+    </div>
+  </div>
+  <div class="oc-entity-card__footer">
+    <span class="oc-badge oc-badge--secondary">Life</span>
+    <span class="oc-badge oc-badge--secondary">Amulet</span>
+  </div>
+</article>

package/snippets/expandable-table.html

@@ -0,0 +1,26 @@
+<!-- OmniaUI component: expandable-table - Table that shows the first rows, "Show more" reveals the rest (CSS only). Needs @birdycom/omniaui CSS.
+     Class API: .oc-expandable-table (wrapper) · .oc-expandable-table__row-dimmed (last visible row, faded) · .oc-expandable-table__row-more (hidden rows) ·
+       .oc-expandable-table__wrap (+ --full) holds the toggle · label.oc-expandable-table__trigger.oc-btn > input.oc-expandable-table__toggle + .__more / .__less
+     Generic toggle button: label.oc-btn.oc-btn--toggle > input[type=checkbox] + .oc-btn-toggle__off / .oc-btn-toggle__on ; reveal area: .oc-showmore > .oc-showmore__extra
+-->
+<div class="oc-expandable-table">
+  <table class="oc-table-ref">
+    <thead><tr><th>Class</th><th>Description</th></tr></thead>
+    <tbody>
+      <tr><td><code>.oc-btn</code></td><td>Primary button</td></tr>
+      <tr><td><code>.oc-btn--secondary</code></td><td>Quiet button</td></tr>
+      <tr class="oc-expandable-table__row-dimmed"><td><code>.oc-btn--outline</code></td><td>Outlined button</td></tr>
+      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--ghost</code></td><td>Frameless button</td></tr>
+      <tr class="oc-expandable-table__row-more"><td><code>.oc-btn--link</code></td><td>Looks like a link</td></tr>
+    </tbody>
+  </table>
+  <div class="oc-expandable-table__wrap oc-expandable-table__wrap--full">
+    <label class="oc-btn oc-btn--secondary oc-expandable-table__trigger"><input type="checkbox" class="oc-expandable-table__toggle"><span class="oc-expandable-table__more">Show more</span><span class="oc-expandable-table__less">Show less</span></label>
+  </div>
+</div>
+
+<div class="oc-showmore">
+  <p>Short text that is always visible.</p>
+  <p class="oc-showmore__extra">Extra text that appears after pressing the button.</p>
+  <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"><span class="oc-btn-toggle__off">Show more</span><span class="oc-btn-toggle__on">Show less</span></label>
+</div>

package/snippets/fact-list.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: fact-list - Key / value product facts in a card, a variant of the definition list. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/fact-list.html | Map: dl.oc-fact-list -> div rows (dt label + dd value)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-fact-list: The dl (card with a line between rows)
+       Modifiers: --plain (no card), --compact, --stacked (value below label), --accent (values in the accent)
+       Rows: <div><dt>Label</dt><dd>Value</dd></div>
+     Slots: rows (label + value)
+-->
+<dl class="oc-fact-list">
+  <div><dt>Platform</dt><dd>Web, desktop</dd></div>
+  <div><dt>Built with</dt><dd>PHP 8.4, MySQL</dd></div>
+  <div><dt>License</dt><dd>Subscription</dd></div>
+  <div><dt>Status</dt><dd>Live since 2021</dd></div>
+</dl>

package/snippets/filter-counts.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: filter-counts - View filter tiles with counts (active / deleted / all) - no JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/filter-counts.html | Map: group (fieldset) -> one tile per view (radio + value + label + hint)
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-filter-counts: Group of tiles (a <fieldset> or role="radiogroup"). Modifier: --compact (inline pills "Active 12").
+       .oc-filter-counts-item: Tile label around one radio. Tones: --success, --destructive, --muted (default primary).
+       .oc-filter-counts-value: The count (big number)
+       .oc-filter-counts-label: Name of the view
+       .oc-filter-counts-hint: Short description (hidden in --compact)
+     States: checked (accent border + background), :focus-visible (outline), disabled (faded)
+-->
+<fieldset class="oc-filter-counts" aria-label="Show transactions">
+  <label class="oc-filter-counts-item oc-filter-counts-item--success">
+    <input type="radio" name="view" value="active" checked>
+    <span class="oc-filter-counts-value">128</span>
+    <span class="oc-filter-counts-label">Active</span>
+    <span class="oc-filter-counts-hint">Visible in reports</span>
+  </label>
+  <label class="oc-filter-counts-item oc-filter-counts-item--destructive">
+    <input type="radio" name="view" value="deleted">
+    <span class="oc-filter-counts-value">6</span>
+    <span class="oc-filter-counts-label">Deleted</span>
+    <span class="oc-filter-counts-hint">Can be restored</span>
+  </label>
+  <label class="oc-filter-counts-item">
+    <input type="radio" name="view" value="all">
+    <span class="oc-filter-counts-value">134</span>
+    <span class="oc-filter-counts-label">All</span>
+    <span class="oc-filter-counts-hint">Everything together</span>
+  </label>
+</fieldset>

package/snippets/flip-card.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI component: flip-card — 3D flip card (front / back) on a checkbox toggle or on hover and focus. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/flip-card.html | Map: card -> hidden checkbox -> inner -> front face (+ flip label) -> back face (+ flip label)
+     Class API: .oc-flip-card > input.oc-flip-card__toggle[type=checkbox] (optional) + .oc-flip-card__inner >
+       .oc-flip-card__face--front / --back (.oc-flip-card__title, .oc-flip-card__text, label.oc-flip-card__flip for the checkbox).
+     Modifiers: .oc-flip-card--hover (flip on hover / focus; give the card tabindex="0"), .oc-flip-card--vertical.
+     States: checkbox :checked or .is-flipped. Reduced motion: no 3D turn, the faces cross-fade. No JavaScript.
+-->
+<div class="oc-flip-card" style="max-inline-size:18rem">
+  <input type="checkbox" class="oc-flip-card__toggle" id="oc-flip-demo">
+  <div class="oc-flip-card__inner">
+    <div class="oc-flip-card__face oc-flip-card__face--front">
+      <p class="oc-flip-card__text">Translate</p>
+      <h3 class="oc-flip-card__title">la mariposa</h3>
+      <label class="oc-flip-card__flip" for="oc-flip-demo">Show answer</label>
+    </div>
+    <div class="oc-flip-card__face oc-flip-card__face--back">
+      <p class="oc-flip-card__text">Spanish → English</p>
+      <h3 class="oc-flip-card__title">the butterfly</h3>
+      <label class="oc-flip-card__flip" for="oc-flip-demo">Back to question</label>
+    </div>
+  </div>
+</div>

package/snippets/form-field.html

@@ -0,0 +1,6 @@
+<!-- OmniaUI component: form-field — Form field with label, description and error. Needs @birdycom/omniaui CSS. -->
+<div class="oc-field">
+  <label class="oc-field-label" for="email">Email</label>
+  <input class="oc-input" id="email" type="email" placeholder="you@example.com" aria-describedby="email-help">
+  <p class="oc-field-description" id="email-help">We never share your email.</p>
+</div>

package/snippets/greeting.html

@@ -0,0 +1,22 @@
+<!-- OmniaUI component: greeting - Dashboard header with a time-of-day greeting, the date and actions. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/greeting.html | Map: header -> icon tile -> body (eyebrow, title with name, date) -> actions
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-greeting: Header row. Modifiers: --morning / --afternoon / --evening (tint, chosen by your app or wrapper), --lg.
+       .oc-greeting-icon: Tinted icon tile (sun, moon)
+       .oc-greeting-body / -eyebrow / -title / -name: Text column, small label, heading and the highlighted name
+       time.oc-greeting-date: Today's date (datetime attribute)
+       .oc-greeting-actions: Buttons at the end
+     Slots: icon, eyebrow, title, date, actions
+-->
+<header class="oc-greeting oc-greeting--morning">
+  <span class="oc-greeting-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="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
+  <div class="oc-greeting-body">
+    <p class="oc-greeting-eyebrow">Dashboard</p>
+    <h1 class="oc-greeting-title">Good morning, <span class="oc-greeting-name">Ada</span></h1>
+    <time class="oc-greeting-date" datetime="2026-10-15">Thursday 15 October 2026</time>
+  </div>
+  <div class="oc-greeting-actions">
+    <a class="oc-btn oc-btn--outline oc-btn--sm" href="#">Agenda</a>
+    <button class="oc-btn oc-btn--sm" type="button">New project</button>
+  </div>
+</header>

package/snippets/heading.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: heading - Page or section title with a muted description. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-heading: Wrapper (title + description). Modifier: --sm for a section heading.
+       .oc-heading-title: Title (use h1-h3 as fits the outline)
+       .oc-heading-description: Muted description (optional)
+-->
+<div class="oc-heading">
+  <h2 class="oc-heading-title">Profile</h2>
+  <p class="oc-heading-description">Update your name and e-mail address.</p>
+</div>
+<div class="oc-heading oc-heading--sm">
+  <h3 class="oc-heading-title">Password</h3>
+  <p class="oc-heading-description">Use a long, random password.</p>
+</div>

package/snippets/hover-card.html

@@ -0,0 +1,18 @@
+<!-- OmniaUI component: hover-card - Hover card: preview on hover/focus via interestfor + popover, CSS hover fallback. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-hover-card: inline wrapper (anchor scope)
+       .oc-hover-card-trigger: the link/button (add interestfor="id" for the popover engine)
+       .oc-hover-card-content: the card (id, popover, role="tooltip" or region). Sizes: --sm. Wrapper modifier: .oc-hover-card--top
+-->
+<span class="oc-hover-card">
+  <a class="oc-hover-card-trigger" href="#omniacss" interestfor="oc-hc-demo">@omniacss</a>
+  <div class="oc-hover-card-content" id="oc-hc-demo" popover>
+    <div class="oc-item oc-item--sm" style="padding:0">
+      <div class="oc-item-media oc-item-media--icon"><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"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg></div>
+      <div class="oc-item-content">
+        <p class="oc-item-title">OmniaCSS</p>
+        <p class="oc-item-description">CSS-first components and utilities. Light, dark and no build step.</p>
+      </div>
+    </div>
+  </div>
+</span>

package/snippets/image-zoom.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: image-zoom — Zoom and pan viewport with CSS-only zoom levels. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/image-zoom.html | Map: root -> toolbar (radio chips) -> viewport -> canvas (img)
+     Class API: .oc-image-zoom > .oc-image-zoom__toolbar (.oc-image-zoom__label, label.oc-image-zoom__level > input[type=radio][value]) ·
+       .oc-image-zoom__viewport (tabindex=0, scroll = pan) > .oc-image-zoom__canvas > img / svg / .oc-media-art.
+     Zoom levels: radio values 1, 1.5, 2, 3, 4 (picked up with :has()), or a fixed class .oc-image-zoom--150 / --200 / --300,
+       or style="--oc-zoom: 2.5". Ratio: 16 / 9 default, .oc-image-zoom--square / --photo or --oc-image-zoom-ratio.
+     Pan: scrollbars, mouse wheel (Shift = sideways), touch drag, or arrow keys on the focused viewport. No JavaScript.
+-->
+<div class="oc-image-zoom">
+  <div class="oc-image-zoom__toolbar" role="radiogroup" aria-label="Zoom level">
+    <span class="oc-image-zoom__label">Zoom</span>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1" checked>100%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="1.5">150%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="2">200%</label>
+    <label class="oc-image-zoom__level"><input type="radio" name="oc-zoom-demo" value="3">300%</label>
+  </div>
+  <div class="oc-image-zoom__viewport" tabindex="0" role="region" aria-label="Harbour map, scroll to pan">
+    <div class="oc-image-zoom__canvas">
+      <div class="oc-media-art oc-media-art--2">
+        <svg viewBox="0 0 160 90" role="img" aria-label="Harbour map" style="display:block;inline-size:100%;block-size:100%;color:var(--color-white-50)">
+          <path d="M0 15H160M0 30H160M0 45H160M0 60H160M0 75H160M20 0V90M40 0V90M60 0V90M80 0V90M100 0V90M120 0V90M140 0V90" fill="none" stroke="currentColor" stroke-opacity=".35" stroke-width=".3"/>
+          <path d="M10 70C40 50 60 80 90 55S140 30 150 20" fill="none" stroke="currentColor" stroke-width="1.2"/>
+          <circle cx="90" cy="55" r="3" fill="currentColor"/>
+          <text x="95" y="52" font-size="5" fill="currentColor">Harbour</text>
+          <text x="12" y="76" font-size="2" fill="currentColor">Small print: zoom in to read this line.</text>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>

package/snippets/input-group.html

@@ -0,0 +1,10 @@
+<!-- OmniaUI component: input-group - Input with prefix/suffix addon (currency, percent, units). Needs @birdycom/omniaui CSS.
+-->
+<div class="oc-input-group">
+  <span class="oc-input-addon">&euro;</span>
+  <input class="oc-input" type="text" inputmode="decimal" value="125.00" aria-label="Amount">
+</div>
+<div class="oc-input-group">
+  <input class="oc-input" type="text" inputmode="decimal" value="21" aria-label="VAT rate">
+  <span class="oc-input-addon">%</span>
+</div>

package/snippets/input.html

@@ -0,0 +1,5 @@
+<!-- OmniaUI component: input - Text input with states (default, error, disabled). Needs @birdycom/omniaui CSS.
+-->
+<input class="oc-input" type="text" placeholder="Name">
+<input class="oc-input oc-input--error" type="text" value="Invalid" aria-invalid="true">
+<input class="oc-input" type="text" value="Disabled" disabled>