@birdycom/omniaui 0.12.4 → 0.12.6

package/dist/parts/media-lazy.css

@@ -0,0 +1,46 @@
+/* File: packages/ui/src/parts/media-lazy.css | Map: box (aspect ratio, shimmer placeholder or a tiny blurred preview) -> image fades in -> error -> lazy sections
+   Lazy loading. .oc-lazy: an image box that keeps its place, shows a shimmer (or --oc-lazy-preview, a tiny blurred
+   copy) until the photo is there and then fades it in (lazy.js adds .is-loaded). .oc-lazy-section: content the browser
+   only lays out and draws when it comes near the screen (content-visibility). */
+
+.oc-lazy {
+  --oc-lazy-ratio: 16 / 10;
+  position: relative;
+  display: block;
+  margin: 0;
+  overflow: hidden;
+  aspect-ratio: var(--oc-lazy-ratio);
+  border-radius: var(--oc-radius);
+  background:
+    linear-gradient(100deg, transparent 30%, oklch(from var(--oc-background) l c h / 0.55) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat,
+    var(--oc-muted);
+  animation: oc-lazy-shimmer 1.4s ease-in-out infinite;
+}
+/* A tiny blurred preview instead of the shimmer: style="--oc-lazy-preview: url(photo-20px.webp)". */
+.oc-lazy[style*="--oc-lazy-preview"] { animation: none; background: var(--oc-muted); }
+.oc-lazy[style*="--oc-lazy-preview"]::before { content: ""; position: absolute; inset: 0; background: var(--oc-lazy-preview) center / cover no-repeat; filter: blur(14px); scale: 1.15; }
+.oc-lazy > img { position: relative; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
+.oc-lazy.is-loaded { animation: none; background: none; }
+.oc-lazy.is-loaded::before { display: none; }
+.oc-lazy.is-loaded > img { opacity: 1; }
+.oc-lazy.is-error { animation: none; }
+.oc-lazy.is-error > img { opacity: 0; }
+.oc-lazy > figcaption { position: absolute; inset: auto 0 0; padding: 0.4rem 0.6rem; font-size: 0.75rem; color: var(--color-white-50); background: linear-gradient(transparent, oklch(0% 0 0deg / 0.55)); }
+/* Without the script (or when it is off) the photo shows as soon as it is there. */
+@media (scripting: none) { .oc-lazy > img { opacity: 1; } }
+@keyframes oc-lazy-shimmer { to { background-position: 250% 0, 0 0; } }
+
+/* Sections far down a long page: laid out and drawn only when they come near the screen. */
+.oc-lazy-section { content-visibility: auto; contain-intrinsic-size: auto var(--oc-lazy-size, 600px); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-lazy { animation: none; }
+  .oc-lazy > img { transition: none; }
+}
+
+/* In a table or a list: a small square thumbnail, and placeholder rows (.oc-lazy-row) while the next page loads. */
+.oc-lazy.oc-lazy--thumb { --oc-lazy-ratio: 1; inline-size: 2.5rem; flex: none; border-radius: calc(var(--oc-radius) - 2px); }
+.oc-lazy-row > :is(td, th) { padding-block: 0.6rem; }
+.oc-lazy-row .oc-lazy-bar { display: block; block-size: 0.75rem; inline-size: var(--oc-lazy-bar, 70%); border-radius: 999px; background: var(--oc-muted); animation: oc-lazy-pulse 1.2s ease-in-out infinite alternate; }
+@keyframes oc-lazy-pulse { to { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .oc-lazy-row .oc-lazy-bar { animation: none; } }

package/dist/parts/media-message-thread.css

@@ -2,7 +2,7 @@
    people, status, actions) -> wallpaper (masked doodles in a token color) -> scroll area (starts at the bottom)
    -> composer footer -> sending overlay (aria-busy) -> reduced motion
    Message thread: one conversation. The scroll area uses flex-direction: column-reverse, so it opens at the newest message
-   and stays there when messages are added, without a script. Based on the question chat of the Korrekt app. */
+   and stays there when messages are added, without a script. */
 
 .oc-message-thread {
   --oc-message-thread-height: 32rem;

package/dist/parts/media-message.css

@@ -2,7 +2,7 @@
    -> grouping (:has) -> hover actions -> date divider + system line -> reduced motion
    Message: one chat bubble. Incoming on the left with the avatar, outgoing on the right in the primary tint.
    Consecutive messages of one sender group by themselves: the avatar shows once (on the last one), the name once (on the
-   first one). Based on the question chat of the Korrekt app. */
+   first one). */
 
 .oc-message-list {
   --oc-message-in: var(--oc-card);

package/dist/parts/nav-topbar-variants.css

@@ -0,0 +1,96 @@
+/* File: packages/ui/src/parts/nav-topbar-variants.css
+   Map: brand (logo tile, room before the menu) -> centred menu -> plain links -> dark / brand colour -> floating pill
+   -> strip above the bar -> footer bar (split, links, dark)
+   Variants of the site header (.oc-topbar in docs-ui.css) and the footer bar (.oc-footerbar). Colours are tokens. */
+
+/* Brand: a logo tile and the name, always with room before the menu. */
+.oc-topbar-brand { display: inline-flex; align-items: center; gap: 0.55rem; margin-inline-end: 1rem; }
+.oc-topbar-logo {
+  display: grid;
+  place-items: center;
+  flex: none;
+  inline-size: 1.85rem;
+  block-size: 1.85rem;
+  border-radius: 9px;
+  color: var(--color-white-50);
+  background: linear-gradient(135deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary)));
+  font-size: 0.95rem;
+}
+.oc-topbar-logo > :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+.oc-topbar-nav { min-inline-size: 0; }
+.oc-topbar-actions .oc-btn { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right (from 761px; smaller screens keep the burger). */
+@media (min-width: 761px) {
+  .oc-topbar--center { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-topbar--center .oc-topbar-brand { justify-self: start; }
+  .oc-topbar--center .oc-topbar-actions { justify-self: end; }
+}
+
+/* Plain links: no pill frames, the current page underlined. */
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link {
+  border-color: transparent;
+  border-radius: 0;
+  background: none;
+  color: var(--oc-muted-foreground);
+  box-shadow: inset 0 -2px 0 transparent;
+}
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link:hover { color: var(--oc-foreground); border-color: transparent; background: none; }
+.oc-topbar--plain .oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
+  color: var(--oc-foreground);
+  border-color: transparent;
+  background: none;
+  box-shadow: inset 0 -2px 0 var(--oc-primary);
+}
+
+/* Dark bar and brand-colour bar: light text, links as soft pills. */
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) { color: var(--color-white-50); border-block-end-color: transparent; }
+.oc-topbar.oc-topbar--dark { background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-topbar--brand { background: linear-gradient(100deg, var(--oc-accent-from, var(--oc-primary)), var(--oc-accent-to, var(--oc-primary))); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link {
+  color: oklch(from var(--color-white-50) l c h / 0.8);
+  border-color: transparent;
+  background: none;
+}
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-navmenu--site .oc-navmenu-link:is(:hover, [aria-current="page"]) {
+  color: var(--color-white-50);
+  border-color: transparent;
+  background: oklch(from var(--color-white-50) l c h / 0.14);
+}
+.oc-topbar--dark .oc-topbar-logo { background: oklch(from var(--color-white-50) l c h / 0.14); }
+.oc-topbar--brand .oc-topbar-logo { color: var(--oc-primary); background: var(--color-white-50); }
+.oc-topbar:is(.oc-topbar--dark, .oc-topbar--brand) .oc-topbar-burger { color: inherit; border-color: oklch(from var(--color-white-50) l c h / 0.3); }
+
+/* Floating: a rounded bar with room around it and a soft shadow (over a hero or a photo). */
+.oc-topbar--floating {
+  margin: 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 16px;
+  box-shadow: 0 14px 34px -18px oklch(from var(--color-black-60) l c h / 0.35);
+}
+
+/* Strip: a small row above the bar (contact, language, account). */
+.oc-topbar-strip {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem 1rem;
+  padding: 0.35rem clamp(14px, 2vw, 28px);
+  font-size: 0.78rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+}
+.oc-topbar-strip a { color: inherit; text-decoration: none; }
+.oc-topbar-strip a:hover { color: var(--oc-foreground); }
+.oc-topbar-strip > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
+
+/* Footer bar: text left and links right (--split), a link list, a dark bar. */
+.oc-footerbar--split { justify-content: space-between; gap: 1rem; text-align: start; }
+.oc-footerbar--tall { block-size: auto; min-block-size: var(--ocm-footer-height, 2.25rem); padding-block: 0.85rem; flex-wrap: wrap; }
+.oc-footerbar-links { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
+.oc-footerbar-links a { color: var(--oc-muted-foreground); text-decoration: none; }
+.oc-footerbar-links a:hover { color: var(--oc-foreground); }
+.oc-footerbar.oc-footerbar--dark { color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); border-block-start-color: transparent; }
+.oc-footerbar--dark :is(a, .oc-footerbar-links a) { color: oklch(from var(--color-white-50) l c h / 0.85); }
+.oc-footerbar--dark .oc-footerbar-links a:hover { color: var(--color-white-50); }

package/dist/parts/site-header-variants.css

@@ -0,0 +1,70 @@
+/* File: packages/ui/src/parts/site-header-variants.css
+   Map: actions slot -> centred menu -> dark -> floating pill -> glass pill -> footer: centred, dark, newsletter, social
+   Variants of the marketing header (.oc-site-header) and footer (.oc-site-footer) in showcase.css. The sticky header
+   turns to glass while scrolling; the coloured variants keep their own background (no scroll animation). */
+
+.oc-site-header__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
+.oc-site-header__brand { white-space: nowrap; flex: none; }
+.oc-site-header__nav > :is(a, button):not(.oc-btn) { white-space: nowrap; }
+
+/* Centred menu: brand left, menu in the middle, actions right. */
+@media (min-width: 861px) {
+  .oc-site-header--center .oc-site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
+  .oc-site-header--center .oc-site-header__brand { justify-self: start; }
+  .oc-site-header--center .oc-site-header__actions { justify-self: end; }
+}
+
+/* Dark: a solid dark bar with light text. */
+.oc-site-header--dark {
+  animation: none;
+  color: var(--color-white-50);
+  background: var(--oc-dark-band, var(--color-duskblue-95));
+}
+.oc-site-header--dark :is(.oc-site-header__brand, .oc-site-header__nav a[aria-current="page"], .oc-site-header__nav a:not(.oc-btn):hover) { color: var(--color-white-50); }
+.oc-site-header--dark .oc-site-header__nav a:not(.oc-btn) { color: oklch(from var(--color-white-50) l c h / 0.72); }
+
+/* Floating: the bar as a rounded card with room around it. */
+.oc-site-header:is(.oc-site-header--floating, .oc-site-header--glass) { animation: none; padding: 0.75rem; }
+.oc-site-header--floating .oc-site-header__inner {
+  block-size: 4rem;
+  padding-inline: 1rem 0.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 18px;
+  background: var(--oc-background);
+  box-shadow: 0 16px 36px -22px oklch(from var(--color-black-60) l c h / 0.45);
+}
+
+/* Glass: a clear liquid-glass pill over a photo or a hero (look in media-glass-liquid.css). */
+.oc-site-header--glass .oc-site-header__inner { block-size: 3.75rem; padding-inline: 1.1rem 0.6rem; border-radius: 999px; }
+.oc-site-header--glass :is(.oc-site-header__brand, .oc-site-header__nav a:not(.oc-btn)) { color: light-dark(var(--color-black-95), var(--color-white-50)); text-shadow: 0 1px 2px light-dark(oklch(100% 0 0deg / 0.5), oklch(0% 0 0deg / 0.4)); }
+
+/* ---- Footer variants ---- */
+/* Centred: brand, one row of links, social icons and the bottom line, all centred. */
+.oc-site-footer--center { text-align: center; }
+.oc-site-footer--center :is(.oc-site-footer__about, .oc-site-footer__bottom) { justify-items: center; justify-content: center; }
+.oc-site-footer--center .oc-site-footer__about { display: grid; gap: 1rem; }
+.oc-site-footer--center .oc-site-footer__about p { margin: 0; max-inline-size: 34rem; }
+.oc-site-footer__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 2rem 0 0; padding: 0; list-style: none; }
+.oc-site-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer--center .oc-site-footer__social { justify-content: center; margin-block-start: 1.5rem; }
+.oc-site-footer__social a {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  transition: border-color 0.2s, color 0.2s;
+}
+.oc-site-footer__social a:hover { border-color: var(--oc-primary); color: var(--oc-primary); }
+.oc-site-footer__social :is(svg, iconify-icon) { inline-size: 1.1rem; block-size: 1.1rem; font-size: 1.1rem; }
+
+/* Dark: light text on a dark band, the same deep blue in light and dark mode (--oc-dark-band), no top border. */
+.oc-site-footer--dark { border-block-start: 0; color: oklch(from var(--color-white-50) l c h / 0.7); background: var(--oc-dark-band, var(--color-duskblue-95)); }
+.oc-site-footer--dark :is(.oc-site-footer__title, .oc-site-header__brand, a:hover) { color: var(--color-white-50); }
+.oc-site-footer--dark :is(.oc-site-footer__bottom, .oc-site-footer__social a) { border-color: oklch(from var(--color-white-50) l c h / 0.16); }
+
+/* Newsletter: a sign-up field in the brand column. */
+.oc-site-footer__signup { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; max-inline-size: 24rem; }
+.oc-site-footer__signup .oc-input { flex: 1 1 12rem; min-inline-size: 0; }
+.oc-site-footer--dark .oc-site-footer__signup .oc-input { color: var(--color-white-50); background: oklch(from var(--color-white-50) l c h / 0.08); border-color: oklch(from var(--color-white-50) l c h / 0.2); }

package/dist/parts/site-prose.css

@@ -3,7 +3,7 @@
    -> sizes (--sm, --lg) -> full width
    Prose: typography for long-form text from a CMS, blog or help page, where the HTML has no classes of its own.
    Every rule is scoped with :where(), so a utility class on an element inside still wins. Spacing is in em, so --sm and --lg
-   scale the whole text. Based on the help and maintenance pages of the Korrekt app. */
+   scale the whole text. */
 
 .oc-prose {
   max-inline-size: 68ch;

package/dist/showcase.css

@@ -30,6 +30,9 @@
   background: var(--oc-gradient-brand);
   -webkit-background-clip: text;
   background-clip: text;
+  /* The gradient only paints the box: keep italic or tight last letters inside it without moving the text. */
+  padding-inline-end: 0.08em;
+  margin-inline-end: -0.08em;
   color: transparent;
 }
 .oc-text-accent { background-image: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)); }
@@ -129,17 +132,44 @@
 .oc-lead { margin: 0 0 1rem; color: var(--oc-muted-foreground); font-size: 1.15rem; line-height: 1.65; max-inline-size: 42rem; text-wrap: pretty; }
 .oc-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 3rem; align-items: center; }
 
-/* Code window: editor frame with traffic lights and a file name (always dark, like an editor) */
+/* Code window: editor frame with traffic lights and a file name. It follows the page theme: a light frame and light
+   syntax colors in light mode, the Omnia Dark editor colors in dark mode. --dark keeps it dark on a light page (the
+   hero blocks, where it reads as an editor screenshot). */
 .oc-code-window {
   position: relative;
   border: 1px solid var(--oc-border-strong);
   border-radius: var(--oc-radius-lg);
-  background: oklch(from var(--color-shallowblue-60) l c h / 0.9);
+  background: light-dark(var(--oc-card), oklch(from var(--color-shallowblue-60) l c h / 0.9));
   box-shadow: 0 40px 80px -30px oklch(from var(--color-black-50) l c h / 0.6);
   backdrop-filter: blur(12px);
   overflow: hidden;
-  color-scheme: dark;
+  /* Syntax colors (oc-code-syntax.css) for both themes; the code sits on the window surface. */
+  --oc-syntax-bg: transparent;
+  --oc-syntax-bg-preview: transparent;
+  --oc-syntax-fg: light-dark(var(--color-shallowblue-60), var(--color-silver-60));
+  --oc-syntax-comment: light-dark(var(--color-gray-60), var(--color-purple-2));
+  --oc-syntax-string: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-keyword: light-dark(var(--color-purple-70), var(--color-purple-2));
+  --oc-syntax-variable: light-dark(var(--color-skycyan-90), var(--color-skycyan-30));
+  --oc-syntax-function: light-dark(var(--color-skycyan-90), var(--color-skycyan-60));
+  --oc-syntax-number: light-dark(var(--color-peru-80), var(--color-peru-40));
+  --oc-syntax-operator: light-dark(var(--color-red-70), var(--color-red-50));
+  --oc-syntax-constant: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-storage: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-tag: light-dark(var(--color-brown-70), var(--color-brown-10));
+  --oc-syntax-attr: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-prop: light-dark(var(--color-green-80), var(--color-green-2));
+  --oc-syntax-value: light-dark(var(--color-teal-80), var(--color-teal-10));
+  --oc-syntax-cls: light-dark(var(--color-darkgoldenrod-80), var(--color-wheat-70));
+  --oc-syntax-id: light-dark(var(--color-skycyan-90), var(--color-skycyan-70));
+  --oc-syntax-unit: light-dark(var(--color-peru-80), var(--color-peru-40));
+  --oc-syntax-key: light-dark(var(--color-brown-70), var(--color-brown-10));
+  --oc-code-block-line-number-color: light-dark(var(--color-gray-40), oklch(from var(--color-white-2) l c h / 0.25));
 }
+.oc-code-window--dark { color-scheme: dark; box-shadow: 0 40px 80px -30px oklch(from var(--color-black-50) l c h / 0.6); }
+.oc-code-window:not(.oc-code-window--dark) { box-shadow: 0 24px 60px -30px oklch(from var(--color-black-50) l c h / 0.25); }
+/* The code block inside follows the window instead of its own always-dark theme. */
+.oc-code-window :is(.oc-code-block, pre.code-preview) { color-scheme: inherit; }
 .oc-code-window__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1rem; border-block-end: 1px solid var(--oc-border); }
 .oc-code-window__bar > i { inline-size: 0.7rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
 .oc-code-window__bar > i:nth-child(2) { background: var(--color-orange-60); }
@@ -240,19 +270,20 @@
   background: oklch(from var(--oc-accent-from) l c h / 0.14);
   color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
-/* Pulse: the ring starts at --oc-status-dot-pulse-alpha of the accent and grows to --oc-status-dot-pulse-size.
+/* Live dot in a pill (.oc-pill > .oc-status-dot): the ring starts at --oc-status-dot-pulse-alpha of the accent and grows
+   to --oc-status-dot-pulse-size. Scoped to the pill: a plain .oc-status-dot is the status light (parts/app-status-dot.css).
    --strong starts at the full accent with a wider ring. */
-.oc-status-dot {
+.oc-pill .oc-status-dot {
   --oc-status-dot-pulse-alpha: 0.6;
   --oc-status-dot-pulse-size: 8px;
   inline-size: 0.5rem;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--oc-accent-from);
-  animation: oc-pulse 2s infinite;
+  animation: oc-status-dot-ring 2s infinite;
 }
-.oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
-@keyframes oc-pulse {
+.oc-pill .oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
+@keyframes oc-status-dot-ring {
   0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / var(--oc-status-dot-pulse-alpha)); }
   70%, 100% { box-shadow: 0 0 0 var(--oc-status-dot-pulse-size) transparent; }
 }
@@ -413,5 +444,5 @@
 
 @media (prefers-reduced-motion: reduce) {
   .oc-backdrop::before, .oc-backdrop::after, .oc-backdrop > .oc-backdrop__blob,
-  .oc-icon-tile--float, .oc-marquee__track, .oc-status-dot, .oc-reveal, .oc-site-header { animation: none; }
+  .oc-icon-tile--float, .oc-marquee__track, .oc-pill .oc-status-dot, .oc-reveal, .oc-site-header { animation: none; }
 }

package/manifest.json

@@ -688,14 +688,6 @@
         "@birdycom/omniaui"
       ]
     },
-    {
-      "name": "column-menu",
-      "file": "snippets/column-menu.html",
-      "description": "Column visibility checklist in a popover; hides table columns with :has() - no JavaScript",
-      "requires": [
-        "@birdycom/omniaui"
-      ]
-    },
     {
       "name": "confirm-dialog",
       "file": "snippets/confirm-dialog.html",
@@ -1035,7 +1027,7 @@
     {
       "name": "data-table",
       "file": "snippets/data-table.html",
-      "description": "List table from Korrekt and OmniaDesk: search, sort, pages, columns, resize, drag, trash filter and bulk actions",
+      "description": "List table for business apps: search, sort, pages, trash filter and bulk actions",
       "requires": [
         "@birdycom/omniaui"
       ]
@@ -1159,6 +1151,126 @@
       "requires": [
         "@birdycom/omniaui"
       ]
+    },
+    {
+      "name": "avatar-picker",
+      "file": "snippets/avatar-picker.html",
+      "description": "Avatar or company logo with a preview, Upload and Remove, and drag and drop",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "barcode",
+      "file": "snippets/barcode.html",
+      "description": "EAN-13, EAN-8, UPC-A or Code 128 drawn as SVG from a value, no dependency",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "date-field",
+      "file": "snippets/date-field.html",
+      "description": "Native date input with a calendar icon zone and the ISO week (Week 45) next to it",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "form-density",
+      "file": "snippets/form-density.html",
+      "description": "Compact forms: .oc-density-compact makes every control in it 2rem high instead of 2.5rem",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "form-section",
+      "file": "snippets/form-section.html",
+      "description": "Collapsible part of a long form with an icon, title, hint and status; red edge while a field inside is invalid",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "meter-row",
+      "file": "snippets/meter-row.html",
+      "description": "Usage line with a label, the amount as text, a colored bar and when it resets",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "name-card",
+      "file": "snippets/name-card.html",
+      "description": "Collapsible card with a name, rename pencil, amount and delete button; nests for titles and parts",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "gallery",
+      "file": "snippets/gallery.html",
+      "description": "Product photos with thumbnails: one large photo and a row (or column) of thumbnails. No JavaScript",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "price",
+      "file": "snippets/price.html",
+      "description": "A price with old price, discount, VAT note and the amount incl. or excl. VAT",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "quantity",
+      "file": "snippets/quantity.html",
+      "description": "Number field with minus and plus buttons for amounts in carts, orders and stock",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "rating",
+      "file": "snippets/rating.html",
+      "description": "Star rating: show a score with halves, or let people pick 1 to 5 stars. No JavaScript",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "spec-list",
+      "file": "snippets/spec-list.html",
+      "description": "Technical specifications in named groups: label and value rows, two columns when there is room",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "stock",
+      "file": "snippets/stock.html",
+      "description": "Stock status with a colored dot: in stock, low, out of stock or on order",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "ribbon",
+      "file": "snippets/ribbon.html",
+      "description": "A diagonal band across a corner of a card, image or document: Paid, New, Sale. Pick the corner and the tone",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "lazy",
+      "file": "snippets/lazy.html",
+      "description": "Images that load when they come near the screen, with a shimmer or a blurred preview until they are there, and sections drawn only when needed",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.4",
+  "version": "0.12.6",
   "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,9 @@
     "./snippets/*": "./snippets/*",
     "./data-table.js": "./dist/data-table.js",
     "./carousel.js": "./dist/carousel.js",
+    "./barcode.js": "./dist/barcode.js",
+    "./form-extras.js": "./dist/form-extras.js",
+    "./lazy.js": "./dist/lazy.js",
     "./manifest.json": "./manifest.json",
     "./package.json": "./package.json"
   },
@@ -57,7 +60,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.4"
+    "@birdycom/omniacss": "^0.12.6"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {

package/snippets/accordion-accent.html

@@ -11,7 +11,7 @@
 <div class="oc-accordion oc-accordion--accent">
   <details class="oc-accordion-item" name="oc-accent-demo" open>
     <summary class="oc-accordion-trigger">Customer details <span class="oc-accordion-accent-meta">Complete</span></summary>
-    <div class="oc-accordion-content">Ada Lovelace, Main street 12, Ghent.</div>
+    <div class="oc-accordion-content">Contact 1, Main street 12, Ghent.</div>
   </details>
   <details class="oc-accordion-item oc-accent--violet" name="oc-accent-demo">
     <summary class="oc-accordion-trigger">Materials <span class="oc-accordion-accent-meta">4 items</span></summary>

package/snippets/attachment.html

@@ -13,10 +13,10 @@
 -->
 <div style="display:grid;gap:1.25rem;inline-size:100%;max-inline-size:40rem">
   <ul class="oc-attachment-list" aria-label="Files in this message">
-    <li><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></li>
-    <li><a class="oc-attachment oc-attachment--sheet" href="#measurements.xlsx" download><span class="oc-attachment__icon" aria-hidden="true">XLS</span><span class="oc-attachment__body"><span class="oc-attachment__name">Measurements ground floor.xlsx</span><span class="oc-attachment__size">86 KB</span></span></a></li>
-    <li><a class="oc-attachment oc-attachment--doc" href="#contract.docx" download><span class="oc-attachment__icon" aria-hidden="true">DOC</span><span class="oc-attachment__body"><span class="oc-attachment__name">Contract addendum.docx</span><span class="oc-attachment__size">240 KB</span></span></a></li>
-    <li><a class="oc-attachment oc-attachment--zip" href="#plans.zip" download><span class="oc-attachment__icon" aria-hidden="true">ZIP</span><span class="oc-attachment__body"><span class="oc-attachment__name">Plans architect.zip</span><span class="oc-attachment__size">14.8 MB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--pdf" href="#quote.pdf"><span class="oc-attachment__icon" aria-hidden="true">PDF</span><span class="oc-attachment__body"><span class="oc-attachment__name">Quote kitchen Project 1 v2.pdf</span><span class="oc-attachment__size">1.2 MB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--sheet" href="#measurements.xlsx"><span class="oc-attachment__icon" aria-hidden="true">XLS</span><span class="oc-attachment__body"><span class="oc-attachment__name">Measurements ground floor.xlsx</span><span class="oc-attachment__size">86 KB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--doc" href="#contract.docx"><span class="oc-attachment__icon" aria-hidden="true">DOC</span><span class="oc-attachment__body"><span class="oc-attachment__name">Contract addendum.docx</span><span class="oc-attachment__size">240 KB</span></span></a></li>
+    <li><a class="oc-attachment oc-attachment--zip" href="#plans.zip"><span class="oc-attachment__icon" aria-hidden="true">ZIP</span><span class="oc-attachment__body"><span class="oc-attachment__name">Plans architect.zip</span><span class="oc-attachment__size">14.8 MB</span></span></a></li>
   </ul>
 
   <a class="oc-attachment-image" href="#worktop-sample.jpg">

package/snippets/avatar-picker.html

@@ -0,0 +1,40 @@
+<!-- OmniaUI component: avatar-picker - Avatar or company logo with a preview, Upload and Remove, and drag and drop. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/avatar-picker.html | Map: avatar picker demo markup. Behaviour: form-extras.js.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-avatar-picker: Preview and text side by side.
+       label.oc-avatar-picker__preview: The preview; clicking it opens the file dialog (the file input fills it, invisible).
+       [data-oc-initials]: Shown until an image is picked.
+       [data-oc-avatar-upload] / [data-oc-avatar-remove]: Open the dialog / go back to the initials. Remove only shows while there is an image.
+       .oc-avatar-picker--square / --logo: Rounded square; --logo fits the whole image on white (no crop).
+       oc-avatar-change: Event with detail.file (the File, or null after Remove).
+-->
+<div style="display:grid;gap:1.5rem">
+<div class="oc-avatar-picker">
+  <label class="oc-avatar-picker__preview" for="oc-avatar-me" title="Choose an image">
+    <span data-oc-initials>C1</span>
+    <input class="oc-avatar-picker__file" id="oc-avatar-me" type="file" accept="image/*">
+  </label>
+  <div class="oc-avatar-picker__text">
+    <span class="oc-avatar-picker__label">Profile picture</span>
+    <span class="oc-avatar-picker__hint">PNG or JPG, at least 256 × 256 px. Drop an image on the circle.</span>
+    <div class="oc-avatar-picker__actions">
+      <button type="button" class="oc-btn oc-btn--outline oc-btn--sm" data-oc-avatar-upload><iconify-icon icon="mdi:upload" aria-hidden="true"></iconify-icon>Upload</button>
+      <button type="button" class="oc-btn oc-btn--ghost oc-btn--sm" data-oc-avatar-remove><iconify-icon icon="mdi:close" aria-hidden="true"></iconify-icon>Remove</button>
+    </div>
+  </div>
+</div>
+<div class="oc-avatar-picker oc-avatar-picker--square oc-avatar-picker--logo">
+  <label class="oc-avatar-picker__preview" for="oc-logo-company" title="Choose an image">
+    <span data-oc-initials>CO</span>
+    <input class="oc-avatar-picker__file" id="oc-logo-company" type="file" accept="image/*">
+  </label>
+  <div class="oc-avatar-picker__text">
+    <span class="oc-avatar-picker__label">Company logo</span>
+    <span class="oc-avatar-picker__hint">SVG or PNG on a transparent background.</span>
+    <div class="oc-avatar-picker__actions">
+      <button type="button" class="oc-btn oc-btn--outline oc-btn--sm" data-oc-avatar-upload><iconify-icon icon="mdi:upload" aria-hidden="true"></iconify-icon>Upload</button>
+      <button type="button" class="oc-btn oc-btn--ghost oc-btn--sm" data-oc-avatar-remove><iconify-icon icon="mdi:close" aria-hidden="true"></iconify-icon>Remove</button>
+    </div>
+  </div>
+</div>
+</div>

package/snippets/barcode.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: barcode - EAN-13, EAN-8, UPC-A or Code 128 drawn as SVG from a value, no dependency. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/barcode.html | Map: barcode demo markup. Behaviour: barcode.js.
+     Class API (modifiers are extra classes / attributes on the same element):
+       figure.oc-barcode[data-value]: The barcode. The script replaces its content with the SVG and the digits.
+       data-format: auto (default: 12–13 digits EAN-13, 7–8 EAN-8, 11 UPC-A, else Code 128), EAN13, EAN8, UPC or CODE128.
+       data-digits="false": Bars only, no digits.
+       .oc-barcode--hero / --compact: Large (product page, label) or small (table cell).
+       --oc-barcode-height: Height of the bars (4rem).
+       [data-error]: Set when the value cannot be encoded (wrong check digit, non-ASCII in Code 128); the reason shows instead of bars.
+       encodeBarcode(value, format): Exported: the module string and the text, for your own canvas or PDF.
+       barcodeFile(value, { format, digits, moduleWidth, height }): Exported: a print-ready SVG file as text.
+       The barcode maker (live preview, download) is the OmniaUI Pro block packages/pro/blocks/barcode-maker.html.
+-->
+<div style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center">
+  <figure class="oc-barcode oc-barcode--hero" data-value="5400000000010"></figure>
+  <figure class="oc-barcode" data-value="SKU-000105"></figure>
+  <figure class="oc-barcode" data-value="96385074"></figure>
+  <figure class="oc-barcode oc-barcode--compact" data-value="012345678905" data-format="UPC" data-digits="false"></figure>
+  <figure class="oc-barcode" data-value="5400000000018"></figure>
+</div>

package/snippets/chat-composer.html

@@ -11,11 +11,11 @@
   <textarea class="oc-chat-composer__input" id="oc-chat-input" name="message" rows="1" placeholder="Write a message…" 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="Attach a file"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M16.5 6v11.5a4 4 0 0 1-4 4a4 4 0 0 1-4-4V5a2.5 2.5 0 0 1 2.5-2.5A2.5 2.5 0 0 1 13.5 5v10.5a1 1 0 0 1-1 1a1 1 0 0 1-1-1V6H10v9.5a2.5 2.5 0 0 0 2.5 2.5a2.5 2.5 0 0 0 2.5-2.5V5a4 4 0 0 0-4-4a4 4 0 0 0-4 4v12.5a5.5 5.5 0 0 0 5.5 5.5a5.5 5.5 0 0 0 5.5-5.5V6z"/></svg></button>
       <button type="button" class="oc-chat-composer__tool" aria-label="Mention someone">@</button>
-      <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji">&#128578;</button>
+      <button type="button" class="oc-chat-composer__tool" aria-label="Insert emoji"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20 12a8 8 0 0 0-8-8a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8m2 0a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10m-12-3.5c0 .8-.7 1.5-1.5 1.5S7 9.3 7 8.5S7.7 7 8.5 7s1.5.7 1.5 1.5m7 0c0 .8-.7 1.5-1.5 1.5S14 9.3 14 8.5S14.7 7 15.5 7s1.5.7 1.5 1.5m-5 9.73c-1.75 0-3.29-.73-4.19-1.81L9.23 14c.45.72 1.52 1.23 2.77 1.23s2.32-.51 2.77-1.23l1.42 1.42c-.9 1.08-2.44 1.81-4.19 1.81"/></svg></button>
     </div>
     <span class="oc-chat-composer__hint">Enter for a new line</span>
-    <button type="submit" class="oc-chat-composer__send" aria-label="Send">&#10148;</button>
+    <button type="submit" class="oc-chat-composer__send" aria-label="Send"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M2 21l21-9L2 3v7l15 2l-15 2z"/></svg></button>
   </div>
 </form>