@birdycom/omniaui 0.0.0-stage → 0.11.0

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

@@ -0,0 +1,90 @@
+/* File: packages/ui/src/parts/media-chat-composer.css | Map: frame (focus ring) -> textarea (grows with content)
+   -> bar (tools | hint | send) -> tool buttons -> send button (disabled while empty) -> inline modifier
+   Chat composer: a message field with a toolbar and a send button, in one rounded frame.
+   The textarea grows with field-sizing; the send button looks disabled while the field is empty (:placeholder-shown). */
+
+.oc-chat-composer {
+  display: grid;
+  gap: 0.25rem;
+  inline-size: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-input);
+  border-radius: calc(var(--oc-radius) + 6px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+.oc-chat-composer:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--oc-ring) 20%, transparent);
+}
+
+/* The field itself has no frame: the composer is the frame. */
+.oc-chat-composer__input {
+  inline-size: 100%;
+  min-block-size: 2.5rem;
+  max-block-size: 10rem;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  field-sizing: content;
+}
+.oc-chat-composer__input::placeholder { color: var(--oc-muted-foreground); }
+
+/* Toolbar: tools left, hint in the middle, send right. */
+.oc-chat-composer__bar { display: flex; align-items: center; gap: 0.25rem; }
+.oc-chat-composer__tools { display: flex; align-items: center; gap: 0.125rem; }
+.oc-chat-composer__hint { margin-inline-start: auto; padding-inline: 0.5rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+.oc-chat-composer__tool {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.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; }
+
+.oc-chat-composer__send {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  margin-inline-start: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: opacity var(--oc-transition-fast), transform var(--oc-transition-fast);
+}
+.oc-chat-composer__hint + .oc-chat-composer__send { margin-inline-start: 0; }
+.oc-chat-composer__send:hover { transform: scale(1.05); }
+.oc-chat-composer__send:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+/* Empty field (placeholder visible) or a real disabled button: dimmed and not clickable. */
+.oc-chat-composer:has(.oc-chat-composer__input:placeholder-shown) .oc-chat-composer__send,
+.oc-chat-composer__send:disabled { opacity: 0.4; pointer-events: none; }
+
+/* Inline: one row — tools, field, send (for compact chat panels). */
+.oc-chat-composer--inline { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; padding: 0.375rem; border-radius: 1.4rem; }
+.oc-chat-composer--inline .oc-chat-composer__bar { display: contents; }
+.oc-chat-composer--inline .oc-chat-composer__tools { grid-column: 1; grid-row: 1; }
+.oc-chat-composer--inline .oc-chat-composer__input { grid-column: 2; grid-row: 1; min-block-size: 2.25rem; padding-block: 0.4rem; }
+.oc-chat-composer--inline .oc-chat-composer__send { grid-column: 3; grid-row: 1; }
+.oc-chat-composer--inline .oc-chat-composer__hint { display: none; }

package/dist/parts/media-doc-viewer.css

@@ -0,0 +1,151 @@
+/* File: packages/ui/src/parts/media-doc-viewer.css | Map: grid -> card (bar, label, expand) -> frame (pdf, video, image)
+   -> full-screen dialog -> small screens
+   Document viewer: a PDF, video or image shown inline in a card with a label, plus a full-screen view on a native
+   <dialog> opened with command="show-modal". Based on the PDF and video viewers of the Verdavita service pages. */
+
+/* ---- Grid of viewers: cards keep their width, the group is centred ---- */
+.oc-doc-viewer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
+  gap: 1rem 1.5rem;
+  inline-size: 100%;
+}
+
+/* ---- Card ---- */
+.oc-doc-viewer {
+  display: grid;
+  align-content: start;
+  gap: 0.5rem;
+  min-inline-size: 0;
+  margin: 0;
+}
+.oc-doc-viewer__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-inline-size: 0;
+}
+.oc-doc-viewer__label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  color: var(--oc-foreground);
+  font-size: 0.875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.oc-doc-viewer__meta { flex: none; color: var(--oc-muted-foreground); font-size: 0.75rem; }
+.oc-doc-viewer__expand {
+  flex: none;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  font-size: 0.95rem;
+  cursor: zoom-in;
+  transition: background var(--oc-transition-normal), border-color var(--oc-transition-normal);
+}
+.oc-doc-viewer__expand:hover { background: var(--oc-muted); border-color: var(--oc-border-strong, var(--oc-border)); }
+.oc-doc-viewer__expand:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Frame: A4 for PDF, 16/9 for video, free for images ---- */
+.oc-doc-viewer__frame {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 1 / 1.414;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+}
+.oc-doc-viewer--video .oc-doc-viewer__frame { aspect-ratio: 16 / 9; background: var(--color-black-40); }
+.oc-doc-viewer--image .oc-doc-viewer__frame { aspect-ratio: auto; }
+.oc-doc-viewer__frame > :is(iframe, video, img, object, .oc-media-art) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  object-fit: contain;
+}
+.oc-doc-viewer--image .oc-doc-viewer__frame > img { block-size: auto; }
+
+/* A whole-card link variant ("click for full screen") */
+.oc-doc-viewer__frame > .oc-doc-viewer__open {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: end center;
+  padding: 0.75rem;
+  border: 0;
+  background: linear-gradient(transparent 55%, oklch(from var(--color-black-50) l c h / 0.55));
+  color: var(--color-white-50);
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  opacity: 0;
+  cursor: zoom-in;
+  transition: opacity var(--oc-transition-normal);
+}
+.oc-doc-viewer__frame:hover > .oc-doc-viewer__open,
+.oc-doc-viewer__open:focus-visible { opacity: 1; }
+.oc-doc-viewer__open:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -4px; }
+
+/* ---- Full-screen view ---- */
+.oc-doc-viewer-dialog {
+  inline-size: min(100vw - 2rem, 72rem);
+  block-size: min(100dvh - 2rem, 60rem);
+  max-inline-size: none;
+  max-block-size: none;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg, 12px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+.oc-doc-viewer-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
+.oc-doc-viewer-dialog::backdrop { background: oklch(from var(--color-black-60) l c h / 0.8); backdrop-filter: blur(6px); }
+.oc-doc-viewer-dialog--video { background: var(--color-black-40); color: var(--color-white-50); }
+.oc-doc-viewer-dialog__bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.6rem 0.75rem 0.6rem 1rem;
+  border-block-end: 1px solid var(--oc-border);
+}
+.oc-doc-viewer-dialog--video .oc-doc-viewer-dialog__bar { border-color: oklch(from var(--color-white-50) l c h / 0.15); }
+.oc-doc-viewer-dialog__title { margin: 0; overflow: hidden; font-size: 0.95rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
+.oc-doc-viewer-dialog__actions { display: flex; align-items: center; gap: 0.5rem; }
+.oc-doc-viewer-dialog__close {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+.oc-doc-viewer-dialog__close:hover { background: oklch(from currentColor l c h / 0.1); }
+.oc-doc-viewer-dialog__close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-doc-viewer-dialog__body { display: grid; min-block-size: 0; }
+.oc-doc-viewer-dialog__body > :is(iframe, video, img, object, .oc-media-art) {
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+  object-fit: contain;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-doc-viewer__open, .oc-doc-viewer__expand { transition: none; }
+}

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

@@ -0,0 +1,88 @@
+/* File: packages/ui/src/parts/media-emoji-picker.css | Map: trigger button -> popover panel (anchor positioned)
+   -> group label -> grid -> emoji buttons -> inline modifier -> motion
+   Emoji picker: a popover with a grid of emoji buttons. Opening / closing is the popover attribute;
+   inserting the emoji into a field is one small optional script (see the snippet). */
+
+/* Round trigger (a smiley), the same size as a toolbar icon button. */
+.oc-emoji-picker__trigger {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  font-size: 1.15rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.oc-emoji-picker__trigger:hover { 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. */
+.oc-emoji-picker[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0 0 0.375rem;
+  position-area: block-start span-inline-end;
+  position-try-fallbacks: flip-block, flip-inline;
+  inline-size: 17.5rem;
+  max-block-size: 18rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-popover);
+  color: var(--oc-popover-foreground);
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
+  scrollbar-width: thin;
+}
+
+/* Inline: the same panel, always visible inside the page (no popover). */
+.oc-emoji-picker--inline {
+  inline-size: 17.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-popover);
+}
+
+.oc-emoji-picker__label {
+  position: sticky;
+  inset-block-start: -0.5rem;
+  margin: 0;
+  padding: 0.375rem 0.25rem 0.25rem;
+  background: var(--oc-popover);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--oc-muted-foreground);
+}
+
+.oc-emoji-picker__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.125rem; margin-block-end: 0.25rem; }
+.oc-emoji-picker__item {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  background: transparent;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.oc-emoji-picker__item:hover { background: var(--oc-surface-strong); }
+.oc-emoji-picker__item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* Fade + small rise when it opens. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-emoji-picker[popover] {
+    transition: opacity var(--oc-transition-fast), translate var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
+  }
+  .oc-emoji-picker[popover]:popover-open { @starting-style { opacity: 0; translate: 0 0.25rem; } }
+  .oc-emoji-picker__item { transition: transform var(--oc-transition-fast); }
+  .oc-emoji-picker__item:hover { transform: scale(1.15); }
+}

package/dist/parts/media-entity-card.css

@@ -0,0 +1,52 @@
+/* File: packages/ui/src/parts/media-entity-card.css | Map: card grid (frame | body) -> framed media cell
+   -> glyph -> body (eyebrow, title, description) -> facts (key / value) -> stacked + small modifiers -> narrow containers
+   Entity card: a framed square "specimen" cell (image, glyph, icon) next to a detail column.
+   Good for dictionary entries, collection items, symbols, products. */
+
+.oc-entity-card {
+  container-type: inline-size;
+  inline-size: 100%;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+.oc-entity-card__grid { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem; }
+
+/* Framed cell: a double frame (border + inset ring) around a soft radial background. */
+.oc-entity-card__frame {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+  background: radial-gradient(circle at 50% 40%, var(--oc-surface-strong), var(--oc-muted));
+  box-shadow: inset 0 0 0 0.35rem var(--oc-card), inset 0 0 0 calc(0.35rem + 1px) var(--oc-border);
+}
+.oc-entity-card__frame > :is(img, svg, .oc-media-art) { inline-size: 100%; block-size: 100%; object-fit: cover; }
+/* Contained pictures (logos, symbols) keep a margin inside the frame. */
+.oc-entity-card__frame--contain > :is(img, svg) { inline-size: 70%; block-size: 70%; object-fit: contain; }
+.oc-entity-card__glyph { font-size: 3.5rem; line-height: 1; color: var(--oc-foreground); }
+
+/* Detail column. */
+.oc-entity-card__body { display: grid; align-content: start; gap: 0.35rem; min-inline-size: 0; }
+.oc-entity-card__eyebrow { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oc-primary); }
+.oc-entity-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
+.oc-entity-card__description { margin: 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+
+/* Facts: small key / value grid. */
+.oc-entity-card__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-size: 0.8125rem; }
+.oc-entity-card__facts > dt { color: var(--oc-muted-foreground); }
+.oc-entity-card__facts > dd { margin: 0; font-weight: 500; }
+
+/* Footer row for tags or actions. */
+.oc-entity-card__footer { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--oc-border); }
+
+/* Stacked: frame on top (also used automatically in narrow containers). */
+.oc-entity-card--stacked .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
+.oc-entity-card--sm .oc-entity-card__grid { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.875rem; padding: 0.875rem; }
+.oc-entity-card--sm .oc-entity-card__glyph { font-size: 2.25rem; }
+@container (max-width: 22rem) {
+  .oc-entity-card__grid { grid-template-columns: minmax(0, 1fr); }
+}

package/dist/parts/media-flip-card.css

@@ -0,0 +1,78 @@
+/* File: packages/ui/src/parts/media-flip-card.css | Map: card (perspective) -> hidden checkbox -> inner (3D) -> faces
+   -> flip label -> flipped states (checkbox, .is-flipped, --hover) -> vertical -> reduced motion (cross-fade)
+   Flip card: front and back in one grid cell; the inner layer turns 180deg. Triggers: a checkbox (CSS :has()),
+   hover / focus (--hover) or the .is-flipped class for frameworks. No JavaScript. */
+
+.oc-flip-card {
+  --oc-flip-card-turn: rotateY(180deg);
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  perspective: 60rem;
+}
+
+/* The checkbox stays in the page (focusable, Space toggles) but is invisible. */
+.oc-flip-card__toggle { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
+
+.oc-flip-card__inner {
+  display: grid;
+  transform-style: preserve-3d;
+  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
+}
+
+/* Both faces share one grid cell, so the card is as tall as the taller face. */
+.oc-flip-card__face {
+  position: relative;
+  grid-area: 1 / 1;
+  display: grid;
+  align-content: center;
+  gap: 0.5rem;
+  min-block-size: 10rem;
+  padding: 1.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  backface-visibility: hidden;
+}
+.oc-flip-card__face--back {
+  transform: var(--oc-flip-card-turn);
+  border-color: transparent;
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+}
+.oc-flip-card__title { margin: 0; font-size: 1.25rem; font-weight: 700; }
+.oc-flip-card__text { margin: 0; font-size: 0.875rem; opacity: 0.85; }
+
+/* Flip label ("Show answer"): its ::after covers the face, so a click anywhere flips. */
+.oc-flip-card__flip { justify-self: start; font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.oc-flip-card__flip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
+
+/* Keyboard focus on the checkbox (or inside a --hover card) rings the card. */
+.oc-flip-card:has(.oc-flip-card__toggle:focus-visible) .oc-flip-card__face,
+.oc-flip-card--hover:focus-visible .oc-flip-card__face { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-flip-card--hover:focus-visible { outline: none; }
+
+/* Flipped: checkbox checked, .is-flipped, or hover / focus on a --hover card. */
+.oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
+.oc-flip-card.is-flipped .oc-flip-card__inner,
+.oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: var(--oc-flip-card-turn); }
+
+/* Vertical flip (top over bottom). */
+.oc-flip-card--vertical { --oc-flip-card-turn: rotateX(180deg); }
+
+/* Reduced motion: no turning. The faces simply cross-fade. */
+@media (prefers-reduced-motion: reduce) {
+  .oc-flip-card .oc-flip-card__inner { transform: none; transition: none; }
+  .oc-flip-card .oc-flip-card__face { transform: none; transition: opacity 0.2s, visibility 0.2s; }
+  .oc-flip-card .oc-flip-card__face--back { opacity: 0; visibility: hidden; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__inner,
+  .oc-flip-card.is-flipped .oc-flip-card__inner,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__inner { transform: none; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--front,
+  .oc-flip-card.is-flipped .oc-flip-card__face--front,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--front { opacity: 0; visibility: hidden; }
+  .oc-flip-card:has(> .oc-flip-card__toggle:checked) .oc-flip-card__face--back,
+  .oc-flip-card.is-flipped .oc-flip-card__face--back,
+  .oc-flip-card--hover:is(:hover, :focus-within) .oc-flip-card__face--back { opacity: 1; visibility: visible; }
+}

package/dist/parts/media-image-zoom.css

@@ -0,0 +1,68 @@
+/* File: packages/ui/src/parts/media-image-zoom.css | Map: root + zoom variable -> toolbar + level chips
+   -> viewport (scroll = pan) -> canvas (grows with the zoom) -> zoom levels (classes + radios via :has()) -> motion
+   Image zoom: the canvas gets wider than the viewport, so the native scrollbars / touch scrolling pan the image.
+   No JavaScript and no transform tricks: zooming is just inline-size: calc(100% * var(--oc-zoom)). */
+
+.oc-image-zoom {
+  --oc-zoom: 1;
+  --oc-image-zoom-ratio: 16 / 9;
+  display: grid;
+  gap: 0.5rem;
+  inline-size: 100%;
+}
+
+/* ---- Toolbar with zoom level chips (radio buttons) ---- */
+.oc-image-zoom__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-image-zoom__label { margin-inline-end: 0.25rem; }
+.oc-image-zoom__level {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 2.5rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 999px;
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+/* The radio itself is invisible but stays focusable (keyboard: arrow keys switch levels). */
+.oc-image-zoom__level > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.oc-image-zoom__level:has(input:checked) { border-color: var(--oc-primary); background: var(--oc-primary); color: var(--oc-primary-foreground); }
+.oc-image-zoom__level:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Viewport: fixed ratio window; scrolling it pans the image ---- */
+.oc-image-zoom__viewport {
+  aspect-ratio: var(--oc-image-zoom-ratio);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+  scrollbar-width: thin;
+}
+.oc-image-zoom__viewport:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- Canvas: same ratio as the viewport, scaled by --oc-zoom ---- */
+.oc-image-zoom__canvas { inline-size: calc(100% * var(--oc-zoom)); aspect-ratio: var(--oc-image-zoom-ratio); }
+.oc-image-zoom__canvas > * { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+/* ---- Zoom levels: fixed classes, or radio chips (value = level) ---- */
+.oc-image-zoom--150 { --oc-zoom: 1.5; }
+.oc-image-zoom--200 { --oc-zoom: 2; }
+.oc-image-zoom--300 { --oc-zoom: 3; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="1"]:checked) { --oc-zoom: 1; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="1.5"]:checked) { --oc-zoom: 1.5; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="2"]:checked) { --oc-zoom: 2; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="3"]:checked) { --oc-zoom: 3; }
+.oc-image-zoom:has(.oc-image-zoom__level input[value="4"]:checked) { --oc-zoom: 4; }
+
+/* Ratio presets. */
+.oc-image-zoom--square { --oc-image-zoom-ratio: 1 / 1; }
+.oc-image-zoom--photo { --oc-image-zoom-ratio: 4 / 3; }
+
+/* Smooth resize only when motion is welcome. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-image-zoom__canvas { transition: inline-size var(--oc-transition-normal); }
+}

package/dist/parts/media-lightbox.css

@@ -0,0 +1,131 @@
+/* File: packages/ui/src/parts/media-lightbox.css | Map: thumbnails -> dialog + backdrop -> bar -> track + slides
+   -> nav buttons -> caption + counter -> single image -> small screens -> motion
+   Lightbox: one native <dialog> with a scroll-snap track of slides. Thumbnails open it with
+   command="show-modal"; prev / next are anchor links to the slide ids, so it works without JavaScript. */
+
+/* ---- Thumbnails (buttons that open the dialog) ---- */
+.oc-lightbox-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; inline-size: 100%; }
+.oc-lightbox-thumb {
+  display: block;
+  padding: 0;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  background: var(--oc-muted);
+  cursor: zoom-in;
+}
+.oc-lightbox-thumb > * { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--oc-transition-normal); }
+.oc-lightbox-thumb:hover > * { transform: scale(1.04); }
+.oc-lightbox-thumb:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+
+/* ---- The viewer: full-screen modal dialog, dark and blurred behind ---- */
+.oc-lightbox {
+  inline-size: 100vw;
+  block-size: 100dvh;
+  max-inline-size: none;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  background: transparent;
+  color: var(--color-white-50);
+}
+.oc-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
+.oc-lightbox::backdrop { background: oklch(from var(--color-black-60) l c h / 0.88); backdrop-filter: blur(10px); }
+
+/* ---- Top bar: title left, close button right ---- */
+.oc-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; }
+.oc-lightbox__title { margin: 0; font-size: 0.95rem; font-weight: 600; }
+
+/* ---- Track: one slide per screen, snapping. Arrow keys scroll it when it has focus. ---- */
+.oc-lightbox__track {
+  display: flex;
+  min-block-size: 0;
+  overflow-x: auto;
+  overscroll-behavior: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+.oc-lightbox__track:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-lightbox__slide {
+  flex: 0 0 100%;
+  display: grid;
+  grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem;
+  grid-template-rows: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1rem 0;
+  margin: 0;
+  padding-block-end: 1.5rem;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+}
+.oc-lightbox__media { grid-column: 2; grid-row: 1; display: grid; place-items: center; min-block-size: 0; block-size: 100%; }
+.oc-lightbox__media > * {
+  max-inline-size: 100%;
+  max-block-size: calc(100dvh - 9rem);
+  object-fit: contain;
+  border: 1px solid oklch(from var(--color-white-50) l c h / 0.15);
+  border-radius: calc(var(--oc-radius) - 2px);
+  box-shadow: 0 40px 100px -30px oklch(from var(--color-black-60) l c h / 0.9);
+}
+/* Placeholder artwork has no natural size: give it one. */
+.oc-lightbox__media > .oc-media-art { inline-size: min(56rem, 100%); block-size: auto; aspect-ratio: 3 / 2; }
+
+/* ---- Round buttons: close (button) and prev / next (links) ---- */
+.oc-lightbox__close,
+.oc-lightbox__nav {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.75rem;
+  aspect-ratio: 1;
+  border: 1px solid oklch(from var(--color-white-50) l c h / 0.25);
+  border-radius: 50%;
+  background: oklch(from var(--color-white-50) l c h / 0.08);
+  color: inherit;
+  font-size: 1.1rem;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--oc-transition-fast), transform var(--oc-transition-fast);
+}
+.oc-lightbox__close:hover,
+.oc-lightbox__nav:hover { background: oklch(from var(--color-white-50) l c h / 0.18); transform: scale(1.06); }
+.oc-lightbox__close:focus-visible,
+.oc-lightbox__nav:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-lightbox__nav { grid-row: 1; justify-self: center; }
+.oc-lightbox__nav--prev { grid-column: 1; }
+.oc-lightbox__nav--next { grid-column: 3; }
+
+/* ---- Caption with the "2 / 5" counter ---- */
+.oc-lightbox__caption {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.25rem 0.75rem;
+  padding-inline: 1rem;
+  font-size: 0.95rem;
+  text-align: center;
+  color: oklch(from var(--color-white-50) l c h / 0.8);
+}
+.oc-lightbox__counter { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; color: oklch(from var(--color-white-50) l c h / 0.6); }
+
+/* One image only: no prev / next and no counter needed. */
+.oc-lightbox--single .oc-lightbox__nav,
+.oc-lightbox--single .oc-lightbox__counter { visibility: hidden; }
+
+/* Small screens: narrower side columns, smaller buttons. */
+@media (max-width: 40rem) {
+  .oc-lightbox__slide { grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; }
+  .oc-lightbox__nav { inline-size: 2.25rem; }
+}
+
+/* Motion only when the user has not asked for less. */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-lightbox__track { scroll-behavior: smooth; }
+  .oc-lightbox[open] { animation: oc-lightbox-in 0.25s ease-out; }
+}
+@keyframes oc-lightbox-in { from { opacity: 0; scale: 0.98; } }