@birdycom/omniaui 0.11.0 → 0.11.2

package/snippets/date-picker.html

@@ -1,32 +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>
+<!-- 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

@@ -1,20 +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>
+<!-- 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

@@ -1,20 +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>
+<!-- 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

@@ -1,18 +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>
+<!-- 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

@@ -1,58 +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>
+<!-- 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

@@ -1,30 +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>
+<!-- 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

@@ -1,27 +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>
+<!-- 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

@@ -1,9 +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>
+<!-- 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

@@ -1,13 +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>
+<!-- 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>