@birdycom/omniaui 0.12.5 → 0.13.0

package/dist/parts/forms-date-field.css

@@ -0,0 +1,53 @@
+/* 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); }

package/dist/parts/forms-density.css

@@ -0,0 +1,13 @@
+/* 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; }

package/dist/parts/forms-form-section.css

@@ -0,0 +1,64 @@
+/* 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; }
+}

package/dist/parts/forms-form.css

@@ -0,0 +1,76 @@
+/* File: packages/ui/src/parts/forms-form.css */
+/* Map: form grid -> label hint -> actions + note -> busy -> filled variant */
+/* A form as one grid of fields with one gap, an "(optional)" hint in a label, a row with the submit button and a short
+   note, the busy state while it sends (aria-busy on the form), and .oc-form--filled: fields with a fill and a stronger
+   border, for a form on a card, a photo or a dark band. All through the field tokens of .oc-input. */
+
+.oc-form {
+  display: grid;
+  gap: var(--oc-form-gap, 1.1rem);
+}
+.oc-form .oc-field-group { gap: var(--oc-form-gap, 1.1rem); }
+.oc-form .oc-field {
+  gap: 0.4rem;
+  margin-bottom: 0;
+}
+
+/* <label class="oc-field-label">Phone <span class="oc-field-label__hint">(optional)</span></label> */
+.oc-field-label__hint {
+  color: var(--oc-muted-foreground);
+  font-weight: 400;
+}
+
+/* Submit button with a short note next to it (wraps under it on a narrow form). */
+.oc-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem 1.5rem;
+  margin-block-start: 0.4rem;
+}
+.oc-form-note {
+  flex: 1 1 16rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.85rem;
+}
+.oc-form-note a {
+  color: var(--oc-primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.oc-form-note a:hover { color: var(--oc-foreground); }
+
+/* While the form sends (form aria-busy="true"): the submit button dims and shows a progress cursor. */
+.oc-form[aria-busy="true"] :is([type="submit"], button:not([type])) {
+  opacity: 0.7;
+  cursor: progress;
+}
+
+/* Filled fields: a fill (dark in dark mode), the strong border, more room and a wider focus ring. */
+.oc-form--filled {
+  --oc-input-bg: light-dark(oklch(from var(--oc-foreground) l c h / 0.03), oklch(0 0 0 / 0.25));
+  --oc-input-border: var(--oc-border-strong);
+  --oc-input-padding: 0.75rem 0.9rem;
+  --oc-input-radius: var(--oc-radius-md, 0.75rem);
+  --oc-input-size: 1rem;
+  --oc-ring-width: 3px;
+  --oc-textarea-min: 9rem;
+}
+.oc-form--filled .oc-field-label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.oc-form--filled .oc-field-error { font-size: 0.85rem; }
+.oc-form--filled .oc-select option { background: var(--oc-card); }
+
+/* Honeypot: a field for bots, off screen for people. Not display:none (some bots skip hidden fields). Give the wrapper
+   aria-hidden="true" and the input tabindex="-1" autocomplete="off"; the server ignores a form where it is filled. */
+.oc-honeypot {
+  position: absolute;
+  inset-inline-start: -10000px;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+}

package/dist/parts/forms-quantity.css

@@ -0,0 +1,55 @@
+/* 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; }

package/dist/parts/forms-rating.css

@@ -0,0 +1,81 @@
+/* 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; }
+}

package/dist/parts/media-attachment.css

@@ -1,7 +1,7 @@
 /* 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; }

package/dist/parts/media-barcode.css

@@ -0,0 +1,23 @@
+/* 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; }

package/dist/parts/media-chat-composer.css

@@ -56,6 +56,9 @@
   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; }
 

package/dist/parts/media-emoji-picker.css

@@ -15,9 +15,11 @@
   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. */

package/dist/parts/media-gallery.css

@@ -0,0 +1,55 @@
+/* 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; }
+}

package/dist/parts/media-glass-liquid.css

@@ -0,0 +1,99 @@
+/* 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; }
+}

package/dist/parts/media-glass-options.css

@@ -0,0 +1,50 @@
+/* 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; }
+}

package/dist/parts/media-lazy.css

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