@birdycom/omniaui 0.12.6 → 0.13.0

package/snippets/fly-in.html

@@ -0,0 +1,30 @@
+<!-- OmniaUI component: fly-in - Cards that fly in from the middle of their row when they scroll into view, with a hover lift that keeps working, and a New badge in a product card. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/fly-in.html | Map: product cards.
+     Behaviour: fly.js (npx omniaui copy-js fly); works without it.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-reveal--fly: A card that flies in. Hidden only while html.oc-fly-ready is set (by fly.js) and the card is not yet .is-visible.
+       --oc-fly-x: Start offset from the middle of the row; fly.js sets it per card.
+       .is-visible: Added by fly.js when the card comes into view; the card flies to its place.
+       .oc-product-card__badge: A small New label after the name of a product card (with .oc-pill).
+       initFly(scope): Exported from @birdycom/omniaui/fly.js; returns a function that stops watching.
+-->
+<div class="oc-card-grid" style="inline-size:100%">
+  <a class="oc-product-card oc-reveal--fly oc-accent--blue" href="#product-1">
+    <h3 class="oc-product-card__name">Product 1</h3>
+    <p class="oc-product-card__tagline">Plan every shift</p>
+    <p class="oc-product-card__summary">Schedules and leave in one view.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+  <a class="oc-product-card oc-reveal--fly oc-accent--green" href="#product-2">
+    <h3 class="oc-product-card__name">Product 2 <span class="oc-product-card__badge oc-pill oc-pill--accent">New</span></h3>
+    <p class="oc-product-card__tagline">Quotes in minutes</p>
+    <p class="oc-product-card__summary">From quote to invoice without typing twice.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+  <a class="oc-product-card oc-reveal--fly oc-accent--violet" href="#product-3">
+    <h3 class="oc-product-card__name">Product 3</h3>
+    <p class="oc-product-card__tagline">Your shop online</p>
+    <p class="oc-product-card__summary">Products, stock and orders in one place.</p>
+    <span class="oc-product-card__more">Read more</span>
+  </a>
+</div>

package/snippets/hover-effects.html

@@ -0,0 +1,19 @@
+<!-- OmniaUI component: hover-effects - Choose how a card reacts to the mouse: lift, grow, glow or stay still, with one smooth curve for all of them. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/hover-effects.html | Map: four effects -> your own distance and speed.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-hover-lift: Moves up (--oc-hover-lift, 6px) with a soft shadow. The product card does this by default.
+       .oc-hover-grow: Grows a little in place (--oc-hover-scale, 1.02).
+       .oc-hover-glow: Stays in place, with a ring and glow in the accent color (--oc-accent-from, e.g. with .oc-accent--violet).
+       .oc-hover-none: No movement; also turns off the default lift of a product or price card.
+       --oc-hover-duration / --oc-hover-ease: Speed (0.45s) and curve (cubic-bezier(0.22, 1, 0.36, 1), a soft ease-out) of every effect.
+-->
+<div class="oc-card-grid" style="inline-size:100%">
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--blue" aria-hidden="true"><iconify-icon icon="mdi:arrow-up-bold-outline"></iconify-icon></span><h3 class="oc-feature-card__title">Lift</h3><p class="oc-feature-card__text">Moves up 6px with a soft shadow. <code>.oc-hover-lift</code></p></article>
+  <article class="oc-feature-card oc-hover-grow"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:arrow-expand"></iconify-icon></span><h3 class="oc-feature-card__title">Grow</h3><p class="oc-feature-card__text">Grows a little in place. <code>.oc-hover-grow</code></p></article>
+  <article class="oc-feature-card oc-hover-glow oc-accent--violet"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:white-balance-sunny"></iconify-icon></span><h3 class="oc-feature-card__title">Glow</h3><p class="oc-feature-card__text">Stays in place, glows in the accent color. <code>.oc-hover-glow</code></p></article>
+  <article class="oc-feature-card oc-hover-none"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--cyan" aria-hidden="true"><iconify-icon icon="mdi:pause-circle-outline"></iconify-icon></span><h3 class="oc-feature-card__title">None</h3><p class="oc-feature-card__text">No movement. <code>.oc-hover-none</code></p></article>
+</div>
+<div class="oc-card-grid" style="inline-size:100%; --oc-hover-lift: 10px; --oc-hover-duration: 0.7s">
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--blue" aria-hidden="true"><iconify-icon icon="mdi:tune-variant"></iconify-icon></span><h3 class="oc-feature-card__title">Slow and high</h3><p class="oc-feature-card__text"><code>--oc-hover-lift: 10px</code> and <code>--oc-hover-duration: 0.7s</code> on the grid.</p></article>
+  <article class="oc-feature-card oc-hover-lift"><span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:view-grid-outline"></iconify-icon></span><h3 class="oc-feature-card__title">Same grid</h3><p class="oc-feature-card__text">Every card in the grid follows the tokens.</p></article>
+</div>

package/snippets/icon-list.html

@@ -0,0 +1,28 @@
+<!-- OmniaUI component: icon-list - Lists for a company site: rows with an icon in a frame, points with an icon tile, a title and a text, and a list with markers in the accent color. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/icon-list.html | Map: icon rows -> points -> accent list, badges and tagline.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-icon-list: Rows with an icon (svg, iconify-icon) in the primary color, each in a frame.
+       .oc-icon-list--points: Points: an icon tile next to .oc-icon-list__title and .oc-icon-list__text, no frames.
+       .oc-list--accent: Disc list in muted text with markers in --oc-accent-from.
+       .oc-note: Small muted note under a block (0.85rem).
+       .oc-badge-row: Row of badges or pills above a title.
+       .oc-tagline--accent: Tagline in the accent color, lighter in dark mode.
+-->
+<ul class="oc-icon-list" style="inline-size:min(100%, 26rem)">
+  <li><iconify-icon icon="mdi:shield-lock-outline" aria-hidden="true"></iconify-icon>Internal tools behind a login</li>
+  <li><iconify-icon icon="mdi:database-sync-outline" aria-hidden="true"></iconify-icon>Links between existing systems</li>
+  <li><iconify-icon icon="mdi:file-document-outline" aria-hidden="true"></iconify-icon>Reports and exports</li>
+</ul>
+<ul class="oc-icon-list oc-icon-list--points" style="inline-size:min(100%, 30rem)">
+  <li><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:server-security"></iconify-icon></span><span class="oc-icon-list__title">Runs on your own server</span><span class="oc-icon-list__text">Your data does not leave the building.</span></li>
+  <li><span class="oc-icon-tile oc-icon-tile--sm oc-accent--violet" aria-hidden="true"><iconify-icon icon="mdi:account-key-outline"></iconify-icon></span><span class="oc-icon-list__title">Only for your team</span><span class="oc-icon-list__text">Sign in with the accounts you already have.</span></li>
+</ul>
+<div class="oc-accent--green" style="inline-size:min(100%, 34rem)">
+  <div class="oc-badge-row"><span class="oc-pill">Web app</span><span class="oc-pill">Since 2020</span></div>
+  <p class="oc-tagline--accent">Plan every shift in one view</p>
+  <ul class="oc-list--accent">
+    <li>Drag a shift to another day.</li>
+    <li>Everyone sees their own schedule on the phone.</li>
+  </ul>
+  <p class="oc-note">The demo resets every hour.</p>
+</div>

package/snippets/lazy.html

@@ -21,17 +21,17 @@
 <table class="oc-table" style="inline-size:100%">
   <thead><tr><th>Product</th><th>Category</th><th data-numeric>Price</th></tr></thead>
   <tbody>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-1-front.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 1</strong><br><small class="text-muted">PRD-0001</small></span></div></td><td>Lighting</td><td data-numeric>€ 179,00</td></tr>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-2.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 2</strong><br><small class="text-muted">PRD-0002</small></span></div></td><td>Furniture</td><td data-numeric>€ 265,00</td></tr>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-3.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 3</strong><br><small class="text-muted">PRD-0003</small></span></div></td><td>Furniture</td><td data-numeric>€ 589,00</td></tr>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-4.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 4</strong><br><small class="text-muted">PRD-0004</small></span></div></td><td>Garden</td><td data-numeric>€ 22,40</td></tr>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-5.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 5</strong><br><small class="text-muted">PRD-0005</small></span></div></td><td>Electronics</td><td data-numeric>€ 129,00</td></tr>
-      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-6.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 6</strong><br><small class="text-muted">PRD-0006</small></span></div></td><td>Kitchen</td><td data-numeric>€ 11,95</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-1-front.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 1</strong><br><small class="oc-text-muted">PRD-0001</small></span></div></td><td>Lighting</td><td data-numeric>€ 179,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-2.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 2</strong><br><small class="oc-text-muted">PRD-0002</small></span></div></td><td>Furniture</td><td data-numeric>€ 265,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-3.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 3</strong><br><small class="oc-text-muted">PRD-0003</small></span></div></td><td>Furniture</td><td data-numeric>€ 589,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-4.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 4</strong><br><small class="oc-text-muted">PRD-0004</small></span></div></td><td>Garden</td><td data-numeric>€ 22,40</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-5.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 5</strong><br><small class="oc-text-muted">PRD-0005</small></span></div></td><td>Electronics</td><td data-numeric>€ 129,00</td></tr>
+      <tr><td><div style="display:flex;align-items:center;gap:0.75rem"><figure class="oc-lazy oc-lazy--thumb"><img src="/img/shop/product-6.svg" alt="" loading="lazy" decoding="async" width="40" height="40"></figure><span><strong>Product 6</strong><br><small class="oc-text-muted">PRD-0006</small></span></div></td><td>Kitchen</td><td data-numeric>€ 11,95</td></tr>
       <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
       <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
       <tr class="oc-lazy-row" aria-hidden="true"><td><div style="display:flex;align-items:center;gap:0.75rem"><span class="oc-lazy oc-lazy--thumb"></span><span class="oc-lazy-bar" style="--oc-lazy-bar: 8rem"></span></div></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 5rem"></span></td><td><span class="oc-lazy-bar" style="--oc-lazy-bar: 4rem;margin-inline-start:auto"></span></td></tr>
   </tbody>
-  <caption class="text-muted" style="caption-side:bottom;padding-block-start:0.5rem;font-size:0.8125rem" role="status">Loading 20 more products…</caption>
+  <caption class="oc-text-muted" style="caption-side:bottom;padding-block-start:0.5rem;font-size:0.8125rem" role="status">Loading 20 more products…</caption>
 </table>
 <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem;inline-size:100%">
   <figure class="oc-lazy" role="img" aria-label="Loading"></figure>

package/snippets/name-card.html

@@ -28,7 +28,7 @@
     <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Base cabinets" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
   </summary>
   <div class="oc-name-card__body">
-    <p class="m-0 text-muted">6 articles · 2 options</p>
+    <p class="m-0 oc-text-muted">6 articles · 2 options</p>
   </div>
 </details>
 <details class="oc-name-card">
@@ -40,7 +40,7 @@
     <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Wall cabinets" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
   </summary>
   <div class="oc-name-card__body">
-    <p class="m-0 text-muted">4 articles</p>
+    <p class="m-0 oc-text-muted">4 articles</p>
   </div>
 </details>
 <details class="oc-name-card">
@@ -52,7 +52,7 @@
     <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Worktop" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
   </summary>
   <div class="oc-name-card__body">
-    <p class="m-0 text-muted">1 article · cut to size</p>
+    <p class="m-0 oc-text-muted">1 article · cut to size</p>
   </div>
 </details>
   </div>
@@ -66,7 +66,7 @@
     <span class="oc-name-card__actions"><button type="button" class="oc-btn oc-btn--soft-destructive oc-btn--icon oc-btn--sm" aria-label="Delete Bathroom – first floor" title="Delete"><iconify-icon icon="mdi:trash-can-outline" aria-hidden="true"></iconify-icon></button></span>
   </summary>
   <div class="oc-name-card__body">
-    <p class="m-0 text-muted">Add a part with the button below.</p>
+    <p class="m-0 oc-text-muted">Add a part with the button below.</p>
   </div>
 </details>
 </div>

package/snippets/page-sections.html

@@ -0,0 +1,50 @@
+<!-- OmniaUI component: page-sections - Building blocks for the pages of a company site: the header of an inner page, a section head, a row of buttons, a group title with a count, a full-width band and a meta line. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/page-sections.html | Map: inner page header -> section head, group title and more row -> centered head and buttons.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-section-pad--page: Header of an inner page: padding clamp(4rem, 10vw, 7rem) on top, clamp(2rem, 5vw, 3rem) below.
+       .oc-display--page: Larger display title for that header: clamp(2.5rem, 6.5vw, 4.75rem).
+       .oc-section-head: Head of a section (eyebrow, title, lead): max 46rem, 3rem below. --center centers it.
+       .oc-section-more: Row under a section (a <em>see all</em> link): 2.5rem above.
+       .oc-actions: Row of buttons that wraps: gap .75rem, 2rem above. --center, --end, --tight (1rem above).
+       .oc-group-title: Title of a group of cards; .oc-group-title__count is the number in a pill.
+       .oc-band: Band over the full width with a line above and below (--oc-band-bg, surface); the content stays in its .oc-container.
+       .oc-meta: Meta line under a title: version · date. Subtle text (--oc-subtle-foreground), 0.9rem.
+-->
+<section class="oc-section-pad--page" style="inline-size:100%">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Contact</p>
+    <h1 class="oc-display oc-display--page">Let's <span class="oc-text-gradient">talk</span></h1>
+    <p class="oc-lead">A new project, a question about one of our apps or help with your IT? We would like to hear from you.</p>
+    <p class="oc-meta">Version 2 · 30 October 2026</p>
+    <div class="oc-actions">
+      <a class="oc-btn oc-btn--lg" href="#form">Send a message</a>
+      <a class="oc-btn oc-btn--outline oc-btn--lg" href="tel:+3230000000">Call us</a>
+    </div>
+  </div>
+</section>
+<section style="inline-size:100%">
+  <div class="oc-section-head">
+    <p class="oc-eyebrow">Software</p>
+    <h2 class="oc-display oc-display--md">Our own products</h2>
+    <p class="oc-lead">Apps we build, sell and maintain ourselves.</p>
+  </div>
+  <h3 class="oc-group-title">Business apps <span class="oc-group-title__count">3</span></h3>
+  <div class="oc-card-grid">
+    <div class="oc-card" style="padding:1.25rem">Product 1</div>
+    <div class="oc-card" style="padding:1.25rem">Product 2</div>
+    <div class="oc-card" style="padding:1.25rem">Product 3</div>
+  </div>
+  <div class="oc-section-more">
+    <a class="oc-link-arrow" href="#products">See all products</a>
+  </div>
+</section>
+<section style="inline-size:100%">
+  <div class="oc-section-head oc-section-head--center">
+    <h2 class="oc-display oc-display--md">Ready for the next step?</h2>
+    <p class="oc-lead" style="margin-inline:auto">Tell us what you need; we answer within one working day.</p>
+    <div class="oc-actions oc-actions--center">
+      <a class="oc-btn oc-btn--lg" href="#contact">Start a project</a>
+      <a class="oc-btn oc-btn--ghost oc-btn--lg" href="#work">See our work</a>
+    </div>
+  </div>
+</section>

package/snippets/panel.html

@@ -0,0 +1,18 @@
+<!-- OmniaUI component: panel - A framed panel on the page for a form, a call to action or a feature: card background, strong border, large radius and an optional soft glow in a corner. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/panel.html | Map: panel with a glow -> glow positions.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-panel: The panel: padding clamp(1.5rem, 4vw, 2.5rem) (--oc-panel-padding), --oc-border-strong, radius 1.2 × --oc-radius-lg, scroll-margin-top from --oc-scroll-offset (6rem).
+       .oc-panel--glow: A soft light in the top start corner in --oc-panel-glow-color (brand 1); --oc-panel-glow-at moves it.
+       .oc-panel--glow-end: The light in the top end corner.
+       .oc-panel--glow-both: Two lights: brand 1 top start and brand 3 bottom end (call to action).
+-->
+<div class="oc-panel oc-panel--glow" style="inline-size:min(100%, 34rem)">
+  <h2 style="margin:0 0 0.5rem;font-size:1.35rem">Send us a message</h2>
+  <p class="oc-text-muted" style="margin:0">We usually answer within one working day.</p>
+</div>
+<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:1rem;inline-size:100%">
+  <div class="oc-panel"><strong>.oc-panel</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">No light.</p></div>
+  <div class="oc-panel oc-panel--glow"><strong>--glow</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Top start.</p></div>
+  <div class="oc-panel oc-panel--glow oc-panel--glow-end"><strong>--glow-end</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Top end.</p></div>
+  <div class="oc-panel oc-panel--glow-both"><strong>--glow-both</strong><p class="oc-text-muted" style="margin:0.35rem 0 0">Two lights.</p></div>
+</div>

package/snippets/result.html

@@ -0,0 +1,31 @@
+<!-- OmniaUI component: result - The outcome of an action in the place where the form was: an icon tile, a title, a short text and a button such as Send another message. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/result.html | Map: message sent -> centered.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-result: The result: tile, title, text and actions stacked, aligned at the start.
+       .oc-result__title: The title (1.2rem).
+       .oc-result__text: Muted text; links in the primary color, underlined.
+       .oc-result__actions: Row of buttons under the text.
+       .oc-result--center: Centers everything (an empty state or a full page).
+       role="status" tabindex="-1": Announces the result and lets the script move the focus to it.
+-->
+<div class="oc-panel" style="inline-size:min(100%, 34rem)">
+  <div class="oc-result" role="status" tabindex="-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--green" aria-hidden="true"><iconify-icon icon="mdi:check"></iconify-icon></span>
+    <h2 class="oc-result__title">Thank you, your message was sent</h2>
+    <p class="oc-result__text">You will get a confirmation by e-mail.<br>Urgent? Call us on <a href="tel:+3230000000">+32 3 000 00 00</a>.</p>
+    <div class="oc-result__actions">
+      <a class="oc-btn oc-btn--outline" href="#contact-form">Send another message</a>
+    </div>
+  </div>
+</div>
+<div class="oc-panel" style="inline-size:min(100%, 34rem)">
+  <div class="oc-result oc-result--center" role="status" tabindex="-1">
+    <span class="oc-icon-tile oc-icon-tile--sm oc-accent--orange" aria-hidden="true"><iconify-icon icon="mdi:clock-outline"></iconify-icon></span>
+    <h2 class="oc-result__title">Your request is waiting for approval</h2>
+    <p class="oc-result__text">Customer 1 gets an e-mail as soon as it is approved.</p>
+    <div class="oc-result__actions">
+      <a class="oc-btn" href="#orders">Back to the orders</a>
+      <a class="oc-btn oc-btn--ghost" href="#request">View the request</a>
+    </div>
+  </div>
+</div>

package/snippets/ribbon.html

@@ -11,32 +11,32 @@
 <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;inline-size:100%">
   <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
     <span class="oc-ribbon oc-ribbon--top-start">New</span>
-    <div><strong>Top start</strong><br><small class="text-muted">--top-start</small></div>
+    <div><strong>Top start</strong><br><small class="oc-text-muted">--top-start</small></div>
   </div>
   <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
     <span class="oc-ribbon oc-ribbon--success">Paid</span>
-    <div><strong>Top end</strong><br><small class="text-muted">default</small></div>
+    <div><strong>Top end</strong><br><small class="oc-text-muted">default</small></div>
   </div>
   <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
     <span class="oc-ribbon oc-ribbon--bottom-start oc-ribbon--warning">Due soon</span>
-    <div><strong>Bottom start</strong><br><small class="text-muted">--bottom-start</small></div>
+    <div><strong>Bottom start</strong><br><small class="oc-text-muted">--bottom-start</small></div>
   </div>
   <div class="oc-card" style="min-block-size:9rem;display:grid;place-items:center;text-align:center">
     <span class="oc-ribbon oc-ribbon--bottom-end oc-ribbon--destructive">Overdue</span>
-    <div><strong>Bottom end</strong><br><small class="text-muted">--bottom-end</small></div>
+    <div><strong>Bottom end</strong><br><small class="oc-text-muted">--bottom-end</small></div>
   </div>
 </div>
 <article class="oc-card" style="max-inline-size:30rem;inline-size:100%;padding:1.5rem;display:grid;gap:1rem">
   <span class="oc-ribbon oc-ribbon--success oc-ribbon--lg">Paid</span>
   <header style="display:grid;gap:0.25rem">
-    <span class="text-muted" style="font-size:0.8125rem">Invoice</span>
+    <span class="oc-text-muted" style="font-size:0.8125rem">Invoice</span>
     <strong style="font-size:1.25rem">2026-0042</strong>
     <span style="font-size:0.875rem">Customer 1 · info@company1.example</span>
   </header>
   <dl style="display:grid;grid-template-columns:auto 1fr;gap:0.25rem 1rem;margin:0;font-size:0.875rem">
-    <dt class="text-muted">Invoice date</dt><dd style="margin:0">2 November 2026</dd>
-    <dt class="text-muted">Paid on</dt><dd style="margin:0">9 November 2026</dd>
-    <dt class="text-muted">Total</dt><dd style="margin:0"><strong>€ 1.210,00</strong></dd>
+    <dt class="oc-text-muted">Invoice date</dt><dd style="margin:0">2 November 2026</dd>
+    <dt class="oc-text-muted">Paid on</dt><dd style="margin:0">9 November 2026</dd>
+    <dt class="oc-text-muted">Total</dt><dd style="margin:0"><strong>€ 1.210,00</strong></dd>
   </dl>
 </article>
 <div style="display:flex;flex-wrap:wrap;gap:1rem">

package/snippets/shot-grid.html

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