@birdycom/omniaui 0.11.0 → 0.11.2

package/snippets/media-thumb.html

@@ -1,12 +1,12 @@
-<!-- OmniaUI component: media-thumb — 16:9 video thumbnail with duration badge and watch-progress bar. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/media-thumb.html | Map: thumb link -> picture -> badge -> duration -> progress
-     Class API: a.oc-media-thumb (or div) > img / video / .oc-media-art · .oc-media-thumb__badge (top left, --live = red) ·
-       .oc-media-thumb__duration (bottom right) · progress.oc-media-thumb__progress (value / max = watched part).
-     Modifiers: .oc-media-thumb--square / --portrait. States: .is-watched (dimmed picture). No JavaScript.
--->
-<a class="oc-media-thumb" href="#" style="inline-size:20rem" aria-label="Morning light in the dunes, 12 minutes 4 seconds">
-  <div class="oc-media-art oc-media-art--3"></div>
-  <span class="oc-media-thumb__badge">New</span>
-  <span class="oc-media-thumb__duration">12:04</span>
-  <progress class="oc-media-thumb__progress" value="40" max="100" aria-label="Watched 40%">40%</progress>
-</a>
+<!-- OmniaUI component: media-thumb — 16:9 video thumbnail with duration badge and watch-progress bar. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/media-thumb.html | Map: thumb link -> picture -> badge -> duration -> progress
+     Class API: a.oc-media-thumb (or div) > img / video / .oc-media-art · .oc-media-thumb__badge (top left, --live = red) ·
+       .oc-media-thumb__duration (bottom right) · progress.oc-media-thumb__progress (value / max = watched part).
+     Modifiers: .oc-media-thumb--square / --portrait. States: .is-watched (dimmed picture). No JavaScript.
+-->
+<a class="oc-media-thumb" href="#" style="inline-size:20rem" aria-label="Morning light in the dunes, 12 minutes 4 seconds">
+  <div class="oc-media-art oc-media-art--3"></div>
+  <span class="oc-media-thumb__badge">New</span>
+  <span class="oc-media-thumb__duration">12:04</span>
+  <progress class="oc-media-thumb__progress" value="40" max="100" aria-label="Watched 40%">40%</progress>
+</a>

package/snippets/menubar.html

@@ -1,30 +1,30 @@
-<!-- OmniaUI component: menubar - Menubar: horizontal menu bar built from popover dropdown menus. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-menubar: the bar (role="menubar")
-       .oc-menubar-trigger: button with popovertarget
-       .oc-dropdown-menu[popover]: each menu (+ .oc-dropdown-item, -label, -separator, -shortcut, -sub)
--->
-<div class="oc-menubar" role="menubar" aria-label="Application">
-  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-file" aria-haspopup="menu">File</button>
-  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-view" aria-haspopup="menu">View</button>
-</div>
-<div class="oc-dropdown-menu" id="oc-mb-file" popover role="menu">
-  <button class="oc-dropdown-item" type="button" role="menuitem">New tab <span class="oc-dropdown-shortcut">Ctrl T</span></button>
-  <button class="oc-dropdown-item" type="button" role="menuitem">New window <span class="oc-dropdown-shortcut">Ctrl N</span></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">Share</button>
-    <div class="oc-dropdown-submenu" role="menu">
-      <button class="oc-dropdown-item" type="button" role="menuitem">E-mail link</button>
-      <button class="oc-dropdown-item" type="button" role="menuitem">Messages</button>
-    </div>
-  </div>
-  <div class="oc-dropdown-separator" role="separator"></div>
-  <button class="oc-dropdown-item" type="button" role="menuitem">Print <span class="oc-dropdown-shortcut">Ctrl P</span></button>
-</div>
-<div class="oc-dropdown-menu" id="oc-mb-view" popover role="menu">
-  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="true">Always show bookmarks</button>
-  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="false">Always show full URLs</button>
-  <div class="oc-dropdown-separator" role="separator"></div>
-  <button class="oc-dropdown-item" type="button" role="menuitem">Reload <span class="oc-dropdown-shortcut">Ctrl R</span></button>
-</div>
+<!-- OmniaUI component: menubar - Menubar: horizontal menu bar built from popover dropdown menus. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-menubar: the bar (role="menubar")
+       .oc-menubar-trigger: button with popovertarget
+       .oc-dropdown-menu[popover]: each menu (+ .oc-dropdown-item, -label, -separator, -shortcut, -sub)
+-->
+<div class="oc-menubar" role="menubar" aria-label="Application">
+  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-file" aria-haspopup="menu">File</button>
+  <button class="oc-menubar-trigger" type="button" role="menuitem" popovertarget="oc-mb-view" aria-haspopup="menu">View</button>
+</div>
+<div class="oc-dropdown-menu" id="oc-mb-file" popover role="menu">
+  <button class="oc-dropdown-item" type="button" role="menuitem">New tab <span class="oc-dropdown-shortcut">Ctrl T</span></button>
+  <button class="oc-dropdown-item" type="button" role="menuitem">New window <span class="oc-dropdown-shortcut">Ctrl N</span></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">Share</button>
+    <div class="oc-dropdown-submenu" role="menu">
+      <button class="oc-dropdown-item" type="button" role="menuitem">E-mail link</button>
+      <button class="oc-dropdown-item" type="button" role="menuitem">Messages</button>
+    </div>
+  </div>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <button class="oc-dropdown-item" type="button" role="menuitem">Print <span class="oc-dropdown-shortcut">Ctrl P</span></button>
+</div>
+<div class="oc-dropdown-menu" id="oc-mb-view" popover role="menu">
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="true">Always show bookmarks</button>
+  <button class="oc-dropdown-item" type="button" role="menuitemcheckbox" aria-checked="false">Always show full URLs</button>
+  <div class="oc-dropdown-separator" role="separator"></div>
+  <button class="oc-dropdown-item" type="button" role="menuitem">Reload <span class="oc-dropdown-shortcut">Ctrl R</span></button>
+</div>

package/snippets/message-thread.html

@@ -1,123 +1,123 @@
-<!-- OmniaUI component: message-thread — Scrolling conversation: header with subject, people, status and actions menu, messages that start at the bottom, composer and a sending overlay. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/message-thread.html | Map: thread -> header (heading, people, badge, menu) -> scroll (message list) -> footer (attachments + chat-composer) -> busy overlay -> optional script
-     Class API (modifiers are extra classes / attributes on the same element):
-       section.oc-message-thread: Grid frame, height from --oc-message-thread-height (32rem). Modifier: --plain (no wallpaper).
-         State: aria-busy="true" shows the sending overlay
-       .oc-message-thread__header > .oc-message-thread__heading (__title, __meta), .oc-avatar-group.oc-message-thread__people,
-         .oc-message-thread__actions > .oc-badge, button.oc-message-thread__icon-btn (popovertarget) + .oc-dropdown-menu[popover]
-       .oc-message-thread__scroll (tabindex="0", role="log"): Scroll area; column-reverse, so it opens at the newest message.
-         Holds one .oc-message-list (message component)
-       .oc-message-thread__footer: Bottom bar with an optional .oc-attachment-list and the chat-composer, or a .oc-message-thread__note
-       .oc-message-thread__busy (role="status"): Overlay with .oc-spinner, strong and span
-     Optional script (end of this snippet): appends what you type as an outgoing message after a short "Sending" state and
-       sends with Ctrl/Cmd + Enter. In an app, post the form and render the new message on the server instead.
--->
-<section class="oc-message-thread" aria-labelledby="oc-thread-demo-title" style="inline-size:100%;max-inline-size:40rem">
-  <header class="oc-message-thread__header">
-    <div class="oc-message-thread__heading">
-      <h3 class="oc-message-thread__title" id="oc-thread-demo-title">Kitchen worktop: which finish?</h3>
-      <p class="oc-message-thread__meta"><strong>Villa Dewitte</strong> · Lisa Verbeke → Tom Peeters · 14 Oct 2026</p>
-    </div>
-    <div class="oc-avatar-group oc-message-thread__people" aria-label="2 participants"><span class="oc-avatar" title="Lisa Verbeke">LV</span><span class="oc-avatar" title="Tom Peeters">TP</span></div>
-    <div class="oc-message-thread__actions">
-      <span class="oc-badge oc-badge--destructive">Urgent</span>
-      <button type="button" class="oc-message-thread__icon-btn" popovertarget="oc-thread-demo-menu" aria-label="Conversation actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg></button>
-      <div class="oc-dropdown-menu" id="oc-thread-demo-menu" popover role="menu">
-        <button type="button" class="oc-dropdown-item" role="menuitem">Mark as unread</button>
-        <button type="button" class="oc-dropdown-item" role="menuitem">Move to archive</button>
-        <div class="oc-dropdown-separator" role="separator"></div>
-        <button type="button" class="oc-dropdown-item oc-dropdown-item--destructive" role="menuitem">Delete conversation</button>
-      </div>
-    </div>
-  </header>
-
-  <div class="oc-message-thread__scroll" tabindex="0" role="log" aria-label="Messages" aria-live="polite">
-    <div class="oc-message-list">
-      <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
-      <article class="oc-message">
-        <span class="oc-avatar oc-message__avatar">LV</span>
-        <div class="oc-message__bubble">
-          <p class="oc-message__sender">Lisa Verbeke</p>
-          <div class="oc-message__text"><p>The supplier dropped off two worktop samples at the workshop. Photo attached.</p></div>
-          <div class="oc-message__attachments"><a class="oc-attachment-image" href="#samples.jpg"><span class="oc-media-art oc-media-art--6" role="img" aria-label="Two worktop samples on the workbench"></span><span class="oc-attachment-image__caption">samples.jpg · 2.1 MB</span></a></div>
-          <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
-        </div>
-      </article>
-      <article class="oc-message oc-message--continued">
-        <span class="oc-avatar oc-message__avatar">LV</span>
-        <div class="oc-message__bubble">
-          <div class="oc-message__text"><p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p></div>
-          <p class="oc-message__meta"><time datetime="2026-10-14T09:13">09:13</time></p>
-        </div>
-      </article>
-      <article class="oc-message oc-message--out">
-        <span class="oc-avatar oc-message__avatar">TP</span>
-        <div class="oc-message__bubble">
-          <div class="oc-message__text"><p>Calacatta matt, 20 mm. I'll send the updated quote to the client today.</p></div>
-          <div class="oc-message__attachments"><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf" download><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Dewitte v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></div>
-          <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read">Read</span></p>
-        </div>
-        <div class="oc-message__actions"><button type="button" class="oc-message__action oc-message__action--destructive" aria-label="Delete this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg></button></div>
-      </article>
-      <div class="oc-message-divider"><span>Today</span></div>
-      <article class="oc-message">
-        <span class="oc-avatar oc-message__avatar">LV</span>
-        <div class="oc-message__bubble">
-          <p class="oc-message__sender">Lisa Verbeke</p>
-          <div class="oc-message__text"><p>Client signed. Can you confirm the edge profile before 16:00?</p></div>
-          <p class="oc-message__meta"><time datetime="2026-10-24T10:02">10:02</time></p>
-        </div>
-      </article>
-    </div>
-  </div>
-
-  <div class="oc-message-thread__footer">
-    <form class="oc-chat-composer" action="#" aria-label="Reply">
-      <label class="oc-visually-hidden" for="oc-thread-demo-input">Message</label>
-      <textarea class="oc-chat-composer__input" id="oc-thread-demo-input" name="message" rows="1" placeholder="Type your reply…" required></textarea>
-      <div class="oc-chat-composer__bar">
-        <div class="oc-chat-composer__tools">
-          <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file">&#128206;</button>
-          <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
-        </div>
-        <span class="oc-chat-composer__hint">Ctrl + Enter to send</span>
-        <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
-      </div>
-    </form>
-  </div>
-
-  <div class="oc-message-thread__busy" role="status">
-    <span class="oc-spinner oc-spinner--lg" aria-hidden="true"></span>
-    <strong>Sending message…</strong>
-    <span>Please wait, do not close this conversation.</span>
-  </div>
-</section>
-<script>
-// Optional: append the typed message as an outgoing bubble (demo behaviour; an app posts the form instead).
-document.addEventListener("submit", (e) => {
-  const form = e.target.closest(".oc-message-thread form.oc-chat-composer");
-  if (!form || e.defaultPrevented) return;
-  e.preventDefault();
-  const thread = form.closest(".oc-message-thread"), field = form.querySelector("textarea"), text = field.value.trim();
-  if (!text) return;
-  thread.setAttribute("aria-busy", "true");
-  setTimeout(() => {
-    const list = thread.querySelector(".oc-message-list"), last = list.lastElementChild;
-    const msg = document.createElement("article");
-    msg.className = "oc-message oc-message--out" + (last?.matches(".oc-message--out") ? " oc-message--continued" : "");
-    msg.innerHTML = '<span class="oc-avatar oc-message__avatar"></span><div class="oc-message__bubble"><div class="oc-message__text"><p></p></div><p class="oc-message__meta"><time></time><span class="oc-message__status">Sent</span></p></div>';
-    msg.querySelector(".oc-avatar").textContent = list.querySelector(".oc-message--out .oc-avatar")?.textContent || "Me";
-    msg.querySelector("p").textContent = text;
-    msg.querySelector("time").textContent = new Date().toTimeString().slice(0, 5);
-    list.append(msg);
-    field.value = "";
-    thread.removeAttribute("aria-busy");
-    field.focus();
-  }, 600);
-});
-document.addEventListener("keydown", (e) => {
-  if (e.defaultPrevented || e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || !e.target.matches(".oc-message-thread .oc-chat-composer__input")) return;
-  e.preventDefault();
-  e.target.form.requestSubmit();
-});
-</script>
+<!-- OmniaUI component: message-thread — Scrolling conversation: header with subject, people, status and actions menu, messages that start at the bottom, composer and a sending overlay. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/message-thread.html | Map: thread -> header (heading, people, badge, menu) -> scroll (message list) -> footer (attachments + chat-composer) -> busy overlay -> optional script
+     Class API (modifiers are extra classes / attributes on the same element):
+       section.oc-message-thread: Grid frame, height from --oc-message-thread-height (32rem). Modifier: --plain (no wallpaper).
+         State: aria-busy="true" shows the sending overlay
+       .oc-message-thread__header > .oc-message-thread__heading (__title, __meta), .oc-avatar-group.oc-message-thread__people,
+         .oc-message-thread__actions > .oc-badge, button.oc-message-thread__icon-btn (popovertarget) + .oc-dropdown-menu[popover]
+       .oc-message-thread__scroll (tabindex="0", role="log"): Scroll area; column-reverse, so it opens at the newest message.
+         Holds one .oc-message-list (message component)
+       .oc-message-thread__footer: Bottom bar with an optional .oc-attachment-list and the chat-composer, or a .oc-message-thread__note
+       .oc-message-thread__busy (role="status"): Overlay with .oc-spinner, strong and span
+     Optional script (end of this snippet): appends what you type as an outgoing message after a short "Sending" state and
+       sends with Ctrl/Cmd + Enter. In an app, post the form and render the new message on the server instead.
+-->
+<section class="oc-message-thread" aria-labelledby="oc-thread-demo-title" style="inline-size:100%;max-inline-size:40rem">
+  <header class="oc-message-thread__header">
+    <div class="oc-message-thread__heading">
+      <h3 class="oc-message-thread__title" id="oc-thread-demo-title">Kitchen worktop: which finish?</h3>
+      <p class="oc-message-thread__meta"><strong>Villa Dewitte</strong> · Lisa Verbeke → Tom Peeters · 14 Oct 2026</p>
+    </div>
+    <div class="oc-avatar-group oc-message-thread__people" aria-label="2 participants"><span class="oc-avatar" title="Lisa Verbeke">LV</span><span class="oc-avatar" title="Tom Peeters">TP</span></div>
+    <div class="oc-message-thread__actions">
+      <span class="oc-badge oc-badge--destructive">Urgent</span>
+      <button type="button" class="oc-message-thread__icon-btn" popovertarget="oc-thread-demo-menu" aria-label="Conversation actions"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.8"/><circle cx="12" cy="12" r="1.8"/><circle cx="12" cy="19" r="1.8"/></svg></button>
+      <div class="oc-dropdown-menu" id="oc-thread-demo-menu" popover role="menu">
+        <button type="button" class="oc-dropdown-item" role="menuitem">Mark as unread</button>
+        <button type="button" class="oc-dropdown-item" role="menuitem">Move to archive</button>
+        <div class="oc-dropdown-separator" role="separator"></div>
+        <button type="button" class="oc-dropdown-item oc-dropdown-item--destructive" role="menuitem">Delete conversation</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="oc-message-thread__scroll" tabindex="0" role="log" aria-label="Messages" aria-live="polite">
+    <div class="oc-message-list">
+      <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
+      <article class="oc-message">
+        <span class="oc-avatar oc-message__avatar">LV</span>
+        <div class="oc-message__bubble">
+          <p class="oc-message__sender">Lisa Verbeke</p>
+          <div class="oc-message__text"><p>The supplier dropped off two worktop samples at the workshop. Photo attached.</p></div>
+          <div class="oc-message__attachments"><a class="oc-attachment-image" href="#samples.jpg"><span class="oc-media-art oc-media-art--6" role="img" aria-label="Two worktop samples on the workbench"></span><span class="oc-attachment-image__caption">samples.jpg · 2.1 MB</span></a></div>
+          <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
+        </div>
+      </article>
+      <article class="oc-message oc-message--continued">
+        <span class="oc-avatar oc-message__avatar">LV</span>
+        <div class="oc-message__bubble">
+          <div class="oc-message__text"><p>Which one should we order: <strong>Calacatta matt</strong> or <strong>Nero Marquina polished</strong>? The cutting slot is Friday.</p></div>
+          <p class="oc-message__meta"><time datetime="2026-10-14T09:13">09:13</time></p>
+        </div>
+      </article>
+      <article class="oc-message oc-message--out">
+        <span class="oc-avatar oc-message__avatar">TP</span>
+        <div class="oc-message__bubble">
+          <div class="oc-message__text"><p>Calacatta matt, 20 mm. I'll send the updated quote to the client today.</p></div>
+          <div class="oc-message__attachments"><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf" download><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Dewitte v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></div>
+          <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read">Read</span></p>
+        </div>
+        <div class="oc-message__actions"><button type="button" class="oc-message__action oc-message__action--destructive" aria-label="Delete this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg></button></div>
+      </article>
+      <div class="oc-message-divider"><span>Today</span></div>
+      <article class="oc-message">
+        <span class="oc-avatar oc-message__avatar">LV</span>
+        <div class="oc-message__bubble">
+          <p class="oc-message__sender">Lisa Verbeke</p>
+          <div class="oc-message__text"><p>Client signed. Can you confirm the edge profile before 16:00?</p></div>
+          <p class="oc-message__meta"><time datetime="2026-10-24T10:02">10:02</time></p>
+        </div>
+      </article>
+    </div>
+  </div>
+
+  <div class="oc-message-thread__footer">
+    <form class="oc-chat-composer" action="#" aria-label="Reply">
+      <label class="oc-visually-hidden" for="oc-thread-demo-input">Message</label>
+      <textarea class="oc-chat-composer__input" id="oc-thread-demo-input" name="message" rows="1" placeholder="Type your reply…" required></textarea>
+      <div class="oc-chat-composer__bar">
+        <div class="oc-chat-composer__tools">
+          <button type="button" class="oc-chat-composer__tool" aria-label="Attach a file">&#128206;</button>
+          <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
+        </div>
+        <span class="oc-chat-composer__hint">Ctrl + Enter to send</span>
+        <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+      </div>
+    </form>
+  </div>
+
+  <div class="oc-message-thread__busy" role="status">
+    <span class="oc-spinner oc-spinner--lg" aria-hidden="true"></span>
+    <strong>Sending message…</strong>
+    <span>Please wait, do not close this conversation.</span>
+  </div>
+</section>
+<script>
+// Optional: append the typed message as an outgoing bubble (demo behaviour; an app posts the form instead).
+document.addEventListener("submit", (e) => {
+  const form = e.target.closest(".oc-message-thread form.oc-chat-composer");
+  if (!form || e.defaultPrevented) return;
+  e.preventDefault();
+  const thread = form.closest(".oc-message-thread"), field = form.querySelector("textarea"), text = field.value.trim();
+  if (!text) return;
+  thread.setAttribute("aria-busy", "true");
+  setTimeout(() => {
+    const list = thread.querySelector(".oc-message-list"), last = list.lastElementChild;
+    const msg = document.createElement("article");
+    msg.className = "oc-message oc-message--out" + (last?.matches(".oc-message--out") ? " oc-message--continued" : "");
+    msg.innerHTML = '<span class="oc-avatar oc-message__avatar"></span><div class="oc-message__bubble"><div class="oc-message__text"><p></p></div><p class="oc-message__meta"><time></time><span class="oc-message__status">Sent</span></p></div>';
+    msg.querySelector(".oc-avatar").textContent = list.querySelector(".oc-message--out .oc-avatar")?.textContent || "Me";
+    msg.querySelector("p").textContent = text;
+    msg.querySelector("time").textContent = new Date().toTimeString().slice(0, 5);
+    list.append(msg);
+    field.value = "";
+    thread.removeAttribute("aria-busy");
+    field.focus();
+  }, 600);
+});
+document.addEventListener("keydown", (e) => {
+  if (e.defaultPrevented || e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || !e.target.matches(".oc-message-thread .oc-chat-composer__input")) return;
+  e.preventDefault();
+  e.target.form.requestSubmit();
+});
+</script>

package/snippets/message.html

@@ -1,51 +1,51 @@
-<!-- OmniaUI component: message — Chat bubble: incoming and outgoing, sender, avatar, time, read receipt, hover actions, grouping, reply quote and date divider. Needs @birdycom/omniaui CSS.
-     File: packages/ui/snippets/message.html | Map: list -> date divider -> incoming group (2) -> outgoing with quote + receipt -> system line
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-message-list: Column of messages and dividers (role="log" when it updates live). Custom properties: --oc-message-in, --oc-message-out
-       article.oc-message: One row. Modifiers: --out (right, primary tint), --continued (follows a message of the same sender:
-         no name, the avatar moves to the last message of the group via :has())
-       .oc-avatar.oc-message__avatar: Avatar (avatar component); keep it on every message so the grouping can hide it
-       .oc-message__bubble > .oc-message__sender, a.oc-message__quote (strong + span), .oc-message__text (p, ul, ol, a, strong, code),
-         .oc-message__attachments (attachment component), .oc-message__meta > time + .oc-message__status (--read, --failed)
-       .oc-message__actions > button.oc-message__action (--destructive): Shown on hover and keyboard focus, always on touch screens
-       .oc-message-divider > span: Date divider. Modifier: --system (a centred notice without lines)
-     No JavaScript. Escape user text on the server; the markup only expects paragraphs, lists and links.
--->
-<div class="oc-message-list" role="log" aria-label="Conversation with Lisa Verbeke" style="max-inline-size:36rem">
-  <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
-
-  <article class="oc-message" aria-label="Lisa Verbeke, 09:12">
-    <span class="oc-avatar oc-message__avatar">LV</span>
-    <div class="oc-message__bubble">
-      <p class="oc-message__sender">Lisa Verbeke</p>
-      <div class="oc-message__text"><p>Morning Tom! The worktop supplier sent two samples for Villa Dewitte.</p></div>
-      <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
-    </div>
-  </article>
-  <article class="oc-message oc-message--continued" id="oc-message-demo-question" aria-label="Lisa Verbeke, 09:13">
-    <span class="oc-avatar oc-message__avatar">LV</span>
-    <div class="oc-message__bubble">
-      <div class="oc-message__text">
-        <p>Which finish should we order?</p>
-        <ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul>
-        <p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>
-      </div>
-      <p class="oc-message__meta"><time datetime="2026-10-14T09:13">09:13</time></p>
-    </div>
-  </article>
-
-  <article class="oc-message oc-message--out" aria-label="You, 09:20">
-    <span class="oc-avatar oc-message__avatar">TP</span>
-    <div class="oc-message__bubble">
-      <a class="oc-message__quote" href="#oc-message-demo-question"><strong>Lisa Verbeke</strong><span>Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm</span></a>
-      <div class="oc-message__text"><p>Calacatta matt. The client wants the lighter look next to the oak fronts.</p></div>
-      <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9"/></svg>Read</span></p>
-    </div>
-    <div class="oc-message__actions">
-      <button type="button" class="oc-message__action" aria-label="Reply to this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4"/></svg></button>
-      <button type="button" class="oc-message__action oc-message__action--destructive" aria-label="Delete this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg></button>
-    </div>
-  </article>
-
-  <div class="oc-message-divider oc-message-divider--system" role="note"><span>Lisa Verbeke marked this question as answered</span></div>
-</div>
+<!-- OmniaUI component: message — Chat bubble: incoming and outgoing, sender, avatar, time, read receipt, hover actions, grouping, reply quote and date divider. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/message.html | Map: list -> date divider -> incoming group (2) -> outgoing with quote + receipt -> system line
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-message-list: Column of messages and dividers (role="log" when it updates live). Custom properties: --oc-message-in, --oc-message-out
+       article.oc-message: One row. Modifiers: --out (right, primary tint), --continued (follows a message of the same sender:
+         no name, the avatar moves to the last message of the group via :has())
+       .oc-avatar.oc-message__avatar: Avatar (avatar component); keep it on every message so the grouping can hide it
+       .oc-message__bubble > .oc-message__sender, a.oc-message__quote (strong + span), .oc-message__text (p, ul, ol, a, strong, code),
+         .oc-message__attachments (attachment component), .oc-message__meta > time + .oc-message__status (--read, --failed)
+       .oc-message__actions > button.oc-message__action (--destructive): Shown on hover and keyboard focus, always on touch screens
+       .oc-message-divider > span: Date divider. Modifier: --system (a centred notice without lines)
+     No JavaScript. Escape user text on the server; the markup only expects paragraphs, lists and links.
+-->
+<div class="oc-message-list" role="log" aria-label="Conversation with Lisa Verbeke" style="max-inline-size:36rem">
+  <div class="oc-message-divider"><span>Tuesday 14 October</span></div>
+
+  <article class="oc-message" aria-label="Lisa Verbeke, 09:12">
+    <span class="oc-avatar oc-message__avatar">LV</span>
+    <div class="oc-message__bubble">
+      <p class="oc-message__sender">Lisa Verbeke</p>
+      <div class="oc-message__text"><p>Morning Tom! The worktop supplier sent two samples for Villa Dewitte.</p></div>
+      <p class="oc-message__meta"><time datetime="2026-10-14T09:12">09:12</time></p>
+    </div>
+  </article>
+  <article class="oc-message oc-message--continued" id="oc-message-demo-question" aria-label="Lisa Verbeke, 09:13">
+    <span class="oc-avatar oc-message__avatar">LV</span>
+    <div class="oc-message__bubble">
+      <div class="oc-message__text">
+        <p>Which finish should we order?</p>
+        <ul><li><strong>Calacatta</strong> matt, 20 mm</li><li><strong>Nero Marquina</strong> polished, 12 mm</li></ul>
+        <p>Details are on the <a href="#supplier-sheet">supplier sheet</a>.</p>
+      </div>
+      <p class="oc-message__meta"><time datetime="2026-10-14T09:13">09:13</time></p>
+    </div>
+  </article>
+
+  <article class="oc-message oc-message--out" aria-label="You, 09:20">
+    <span class="oc-avatar oc-message__avatar">TP</span>
+    <div class="oc-message__bubble">
+      <a class="oc-message__quote" href="#oc-message-demo-question"><strong>Lisa Verbeke</strong><span>Which finish should we order? Calacatta matt, 20 mm or Nero Marquina polished, 12 mm</span></a>
+      <div class="oc-message__text"><p>Calacatta matt. The client wants the lighter look next to the oak fronts.</p></div>
+      <p class="oc-message__meta"><time datetime="2026-10-14T09:20">09:20</time><span class="oc-message__status oc-message__status--read"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12.5 7 17.5 18 6.5M13 16.5l1 1L22.5 9"/></svg>Read</span></p>
+    </div>
+    <div class="oc-message__actions">
+      <button type="button" class="oc-message__action" aria-label="Reply to this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 14 4 9l5-5M4 9h10a6 6 0 0 1 6 6v4"/></svg></button>
+      <button type="button" class="oc-message__action oc-message__action--destructive" aria-label="Delete this message"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg></button>
+    </div>
+  </article>
+
+  <div class="oc-message-divider oc-message-divider--system" role="note"><span>Lisa Verbeke marked this question as answered</span></div>
+</div>

package/snippets/modal.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: modal — Modal on <dialog> — opens with invoker commands, no JavaScript. Needs @birdycom/omniaui CSS. -->
-<button class="oc-btn" command="show-modal" commandfor="oc-modal-demo">Open modal</button>
-
-<dialog class="oc-modal" id="oc-modal-demo" closedby="any" aria-labelledby="oc-modal-demo-title">
-  <div class="oc-modal-content">
-    <div class="oc-modal-header">
-      <h2 class="oc-modal-title" id="oc-modal-demo-title">Are you sure?</h2>
-      <p class="oc-modal-description">This action cannot be undone.</p>
-    </div>
-    <div class="oc-modal-footer">
-      <button class="oc-btn oc-btn--outline" command="close" commandfor="oc-modal-demo">Cancel</button>
-      <button class="oc-btn oc-btn--destructive" command="close" commandfor="oc-modal-demo">Delete</button>
-    </div>
-  </div>
-</dialog>
+<!-- OmniaUI component: modal — Modal on <dialog> — opens with invoker commands, no JavaScript. Needs @birdycom/omniaui CSS. -->
+<button class="oc-btn" command="show-modal" commandfor="oc-modal-demo">Open modal</button>
+
+<dialog class="oc-modal" id="oc-modal-demo" closedby="any" aria-labelledby="oc-modal-demo-title">
+  <div class="oc-modal-content">
+    <div class="oc-modal-header">
+      <h2 class="oc-modal-title" id="oc-modal-demo-title">Are you sure?</h2>
+      <p class="oc-modal-description">This action cannot be undone.</p>
+    </div>
+    <div class="oc-modal-footer">
+      <button class="oc-btn oc-btn--outline" command="close" commandfor="oc-modal-demo">Cancel</button>
+      <button class="oc-btn oc-btn--destructive" command="close" commandfor="oc-modal-demo">Delete</button>
+    </div>
+  </div>
+</dialog>

package/snippets/native-select.html

@@ -1,15 +1,15 @@
-<!-- OmniaUI component: native-select - Native select: themed <select>; optional base-select picker styling. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       select.oc-select: themed select (existing)
-       select.oc-select.oc-select--custom: also styles ::picker(select), options, checkmark where appearance: base-select is supported; elsewhere it looks like .oc-select
--->
-<div class="oc-field" style="max-inline-size:16rem">
-  <label class="oc-field-label" for="oc-ns-fruit">Fruit</label>
-  <select class="oc-select oc-select--custom" id="oc-ns-fruit">
-    <option>Apple</option>
-    <option selected>Banana</option>
-    <option>Blueberry</option>
-    <option>Grapes</option>
-    <option>Pineapple</option>
-  </select>
-</div>
+<!-- OmniaUI component: native-select - Native select: themed <select>; optional base-select picker styling. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       select.oc-select: themed select (existing)
+       select.oc-select.oc-select--custom: also styles ::picker(select), options, checkmark where appearance: base-select is supported; elsewhere it looks like .oc-select
+-->
+<div class="oc-field" style="max-inline-size:16rem">
+  <label class="oc-field-label" for="oc-ns-fruit">Fruit</label>
+  <select class="oc-select oc-select--custom" id="oc-ns-fruit">
+    <option>Apple</option>
+    <option selected>Banana</option>
+    <option>Blueberry</option>
+    <option>Grapes</option>
+    <option>Pineapple</option>
+  </select>
+</div>

package/snippets/navmenu.html

@@ -1,23 +1,23 @@
-<!-- OmniaUI component: navmenu - Horizontal navigation links with optional dropdown children. Needs @birdycom/omniaui CSS.
-     Class API (modifiers are extra classes / attributes on the same element):
-       .oc-navmenu: ul row of items
-       .oc-navmenu-link: Link or button. State: aria-current="page" or .is-active
-       .oc-navmenu-link--caret: Adds a chevron (trigger of a dropdown)
-       .oc-dropdown-menu[popover]: Child menu, from the dropdown component
--->
-<nav aria-label="Module navigation">
-  <ul class="oc-navmenu">
-    <li><a class="oc-navmenu-link" href="#" aria-current="page">Overview</a></li>
-    <li><a class="oc-navmenu-link" href="#">Contacts</a></li>
-    <li>
-      <button class="oc-navmenu-link oc-navmenu-link--caret" type="button" popovertarget="oc-navmenu-sales">Sales</button>
-      <div class="oc-dropdown-menu" id="oc-navmenu-sales" popover>
-        <div class="oc-dropdown-label">Documents</div>
-        <a class="oc-dropdown-item" href="#">Quotes</a>
-        <a class="oc-dropdown-item" href="#">Orders</a>
-        <a class="oc-dropdown-item" href="#">Invoices</a>
-      </div>
-    </li>
-    <li><a class="oc-navmenu-link" href="#">Reports</a></li>
-  </ul>
-</nav>
+<!-- OmniaUI component: navmenu - Horizontal navigation links with optional dropdown children. Needs @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-navmenu: ul row of items
+       .oc-navmenu-link: Link or button. State: aria-current="page" or .is-active
+       .oc-navmenu-link--caret: Adds a chevron (trigger of a dropdown)
+       .oc-dropdown-menu[popover]: Child menu, from the dropdown component
+-->
+<nav aria-label="Module navigation">
+  <ul class="oc-navmenu">
+    <li><a class="oc-navmenu-link" href="#" aria-current="page">Overview</a></li>
+    <li><a class="oc-navmenu-link" href="#">Contacts</a></li>
+    <li>
+      <button class="oc-navmenu-link oc-navmenu-link--caret" type="button" popovertarget="oc-navmenu-sales">Sales</button>
+      <div class="oc-dropdown-menu" id="oc-navmenu-sales" popover>
+        <div class="oc-dropdown-label">Documents</div>
+        <a class="oc-dropdown-item" href="#">Quotes</a>
+        <a class="oc-dropdown-item" href="#">Orders</a>
+        <a class="oc-dropdown-item" href="#">Invoices</a>
+      </div>
+    </li>
+    <li><a class="oc-navmenu-link" href="#">Reports</a></li>
+  </ul>
+</nav>