@birdycom/omniaui 0.12.4 → 0.12.6

package/dist/components.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.4. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.6. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {
@@ -486,14 +486,63 @@ flex-direction: column;
   border-radius: calc(var(--oc-radius) + 2px);
 }
 
+/* Square, exactly as tall as a text button of the same size, so both line up in a toolbar. */
 .oc-btn--icon {
-  padding: 0.5rem;
-  aspect-ratio: 1;
+  --oc-btn-square: calc(2.25rem + 2px);
+  padding: 0;
+  inline-size: var(--oc-btn-square);
+  block-size: var(--oc-btn-square);
+  flex-shrink: 0;
+}
+
+.oc-btn--icon.oc-btn--xs { --oc-btn-square: calc(1.75rem + 2px); }
+.oc-btn--icon.oc-btn--sm { --oc-btn-square: calc(2rem + 2px); }
+.oc-btn--icon.oc-btn--lg { --oc-btn-square: calc(2.5rem + 2px); }
+
+/* Webicons in a button: <iconify-icon> before (or after) the label, the same size as an inline SVG. */
+.oc-btn > iconify-icon { font-size: 1.15em; flex-shrink: 0; }
+
+/* Soft — tinted background in a tone, for row actions (edit, view, delete …) and quiet secondary actions.
+   --soft-primary | --soft-success | --soft-warning | --soft-destructive | --soft-info */
+.oc-btn[class*="oc-btn--soft-"] {
+  background: light-dark(oklch(from var(--oc-btn-tone) l c h / 0.12), oklch(from var(--oc-btn-tone) l c h / 0.22));
+  color: var(--oc-btn-tone);
+  border-color: transparent;
+}
+.oc-btn[class*="oc-btn--soft-"]:hover {
+  background: light-dark(oklch(from var(--oc-btn-tone) l c h / 0.2), oklch(from var(--oc-btn-tone) l c h / 0.32));
+  opacity: 1;
+}
+.oc-btn--soft-primary { --oc-btn-tone: var(--oc-primary); }
+.oc-btn--soft-success { --oc-btn-tone: var(--oc-success); }
+.oc-btn--soft-warning { --oc-btn-tone: var(--oc-warning); }
+.oc-btn--soft-destructive { --oc-btn-tone: var(--oc-destructive); }
+.oc-btn--soft-info { --oc-btn-tone: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+
+/* Plain — only the icon: no surface, no padding; muted until hovered (menus, toolbars, inline actions). */
+.oc-btn--plain {
+  padding: 0;
+  background: transparent;
+  border-color: transparent;
+  color: var(--oc-muted-foreground);
 }
+.oc-btn--plain:hover,
+.oc-btn--plain[aria-expanded="true"] { color: var(--oc-primary); opacity: 1; }
 
-.oc-btn--icon.oc-btn--xs { padding: 0.25rem; }
-.oc-btn--icon.oc-btn--sm { padding: 0.375rem; }
-.oc-btn--icon.oc-btn--lg { padding: 0.625rem; }
+/* Loading — aria-busy="true": a spinner in front of the label (it replaces a leading icon); not clickable. */
+.oc-btn[aria-busy="true"] { pointer-events: none; }
+.oc-btn[aria-busy="true"]::before {
+  content: "";
+  inline-size: 1em;
+  block-size: 1em;
+  flex-shrink: 0;
+  border: 2px solid currentColor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: oc-btn-spin 0.7s linear infinite;
+}
+.oc-btn[aria-busy="true"] > :is(svg, iconify-icon):first-child { display: none; }
+@keyframes oc-btn-spin { to { rotate: 360deg; } }
 
 /* Button group */
 .oc-btn-group {
@@ -1633,6 +1682,8 @@ textarea.oc-input {
 /* Vertical tabs */
 .oc-tab-list--vertical {
   flex-direction: column;
+  /* Every tab as wide as the list, so the active line on the right stays on one vertical line. */
+  align-items: stretch;
   border-bottom: none;
   border-right: 1px solid var(--oc-border);
 }
@@ -1645,7 +1696,9 @@ textarea.oc-input {
   text-align: left;
 }
 
-.oc-tab-list--vertical .oc-tab-trigger.is-active {
+.oc-tab-list--vertical .oc-tab-trigger.is-active,
+.oc-tab-list--vertical .oc-tab-trigger[aria-selected="true"] {
+  border-bottom-color: transparent;
   border-right-color: var(--oc-foreground);
 }
 
@@ -1848,6 +1901,12 @@ textarea.oc-input {
   border-radius: calc(var(--oc-radius) + 2px);
 }
 .oc-table-wrap > .oc-table { min-inline-size: 32rem; }
+/* The rounded frame draws the outer border; the cells keep only the inner lines, so nothing is cut at the corners. */
+.oc-table-wrap:has(> .oc-table) { border: 1px solid var(--oc-border); }
+.oc-table-wrap > .oc-table :is(th, td):first-child { border-inline-start: 0; }
+.oc-table-wrap > .oc-table :is(th, td):last-child { border-inline-end: 0; }
+.oc-table-wrap > .oc-table > :first-child > tr:first-child > * { border-block-start: 0; }
+.oc-table-wrap > .oc-table > :last-child > tr:last-child > * { border-block-end: 0; }
 
 /* ===================================================================
    Shared docs utility table styles (dark theme)
@@ -1984,6 +2043,42 @@ a.oc-breadcrumb-item:hover {
   font-weight: 500;
 }
 
+/* Icons: a webicon or SVG before the label of any item (the link or the item itself). */
+.oc-breadcrumb-item,
+.oc-breadcrumb-item a { gap: 0.375rem; }
+.oc-breadcrumb-item a { display: inline-flex; align-items: center; }
+.oc-breadcrumb-item :is(svg, iconify-icon) { font-size: 1.1em; inline-size: 1.1em; block-size: 1.1em; flex-shrink: 0; }
+
+/* --chevron: a › chevron between the items instead of "/". */
+.oc-breadcrumb--chevron .oc-breadcrumb-item + .oc-breadcrumb-item::before {
+  content: "";
+  inline-size: 1em;
+  block-size: 1em;
+  margin: 0 0.25rem;
+  background: currentColor;
+  color: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+/* Collapsed middle of a long trail: a "…" button (opens a menu with the hidden levels). */
+.oc-breadcrumb-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.75rem;
+  block-size: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font: inherit;
+  cursor: pointer;
+}
+.oc-breadcrumb-ellipsis:hover { background: var(--oc-accent); color: var(--oc-foreground); }
+.oc-breadcrumb-ellipsis:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
 /* ===================================================================
    PROGRESS BAR
    =================================================================== */
@@ -3670,6 +3765,9 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   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)); }
@@ -3769,17 +3867,44 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .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); }
@@ -3880,19 +4005,20 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
   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; }
 }
@@ -4053,7 +4179,7 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 
 @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; }
 }
 
 /* ===================================================================
@@ -4436,7 +4562,21 @@ details.oc-collapsible[open]::details-content { block-size: auto; }
 .oc-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px oklch(from var(--oc-ring) l c h / 0.28); }
 .oc-slider:disabled { opacity: 0.5; cursor: not-allowed; }
-.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: var(--oc-slider-thumb); block-size: 10rem; }
+/* In a vertical writing mode the inline axis is vertical: inline-size is the height of the slider. */
+.oc-slider--vertical { writing-mode: vertical-lr; direction: rtl; inline-size: 10rem; block-size: var(--oc-slider-thumb); }
+/* Scale under a stepped slider: one mark per step (or per labelled value), centered under the thumb positions.
+   The padding keeps the first and last mark under the thumb center at min and max. */
+.oc-slider-scale {
+  display: flex;
+  justify-content: space-between;
+  padding-inline: calc(var(--oc-slider-thumb, 1.125rem) / 2);
+  margin-block-start: 0.25rem;
+  font-size: 0.6875rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--oc-muted-foreground);
+}
+.oc-slider-scale > * { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; inline-size: 0; }
+.oc-slider-scale > *::before { content: ""; inline-size: 1px; block-size: 0.375rem; background: var(--oc-border); }
 .oc-slider--vertical::-webkit-slider-runnable-track {
   background: linear-gradient(to top, var(--oc-primary) var(--oc-slider-progress), var(--oc-muted) var(--oc-slider-progress));
 }
@@ -5439,93 +5579,6 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
 @keyframes oc-busy-in { from { opacity: 0; } }
 @media (prefers-reduced-motion: reduce) { .oc-busy-overlay[open], .oc-busy-overlay[open]::backdrop { animation-duration: 0s; } }
 
-/* parts/app-column-menu.css */
-/* File: packages/ui/src/parts/app-column-menu.css | Map: menu panel -> title + list -> item states -> footer -> CSS-only column hiding (scope) */
-/* Column menu: a popover with one checkbox per table column (column visibility).
-   CSS-only hiding: wrap the menu and the table in .oc-column-menu-scope and give each checkbox
-   data-col="<column number>". An unchecked box hides that column (th and td) through :has(). */
-
-/* Panel look. Without the popover attribute it is a normal block (e.g. inside a sheet or sidebar). */
-.oc-column-menu {
-  inline-size: 14rem;
-  max-inline-size: calc(100vw - 1rem);
-  padding: 0.375rem;
-  font-size: 0.875rem;
-  color: var(--oc-popover-foreground);
-  background: var(--oc-popover);
-  border: 1px solid var(--oc-border);
-  border-radius: var(--oc-radius);
-  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
-}
-/* As a popover: in the top layer, tethered to its trigger like the dropdown. */
-.oc-column-menu[popover] {
-  position: fixed;
-  inset: auto;
-  margin: 4px 0 0;
-  position-area: block-end span-inline-start;
-  position-try-fallbacks: flip-block, flip-inline;
-  transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
-}
-.oc-column-menu[popover]:popover-open {
-  display: block;
-  @starting-style { opacity: 0; }
-}
-
-/* Small heading above the list ("Columns"). */
-.oc-column-menu-title {
-  margin: 0;
-  padding: 0.375rem 0.5rem 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--oc-muted-foreground);
-}
-
-/* The list is a <form>, so a native <button type="reset"> restores the default columns. */
-.oc-column-menu-list { display: grid; gap: 1px; margin: 0; max-block-size: 18rem; overflow-y: auto; }
-
-/* One row: label around a checkbox and the column name. */
-.oc-column-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-  user-select: none;
-}
-.oc-column-menu-item:hover { background: var(--oc-accent); }
-.oc-column-menu-item:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
-.oc-column-menu-item input { margin: 0; accent-color: var(--oc-primary); }
-/* Locked column (always visible): <input disabled checked>. */
-.oc-column-menu-item:has(input:disabled) { color: var(--oc-muted-foreground); cursor: default; }
-.oc-column-menu-item:has(input:disabled):hover { background: none; }
-
-/* Footer row with "Reset" (type="reset") or other small buttons. */
-.oc-column-menu-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.25rem;
-  margin-block-start: 0.375rem;
-  padding-block-start: 0.375rem;
-  border-block-start: 1px solid var(--oc-border);
-}
-
-/* ---- CSS-only column hiding (columns 1 to 10) ---- */
-.oc-column-menu-scope:has([data-col="1"]:not(:checked)) .oc-table :is(th, td):nth-child(1),
-.oc-column-menu-scope:has([data-col="2"]:not(:checked)) .oc-table :is(th, td):nth-child(2),
-.oc-column-menu-scope:has([data-col="3"]:not(:checked)) .oc-table :is(th, td):nth-child(3),
-.oc-column-menu-scope:has([data-col="4"]:not(:checked)) .oc-table :is(th, td):nth-child(4),
-.oc-column-menu-scope:has([data-col="5"]:not(:checked)) .oc-table :is(th, td):nth-child(5),
-.oc-column-menu-scope:has([data-col="6"]:not(:checked)) .oc-table :is(th, td):nth-child(6),
-.oc-column-menu-scope:has([data-col="7"]:not(:checked)) .oc-table :is(th, td):nth-child(7),
-.oc-column-menu-scope:has([data-col="8"]:not(:checked)) .oc-table :is(th, td):nth-child(8),
-.oc-column-menu-scope:has([data-col="9"]:not(:checked)) .oc-table :is(th, td):nth-child(9),
-.oc-column-menu-scope:has([data-col="10"]:not(:checked)) .oc-table :is(th, td):nth-child(10) { display: none; }
-
-@media (prefers-reduced-motion: reduce) {
-  .oc-column-menu[popover] { transition: none; }
-}
-
 /* parts/app-confirm-dialog.css */
 /* File: packages/ui/src/parts/app-confirm-dialog.css | Map: confirm modifier (icon ring) -> close button -> typed confirm field -> confirm lock -> three-button footer -> narrow screens */
 /* Confirm dialog: a variant of the alert dialog (dialog.oc-modal + .oc-alert-dialog).
@@ -5663,9 +5716,213 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
 }
 @media (prefers-reduced-motion: reduce) { .oc-cookie-consent { transition: none; } }
 
+/* parts/app-data-table-footer.css */
+/* File: packages/ui/src/parts/app-data-table-footer.css | Map: footer grid (count, rows per page, pager) -> page buttons -> narrow screens */
+/* Footer of the list table (app-data-table.css): the count on the left, rows per page in the middle, the pager on the right. */
+
+/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
+.oc-data-table-footer {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 0.75rem;
+}
+.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
+.oc-data-table-per-page .oc-select { inline-size: auto; }
+.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
+.oc-data-table-page {
+  min-inline-size: 2rem;
+  padding: 0.25rem 0.45rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-data-table-page[aria-current="page"] {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-color: oklch(from var(--oc-primary) l c h / 0.35);
+}
+.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
+.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
+
+@media (max-width: 40rem) {
+  .oc-data-table-footer { grid-template-columns: 1fr; }
+  .oc-data-table-pager { justify-content: flex-start; }
+}
+
+/* parts/app-data-table-rich.css */
+/* File: packages/ui/src/parts/app-data-table-rich.css | Map: control height -> header (sort icons, columns) -> type tabs -> filter row -> name, truncate and count cells -> card fields */
+/* The rich relations list on top of app-data-table.css: tabs that filter a column, filter selects with an icon,
+   rich cells and the label/value lines of the card view. Behaviour: data-oc-col-filter in src/data-table.js. */
+
+/* Every control is 2rem high: search, filter selects, trash pills, icon buttons, rows per page and the pager. */
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, .oc-data-table-footer) :is(.oc-input, .oc-select) { block-size: 2rem; padding-block: 0; font-size: 0.8125rem; }
+.oc-data-table .oc-data-table-page { min-block-size: 2rem; }
+.oc-data-table :is(.oc-data-table-toolbar, .oc-data-table-filters, thead) .oc-btn--icon { --oc-btn-square: 2rem; }
+.oc-data-table-toolbar .oc-filter-pill {
+  display: inline-flex;
+  align-items: center;
+  block-size: 2rem;
+  padding-inline: 0.625rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+
+/* Header: the sort mark only on the sorted column (and on hover); the actions header holds the column button. */
+/* The sort mark always keeps its 1rem, so sorting another column never moves the header: empty while unsorted,
+   faint chevrons on hover, the accent sort icon on the sorted column. */
+:is(.oc-data-table, .oc-block-datatable) th:has(.oc-table-sort) { cursor: pointer; }
+:is(.oc-data-table, .oc-block-datatable) th .oc-table-sort::after { content: ""; flex-shrink: 0; inline-size: 1rem; block-size: 1rem; opacity: 1; }
+:is(.oc-data-table, .oc-block-datatable) th:not([aria-sort]):hover .oc-table-sort::after {
+  background: var(--oc-muted-foreground);
+  opacity: 0.6;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+/* Sorted column: a bold label and a sort icon in the accent color. aria-sort on a header in the HTML
+   is the column sorted when the page opens. */
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort { color: var(--oc-foreground); }
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort] .oc-table-sort::after {
+  content: "";
+  inline-size: 1rem;
+  block-size: 1rem;
+  opacity: 1;
+  background: var(--oc-primary);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 17h3l-4 4l-4-4h3V3h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+:is(.oc-data-table, .oc-block-datatable) th[aria-sort="descending"] .oc-table-sort::after {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 7h3l-4-4l-4 4h3v14h2M2 17h10v2H2M6 5v2H2V5m0 6h7v2H2z'/%3E%3C/svg%3E");
+}
+.oc-data-table th[data-oc-col="actions"] .oc-data-table-th { justify-content: flex-end; gap: 0.5rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-data-table td[data-oc-col="actions"] { text-align: end; }
+/* Row actions per status: data-oc-when="active" (edit, view) only on live rows, data-oc-when="deleted" (restore,
+   delete permanently) only on rows in the trash. */
+.oc-data-table tr[data-oc-status="deleted"] [data-oc-when="active"],
+.oc-data-table tr:not([data-oc-status="deleted"]) [data-oc-when="deleted"] { display: none; }
+/* The column chooser in the actions header: a large plain icon (1.75rem), no button frame. */
+.oc-data-table-columns-btn { font-size: 1.75rem; }
+.oc-data-table-columns-btn > :is(svg, iconify-icon) { font-size: 1em; inline-size: 1em; block-size: 1em; }
+
+/* Tabs above the toolbar (All / Customers / Companies …): icon, label and a count; they filter one column. */
+.oc-data-table-tabs { display: flex; inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
+.oc-data-table-tabs .oc-tab-trigger { flex-shrink: 0; }
+.oc-data-table-tabs .oc-tab-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
+.oc-data-table-tabs .oc-tab-trigger :is(svg, iconify-icon) { font-size: 1.1em; inline-size: 1.1em; block-size: 1.1em; }
+.oc-data-table-tabs .oc-tab-trigger[aria-selected="true"] { color: var(--oc-primary); border-bottom-color: var(--oc-primary); }
+.oc-data-table-tab-count {
+  min-inline-size: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.6875rem;
+  line-height: 1.125rem;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border-radius: 999px;
+}
+.oc-data-table-tabs [aria-selected="true"] .oc-data-table-tab-count { color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.12); }
+/* A count in the color of its type (the same tone as the type badge in the table). */
+.oc-data-table-tab-count:is(.oc-data-table-tab-count--success, .oc-data-table-tab-count--info, .oc-data-table-tab-count--warning) {
+  color: var(--oc-tab-tone);
+  background: oklch(from var(--oc-tab-tone) l c h / 0.12);
+  box-shadow: inset 0 0 0 1px oklch(from var(--oc-tab-tone) l c h / 0.35);
+}
+.oc-data-table-tab-count--success { --oc-tab-tone: var(--oc-success); }
+.oc-data-table-tab-count--info { --oc-tab-tone: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+.oc-data-table-tab-count--warning { --oc-tab-tone: var(--oc-warning); }
+
+/* Filter row: selects with a leading icon (status, type …) and the column button on the right. */
+.oc-data-table-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.oc-data-table-filters[hidden] { display: none; }
+.oc-data-table-filters > :last-child:is(.oc-btn) { margin-inline-start: auto; }
+.oc-data-table-filter { position: relative; display: inline-flex; align-items: center; }
+.oc-data-table-filter > :is(svg, iconify-icon) {
+  position: absolute;
+  inset-inline-start: 0.625rem;
+  font-size: 1rem;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: var(--oc-muted-foreground);
+  pointer-events: none;
+}
+.oc-data-table-filter > .oc-select { inline-size: auto; min-inline-size: 11rem; padding-inline-start: 2.125rem; }
+
+/* Cells. Name: avatar, name with a badge, and a muted second line (VAT number, e-mail …). */
+.oc-data-table-name { display: flex; align-items: center; gap: 0.625rem; min-inline-size: 0; }
+.oc-data-table-name .oc-avatar { inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.75rem; }
+.oc-data-table-name-text { display: grid; min-inline-size: 0; }
+.oc-data-table-name-line { display: flex; align-items: center; gap: 0.375rem; font-weight: 600; }
+.oc-data-table-name-sub { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+/* One line with an ellipsis; put the full text in title="". */
+.oc-data-table-truncate { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: var(--oc-data-table-truncate, 18rem); }
+/* A count that opens the related list (projects, invoices …); muted while it is 0. */
+.oc-data-table-count { font-variant-numeric: tabular-nums; }
+.oc-data-table-count[data-count="0"] { color: var(--oc-muted-foreground); opacity: 0.75; }
+/* The sort is visible in the header (icon, bold label); the summary line is for screen readers only. */
+.oc-data-table-sort-summary {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.oc-data-table-file { display: none; }
+
+/* The other visible columns as label / value lines, and the row actions at the bottom. */
+.oc-data-table-card-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.75rem; margin: 0; font-size: 0.8125rem; }
+.oc-data-table-card-fields dt { color: var(--oc-muted-foreground); }
+.oc-data-table-card-fields dd { margin: 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.oc-data-table-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; margin-block-start: auto; }
+
+/* Code cells (article numbers, SKUs): monospace and a step smaller. */
+.oc-data-table-code { font-family: var(--oc-font-mono); font-size: 0.75rem; }
+
+/* Version 2, ".oc-data-table--bordered": a tinted header row, a line between the columns and the
+   sort chevrons always visible; the filter select has its icon in a zone of its own. The rest is the same table. */
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td) { border-inline-end: 1px solid var(--oc-border); }
+.oc-data-table.oc-data-table--bordered .oc-table :is(th, td):last-child { border-inline-end: 0; }
+.oc-data-table.oc-data-table--bordered .oc-table thead th {
+  font-weight: 500;
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table.oc-data-table--bordered .oc-table thead th[data-oc-col="actions"] {
+  background: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 4%);
+}
+.oc-data-table--bordered td[data-oc-col="actions"] { text-align: center; }
+.oc-data-table--bordered th[data-oc-col="actions"] .oc-data-table-th { justify-content: center; }
+.oc-data-table--bordered th:not([aria-sort]) .oc-table-sort::after,
+.oc-data-table--bordered th:not([aria-sort]):hover .oc-table-sort::after {
+  content: "";
+  inline-size: 0.875rem;
+  block-size: 0.875rem;
+  opacity: 0.5;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18.17L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9z'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.oc-data-table--bordered .oc-data-table-filter::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 2rem;
+  inline-size: 1px;
+  background: var(--oc-border);
+  pointer-events: none;
+}
+.oc-data-table--bordered .oc-data-table-filter > .oc-select { padding-inline-start: 2.75rem; }
+
 /* parts/app-data-table.css */
-/* File: packages/ui/src/parts/app-data-table.css | Map: shell -> toolbar -> frame and scroll -> header resize -> select and actions columns -> deleted row -> bulk bar -> card view -> footer and pager -> compact density */
-/* List table from Korrekt and OmniaDesk. The frame, toolbar and footer are styling.
+/* File: packages/ui/src/parts/app-data-table.css | Map: shell -> toolbar -> frame and scroll -> header label -> select and actions columns -> deleted row -> bulk bar -> card view -> compact density */
+/* List table for business apps. The frame, toolbar and footer are styling. Tabs, filter row, rich cells and
+   card fields: app-data-table-rich.css; footer and pager: app-data-table-footer.css.
    Behaviour (search, sort, pages, resize, drag, trash, bulk) lives in src/data-table.js.
    Set --oc-data-table-max on the shell when the body should scroll and the header should stick. */
 
@@ -5678,13 +5935,16 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: var(--oc-radius);
+  /* Full width, and in a grid or flex parent the table scrolls inside the frame instead of stretching the card. */
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
-/* Toolbar: title + gear, search, trash pills, table/cards toggle, page actions. */
+/* Toolbar: title + gear/filter button, search (takes the free width), trash pills, table/cards toggle, page actions. */
 .oc-data-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
 .oc-data-table-heading { display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0; }
 .oc-data-table-title { font-size: 0.875rem; font-weight: 600; }
-.oc-data-table-search { flex: 1 1 12rem; min-inline-size: 10rem; max-inline-size: 22rem; }
+.oc-data-table-search { flex: 1 1 10rem; min-inline-size: 9rem; }
 .oc-data-table-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-inline-start: auto; }
 .oc-data-table-view { display: inline-flex; gap: 0.25rem; }
 .oc-data-table-view [aria-pressed="true"] {
@@ -5692,55 +5952,52 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: oklch(from var(--oc-primary) l c h / 0.1);
   border-color: oklch(from var(--oc-primary) l c h / 0.35);
 }
-.oc-data-table-sort-summary { flex-basis: 100%; margin: 0; font-size: 0.75rem; color: var(--oc-muted-foreground); }
-.oc-data-table-sort-summary:empty { display: none; }
-.oc-data-table-file { display: none; }
+/* In the toolbar the trash pills read as one switch: the chosen one is filled. */
+.oc-data-table-toolbar .oc-filter-pills { border-inline-start: 0; padding-inline-start: 0; }
+.oc-data-table-toolbar .oc-filter-pill[aria-current="true"] {
+  color: var(--oc-primary-foreground);
+  background: var(--oc-primary);
+  border-color: var(--oc-primary);
+}
 
 /* The table sits in its own rounded frame. The scroll box keeps the header sticky. */
 .oc-data-table-frame {
+  min-inline-size: 0;
   overflow: hidden;
-  background: var(--oc-background);
+  background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: calc(var(--oc-radius) - 2px);
 }
 .oc-data-table-scroll { overflow: auto; max-block-size: var(--oc-data-table-max, none); }
 .oc-data-table .oc-table :is(th, td) { border-inline: 0; border-block-start: 0; }
+/* Columns size to their content and cells stay on one line: a narrow screen scrolls the frame sideways instead of
+   squeezing names and phone numbers onto two lines. .oc-data-table-wrap on a cell lets long text wrap again. */
+.oc-data-table .oc-data-table-table { table-layout: auto; }
+.oc-data-table .oc-data-table-table :is(th, td) { white-space: nowrap; vertical-align: middle; padding-inline: 0.625rem; }
+.oc-data-table .oc-data-table-table td.oc-data-table-wrap { white-space: normal; }
 .oc-data-table .oc-table thead th {
   position: sticky;
   inset-block-start: 0;
   z-index: 1;
-  block-size: 2.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  block-size: 2.75rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--oc-foreground);
   background: var(--oc-card);
 }
-.oc-data-table .oc-table tbody tr:nth-child(even) { background: var(--oc-surface); }
+/* Striped rows (every second visible row), the row under the pointer a step stronger. Solid colors, so the sticky
+   actions cell can take the same background (inherit) and nothing scrolls through it. */
+.oc-data-table {
+  --oc-data-table-stripe: color-mix(in oklch, var(--oc-card), var(--oc-foreground) 3.5%);
+  --oc-data-table-hover: color-mix(in oklch, var(--oc-card), var(--oc-primary) 8%);
+}
+.oc-data-table .oc-table tbody tr:nth-child(even of :not([hidden])) { background: var(--oc-data-table-stripe); }
+.oc-data-table .oc-table tbody tr:hover { background: var(--oc-data-table-hover); }
+.oc-data-table--plain .oc-table tbody tr:nth-child(even of :not([hidden])):not(:hover) { background: none; }
 .oc-data-table .oc-table tbody tr:last-child > td { border-block-end: 0; }
 
-/* Header label and the drag handle that sets the column width. */
-.oc-data-table-th { display: flex; align-items: center; gap: 0.25rem; position: relative; min-inline-size: 0; }
-.oc-data-table-resize {
-  position: absolute;
-  inset-block: 0;
-  inset-inline-end: -0.45rem;
-  inline-size: 0.55rem;
-  padding: 0;
-  background: none;
-  border: 0;
-  cursor: col-resize;
-  touch-action: none;
-}
-.oc-data-table-resize::after {
-  content: "";
-  position: absolute;
-  inset-block: 0.4rem;
-  inset-inline-start: 0.25rem;
-  inline-size: 1px;
-  background: var(--oc-border);
-}
-.oc-data-table.is-resizing { cursor: col-resize; user-select: none; }
-/* After a resize the table grows with its columns and the frame scrolls sideways. */
-.oc-data-table-table--sized { inline-size: max-content; min-inline-size: 100%; }
+/* Header label (column width by dragging is OmniaUI Pro: app-data-table-pro.css). */
+.oc-data-table-th { display: flex; align-items: center; gap: 0.25rem; min-inline-size: 0; }
 
 /* Narrow control columns. The actions column stays on the right while the rest scrolls. */
 .oc-data-table .oc-table :is(th, td)[data-oc-col="select"],
@@ -5756,8 +6013,8 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   background: var(--oc-card);
   box-shadow: -1px 0 0 var(--oc-border);
 }
-.oc-data-table .oc-table thead th[data-oc-col="actions"] { z-index: 3; }
-.oc-data-table .oc-table tbody tr:nth-child(even) > td[data-oc-col="actions"] { background: var(--oc-surface); }
+.oc-data-table .oc-table thead th[data-oc-col="actions"] { z-index: 3; background: var(--oc-card); }
+.oc-data-table .oc-table tbody tr:is(:nth-child(even of :not([hidden])), :hover) > td[data-oc-col="actions"] { background: inherit; }
 
 /* Trash and archive rows stay readable but quieter than active rows. */
 .oc-data-table tr[data-oc-status="deleted"],
@@ -5786,55 +6043,24 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   padding: 0.75rem;
 }
 .oc-data-table-card {
-  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.875rem;
   background: var(--oc-card);
   border: 1px solid var(--oc-border);
   border-radius: calc(var(--oc-radius) - 2px);
 }
 .oc-data-table-card-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
-
+.oc-data-table-card-title .oc-data-table-name-sub { font-weight: 400; }
 .oc-data-table-empty { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--oc-muted-foreground); }
 .oc-data-table-empty[hidden] { display: none; }
 
-/* Footer: count on the left, rows-per-page in the middle, pager on the right. */
-.oc-data-table-footer {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 0.75rem;
-}
-.oc-data-table-summary { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-.oc-data-table-per-page { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; }
-.oc-data-table-per-page .oc-select { inline-size: auto; }
-.oc-data-table-pager { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; }
-.oc-data-table-page {
-  min-inline-size: 2rem;
-  padding: 0.25rem 0.45rem;
-  font: inherit;
-  font-size: 0.8125rem;
-  color: var(--oc-foreground);
-  background: var(--oc-card);
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) - 2px);
-  cursor: pointer;
-}
-.oc-data-table-page[aria-current="page"] {
-  color: var(--oc-primary);
-  background: oklch(from var(--oc-primary) l c h / 0.1);
-  border-color: oklch(from var(--oc-primary) l c h / 0.35);
-}
-.oc-data-table-page:disabled { opacity: 0.4; cursor: default; }
-.oc-data-table-page:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-.oc-data-table-ellipsis { padding-inline: 0.25rem; color: var(--oc-muted-foreground); }
 
 /* Design choice from the gear menu: tighter rows, like the compact article lists. */
 .oc-data-table--compact .oc-table :is(th, td) { padding: 0.25rem 0.5rem; font-size: 0.8125rem; }
 .oc-data-table--compact .oc-table thead th { block-size: 2rem; }
 
-@media (max-width: 40rem) {
-  .oc-data-table-footer { grid-template-columns: 1fr; }
-  .oc-data-table-pager { justify-content: flex-start; }
-}
 @media (prefers-reduced-motion: reduce) {
   .oc-data-table .oc-table tbody tr { transition: none; }
 }
@@ -5971,6 +6197,73 @@ input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
   .oc-list-toolbar-view { transition: none; }
 }
 
+/* parts/app-name-card.css */
+/* File: packages/ui/src/parts/app-name-card.css | Map: card (details) -> head (chevron, name, rename, amount, actions) -> rename input -> body -> nested cards */
+/* Name card: a collapsible card for one part of a quote or plan,
+   with its name, a rename pencil, an optional amount and a delete button. Native <details>: it opens without script;
+   packages/ui/src/name-card.js adds the rename (pencil -> input, Enter saves, Escape cancels). */
+
+.oc-name-card {
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-name-card + .oc-name-card { margin-block-start: 0.5rem; }
+.oc-name-card__head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-block-size: 2.75rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+  list-style: none;
+  cursor: pointer;
+}
+.oc-name-card__head::-webkit-details-marker { display: none; }
+.oc-name-card__head::before {
+  content: "";
+  flex-shrink: 0;
+  inline-size: 1rem;
+  block-size: 1rem;
+  background: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-name-card[open] > .oc-name-card__head::before { rotate: 90deg; }
+.oc-name-card__head:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; border-radius: var(--oc-radius); }
+.oc-name-card__title { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.oc-name-card__meta { font-size: 0.75rem; color: var(--oc-muted-foreground); white-space: nowrap; }
+.oc-name-card__head .oc-btn { flex-shrink: 0; }
+/* Amount and actions sit on the right; the amount is tabular so a column of cards lines up. */
+.oc-name-card__amount { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-name-card__actions { display: inline-flex; flex-shrink: 0; gap: 0.25rem; margin-inline-start: auto; }
+.oc-name-card__amount + .oc-name-card__actions { margin-inline-start: 0.5rem; }
+
+/* Rename: the title becomes an input of the same size (hidden toggles between the two). */
+.oc-name-card__input {
+  flex: 1;
+  min-inline-size: 0;
+  block-size: 2rem;
+  padding: 0 0.5rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--oc-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-ring);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-name-card__input[hidden],
+.oc-name-card__title[hidden] { display: none; }
+
+.oc-name-card__body { padding: 0.75rem 0.75rem 0.875rem 2.25rem; border-block-start: 1px solid var(--oc-border); }
+/* Nested cards (the parts of a title) use a quieter surface; --total colors the amount of the main card. */
+.oc-name-card__body > .oc-name-card { background: var(--oc-surface); }
+.oc-name-card--total > .oc-name-card__head .oc-name-card__amount { color: var(--oc-primary); }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-name-card__head::before { transition: none; }
+}
+
 /* parts/app-page-header.css */
 /* File: packages/ui/src/parts/app-page-header.css | Map: header (container) -> back link row -> main row (text + actions) -> title + subtitle + meta -> wide layout (@container) -> modifiers (bordered, sticky, sm) */
 /* Page header: back link + title + subtitle + actions at the top of an app page.
@@ -6455,6 +6748,11 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   min-block-size: 0;
   timeline-scope: --oc-titlebar-scroll;
 }
+/* A card with a title bar on top: the bar runs edge to edge, its last button follows the card corner. */
+.oc-card:has(> .oc-titlebar:first-child) { padding: 0; --oc-titlebar-radius: calc(var(--oc-radius) + 3px); }
+/* As the heading of a card section (bar + .oc-card-content): the title lines up with the content below. */
+.oc-card > .oc-titlebar:first-child:has(+ .oc-card-content) { padding-inline-start: 24px; }
+.oc-card > .oc-titlebar:first-child:has(+ .oc-card-content) .oc-titlebar__title { font-size: 0.9375rem; }
 
 .oc-titlebar {
   display: flex;
@@ -6462,7 +6760,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   align-items: center;
   gap: 2px;
   min-block-size: 46px;
-  padding: 0 8px 0 14px;
+  padding: 0 0 0 14px;
   border-block-end: 1px solid transparent;
   -webkit-user-select: none;
   user-select: none;
@@ -6479,7 +6777,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Title area: grows, cuts the subtitle off with …. */
 .oc-titlebar__main { display: flex; flex: 1; align-items: center; gap: 8px; min-inline-size: 0; }
 .oc-titlebar__icon { flex: none; inline-size: 18px; block-size: 18px; }
-.oc-titlebar__title { flex: none; font-size: 0.8667rem; font-weight: 650; letter-spacing: -0.01em; }
+.oc-titlebar__title { flex: none; margin: 0; font-size: 0.8667rem; font-weight: 650; letter-spacing: -0.01em; }
 .oc-titlebar__subtitle {
   min-inline-size: 0;
   overflow: hidden;
@@ -6489,17 +6787,19 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   white-space: nowrap;
 }
 .oc-titlebar__subtitle::before { content: "·"; margin-inline-end: 8px; }
-.oc-titlebar__actions { display: flex; flex: none; align-items: center; gap: 2px; }
+/* Window buttons sit in the top right corner (as on a desktop window), not centred on the title line. */
+.oc-titlebar__actions { display: flex; flex: none; align-self: flex-start; align-items: flex-start; margin-inline-start: auto; }
 
-/* Compact icon buttons: muted, a light surface on hover, the close button red. */
+/* Window buttons: muted, a light surface on hover, the close button red. The last one follows the
+   rounded corner of the card or window around the bar (--oc-titlebar-radius). */
 .oc-titlebar__btn {
   display: inline-grid;
   place-items: center;
-  inline-size: 30px;
-  block-size: 30px;
+  inline-size: 40px;
+  block-size: 34px;
   padding: 0;
   border: 0;
-  border-radius: 8px;
+  border-radius: 0;
   background: transparent;
   color: var(--oc-muted-foreground);
   font: inherit;
@@ -6510,6 +6810,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 .oc-titlebar__btn:hover { background: var(--oc-glass-panel-strong, var(--oc-accent)); color: var(--oc-foreground); }
 .oc-titlebar__btn:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
 .oc-titlebar__btn--close:hover { background: var(--oc-destructive); color: var(--oc-destructive-foreground); }
+.oc-titlebar__actions > .oc-titlebar__btn:last-child { border-start-end-radius: var(--oc-titlebar-radius, calc(var(--oc-radius) - 1px)); }
 
 /* Body: the part that scrolls under the bar. */
 .oc-titlebar-body {
@@ -6534,7 +6835,7 @@ button.oc-stat-card:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 
 /* Sizes */
 .oc-titlebar--sm { min-block-size: 36px; padding-inline-start: 10px; }
-.oc-titlebar--sm .oc-titlebar__btn { inline-size: 26px; block-size: 26px; border-radius: 6px; }
+.oc-titlebar--sm .oc-titlebar__btn { inline-size: 34px; block-size: 28px; }
 
 @media (prefers-reduced-motion: reduce) {
   .oc-titlebar-window > .oc-titlebar { animation: none; }
@@ -7059,6 +7360,229 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
   .oc-chart-line__dot, .oc-chart-line__tip { transition: none; }
 }
 
+/* parts/data-meter-row.css */
+/* File: packages/ui/src/parts/data-meter-row.css | Map: row grid -> label and value -> bar and fill -> levels -> reset line -> list */
+/* Usage meter row: a label, the usage as text, a bar and when it resets. The fill comes from
+   --oc-meter (0–100%); data-level="warn" or "critical" changes the color. */
+
+.oc-meter-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.375rem 0.75rem;
+}
+.oc-meter-row__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600; }
+.oc-meter-row__value { font-size: 0.8125rem; font-variant-numeric: tabular-nums; color: var(--oc-muted-foreground); white-space: nowrap; }
+.oc-meter-row__value strong { color: var(--oc-foreground); }
+.oc-meter-row__bar {
+  grid-column: 1 / -1;
+  block-size: 0.5rem;
+  overflow: hidden;
+  background: var(--oc-muted);
+  border-radius: 999px;
+}
+.oc-meter-row__bar::before {
+  content: "";
+  display: block;
+  inline-size: clamp(0%, var(--oc-meter, 0%), 100%);
+  block-size: 100%;
+  background: var(--oc-meter-color, var(--oc-success));
+  border-radius: inherit;
+  transition: inline-size 0.4s ease;
+}
+.oc-meter-row[data-level="warn"] { --oc-meter-color: var(--oc-warning); }
+.oc-meter-row[data-level="critical"] { --oc-meter-color: var(--oc-destructive); }
+.oc-meter-row[data-level="critical"] .oc-meter-row__value strong { color: var(--oc-destructive); }
+.oc-meter-row__reset { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-meter-list { display: grid; gap: 1rem; }
+.oc-meter-list--compact { gap: 0.625rem; }
+.oc-meter-list--compact .oc-meter-row__bar { block-size: 0.375rem; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-meter-row__bar::before { transition: none; }
+}
+
+/* parts/data-price.css */
+/* File: packages/ui/src/parts/data-price.css | Map: price block -> main line (amount, old price, discount) -> VAT note and alternative -> sizes and sale */
+/* A price as shops and quotes show it: the amount, an optional old price and discount badge, a VAT note
+   ("excl. VAT") and the other amount ("€ 121,00 incl. VAT"). Numbers use tabular digits. */
+
+.oc-price { display: inline-grid; gap: 0.125rem; min-inline-size: 0; }
+.oc-price__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
+.oc-price__amount { font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-price__old { font-size: 0.875rem; color: var(--oc-muted-foreground); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.oc-price__main > .oc-badge { align-self: center; }
+.oc-price__note { font-size: 0.75rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-price__alt { font-size: 0.8125rem; color: var(--oc-muted-foreground); font-variant-numeric: tabular-nums; }
+
+.oc-price--sm .oc-price__amount { font-size: 1rem; }
+.oc-price--lg .oc-price__amount { font-size: 1.75rem; }
+.oc-price--sale .oc-price__amount { color: var(--oc-destructive); }
+/* Inline: amount and note on one line (table cells, lists). */
+.oc-price--inline { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
+.oc-price--inline .oc-price__amount { font-size: inherit; font-weight: 600; }
+td[data-numeric] > .oc-price, .oc-price--end { justify-items: end; text-align: end; }
+td[data-numeric] > .oc-price .oc-price__main, .oc-price--end .oc-price__main { justify-content: flex-end; }
+
+/* parts/data-ribbon.css */
+/* File: packages/ui/src/parts/data-ribbon.css | Map: host (positioned, clipped) -> ribbon band -> four corners -> tones -> size -> RTL */
+/* Corner ribbon: a diagonal band across one corner of a card, an image or a document ("Paid", "New", "Sale").
+   Put .oc-ribbon as a child of the box; the box gets position: relative and clips the band (zero specificity,
+   so your own position or overflow wins). The text is real text, so screen readers read it. */
+
+:where(:has(> .oc-ribbon)) { position: relative; overflow: clip; }
+
+.oc-ribbon {
+  /* Distance from the corner to the middle of the band, along both edges. */
+  --oc-ribbon-inset: 2.25rem;
+  --oc-ribbon-x: 1;
+  --oc-ribbon-y: -1;
+  --oc-ribbon-turn: 45deg;
+  --oc-ribbon-bg: var(--oc-primary);
+  --oc-ribbon-fg: var(--oc-primary-foreground);
+  position: absolute;
+  z-index: 2;
+  inset-block-start: var(--oc-ribbon-inset);
+  inset-inline-end: var(--oc-ribbon-inset);
+  inline-size: calc(var(--oc-ribbon-inset) * 2.83 + 3rem);
+  padding: 0.3em 0;
+  overflow: hidden;
+  color: var(--oc-ribbon-fg);
+  background: var(--oc-ribbon-bg);
+  box-shadow: 0 1px 3px oklch(0 0 0 / 0.18);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1.25;
+  letter-spacing: 0.08em;
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+  pointer-events: none;
+  translate: calc(50% * var(--oc-ribbon-x)) calc(50% * var(--oc-ribbon-y));
+  rotate: var(--oc-ribbon-turn);
+}
+
+/* Corners: top end is the default. */
+.oc-ribbon--top-start {
+  inset-inline-end: auto;
+  inset-inline-start: var(--oc-ribbon-inset);
+  --oc-ribbon-x: -1;
+  --oc-ribbon-turn: -45deg;
+}
+.oc-ribbon--bottom-end {
+  inset-block-start: auto;
+  inset-block-end: var(--oc-ribbon-inset);
+  --oc-ribbon-y: 1;
+  --oc-ribbon-turn: -45deg;
+}
+.oc-ribbon--bottom-start {
+  inset-block-start: auto;
+  inset-block-end: var(--oc-ribbon-inset);
+  inset-inline-end: auto;
+  inset-inline-start: var(--oc-ribbon-inset);
+  --oc-ribbon-x: -1;
+  --oc-ribbon-y: 1;
+}
+
+/* Tones. */
+.oc-ribbon--success { --oc-ribbon-bg: var(--oc-success); --oc-ribbon-fg: var(--oc-success-foreground); }
+.oc-ribbon--warning { --oc-ribbon-bg: var(--oc-warning); --oc-ribbon-fg: var(--oc-warning-foreground); }
+.oc-ribbon--destructive { --oc-ribbon-bg: var(--oc-destructive); --oc-ribbon-fg: var(--oc-destructive-foreground); }
+.oc-ribbon--muted { --oc-ribbon-bg: var(--oc-muted); --oc-ribbon-fg: var(--oc-muted-foreground); }
+
+/* Sizes: a smaller band for a product card, a larger one for a document or a hero image. */
+.oc-ribbon--sm { --oc-ribbon-inset: 1.6rem; font-size: 0.625rem; }
+.oc-ribbon--lg { --oc-ribbon-inset: 2.9rem; font-size: 0.875rem; }
+
+/* Right to left: start and end swap sides, so the band leans the other way. */
+.oc-ribbon:dir(rtl) { translate: calc(-50% * var(--oc-ribbon-x)) calc(50% * var(--oc-ribbon-y)); rotate: calc(var(--oc-ribbon-turn) * -1); }
+
+@media (forced-colors: active) {
+  .oc-ribbon { forced-color-adjust: none; color: Canvas; background: CanvasText; }
+}
+
+/* parts/data-spec-list.css */
+/* File: packages/ui/src/parts/data-spec-list.css | Map: list (container) -> groups in columns -> group title -> rows (term / value) -> stack modifier */
+/* Technical specifications in named groups (Dimensions, Electrical, Package …): label / value rows with tabular
+   digits. Two columns of groups once the list is wide enough (container query), one column with --stack. */
+
+.oc-spec-list { container-type: inline-size; inline-size: 100%; display: grid; gap: 1.25rem; min-inline-size: 0; }
+@container (min-width: 40rem) {
+  .oc-spec-list:not(.oc-spec-list--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem 2rem; }
+}
+.oc-spec-group { min-inline-size: 0; }
+.oc-spec-group__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0 0.25rem;
+  padding-block-end: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+  border-block-end: 1px solid var(--oc-border);
+}
+.oc-spec-group__title > :is(svg, iconify-icon) { inline-size: 1rem; block-size: 1rem; font-size: 1rem; }
+.oc-spec-group__rows { margin: 0; }
+.oc-spec-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
+  gap: 1rem;
+  padding: 0.4rem 0;
+  font-size: 0.875rem;
+  border-block-end: 1px dashed var(--oc-border);
+}
+.oc-spec-row:last-child { border-block-end: 0; }
+.oc-spec-row > dt { margin: 0; color: var(--oc-muted-foreground); }
+.oc-spec-row > dd { margin: 0; min-inline-size: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.oc-spec-row > dd > small { margin-inline-start: 0.25rem; font-weight: 400; color: var(--oc-muted-foreground); }
+
+/* parts/data-stock.css */
+/* File: packages/ui/src/parts/data-stock.css | Map: indicator (dot + text) -> levels (ok, low, out, order) -> badge variant -> count */
+/* Stock status: a colored dot with a short text ("In stock", "Only 3 left", "Out of stock", "On order").
+   data-level picks the color; the text always says it too, so color is never the only signal. */
+
+.oc-stock {
+  --oc-stock-color: var(--oc-success);
+  /* Inline text (not flex), so "Only <b>3</b> left" keeps normal word spacing. */
+  display: inline-block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.3;
+  color: var(--oc-foreground);
+  white-space: nowrap;
+}
+.oc-stock::before {
+  content: "";
+  display: inline-block;
+  margin-inline-end: 0.4rem;
+  vertical-align: 0.05em;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  background: var(--oc-stock-color);
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px oklch(from var(--oc-stock-color) l c h / 0.18);
+}
+.oc-stock[data-level="low"] { --oc-stock-color: var(--oc-warning); }
+.oc-stock[data-level="out"] { --oc-stock-color: var(--oc-destructive); }
+.oc-stock[data-level="order"] { --oc-stock-color: var(--oc-info, light-dark(var(--color-deepskyblue-70), var(--color-skyblue-50))); }
+.oc-stock__count { font-weight: 700; font-variant-numeric: tabular-nums; }
+.oc-stock__note { font-weight: 400; color: var(--oc-muted-foreground); }
+
+/* Badge: a tinted pill (table cells, product cards). */
+.oc-stock--badge {
+  padding: 0.125rem 0.5rem 0.125rem 0.45rem;
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--oc-stock-color) 75%, var(--oc-foreground));
+  background: oklch(from var(--oc-stock-color) l c h / 0.12);
+  border: 1px solid oklch(from var(--oc-stock-color) l c h / 0.3);
+  border-radius: 999px;
+}
+.oc-stock--badge::before { inline-size: 0.4rem; block-size: 0.4rem; margin-inline-end: 0.3rem; vertical-align: 0.1em; box-shadow: none; }
+
 /* parts/forms-affix-input.css */
 /* File: packages/ui/src/parts/forms-affix-input.css
    Map: --affix group (frame on the wrapper) -> inner input -> inline affix (€, %, @) -> states -> --end alignment
@@ -7087,7 +7611,7 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
   min-inline-size: 0;
 }
 
-/* Symbol column: same chrome as the Korrekt / OmniaDesk fields (€, %, @, barcode icon).
+/* Symbol column: the same chrome as the other fields (€, %, @, barcode icon).
    A divider separates the symbol from the value. */
 .oc-input-group.oc-input-group--affix .oc-input-addon {
   align-self: stretch;
@@ -7136,6 +7660,51 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 }
 .oc-input-group--affix:has(.oc-input:disabled) .oc-input { opacity: 1; }
 
+/* parts/forms-avatar-picker.css */
+/* File: packages/ui/src/parts/forms-avatar-picker.css | Map: picker -> preview (initials or image) -> file input -> text and buttons -> drop state -> square and logo */
+/* Logo or avatar picker: a preview, "Upload" and "Remove", a hint, and dropping a file
+   on the preview. The file input is a real <input type="file">; packages/ui/src/avatar-picker.js shows the preview. */
+
+.oc-avatar-picker { display: flex; align-items: center; gap: 1rem; }
+.oc-avatar-picker__preview {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: var(--oc-avatar-picker-size, 4.5rem);
+  block-size: var(--oc-avatar-picker-size, 4.5rem);
+  overflow: hidden;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border: 1px dashed var(--oc-border-strong, var(--oc-border));
+  border-radius: 50%;
+  cursor: pointer;
+}
+.oc-avatar-picker--square .oc-avatar-picker__preview { border-radius: var(--oc-radius); }
+.oc-avatar-picker__preview img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-avatar-picker--logo .oc-avatar-picker__preview img { object-fit: contain; padding: 0.375rem; background: var(--color-white-50); }
+.oc-avatar-picker__preview:has(img) { border-style: solid; }
+.oc-avatar-picker__preview:hover,
+.oc-avatar-picker.is-dragover .oc-avatar-picker__preview {
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.08);
+  border-color: var(--oc-primary);
+}
+.oc-avatar-picker__preview:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-avatar-picker__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.oc-avatar-picker__text { display: grid; gap: 0.375rem; min-inline-size: 0; }
+.oc-avatar-picker__label { font-size: 0.875rem; font-weight: 600; }
+.oc-avatar-picker__hint { font-size: 0.75rem; color: var(--oc-muted-foreground); }
+.oc-avatar-picker__actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+/* "Remove" only while there is an image. */
+.oc-avatar-picker:not(:has(.oc-avatar-picker__preview img)) [data-oc-avatar-remove] { display: none; }
+/* A refused file (wrong type or too large): red outline and the reason under the buttons. */
+.oc-avatar-picker.is-invalid .oc-avatar-picker__preview { border-color: var(--oc-destructive); }
+.oc-avatar-picker__error { font-size: 0.75rem; font-weight: 500; color: var(--oc-destructive); }
+
 /* parts/forms-barcode-input.css */
 /* File: packages/ui/src/parts/forms-barcode-input.css
    Map: wrapper (field + preview stacked) -> monospace field -> preview area -> placeholder bars -> code caption -> empty / invalid states
@@ -7405,6 +7974,61 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 /* Small swatches. */
 .oc-color-select--sm .oc-color-select-swatch { inline-size: 1.25rem; block-size: 1.25rem; }
 
+/* parts/forms-date-field.css */
+/* File: packages/ui/src/parts/forms-date-field.css | Map: field frame -> icon zone -> native date input -> ISO week label -> sizes and states */
+/* Date field: calendar icon | line | date, with the ISO week at the end when wanted.
+   The date is a native <input type="date"> (keyboard, picker and locale from the browser). The week label is filled
+   by packages/ui/src/date-field.js (or by your own code). */
+
+.oc-date-field {
+  display: inline-flex;
+  align-items: stretch;
+  block-size: 2.5rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-input, var(--oc-border));
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+}
+.oc-date-field:focus-within { border-color: var(--oc-ring); box-shadow: 0 0 0 3px oklch(from var(--oc-ring) l c h / 0.18); }
+.oc-date-field__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5rem;
+  font-size: 1.125rem;
+  color: var(--oc-muted-foreground);
+  border-inline-end: 1px solid var(--oc-border);
+}
+.oc-date-field__input {
+  min-inline-size: 0;
+  padding: 0 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+.oc-date-field__input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
+/* ISO week: a quiet label at the end ("Week 45"); hidden while there is no date. */
+.oc-date-field__week {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.08);
+  border-inline-start: 1px solid var(--oc-border);
+  white-space: nowrap;
+}
+.oc-date-field__week:empty { display: none; }
+.oc-date-field--sm { block-size: 2rem; }
+.oc-date-field--sm .oc-date-field__icon { inline-size: 2rem; font-size: 1rem; }
+.oc-date-field:has(.oc-date-field__input:disabled) { opacity: 0.55; }
+.oc-date-field:has(.oc-date-field__input[aria-invalid="true"]) { border-color: var(--oc-destructive); }
+
 /* parts/forms-decimal-input.css */
 /* File: packages/ui/src/parts/forms-decimal-input.css
    Map: field (right-aligned tabular digits) -> unit suffix wrapper -> states -> --start alignment
@@ -7458,6 +8082,21 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 /* Disabled wrapper. */
 .oc-decimal-field:has(.oc-decimal-input:disabled) { opacity: 0.5; cursor: not-allowed; }
 
+/* parts/forms-density.css */
+/* File: packages/ui/src/parts/forms-density.css | Map: compact scope -> inputs, selects, date fields, textareas -> buttons -> field gaps */
+/* Form density: .oc-density-compact on a form or any wrapper makes its controls
+   2rem high instead of 2.5rem, for dense editors (invoice templates, inline tables). The default needs no class. */
+
+.oc-density-compact :is(.oc-input, .oc-select, .oc-date-field) { block-size: 2rem; font-size: 0.8125rem; }
+.oc-density-compact :is(.oc-input, .oc-select) { padding-block: 0; }
+.oc-density-compact .oc-textarea { padding-block: 0.375rem; font-size: 0.8125rem; }
+.oc-density-compact .oc-date-field__icon { inline-size: 2rem; font-size: 1rem; }
+.oc-density-compact .oc-date-field__input { font-size: 0.8125rem; }
+.oc-density-compact .oc-btn:not(.oc-btn--icon, .oc-btn--plain, .oc-btn--inline) { padding-block: 0.3125rem; font-size: 0.8125rem; }
+.oc-density-compact .oc-btn--icon { --oc-btn-square: 2rem; }
+.oc-density-compact .oc-field { gap: 0.25rem; }
+.oc-density-compact .oc-field-label { font-size: 0.75rem; }
+
 /* parts/forms-filter-counts.css */
 /* File: packages/ui/src/parts/forms-filter-counts.css
    Map: group (grid of tiles) -> tile (label + hidden radio) -> value / label / hint -> tones -> states -> --compact
@@ -7554,6 +8193,72 @@ a.oc-tree-label:focus-visible { outline: 2px solid var(--oc-ring); outline-offse
 .oc-filter-counts--compact .oc-filter-counts-label { font-size: 0.8rem; font-weight: 500; }
 .oc-filter-counts--compact .oc-filter-counts-hint { display: none; }
 
+/* parts/forms-form-section.css */
+/* File: packages/ui/src/parts/forms-form-section.css | Map: section (details) -> summary (icon, title, hint, status, chevron) -> body grid -> invalid state */
+/* Collapsible form section: a long form in named parts that open and close.
+   Native <details>; sections with the same name="" keep one open at a time. */
+
+.oc-form-section {
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-form-section + .oc-form-section { margin-block-start: 0.75rem; }
+.oc-form-section__summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+  padding: 0.875rem 1rem;
+  list-style: none;
+  cursor: pointer;
+}
+.oc-form-section__summary::-webkit-details-marker { display: none; }
+.oc-form-section__summary:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; border-radius: var(--oc-radius); }
+.oc-form-section__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  font-size: 1.25rem;
+  color: var(--oc-primary);
+  background: oklch(from var(--oc-primary) l c h / 0.1);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-form-section__heading { display: grid; gap: 0.125rem; min-inline-size: 0; }
+.oc-form-section__title { margin: 0; font-size: 0.9375rem; font-weight: 600; }
+.oc-form-section__hint { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-form-section__status { font-size: 0.75rem; white-space: nowrap; }
+.oc-form-section__summary::after {
+  content: "";
+  inline-size: 1.125rem;
+  block-size: 1.125rem;
+  background: var(--oc-muted-foreground);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E") center / contain no-repeat;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-form-section[open] > .oc-form-section__summary::after { rotate: 180deg; }
+.oc-form-section__body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  border-block-start: 1px solid var(--oc-border);
+}
+.oc-form-section__body > .oc-form-section__wide { grid-column: 1 / -1; }
+/* A section with an invalid field gets a red edge, also while closed, so an error is never hidden. */
+.oc-form-section:has(:user-invalid, [aria-invalid="true"]) { border-color: var(--oc-destructive); }
+.oc-form-section:has(:user-invalid, [aria-invalid="true"]) .oc-form-section__icon {
+  color: var(--oc-destructive);
+  background: oklch(from var(--oc-destructive) l c h / 0.1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-form-section__summary::after { transition: none; }
+}
+
 /* parts/forms-language-select.css */
 /* File: packages/ui/src/parts/forms-language-select.css
    Map: wrapper (icon + native select) -> icon -> select control -> chevron -> states -> --ghost / --currency
@@ -7889,6 +8594,146 @@ button.oc-language-select:hover { background: var(--oc-surface); }
   font-size: 0.8rem;
 }
 
+/* parts/forms-quantity.css */
+/* File: packages/ui/src/parts/forms-quantity.css | Map: frame -> step buttons -> number input (no spinners) -> focus and disabled -> sizes */
+/* Quantity field: minus, a number input and plus in one frame. Without a script it is a normal number input
+   (the browser's arrows and keyboard); form-extras.js makes the buttons step within min / max / step. */
+
+.oc-quantity {
+  display: inline-flex;
+  inline-size: fit-content;
+  justify-self: start;
+  align-items: stretch;
+  block-size: 2.25rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-input, var(--oc-border));
+  border-radius: var(--oc-radius);
+  overflow: hidden;
+}
+.oc-quantity__step {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 2.25rem;
+  padding: 0;
+  font: inherit;
+  color: var(--oc-muted-foreground);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.oc-quantity__step > :is(svg, iconify-icon) { inline-size: 1rem; block-size: 1rem; font-size: 1rem; }
+.oc-quantity__step:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-quantity__step:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-quantity__step:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
+.oc-quantity__input {
+  inline-size: 3.25rem;
+  min-inline-size: 0;
+  padding: 0 0.25rem;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  border-inline: 1px solid var(--oc-border);
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.oc-quantity__input::-webkit-outer-spin-button,
+.oc-quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.oc-quantity__input:focus { outline: none; }
+.oc-quantity:has(.oc-quantity__input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-quantity:has(.oc-quantity__input:disabled) { opacity: 0.5; }
+.oc-quantity--sm { block-size: 2rem; }
+.oc-quantity--sm .oc-quantity__step { inline-size: 2rem; }
+.oc-quantity--sm .oc-quantity__input { inline-size: 2.75rem; font-size: 0.8125rem; }
+
+/* parts/forms-rating.css */
+/* File: packages/ui/src/parts/forms-rating.css | Map: star mask -> rating (display) -> sizes -> summary line -> rating input (radios, hover preview) -> focus */
+/* Star rating without JavaScript. .oc-rating shows a score (--oc-rating, halves and decimals work); .oc-rating-input
+   is five radio buttons drawn as stars: :has() fills up to the checked or hovered star. */
+
+.oc-rating,
+.oc-rating-input {
+  --oc-rating-size: 1.125rem;
+  --oc-rating-color: var(--oc-warning);
+  --oc-rating-empty: oklch(from var(--oc-muted-foreground) l c h / 0.28);
+  --oc-rating-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z'/%3E%3C/svg%3E");
+}
+
+/* Display: one bar of five stars; the fill is the score out of --oc-rating-max (default 5). */
+.oc-rating {
+  --oc-rating: 0;
+  --oc-rating-max: 5;
+  display: inline-block;
+  flex-shrink: 0;
+  inline-size: calc(var(--oc-rating-size) * var(--oc-rating-max));
+  block-size: var(--oc-rating-size);
+  vertical-align: middle;
+  background: linear-gradient(90deg, var(--oc-rating-color) calc(var(--oc-rating) / var(--oc-rating-max) * 100%), var(--oc-rating-empty) 0);
+  -webkit-mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+}
+.oc-rating--sm, .oc-rating-input.oc-rating-input--sm { --oc-rating-size: 0.875rem; }
+.oc-rating--lg, .oc-rating-input.oc-rating-input--lg { --oc-rating-size: 1.5rem; }
+
+/* Summary: stars, the score and the number of reviews on one line. */
+.oc-rating-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
+.oc-rating-summary__score { font-weight: 700; font-variant-numeric: tabular-nums; }
+.oc-rating-summary__count { color: var(--oc-muted-foreground); }
+a.oc-rating-summary__count { text-decoration: underline; text-underline-offset: 0.2em; }
+a.oc-rating-summary__count:hover { color: var(--oc-foreground); }
+
+/* Input: a fieldset with five labels (radio inside). The stars are one masked bar behind the labels. */
+.oc-rating-input {
+  position: relative;
+  display: inline-flex;
+  inline-size: calc(var(--oc-rating-size) * 5 + 0.5rem);
+  block-size: calc(var(--oc-rating-size) + 0.5rem);
+  margin: 0;
+  padding: 0.25rem;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-rating-input::before {
+  content: "";
+  position: absolute;
+  inset: 0.25rem;
+  background: linear-gradient(90deg, var(--oc-rating-color) calc(var(--oc-rating-hover, var(--oc-rating-pick, 0)) * var(--oc-rating-size)), var(--oc-rating-empty) 0);
+  -webkit-mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  mask: var(--oc-rating-star) left center / var(--oc-rating-size) var(--oc-rating-size) repeat-x;
+  pointer-events: none;
+}
+.oc-rating-input > legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.oc-rating-input > label { position: relative; z-index: 1; flex: 0 0 var(--oc-rating-size); cursor: pointer; }
+.oc-rating-input > label > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-rating-input > label > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+.oc-rating-input:has(label:nth-of-type(1) input:checked) { --oc-rating-pick: 1; }
+.oc-rating-input:has(label:nth-of-type(2) input:checked) { --oc-rating-pick: 2; }
+.oc-rating-input:has(label:nth-of-type(3) input:checked) { --oc-rating-pick: 3; }
+.oc-rating-input:has(label:nth-of-type(4) input:checked) { --oc-rating-pick: 4; }
+.oc-rating-input:has(label:nth-of-type(5) input:checked) { --oc-rating-pick: 5; }
+/* Hover preview (pointer devices only, so a tap does not leave a preview behind). */
+@media (hover: hover) {
+  .oc-rating-input:has(label:nth-of-type(1):hover) { --oc-rating-hover: 1; }
+  .oc-rating-input:has(label:nth-of-type(2):hover) { --oc-rating-hover: 2; }
+  .oc-rating-input:has(label:nth-of-type(3):hover) { --oc-rating-hover: 3; }
+  .oc-rating-input:has(label:nth-of-type(4):hover) { --oc-rating-hover: 4; }
+  .oc-rating-input:has(label:nth-of-type(5):hover) { --oc-rating-hover: 5; }
+}
+.oc-rating-input:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-rating-input:has(input:disabled) { opacity: 0.5; }
+.oc-rating-input:has(input:disabled) > label,
+.oc-rating-input:has(input:disabled) > label > input { cursor: not-allowed; }
+
+@media (forced-colors: active) {
+  .oc-rating, .oc-rating-input::before { --oc-rating-color: CanvasText; --oc-rating-empty: GrayText; forced-color-adjust: none; }
+}
+
 /* parts/forms-time-input.css */
 /* File: packages/ui/src/parts/forms-time-input.css
    Map: 24h text field (HH:mm) -> invalid state -> slot list (radio chips) -> slot states -> --sm
@@ -8063,7 +8908,7 @@ button.oc-language-select:hover { background: var(--oc-surface); }
 /* File: packages/ui/src/parts/media-attachment.css | Map: list -> file chip (icon by type, name, size, open/remove) -> type tones
    -> uploading progress + error -> image preview (in a message) -> thumbnail chip (in a composer) -> reduced motion
    Attachment: a file chip or an image preview inside a chat message or a composer. The icon tile shows the extension and is
-   tinted per type (--pdf, --doc, --sheet, --zip, --image). Based on the attachment picker of the Korrekt question chat. */
+   tinted per type (--pdf, --doc, --sheet, --zip, --image). */
 
 .oc-attachment-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
 .oc-attachment-list--stack { flex-direction: column; flex-wrap: nowrap; }
@@ -8221,6 +9066,31 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-attachment, .oc-attachment--uploading::after { transition: none; }
 }
 
+/* parts/media-barcode.css */
+/* File: packages/ui/src/parts/media-barcode.css | Map: barcode figure -> svg bars -> digits -> sizes (hero, compact) -> error */
+/* Barcode display: EAN-13, EAN-8, UPC-A or Code 128, drawn as SVG by
+   packages/ui/src/barcode.js from data-value. Always black bars on white, in both themes, so scanners read it. */
+
+.oc-barcode {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: var(--color-black-50);
+  background: var(--color-white-50);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-barcode svg { display: block; inline-size: auto; block-size: var(--oc-barcode-height, 4rem); max-inline-size: 100%; }
+.oc-barcode__digits { font-family: var(--oc-font-mono); font-size: 0.8125rem; letter-spacing: 0.18em; color: inherit; }
+.oc-barcode--hero { padding: 1.25rem 1.5rem; --oc-barcode-height: 6rem; }
+.oc-barcode--hero .oc-barcode__digits { font-size: 1rem; }
+.oc-barcode--compact { padding: 0.375rem 0.5rem; --oc-barcode-height: 2.25rem; }
+.oc-barcode--compact .oc-barcode__digits { font-size: 0.6875rem; letter-spacing: 0.1em; }
+.oc-barcode[data-error] .oc-barcode__digits { color: var(--color-red-70); letter-spacing: 0; }
+
 /* parts/media-browser-frame.css */
 /* File: packages/ui/src/parts/media-browser-frame.css | Map: frame -> chrome bar (dots, address pill, actions)
    -> view (screenshot slot, ratio) -> caption -> minimal / dark / tilt modifiers -> motion
@@ -8440,6 +9310,9 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   line-height: 1;
   cursor: pointer;
 }
+/* Webicons in the buttons (inline SVG or <iconify-icon>): a fixed size, so nothing is cut off at the round edge. */
+.oc-chat-composer__tool > :is(svg, iconify-icon) { inline-size: 1.25rem; block-size: 1.25rem; font-size: 1.25rem; }
+.oc-chat-composer__send > :is(svg, iconify-icon) { inline-size: 1.125rem; block-size: 1.125rem; font-size: 1.125rem; }
 .oc-chat-composer__tool:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
 .oc-chat-composer__tool:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
 
@@ -8644,9 +9517,11 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   background: transparent;
   font-size: 1.15rem;
   line-height: 1;
+  color: var(--oc-muted-foreground);
   cursor: pointer;
 }
-.oc-emoji-picker__trigger:hover { background: var(--oc-surface-strong); }
+.oc-emoji-picker__trigger > :is(svg, iconify-icon) { inline-size: 1.25rem; block-size: 1.25rem; font-size: 1.25rem; }
+.oc-emoji-picker__trigger:hover { color: var(--oc-foreground); background: var(--oc-surface-strong); }
 .oc-emoji-picker__trigger:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
 
 /* The panel: floats above the trigger (implicit anchor of popovertarget), flips when there is no room. */
@@ -8850,6 +9725,216 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
 }
 
+/* parts/media-gallery.css */
+/* File: packages/ui/src/parts/media-gallery.css | Map: gallery grid -> stage and slides (radio + :has, up to 8) -> badge -> thumbnails -> side layout (container query) */
+/* Product gallery without JavaScript: one large photo and a row of thumbnails. Every thumbnail is a label with a
+   radio; :has() shows the slide at the same position. Arrow keys move between the photos (native radios). */
+
+.oc-gallery { container-type: inline-size; inline-size: 100%; display: grid; gap: 0.75rem; min-inline-size: 0; }
+.oc-gallery__stage {
+  position: relative;
+  aspect-ratio: var(--oc-gallery-ratio, 4 / 3);
+  overflow: hidden;
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+}
+.oc-gallery__slide { display: none; margin: 0; block-size: 100%; }
+.oc-gallery__slide > img { display: block; inline-size: 100%; block-size: 100%; object-fit: var(--oc-gallery-fit, contain); }
+.oc-gallery:not(:has(.oc-gallery__thumb input:checked)) .oc-gallery__slide:first-of-type,
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(1) input:checked) .oc-gallery__slide:nth-of-type(1),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(2) input:checked) .oc-gallery__slide:nth-of-type(2),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(3) input:checked) .oc-gallery__slide:nth-of-type(3),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(4) input:checked) .oc-gallery__slide:nth-of-type(4),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(5) input:checked) .oc-gallery__slide:nth-of-type(5),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(6) input:checked) .oc-gallery__slide:nth-of-type(6),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(7) input:checked) .oc-gallery__slide:nth-of-type(7),
+.oc-gallery:has(.oc-gallery__thumb:nth-of-type(8) input:checked) .oc-gallery__slide:nth-of-type(8) { display: block; }
+.oc-gallery__badge { position: absolute; inset: 0.75rem auto auto 0.75rem; z-index: 1; }
+
+.oc-gallery__thumbs { display: flex; gap: 0.5rem; min-inline-size: 0; margin: 0; padding: 0.125rem; overflow-x: auto; border: 0; scrollbar-width: thin; }
+.oc-gallery__thumbs > legend { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.oc-gallery__thumb {
+  position: relative;
+  flex: 0 0 auto;
+  inline-size: var(--oc-gallery-thumb, 4rem);
+  aspect-ratio: 1;
+  overflow: hidden;
+  background: var(--oc-muted);
+  border: 2px solid transparent;
+  border-radius: var(--oc-radius);
+  outline: 1px solid var(--oc-border);
+  outline-offset: -1px;
+  cursor: pointer;
+}
+.oc-gallery__thumb > img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-gallery__thumb > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-gallery__thumb:hover { outline-color: var(--oc-muted-foreground); }
+.oc-gallery__thumb:has(input:checked) { border-color: var(--oc-primary); outline-color: transparent; }
+.oc-gallery__thumb:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--oc-background), 0 0 0 4px var(--oc-ring); }
+
+/* Side: thumbnails in a column on the left once the gallery itself is 32rem wide or more. The grid is always two
+   tracks; below 32rem both children span them, so the query only moves the children (a container cannot query itself). */
+.oc-gallery--side { grid-template-columns: auto minmax(0, 1fr); }
+.oc-gallery--side > * { grid-column: 1 / -1; }
+@container (min-width: 32rem) {
+  .oc-gallery--side > .oc-gallery__stage { grid-column: 2; grid-row: 1; }
+  .oc-gallery--side > .oc-gallery__thumbs { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; }
+}
+
+/* parts/media-glass-liquid.css */
+/* File: packages/ui/src/parts/media-glass-liquid.css
+   Map: liquid sheet (.oc-glass--liquid: clear tint, strong blur + saturation, inner light, specular rim) -> menu bar
+   (.oc-glass-bar: items with icon and label, the current one in a raised bubble) -> icon-only and round button -> fallbacks
+   Liquid glass in the style of recent desktop and phone systems, in CSS only: the backdrop is blurred and brightened,
+   the edge catches light. Put it over a photo or colourful content; on a plain page it looks like a soft card. */
+
+.oc-glass.oc-glass--liquid,
+.oc-glass--liquid,
+.oc-glass-bar,
+.oc-site-header--glass .oc-site-header__inner {
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.1), oklch(100% 0 0deg / 0.05));
+  --oc-liquid-edge: light-dark(oklch(100% 0 0deg / 0.55), oklch(100% 0 0deg / 0.22));
+  --oc-liquid-blur: 5px;
+  position: relative;
+  isolation: isolate;
+  background: var(--oc-liquid-tint);
+  border: 1px solid var(--oc-liquid-edge);
+  /* Light enters at the top left and leaves at the bottom right; a soft glow runs along the inner edge,
+     so the sheet reads as a thick, clear lens rather than frosted plastic. */
+  box-shadow:
+    0 10px 30px -10px oklch(0% 0 0deg / 0.35),
+    inset 2px 2px 1px -2px oklch(100% 0 0deg / 0.95),
+    inset -2px -2px 1px -2px oklch(100% 0 0deg / 0.7),
+    inset 0 0 10px 1px oklch(100% 0 0deg / 0.22),
+    inset 0 -8px 16px -12px oklch(100% 0 0deg / 0.35);
+  backdrop-filter: blur(var(--oc-liquid-blur)) saturate(1.9) brightness(1.1) contrast(1.05);
+}
+/* Specular rim: bright on the top-left and bottom-right edge, only on the border ring. */
+.oc-glass--liquid::before,
+.oc-glass-bar::before,
+.oc-site-header--glass .oc-site-header__inner::before {
+  content: "";
+  position: absolute;
+  inset: -1px;
+  z-index: 1;
+  padding: 1.5px;
+  border-radius: inherit;
+  background: linear-gradient(135deg, oklch(100% 0 0deg / 1), oklch(100% 0 0deg / 0.15) 25%, oklch(100% 0 0deg / 0) 50%, oklch(100% 0 0deg / 0.15) 75%, oklch(100% 0 0deg / 0.8));
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+/* Menu bar: a pill of items, each an icon over a short label. */
+.oc-glass-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.35rem;
+  border-radius: 999px;
+}
+.oc-glass-bar__item {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.15rem;
+  min-inline-size: 4.25rem;
+  padding: 0.45rem 0.85rem;
+  border: 0;
+  border-radius: 999px;
+  color: light-dark(oklch(22% 0.02 260deg / 0.78), oklch(100% 0 0deg / 0.82));
+  background: none;
+  font: inherit;
+  font-size: 0.7rem;
+  font-weight: 600;
+  line-height: 1.1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, scale 0.2s;
+}
+.oc-glass-bar__item > :is(svg, iconify-icon) { inline-size: 1.4rem; block-size: 1.4rem; font-size: 1.4rem; }
+.oc-glass-bar__item:hover { background: light-dark(oklch(100% 0 0deg / 0.28), oklch(100% 0 0deg / 0.08)); }
+.oc-glass-bar__item:active { scale: 0.94; }
+.oc-glass-bar__item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+/* The current item sits in a raised, lighter bubble. */
+.oc-glass-bar__item:is([aria-current="page"], [aria-pressed="true"], :has(> input:checked)) {
+  color: light-dark(var(--oc-primary), var(--color-white-50));
+  background: light-dark(oklch(100% 0 0deg / 0.62), oklch(100% 0 0deg / 0.24));
+  box-shadow: inset 0 1px 1px oklch(100% 0 0deg / 0.85), 0 6px 14px -8px oklch(0% 0 0deg / 0.4);
+}
+.oc-glass-bar__item > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-glass-bar__item:has(> input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Icons only, and a separate round button next to the bar (search, compose). */
+.oc-glass-bar--icons .oc-glass-bar__item { min-inline-size: 0; padding: 0.6rem; }
+.oc-glass-bar--round { padding: 0.35rem; border-radius: 999px; }
+.oc-glass-bar--round .oc-glass-bar__item { min-inline-size: 0; padding: 0.6rem; }
+.oc-glass-bar__sep { align-self: stretch; inline-size: 1px; margin: 0.4rem 0.15rem; background: var(--oc-liquid-edge); }
+
+/* Less transparency asked for, or no backdrop-filter: a solid bar that still reads as one. */
+@media (prefers-reduced-transparency: reduce) {
+  .oc-glass--liquid, .oc-glass-bar { --oc-liquid-tint: var(--oc-card); backdrop-filter: none; }
+}
+@supports not (backdrop-filter: blur(1px)) {
+  .oc-glass--liquid, .oc-glass-bar { --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.85), oklch(25% 0.02 260deg / 0.9)); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-glass-bar__item { transition: none; }
+}
+
+/* parts/media-glass-options.css */
+/* File: packages/ui/src/parts/media-glass-options.css
+   Map: amount (--clear: more see-through, --frost: more frosted) -> light content on a colourful backdrop -> stage (moving colour blobs to show it off)
+   Extras for .oc-glass, .oc-glass--liquid and .oc-glass-bar (media-glass.css, media-glass-liquid.css). The selectors
+   carry two classes so they win over the base glass whatever order the parts load in. */
+
+/* Amount of glass: --clear lets more of the backdrop through, --frost hides more of it. */
+:is(.oc-glass, .oc-glass-bar).oc-glass--clear {
+  --oc-glass-sheet: light-dark(oklch(from var(--oc-background) l c h / 0.32), oklch(from var(--oc-background) l c h / 0.26));
+  --oc-glass-blur: 10px;
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.05), oklch(100% 0 0deg / 0.03));
+  --oc-liquid-blur: 2px;
+}
+:is(.oc-glass, .oc-glass-bar).oc-glass--frost {
+  --oc-glass-sheet: light-dark(oklch(from var(--oc-background) l c h / 0.86), oklch(from var(--oc-background) l c h / 0.8));
+  --oc-glass-blur: 40px;
+  --oc-liquid-tint: light-dark(oklch(100% 0 0deg / 0.38), oklch(100% 0 0deg / 0.12));
+  --oc-liquid-blur: 18px;
+}
+
+
+/* Light content: white icons and labels for glass over a dark or very colourful backdrop. */
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item {
+  color: oklch(100% 0 0deg / 0.92);
+  text-shadow: 0 1px 2px oklch(0% 0 0deg / 0.25);
+}
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item:is([aria-current="page"], [aria-pressed="true"], :has(> input:checked)) {
+  color: var(--color-white-50);
+  background: oklch(100% 0 0deg / 0.2);
+}
+.oc-glass-bar.oc-glass-bar--light .oc-glass-bar__item:hover { background: oklch(100% 0 0deg / 0.12); }
+
+/* Stage: round colour shapes that drift slowly, so the change through the glass shows. A background for a hero or a demo. */
+.oc-glass-stage {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 22% 72%, var(--color-magenta-50) 0 16%, transparent 16.5%),
+    radial-gradient(circle at 82% 68%, var(--color-orange-50) 0 18%, transparent 18.5%),
+    radial-gradient(circle at 58% 18%, var(--color-skycyan-50) 0 13%, transparent 13.5%),
+    radial-gradient(60% 70% at 30% 30%, var(--color-magenta-60), transparent 70%),
+    linear-gradient(120deg, var(--color-purple-60), var(--color-violet-80));
+  background-size: 140% 140%;
+  animation: oc-glass-stage 18s ease-in-out infinite alternate;
+}
+@keyframes oc-glass-stage {
+  to { background-position: 100% 60%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-glass-stage { animation: none; }
+}
+
 /* parts/media-glass.css */
 /* File: packages/ui/src/parts/media-glass.css
    Map: tokens (light-dark) -> sheet (.oc-glass: see-through, blurred, light top edge, soft shadow) -> panel (.oc-glass-panel:
@@ -8993,6 +10078,54 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
   .oc-image-zoom__canvas { transition: inline-size var(--oc-transition-normal); }
 }
 
+/* parts/media-lazy.css */
+/* 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; } }
+
 /* parts/media-lightbox.css */
 /* File: packages/ui/src/parts/media-lightbox.css | Map: thumbnails -> dialog + backdrop -> bar -> track + slides
    -> nav buttons -> caption + counter -> single image -> small screens -> motion
@@ -9171,7 +10304,7 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
    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;
@@ -9309,7 +10442,7 @@ a.oc-attachment-image:hover > :is(img, .oc-media-art) { filter: brightness(1.05)
    -> 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);
@@ -9879,6 +11012,104 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
   .oc-watermark { --oc-watermark-opacity: 0.2; print-color-adjust: exact; }
 }
 
+/* parts/nav-topbar-variants.css */
+/* 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); }
+
 /* parts/site-fact-list.css */
 /* File: packages/ui/src/parts/site-fact-list.css
    Map: plain -> compact -> stacked -> accent values -> narrow screens
@@ -9906,6 +11137,78 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
 /* Very narrow containers: wrap instead of squeezing label and value together. */
 .oc-fact-list > div { flex-wrap: wrap; }
 
+/* parts/site-header-variants.css */
+/* 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); }
+
 /* parts/site-link-arrow.css */
 /* File: packages/ui/src/parts/site-link-arrow.css
    Map: focus ring -> back arrow -> external arrow -> color modifiers -> sizes -> reduced motion
@@ -10399,7 +11702,7 @@ a.oc-message__quote:focus-visible { outline: 2px solid var(--oc-ring); outline-o
    -> 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;