@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/parts/utility-hover.css

@@ -0,0 +1,44 @@
+/* File: packages/ui/src/parts/utility-hover.css */
+/* Map: smooth timing -> lift / grow / glow / none -> steady hover area -> reduced motion */
+/* Hover effect of a card, chosen with one class on the card (any card: .oc-card, product, feature, link, price, project …):
+     .oc-hover-lift   moves up (--oc-hover-lift, 6px) with a soft shadow; what a product card does by default
+     .oc-hover-grow   grows a little in place (--oc-hover-scale, 1.02)
+     .oc-hover-glow   stays in place, with a glow in the accent color
+     .oc-hover-none   no movement (also turns off the default lift of a product or price card)
+   They share one smooth curve: --oc-hover-duration (0.45s) and --oc-hover-ease. This file loads after the cards, so the class wins. */
+
+:is(.oc-hover-lift, .oc-hover-grow, .oc-hover-glow, .oc-product-card) {
+  transition:
+    translate var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    scale var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    box-shadow var(--oc-hover-duration, 0.45s) var(--oc-hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
+    border-color 0.35s,
+    background-color 0.35s,
+    --oc-glow 0.35s;
+}
+.oc-product-card:hover { translate: 0 calc(-1 * var(--oc-hover-lift, 6px)); }
+.oc-hover-lift:hover {
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
+  box-shadow: 0 1.25rem 2.5rem -1.25rem oklch(from var(--color-black-60) l c h / 0.35);
+}
+.oc-hover-grow:hover { translate: none; scale: var(--oc-hover-scale, 1.02); }
+.oc-hover-glow:hover {
+  translate: none;
+  box-shadow:
+    0 0 0 1px oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.4),
+    0 0.75rem 2.5rem -0.75rem oklch(from var(--oc-accent-from, var(--oc-primary)) l c h / 0.5);
+}
+.oc-hover-none:hover { translate: none; scale: none; }
+
+/* While a card moves up, the strip it leaves keeps the hover, so a mouse at the bottom edge does not make it bounce. */
+:where(.oc-hover-lift) { position: relative; }
+:is(.oc-hover-lift, .oc-product-card:not([class*="oc-hover-"])):hover::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 calc(-1 * var(--oc-hover-lift, 6px) - 2px);
+  z-index: -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.oc-hover-lift, .oc-hover-grow, .oc-product-card):hover { translate: none; scale: none; }
+}

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)); }
@@ -51,7 +54,8 @@
   /* border-box: the gradient also runs under the transparent 1px border of .oc-btn; from the padding box it would
      repeat in that border and show a thin stripe of the other end's color on both sides. */
   background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)) border-box;
-  color: var(--color-white-50);
+  /* --oc-btn-gradient-ink: dark text on a light accent (set it with the accent). */
+  color: var(--oc-btn-gradient-ink, var(--color-white-50));
   box-shadow: 0 10px 30px -10px var(--oc-accent-to);
   transition: transform 0.2s var(--oc-ease-out), box-shadow 0.2s;
 }
@@ -78,7 +82,8 @@
 
 /* Backdrop: slowly drifting color blobs + fine grid behind the page.
    <div class="oc-backdrop" aria-hidden="true"><i class="oc-backdrop__blob"></i><i class="oc-backdrop__grid"></i></div>
-   .oc-backdrop--local keeps it inside a positioned section instead of the viewport. */
+   .oc-backdrop--local keeps it inside a positioned section instead of the viewport.
+   A theme sets the colors: --oc-backdrop-1, -2, -3 (the blobs), --oc-backdrop-3-opacity and --oc-backdrop-grid (the lines). */
 .oc-backdrop {
   position: fixed;
   inset: 0;
@@ -99,24 +104,27 @@
   opacity: var(--oc-backdrop-opacity, 0.35);
   animation: oc-drift 24s ease-in-out infinite alternate;
 }
-.oc-backdrop::before { background: var(--color-blue-40); inset-block-start: -18rem; inset-inline-start: -12rem; }
-.oc-backdrop::after { background: var(--color-purple-30); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
-.oc-backdrop > .oc-backdrop__blob { background: var(--color-teal-40); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: calc(var(--oc-backdrop-opacity, 0.35) * 0.6); }
+.oc-backdrop::before { background: var(--oc-backdrop-1, var(--color-blue-40)); inset-block-start: -18rem; inset-inline-start: -12rem; }
+.oc-backdrop::after { background: var(--oc-backdrop-2, var(--color-purple-30)); inset-block-start: 10rem; inset-inline-end: -16rem; animation-delay: -8s; }
+.oc-backdrop > .oc-backdrop__blob { background: var(--oc-backdrop-3, var(--color-teal-40)); inset-block-end: -20rem; inset-inline-start: 30%; animation-delay: -16s; opacity: var(--oc-backdrop-3-opacity, calc(var(--oc-backdrop-opacity, 0.35) * 0.6)); }
 .oc-backdrop > .oc-backdrop__grid {
   position: absolute;
   inset: 0;
   background-image:
-    linear-gradient(oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px),
-    linear-gradient(90deg, oklch(from var(--oc-foreground) l c h / 0.05) 1px, transparent 1px);
+    linear-gradient(var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px),
+    linear-gradient(90deg, var(--oc-backdrop-grid, oklch(from var(--oc-foreground) l c h / 0.05)) 1px, transparent 1px);
   background-size: 64px 64px;
   mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 70%);
 }
 @keyframes oc-drift { to { transform: translate(6rem, 4rem) scale(1.15); } }
 
 /* Container, section spacing and display headings */
-.oc-container { inline-size: min(100% - 2.5rem, var(--oc-container, 1200px)); margin-inline: auto; }
+/* --oc-container is the width, --oc-container-gutter the room on each side on a narrower screen (1.25rem). */
+.oc-container { inline-size: min(100% - 2 * var(--oc-container-gutter, 1.25rem), var(--oc-container, 1200px)); margin-inline: auto; }
 .oc-section-pad { padding-block: clamp(4rem, 9vw, 7rem); }
 .oc-section-pad--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
+/* The hero of a home page: a little less room on top and below than a section. */
+.oc-section-pad--hero { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
 .oc-display {
   margin: 0 0 1.5rem;
   font-size: clamp(2.6rem, 5.6vw, 4.6rem);
@@ -126,20 +134,67 @@
   text-wrap: balance;
 }
 .oc-display--md { font-size: clamp(1.9rem, 4vw, 3rem); }
+.oc-display--sm { font-size: clamp(1.5rem, 3vw, 2.1rem); }
 .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; }
+/* Larger and narrower, for a home hero. */
+.oc-lead--lg { font-size: 1.2rem; max-inline-size: 36rem; }
+.oc-split { display: grid; grid-template-columns: var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr))); gap: var(--oc-split-gap, 3rem); align-items: center; }
+/* Ratio presets (one column up to 960px): --lead makes the text column wider, --media the image column.
+   Your own ratio: set --oc-split-cols in a class (and to 1fr in a media query for small screens). */
+.oc-split--lead { --oc-split-cols: 1.25fr 1fr; }
+.oc-split--media { --oc-split-cols: 1fr 1.15fr; }
+.oc-split__media { display: grid; place-items: center; }
+/* Columns aligned at the top (a fact list next to a long text). */
+.oc-split--top { align-items: start; }
+/* --oc-split-cols-wide: your own ratio that only applies above 960px, so the split still stacks on a phone. */
+@media (min-width: 961px) {
+  .oc-split { grid-template-columns: var(--oc-split-cols-wide, var(--oc-split-cols, repeat(auto-fit, minmax(min(100%, 24rem), 1fr)))); }
+}
+@media (max-width: 960px) {
+  .oc-split--lead, .oc-split--media { --oc-split-cols: 1fr; }
+  /* The image (a product mark, a screenshot) comes first on a small screen, aligned at the start, and an xl tile shrinks. */
+  .oc-split__media { order: -1; justify-items: start; }
+  .oc-split__media .oc-icon-tile--xl { --oc-tile-size: 7rem; }
+}
 
-/* 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); }
@@ -188,7 +243,12 @@
 @keyframes oc-float { 50% { translate: 0 -12px; } }
 
 /* Product / feature card with hover lift and accent glow */
-.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: 1.25rem; }
+.oc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); gap: var(--oc-card-gap, 1.25rem); }
+/* Wide cards (projects, case studies): from 32rem, three in a row on a wide screen. */
+.oc-card-grid--wide { --oc-card-min: 32rem; --oc-card-gap: 1.5rem; }
+/* --fit: the cards stretch over the full width when there are fewer than fit in a row (auto-fit instead of auto-fill). */
+.oc-card-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--oc-card-min, 17rem)), 1fr)); }
+@media (min-width: 1280px) { .oc-card-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
 .oc-product-card {
   position: relative;
   display: flex;
@@ -202,7 +262,7 @@
     var(--oc-surface);
   color: var(--oc-foreground);
   text-decoration: none;
-  transition: transform 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
+  transition: translate 0.35s var(--oc-ease-out), border-color 0.35s, --oc-glow 0.35s;
 }
 @property --oc-glow {
   syntax: "<number>";
@@ -211,7 +271,8 @@
 }
 .oc-product-card:hover {
   --oc-glow: 0.22;
-  transform: translateY(-6px);
+  /* The lift uses translate; a fly-in (.oc-reveal--fly) animates the transform, so both keep working. */
+  translate: 0 calc(-1 * var(--oc-hover-lift, 6px));
   border-color: oklch(from var(--oc-accent-from) l c h / 0.55);
 }
 .oc-product-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: 0.75rem; }
@@ -267,9 +328,17 @@
 }
 .oc-stat-strip__item { padding: 2rem 1.5rem; border-inline-start: 1px solid var(--oc-border); }
 .oc-stat-strip__item:first-child { border-inline-start: 0; }
-.oc-stat-strip__value { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
+.oc-stat-strip__value { font-family: var(--oc-font-display, inherit); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; }
 .oc-stat-strip__suffix { color: var(--oc-brand-1); }
 .oc-stat-strip__label { display: block; color: var(--oc-muted-foreground); font-size: 0.92rem; }
+/* Plain: no lines and no background of its own, for a strip inside an .oc-band (full width) or a card. */
+.oc-stat-strip--plain { border-block: 0; background: none; }
+/* Four figures on a narrower screen: two rows of two instead of three and one. */
+@media (max-width: 960px) {
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(3) { border-inline-start: 0; }
+  .oc-stat-strip:has(> .oc-stat-strip__item:nth-child(4):last-child) > .oc-stat-strip__item:nth-child(n + 3) { border-block-start: 1px solid var(--oc-border); }
+}
 
 /* Spotlight: large highlighted panel with copy + module list */
 .oc-spotlight {
@@ -287,8 +356,12 @@
 }
 .oc-spotlight__title { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
 .oc-spotlight__tagline { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-size: 1.2rem; font-weight: 600; }
+/* --oc-spotlight-cols: your own ratio above 960px (copy | modules); on a smaller screen the spotlight stacks. */
+@media (min-width: 961px) {
+  .oc-spotlight { grid-template-columns: var(--oc-spotlight-cols, repeat(auto-fit, minmax(min(100%, 22rem), 1fr))); }
+}
 .oc-spotlight__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
-.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); font-size: 0.95rem; }
+.oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-spotlight-module-bg, var(--oc-surface)); font-size: 0.95rem; }
 
 /* Steps: numbered process with a gradient tick (numbers come from a CSS counter) */
 .oc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: oc-step; }
@@ -321,6 +394,9 @@
 /* Tag list (tech stack) and check list */
 .oc-tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
 .oc-tag-list > li { padding: 0.55rem 1.1rem; border: 1px solid oklch(from var(--oc-accent-from) l c h / 0.35); border-radius: 999px; background: oklch(from var(--oc-accent-from) l c h / 0.1); font-family: var(--oc-font-mono); font-size: 0.88rem; }
+/* Neutral chips (no accent color) and large chips in the display font, e.g. a strip of brand names. */
+.oc-tag-list--neutral > li { border-color: var(--oc-border); background: var(--oc-surface); color: var(--oc-foreground); }
+.oc-tag-list--lg > li { padding: 0.45rem 1rem; font-family: var(--oc-font-display, inherit); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
 .oc-check-list { display: grid; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; font-size: 0.93rem; }
 .oc-check-list > li { display: flex; gap: 0.5rem; align-items: baseline; }
 .oc-check-list > li::before { content: "✓"; color: var(--oc-brand-1); font-weight: 700; }
@@ -355,6 +431,8 @@
 .oc-site-header__nav a:not(.oc-btn):hover,
 .oc-site-header__nav a[aria-current="page"] { color: var(--oc-foreground); }
 .oc-site-header__toggle { display: none; padding: 0.5rem 0.7rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); color: var(--oc-foreground); cursor: pointer; }
+/* The icon in the menu button is a block, so the button is as tall as a line of text (no inline gap under it). */
+.oc-site-header__toggle :is(svg, img, iconify-icon, .oc-icon) { display: block; }
 @media (min-width: 861px) {
   /* Desktop: the popover nav is always visible in the header bar. */
   .oc-site-header__nav[popover] { display: flex; }
@@ -379,6 +457,8 @@
     backdrop-filter: blur(16px);
   }
   .oc-site-header__nav[popover] a:not(.oc-btn) { padding: 0.75rem 0; font-size: 1.1rem; }
+  /* The call to action (.oc-site-header__cta, a button) gets room above it in the open menu. */
+  .oc-site-header__cta { margin-block-start: 0.75rem; }
 }
 
 /* Site footer: brand column + link columns + bottom bar */
@@ -386,21 +466,33 @@
   margin-block-start: 4rem;
   padding-block-start: 4rem;
   border-block-start: 1px solid var(--oc-border);
-  background: linear-gradient(to bottom, transparent, var(--oc-surface-strong));
+  background: var(--oc-footer-bg, linear-gradient(to bottom, transparent, var(--oc-surface-strong)));
   color: var(--oc-muted-foreground);
   font-size: 0.95rem;
+  container-type: inline-size;
 }
-.oc-site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
+/* Columns: --oc-footer-cols (about + 3 link columns). Footer narrower than 66rem (about a 1060px screen):
+   --oc-footer-cols-md columns (3) with the about column over the full width; narrower than 54rem: two columns.
+   Container queries on the footer, so a footer in a narrow column or a preview follows its own width. */
+.oc-site-footer__grid { display: grid; grid-template-columns: var(--oc-footer-cols, 1.6fr repeat(3, 1fr)); gap: 2.5rem; }
 .oc-site-footer__about p { margin-block: 1rem 0; max-inline-size: 22rem; }
 .oc-site-footer__title { margin: 0 0 1rem; color: var(--oc-foreground); font-size: 0.95rem; font-weight: 700; }
 .oc-site-footer__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-style: normal; }
 .oc-site-footer a { color: inherit; text-decoration: none; }
 .oc-site-footer a:hover { color: var(--oc-foreground); }
-.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); font-size: 0.85rem; }
-@media (max-width: 860px) {
-  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+.oc-site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-block-start: 3rem; padding-block: 1.5rem; border-block-start: 1px solid var(--oc-border); color: var(--oc-footer-bottom-color, inherit); font-size: 0.85rem; }
+/* A second title further down in a column (e.g. "Tools" under the projects). */
+.oc-site-footer__subtitle { margin-block-start: 1.75rem; }
+/* Legal links in the bottom bar (Terms · Privacy · Cookies) and the build number after them. */
+.oc-site-footer__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
+.oc-site-footer__build { opacity: 0.7; font-variant-numeric: tabular-nums; }
+@container (max-width: 66rem) {
+  .oc-site-footer__grid { grid-template-columns: repeat(var(--oc-footer-cols-md, 3), minmax(0, 1fr)); }
   .oc-site-footer__about { grid-column: 1 / -1; }
 }
+@container (max-width: 54rem) {
+  .oc-site-footer__grid { grid-template-columns: 1fr 1fr; }
+}
 
 /* Reveal on scroll: elements slide in when they enter the viewport (scroll-driven, no JS; visible without support) */
 @supports (animation-timeline: view()) {

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,198 @@
       "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"
+      ]
+    },
+    {
+      "name": "panel",
+      "file": "snippets/panel.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "result",
+      "file": "snippets/result.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "brand-mark",
+      "file": "snippets/brand-mark.html",
+      "description": "A logo from an icon and text: the mark with a glow in the brand color, a word mark with one part in the brand gradient and a small tagline",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "page-sections",
+      "file": "snippets/page-sections.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "feature-card",
+      "file": "snippets/feature-card.html",
+      "description": "Cards for services and features (icon tile, title, text) and cards that are links, in a grid whose column width you set",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "icon-list",
+      "file": "snippets/icon-list.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "shot-grid",
+      "file": "snippets/shot-grid.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "fly-in",
+      "file": "snippets/fly-in.html",
+      "description": "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",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "hover-effects",
+      "file": "snippets/hover-effects.html",
+      "description": "Choose how a card reacts to the mouse: lift, grow, glow or stay still, with one smooth curve for all of them",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.5",
+  "version": "0.13.0",
   "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,11 @@
     "./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",
+    "./contact-form.js": "./dist/contact-form.js",
+    "./fly.js": "./dist/fly.js",
     "./manifest.json": "./manifest.json",
     "./package.json": "./package.json"
   },
@@ -57,7 +62,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.5"
+    "@birdycom/omniacss": "^0.13.0"
   },
   "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>