@birdycom/omniaui 0.0.0-stage → 0.11.0

package/dist/components-extra.css

@@ -0,0 +1,914 @@
+/* File: packages/ui/src/components-extra.css */
+/* Map: spinner · kbd · slider · toggle + toggle-group · item · aspect-ratio · hover-card · menu extras (sub-menu, check/radio items, shortcut) ·
+        menubar · context-menu · carousel · resizable · combobox · drawer · native-select (base-select) · toast stack · calendar · date-picker · chart tokens */
+/* Depends on: components.css (tokens --oc-*, .oc-btn, .oc-dropdown-*, .oc-popover, .oc-toast). Loaded after it in the concatenated bundle.
+   Every color is an --oc-* theme token or an Omnia palette token, so light and dark follow the theme.
+   Native HTML first (popover, dialog, :has(), anchor positioning, scroll-snap); progressive enhancement is wrapped in @supports. */
+
+/* ===================================================================
+   SPINNER — border ring, inherits currentColor. Sizes: --sm · --lg · --xl. Color: set `color` or use --primary.
+   Add role="status" + aria-label (or visually hidden text) so it is announced.
+   =================================================================== */
+.oc-spinner {
+  --oc-spinner-size: 1.25rem;
+  display: inline-block;
+  flex: none;
+  inline-size: var(--oc-spinner-size);
+  block-size: var(--oc-spinner-size);
+  vertical-align: -0.2em;
+  border: max(2px, calc(var(--oc-spinner-size) / 10)) solid color-mix(in oklab, currentColor 22%, transparent);
+  border-block-start-color: currentColor;
+  border-radius: 50%;
+  animation: oc-spinner-rotate 0.75s linear infinite;
+}
+.oc-spinner--sm { --oc-spinner-size: 0.875rem; }
+.oc-spinner--lg { --oc-spinner-size: 2rem; }
+.oc-spinner--xl { --oc-spinner-size: 3rem; }
+.oc-spinner--primary { color: var(--oc-primary); }
+.oc-spinner--muted { color: var(--oc-muted-foreground); }
+@keyframes oc-spinner-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .oc-spinner { animation-duration: 2.5s; }
+}
+
+/* ===================================================================
+   KBD — keyboard key. Group several keys with .oc-kbd-group. Inside a button/tooltip/menu it adapts to the surface.
+   =================================================================== */
+.oc-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 1.4rem;
+  block-size: 1.4rem;
+  padding: 0 0.35rem;
+  font: 600 0.6875rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-block-end-width: 2px;
+  border-radius: calc(var(--oc-radius) - 3px);
+  white-space: nowrap;
+  user-select: none;
+}
+.oc-kbd-group { display: inline-flex; align-items: center; gap: 0.25rem; }
+.oc-kbd-group > .oc-kbd-sep { color: var(--oc-muted-foreground); font-size: 0.75rem; }
+
+/* ===================================================================
+   SLIDER — native <input type="range" class="oc-slider">. Value, step, min/max, keyboard and a11y come from the browser.
+   Fill: Firefox fills natively; for Chromium/WebKit set --oc-slider-progress (e.g. style="--oc-slider-progress: 40%"),
+   optionally kept in sync by the 1-line script shown in the docs. Vertical: .oc-slider--vertical.
+   =================================================================== */
+.oc-slider {
+  --oc-slider-progress: 0%;
+  --oc-slider-track: 0.375rem;
+  --oc-slider-thumb: 1.125rem;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--oc-slider-thumb);
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+  accent-color: var(--oc-primary);
+}
+.oc-slider:focus { outline: none; }
+.oc-slider::-webkit-slider-runnable-track {
+  block-size: var(--oc-slider-track);
+  border-radius: 999px;
+  background: linear-gradient(to right, var(--oc-primary) var(--oc-slider-progress), var(--oc-muted) var(--oc-slider-progress));
+  box-shadow: inset 0 0 0 1px var(--oc-border);
+}
+.oc-slider::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: var(--oc-slider-thumb);
+  block-size: var(--oc-slider-thumb);
+  margin-block-start: calc((var(--oc-slider-track) - var(--oc-slider-thumb)) / 2);
+  border-radius: 50%;
+  border: 2px solid var(--oc-primary);
+  background: var(--oc-background);
+  box-shadow: 0 1px 3px oklch(from var(--color-black-60) l c h / 0.25);
+  transition: box-shadow var(--oc-transition-fast), scale var(--oc-transition-fast);
+}
+.oc-slider::-moz-range-track {
+  block-size: var(--oc-slider-track);
+  border-radius: 999px;
+  background: var(--oc-muted);
+  box-shadow: inset 0 0 0 1px var(--oc-border);
+}
+.oc-slider::-moz-range-progress { block-size: var(--oc-slider-track); border-radius: 999px; background: var(--oc-primary); }
+.oc-slider::-moz-range-thumb {
+  box-sizing: border-box;
+  inline-size: var(--oc-slider-thumb);
+  block-size: var(--oc-slider-thumb);
+  border-radius: 50%;
+  border: 2px solid var(--oc-primary);
+  background: var(--oc-background);
+  box-shadow: 0 1px 3px oklch(from var(--color-black-60) l c h / 0.25);
+}
+.oc-slider:hover::-webkit-slider-thumb { scale: 1.08; }
+.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; }
+.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));
+}
+
+/* ===================================================================
+   TOGGLE — two-state button. Works with <button aria-pressed>, [data-state="on"] or <label class="oc-toggle"><input type="checkbox">.
+   Variants: --outline · sizes --sm · --lg. TOGGLE GROUP: .oc-toggle-group (radio inputs = single, checkbox inputs = multiple).
+   =================================================================== */
+.oc-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-block-size: 2.25rem;
+  padding: 0 0.75rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--oc-transition-fast), color var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+.oc-toggle:hover { background: var(--oc-muted); }
+.oc-toggle:focus-visible,
+.oc-toggle:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-toggle[aria-pressed="true"],
+.oc-toggle[data-state="on"],
+.oc-toggle:has(input:checked) {
+  background: color-mix(in oklab, var(--oc-primary) 16%, transparent);
+  color: var(--oc-foreground);
+}
+.oc-toggle[disabled],
+.oc-toggle:has(input:disabled) { opacity: 0.5; pointer-events: none; }
+.oc-toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; }
+.oc-toggle svg { inline-size: 1rem; block-size: 1rem; flex: none; }
+.oc-toggle--outline { border-color: var(--oc-input); }
+.oc-toggle--outline:hover { background: var(--oc-accent); }
+.oc-toggle--sm { min-block-size: 1.875rem; padding: 0 0.5rem; font-size: 0.8125rem; }
+.oc-toggle--lg { min-block-size: 2.75rem; padding: 0 1rem; font-size: 1rem; }
+.oc-toggle--icon { inline-size: 2.25rem; padding: 0; }
+
+.oc-toggle-group { display: inline-flex; align-items: center; }
+.oc-toggle-group > .oc-toggle { border-radius: 0; }
+.oc-toggle-group > .oc-toggle:first-child { border-start-start-radius: var(--oc-radius); border-end-start-radius: var(--oc-radius); }
+.oc-toggle-group > .oc-toggle:last-child { border-start-end-radius: var(--oc-radius); border-end-end-radius: var(--oc-radius); }
+.oc-toggle-group > .oc-toggle--outline + .oc-toggle--outline { margin-inline-start: -1px; }
+.oc-toggle-group > .oc-toggle--outline[aria-pressed="true"],
+.oc-toggle-group > .oc-toggle--outline:has(input:checked) { z-index: 1; border-color: var(--oc-primary); }
+.oc-toggle-group--spaced { gap: 0.25rem; }
+.oc-toggle-group--spaced > .oc-toggle { border-radius: var(--oc-radius); }
+.oc-toggle-group--spaced > .oc-toggle--outline + .oc-toggle--outline { margin-inline-start: 0; }
+
+/* ===================================================================
+   ITEM — media + content + actions row (settings rows, file lists, search results). Use <div>, <a> or <li>.
+   Variants: --outline · --muted · --sm. Parts: -media (--icon · --image) · -content · -title · -description · -actions · -header · -footer
+   =================================================================== */
+.oc-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  color: var(--oc-foreground);
+  text-decoration: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--oc-radius);
+  transition: background var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+a.oc-item:hover,
+.oc-item--interactive:hover { background: var(--oc-surface-strong); }
+a.oc-item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-item--outline { border-color: var(--oc-border); }
+.oc-item--muted { background: var(--oc-surface); }
+.oc-item--sm { gap: 0.625rem; padding: 0.5rem 0.75rem; }
+.oc-item-media { display: flex; flex: none; align-items: center; justify-content: center; align-self: flex-start; gap: 0.5rem; }
+.oc-item-media--icon {
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  color: var(--oc-foreground);
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+}
+.oc-item-media--icon svg { inline-size: 1.1rem; block-size: 1.1rem; }
+.oc-item-media--image { inline-size: 2.5rem; block-size: 2.5rem; overflow: hidden; border-radius: calc(var(--oc-radius) - 2px); }
+.oc-item-media--image > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
+.oc-item-content { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
+.oc-item-title { margin: 0; font-weight: 500; line-height: 1.35; color: var(--oc-foreground); }
+.oc-item-description { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--oc-muted-foreground); text-wrap: balance; }
+.oc-item-actions { display: flex; flex: none; align-items: center; gap: 0.5rem; }
+.oc-item-header,
+.oc-item-footer { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+.oc-item-group { display: flex; flex-direction: column; }
+.oc-item-group > .oc-item-separator { block-size: 1px; margin: 0; background: var(--oc-border); border: 0; }
+
+/* ===================================================================
+   ASPECT RATIO — box that keeps a ratio; child img/video/iframe fills it. Custom: style="--oc-aspect: 5 / 2"
+   =================================================================== */
+.oc-aspect {
+  --oc-aspect: 16 / 9;
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: var(--oc-aspect);
+  background: var(--oc-muted);
+  border-radius: var(--oc-radius);
+}
+.oc-aspect--square { --oc-aspect: 1 / 1; }
+.oc-aspect--photo { --oc-aspect: 4 / 3; }
+.oc-aspect--portrait { --oc-aspect: 3 / 4; }
+.oc-aspect--wide { --oc-aspect: 21 / 9; }
+.oc-aspect > img,
+.oc-aspect > video,
+.oc-aspect > iframe,
+.oc-aspect > svg,
+.oc-aspect > picture { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; }
+.oc-aspect--center { display: grid; place-items: center; }
+
+/* ===================================================================
+   HOVER CARD — rich preview on hover and keyboard focus. One markup, two engines:
+   - a Chromium that supports `interestfor` opens the [popover] content as a real popover (top layer, hover delay by the browser)
+   - everywhere else :hover / :focus-within on the wrapper shows it (CSS only).
+   Anchor positioning (anchor() insets) keeps the card next to the trigger; anchor-scope makes several cards on one page independent.
+   =================================================================== */
+.oc-hover-card { position: relative; display: inline-block; anchor-scope: --oc-hover-card; }
+.oc-hover-card-trigger { anchor-name: --oc-hover-card; }
+.oc-hover-card-content {
+  position: fixed;
+  inset: auto;
+  position-anchor: --oc-hover-card;
+  inset-block-start: anchor(bottom);
+  inset-inline-start: anchor(start);
+  z-index: 100;
+  display: block;
+  inline-size: 20rem;
+  max-inline-size: calc(100vw - 1rem);
+  margin: 0.5rem 0 0;
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: var(--oc-popover-foreground);
+  background: var(--oc-popover);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
+  visibility: hidden;
+  opacity: 0;
+  translate: 0 -2px;
+  transition: opacity var(--oc-transition-fast) 0s, translate var(--oc-transition-fast) 0s, visibility 0s var(--oc-transition-fast);
+}
+/* invisible bridge so the pointer can travel from trigger to card */
+.oc-hover-card-content::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 0.75rem; }
+.oc-hover-card:hover > .oc-hover-card-content,
+.oc-hover-card:focus-within > .oc-hover-card-content,
+.oc-hover-card-content:popover-open {
+  visibility: visible;
+  opacity: 1;
+  translate: 0 0;
+  transition-delay: 0.35s, 0.35s, 0.35s;
+}
+/* flipping at screen edges only for the popover engine (fresh layout on open); the hover fallback keeps its side */
+.oc-hover-card-content:popover-open { position-try-fallbacks: flip-block, flip-inline; }
+.oc-hover-card--top > .oc-hover-card-content { inset-block-start: auto; inset-block-end: anchor(top); margin: 0 0 0.5rem; }
+.oc-hover-card--top > .oc-hover-card-content::before { inset-block: 100% auto; }
+.oc-hover-card-content--sm { inline-size: 14rem; padding: 0.75rem; }
+@media (prefers-reduced-motion: reduce) {
+  .oc-hover-card-content { transition: none; }
+}
+
+/* ===================================================================
+   MENU EXTRAS (dropdown, menubar, context menu): sub-menus, checkbox/radio items, shortcuts, destructive/disabled items
+   Sub-menu: .oc-dropdown-sub > button.oc-dropdown-item + .oc-dropdown-submenu (opens on hover and focus-within)
+   Check/radio: .oc-dropdown-item + role="menuitemcheckbox|menuitemradio" + aria-checked="true|false"
+   =================================================================== */
+.oc-dropdown-item { position: relative; }
+.oc-dropdown-menu[popover] { overflow: visible; } /* the sub-menus are positioned outside the panel */
+.oc-dropdown-shortcut { margin-inline-start: auto; padding-inline-start: 1.5rem; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--oc-muted-foreground); }
+.oc-dropdown-item[aria-disabled="true"],
+.oc-dropdown-item:disabled { opacity: 0.5; pointer-events: none; }
+.oc-dropdown-item--destructive { color: var(--oc-destructive); }
+.oc-dropdown-item--destructive:hover { background: oklch(from var(--oc-destructive) l c h / 0.12); color: var(--oc-destructive); }
+.oc-dropdown-item--inset,
+.oc-dropdown-item[role="menuitemcheckbox"],
+.oc-dropdown-item[role="menuitemradio"] { padding-inline-start: 2rem; }
+.oc-dropdown-item[role="menuitemcheckbox"]::before,
+.oc-dropdown-item[role="menuitemradio"]::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 0.7rem;
+  inset-block-start: 50%;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  translate: 0 -50%;
+  opacity: 0;
+}
+.oc-dropdown-item[role="menuitemcheckbox"]::before {
+  inline-size: 0.35rem;
+  block-size: 0.65rem;
+  margin-inline-start: 0.12rem;
+  border-inline-end: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  translate: 0 -62%;
+  rotate: 45deg;
+}
+.oc-dropdown-item[role="menuitemradio"]::before { inline-size: 0.45rem; block-size: 0.45rem; margin-inline-start: 0.15rem; border-radius: 50%; background: currentColor; }
+.oc-dropdown-item[aria-checked="true"]::before { opacity: 1; }
+
+.oc-dropdown-sub { position: relative; }
+.oc-dropdown-sub > .oc-dropdown-item::after {
+  content: "";
+  margin-inline-start: auto;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-inline-end: 2px solid currentColor;
+  border-block-start: 2px solid currentColor;
+  rotate: 45deg;
+  opacity: 0.7;
+}
+.oc-dropdown-submenu {
+  position: absolute;
+  inset-block-start: -5px;
+  inset-inline-start: calc(100% + 2px);
+  z-index: 1;
+  min-inline-size: 11rem;
+  padding: 4px;
+  background: var(--oc-popover);
+  color: var(--oc-popover-foreground);
+  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);
+  visibility: hidden;
+  opacity: 0;
+  translate: -4px 0;
+  transition: opacity var(--oc-transition-fast), translate var(--oc-transition-fast), visibility 0s var(--oc-transition-fast);
+}
+.oc-dropdown-sub:hover > .oc-dropdown-submenu,
+.oc-dropdown-sub:focus-within > .oc-dropdown-submenu { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
+.oc-dropdown-sub:hover > .oc-dropdown-item,
+.oc-dropdown-sub:focus-within > .oc-dropdown-item { background: var(--oc-accent); }
+
+/* ===================================================================
+   MENUBAR — horizontal bar of menus. Each trigger is a button with popovertarget; each menu is a
+   <div class="oc-dropdown-menu" popover> (so sub-menus, check items and shortcuts work unchanged).
+   =================================================================== */
+.oc-menubar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+}
+.oc-menubar-trigger {
+  padding: 0.3rem 0.7rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-menubar-trigger:hover,
+.oc-menubar-trigger:focus-visible,
+.oc-menubar-trigger[aria-expanded="true"],
+.oc-menubar-trigger:has(+ :popover-open),
+.oc-menubar-trigger:popover-open { background: var(--oc-accent); outline: none; }
+.oc-menubar-trigger:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* ===================================================================
+   CONTEXT MENU — a dropdown menu opened at the pointer. Markup: <div class="oc-dropdown-menu oc-context-menu" popover role="menu">.
+   Optional script (documented): on `contextmenu` call preventDefault(), set --oc-context-x / --oc-context-y, then showPopover().
+   Area: .oc-context-area gives the right-click target a dashed "drop zone" look.
+   =================================================================== */
+.oc-dropdown-menu.oc-context-menu[popover] {
+  position: fixed;
+  position-area: none;
+  position-try-fallbacks: none;
+  inset: var(--oc-context-y, 0px) auto auto var(--oc-context-x, 0px);
+  margin: 0;
+}
+.oc-context-area {
+  display: grid;
+  place-items: center;
+  min-block-size: 8rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  color: var(--oc-muted-foreground);
+  border: 1px dashed var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+  user-select: none;
+}
+
+/* ===================================================================
+   CAROUSEL — CSS scroll-snap track. Where supported (Chromium 135+) the browser draws ::scroll-button() arrows and
+   ::scroll-marker dots; elsewhere .oc-carousel-dots (anchor links) are the fallback. No JavaScript.
+   Markup: .oc-carousel > .oc-carousel-viewport (tabindex=0, role=region) > .oc-carousel-item + optional .oc-carousel-dots
+   Modifiers: --thirds (3 per view) · --halves (2 per view) · --vertical is not supported (use a list).
+   =================================================================== */
+.oc-carousel { position: relative; anchor-scope: --oc-carousel; }
+.oc-carousel-viewport {
+  anchor-name: --oc-carousel;
+  display: flex;
+  gap: 1rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  border-radius: var(--oc-radius);
+}
+.oc-carousel-viewport::-webkit-scrollbar { display: none; }
+.oc-carousel-viewport:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+@media (prefers-reduced-motion: no-preference) {
+  .oc-carousel-viewport { scroll-behavior: smooth; }
+}
+.oc-carousel-item { flex: 0 0 100%; min-inline-size: 0; scroll-snap-align: center; }
+.oc-carousel--halves .oc-carousel-item { flex-basis: calc((100% - 1rem) / 2); }
+.oc-carousel--thirds .oc-carousel-item { flex-basis: calc((100% - 2rem) / 3); }
+.oc-carousel-dots { display: flex; justify-content: center; gap: 0.5rem; padding-block-start: 0.75rem; }
+.oc-carousel-dot {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--oc-border-strong);
+  transition: background var(--oc-transition-fast);
+}
+.oc-carousel-dot:hover,
+.oc-carousel-dot:focus-visible { background: var(--oc-primary); }
+@supports (scroll-marker-group: after) {
+  .oc-carousel-dots { display: none; }
+  .oc-carousel-viewport { scroll-marker-group: after; }
+  .oc-carousel { padding-block-end: 1.5rem; }
+  .oc-carousel-viewport::scroll-marker-group {
+    position: fixed;
+    position-anchor: --oc-carousel;
+    inset-inline-start: anchor(start);
+    inset-block-start: calc(anchor(end) + 0.5rem);
+    inline-size: anchor-size(inline);
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  .oc-carousel-item::scroll-marker {
+    content: "";
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 999px;
+    background: var(--oc-border-strong);
+    transition: inline-size var(--oc-transition-fast), background var(--oc-transition-fast);
+  }
+  .oc-carousel-item::scroll-marker:target-current { inline-size: 1.25rem; background: var(--oc-primary); }
+  .oc-carousel-item::scroll-marker:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+}
+@supports selector(::scroll-button(inline-start)) {
+  .oc-carousel-viewport::scroll-button(inline-start),
+  .oc-carousel-viewport::scroll-button(inline-end) {
+    position: fixed;
+    position-anchor: --oc-carousel;
+    inset-block-start: anchor(center);
+    translate: 0 -50%;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    font-size: 1rem;
+    color: var(--oc-foreground);
+    background: var(--oc-background);
+    border: 1px solid var(--oc-border);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px oklch(from var(--color-black-60) l c h / 0.18);
+    cursor: pointer;
+  }
+  .oc-carousel-viewport::scroll-button(inline-start) { content: "\2190" / "Previous slide"; inset-inline-start: calc(anchor(start) + 0.5rem); }
+  .oc-carousel-viewport::scroll-button(inline-end) { content: "\2192" / "Next slide"; inset-inline-end: calc(anchor(end) + 0.5rem); }
+  .oc-carousel-viewport::scroll-button(inline-start):hover,
+  .oc-carousel-viewport::scroll-button(inline-end):hover { background: var(--oc-accent); }
+  .oc-carousel-viewport::scroll-button(inline-start):focus-visible,
+  .oc-carousel-viewport::scroll-button(inline-end):focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+  .oc-carousel-viewport::scroll-button(inline-start):disabled,
+  .oc-carousel-viewport::scroll-button(inline-end):disabled { opacity: 0.35; cursor: default; }
+}
+
+/* ===================================================================
+   RESIZABLE — split panes using the native CSS `resize` property (drag the grip in the corner of the resizable panel).
+   A full-length drag handle between panes with keyboard support needs script: wrapper responsibility.
+   Markup: .oc-resizable > .oc-resizable-panel.oc-resizable-panel--resizable + .oc-resizable-panel. Modifier: --vertical.
+   =================================================================== */
+.oc-resizable {
+  display: flex;
+  min-block-size: 10rem;
+  overflow: hidden;
+  font-size: 0.875rem;
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+.oc-resizable-panel { flex: 1 1 0; min-inline-size: 0; min-block-size: 0; padding: 1rem; overflow: auto; }
+.oc-resizable-panel--resizable {
+  flex: 0 0 auto;
+  inline-size: 50%;
+  min-inline-size: 5rem;
+  max-inline-size: calc(100% - 5rem);
+  resize: horizontal;
+  border-inline-end: 1px solid var(--oc-border-strong);
+}
+.oc-resizable-panel--resizable::-webkit-resizer { background: linear-gradient(135deg, transparent 50%, var(--oc-border-strong) 50% 56%, transparent 56% 70%, var(--oc-border-strong) 70% 76%, transparent 76%); }
+.oc-resizable--vertical { flex-direction: column; }
+.oc-resizable--vertical > .oc-resizable-panel--resizable {
+  inline-size: auto;
+  min-inline-size: 0;
+  max-inline-size: none;
+  block-size: 50%;
+  min-block-size: 3rem;
+  max-block-size: calc(100% - 3rem);
+  resize: vertical;
+  border-inline-end: 0;
+  border-block-end: 1px solid var(--oc-border-strong);
+}
+.oc-resizable-box { resize: both; overflow: auto; min-inline-size: 8rem; min-block-size: 4rem; max-inline-size: 100%; }
+
+/* ===================================================================
+   COMBOBOX — input + listbox. CSS gives the look and opens the list while the wrapper has focus (or [data-open]).
+   The wrapper script owns: filtering, aria-activedescendant, aria-selected, writing the chosen value into the input.
+   Markup: .oc-combobox > input.oc-combobox-input[role=combobox] + ul.oc-combobox-list[role=listbox] > li.oc-combobox-option[role=option][tabindex=-1]
+   =================================================================== */
+.oc-combobox { position: relative; display: inline-block; inline-size: min(100%, 18rem); }
+.oc-combobox-input { padding-inline-end: 2.25rem; }
+.oc-combobox::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 1.05rem;
+  inset-inline-end: 0.9rem;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-inline-end: 2px solid var(--oc-muted-foreground);
+  border-block-end: 2px solid var(--oc-muted-foreground);
+  rotate: 45deg;
+  pointer-events: none;
+  transition: rotate var(--oc-transition-fast);
+}
+.oc-combobox:focus-within::after,
+.oc-combobox[data-open]::after { rotate: 225deg; translate: 0 3px; }
+.oc-combobox-list {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-start: calc(100% + 4px);
+  z-index: 100;
+  max-block-size: 15rem;
+  margin: 0;
+  padding: 4px;
+  overflow-y: auto;
+  list-style: none;
+  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);
+  visibility: hidden;
+  opacity: 0;
+  translate: 0 -4px;
+  transition: opacity var(--oc-transition-fast), translate var(--oc-transition-fast), visibility 0s var(--oc-transition-fast);
+}
+.oc-combobox:focus-within > .oc-combobox-list,
+.oc-combobox[data-open] > .oc-combobox-list { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; }
+.oc-combobox[data-open="false"] > .oc-combobox-list { visibility: hidden; opacity: 0; }
+.oc-combobox-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.45rem 0.625rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  outline: none;
+}
+.oc-combobox-option:hover,
+.oc-combobox-option:focus-visible,
+.oc-combobox-option[data-active] { background: var(--oc-accent); color: var(--oc-accent-foreground); }
+.oc-combobox-option[aria-selected="true"]::after {
+  content: "";
+  inline-size: 0.35rem;
+  block-size: 0.65rem;
+  border-inline-end: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  rotate: 45deg;
+  margin-inline-end: 0.2rem;
+}
+.oc-combobox-option[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
+.oc-combobox-option[hidden],
+.oc-combobox-empty[hidden] { display: none; }
+.oc-combobox-group { padding: 0.5rem 0.625rem 0.25rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--oc-muted-foreground); }
+.oc-combobox-empty { padding: 1rem; text-align: center; color: var(--oc-muted-foreground); }
+
+/* ===================================================================
+   DRAWER — bottom sheet on <dialog> with a drag-handle look. Open: <button command="show-modal" commandfor="id">.
+   Dismiss: command="close", Esc or closedby="any" (tap outside). Swipe-to-dismiss is not built in (needs script).
+   =================================================================== */
+dialog.oc-drawer {
+  display: none;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--oc-foreground);
+}
+dialog.oc-drawer[open] { display: flex; align-items: flex-end; justify-content: center; }
+dialog.oc-drawer::backdrop { background: oklch(from var(--color-black-60) l c h / 0.5); backdrop-filter: blur(4px); }
+.oc-drawer-content {
+  display: flex;
+  flex-direction: column;
+  inline-size: min(100%, 32rem);
+  max-block-size: 85dvh;
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border);
+  border-block-end: 0;
+  border-radius: calc(var(--oc-radius) * 2) calc(var(--oc-radius) * 2) 0 0;
+  box-shadow: 0 -16px 48px oklch(from var(--color-black-60) l c h / 0.2);
+}
+dialog.oc-drawer[open] .oc-drawer-content {
+  transition: translate var(--oc-transition-normal), opacity var(--oc-transition-normal);
+  @starting-style { translate: 0 100%; opacity: 0; }
+}
+.oc-drawer-handle { flex: none; inline-size: 3rem; block-size: 0.3rem; margin: 0.625rem auto 0; background: var(--oc-border-strong); border-radius: 999px; }
+.oc-drawer-header { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.5rem 0; text-align: center; }
+.oc-drawer-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--oc-foreground); }
+.oc-drawer-description { margin: 0; font-size: 0.875rem; color: var(--oc-muted-foreground); }
+.oc-drawer-body { flex: 1; min-block-size: 0; padding: 1rem 1.5rem; overflow-y: auto; font-size: 0.875rem; }
+.oc-drawer-footer { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.5rem 1.5rem; }
+@media (min-width: 40rem) {
+  dialog.oc-drawer--center[open] { align-items: center; }
+  dialog.oc-drawer--center .oc-drawer-content { border-block-end: 1px solid var(--oc-border); border-radius: calc(var(--oc-radius) * 2); }
+  dialog.oc-drawer--center .oc-drawer-handle { display: none; }
+}
+
+/* ===================================================================
+   NATIVE SELECT — the real <select>. .oc-select (components.css) styles the closed control everywhere.
+   Add .oc-select--custom where `appearance: base-select` exists to also style the picker popup (rounded, themed, checkmark).
+   =================================================================== */
+@supports (appearance: base-select) {
+  .oc-select--custom,
+  .oc-select--custom::picker(select) { appearance: base-select; }
+  .oc-select--custom { background-image: none; padding-inline-end: 0.75rem; align-items: center; }
+  .oc-select--custom::picker-icon { color: var(--oc-muted-foreground); transition: rotate var(--oc-transition-fast); }
+  .oc-select--custom:open::picker-icon { rotate: 180deg; }
+  .oc-select--custom::picker(select) {
+    padding: 4px;
+    margin-block: 4px;
+    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);
+    transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
+  }
+  .oc-select--custom:open::picker(select) { opacity: 1; @starting-style { opacity: 0; } }
+  .oc-select--custom option { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.625rem; border-radius: calc(var(--oc-radius) - 2px); }
+  .oc-select--custom option:hover,
+  .oc-select--custom option:focus-visible { background: var(--oc-accent); color: var(--oc-accent-foreground); outline: none; }
+  .oc-select--custom option:checked { font-weight: 600; }
+  .oc-select--custom option::checkmark { order: 1; margin-inline-start: auto; color: var(--oc-primary); }
+}
+
+/* ===================================================================
+   TOAST STACK — stacked toasts (newest in front, older ones peek out above). Hover or focus expands the stack.
+   Add .oc-toast-container--stack to .oc-toast-container; put the NEWEST toast LAST. Up to 4 visible layers.
+   =================================================================== */
+.oc-toast-container--stack { display: grid; align-items: end; gap: 0; padding-block-start: 1.5rem; pointer-events: none; }
+.oc-toast-container--stack > .oc-toast {
+  --oc-stack-depth: 0;
+  grid-area: 1 / 1;
+  transform-origin: 50% 100%;
+  translate: 0 calc(var(--oc-stack-depth) * -0.7rem);
+  scale: calc(1 - var(--oc-stack-depth) * 0.05);
+  opacity: calc(1 - var(--oc-stack-depth) * 0.25);
+  z-index: calc(10 - var(--oc-stack-depth));
+  transition: translate var(--oc-transition-normal), scale var(--oc-transition-normal), opacity var(--oc-transition-normal);
+}
+.oc-toast-container--stack > .oc-toast:nth-last-child(2) { --oc-stack-depth: 1; }
+.oc-toast-container--stack > .oc-toast:nth-last-child(3) { --oc-stack-depth: 2; }
+.oc-toast-container--stack > .oc-toast:nth-last-child(4) { --oc-stack-depth: 3; }
+.oc-toast-container--stack > .oc-toast:nth-last-child(n + 5) { --oc-stack-depth: 4; opacity: 0; visibility: hidden; }
+.oc-toast-container--stack > .oc-toast:not(:last-child) { pointer-events: none; }
+.oc-toast-container--stack > .oc-toast:not(:last-child) > * { visibility: hidden; }
+.oc-toast-container--stack:hover,
+.oc-toast-container--stack:focus-within { display: flex; flex-direction: column; gap: 0.5rem; pointer-events: auto; }
+.oc-toast-container--stack:hover > .oc-toast,
+.oc-toast-container--stack:focus-within > .oc-toast { translate: none; scale: none; opacity: 1; visibility: visible; pointer-events: auto; }
+.oc-toast-container--stack:hover > .oc-toast > *,
+.oc-toast-container--stack:focus-within > .oc-toast > * { visibility: visible; }
+@media (prefers-reduced-motion: reduce) {
+  .oc-toast-container--stack > .oc-toast { transition: none; }
+}
+
+/* ===================================================================
+   CALENDAR — month view markup (table role="grid") styled as a calendar. Markup only: the month math and selection
+   state (aria-selected, --range-*) come from your code; a native <input type="date"> remains the zero-JS option.
+   Parts: -header · -title · -nav · -grid · -weekday · -day (button) . Day states: [aria-selected=true] · --today · --outside · --range-start/-middle/-end · :disabled
+   =================================================================== */
+.oc-calendar {
+  --oc-calendar-cell: 2.25rem;
+  display: inline-block;
+  padding: 0.75rem;
+  color: var(--oc-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+}
+.oc-calendar-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.5rem; }
+.oc-calendar-title { margin: 0; font-size: 0.875rem; font-weight: 600; }
+.oc-calendar-nav {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  padding: 0;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 1px solid var(--oc-input);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+}
+.oc-calendar-nav:hover { background: var(--oc-accent); }
+.oc-calendar-nav:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-calendar-grid { border-collapse: collapse; table-layout: fixed; }
+.oc-calendar-grid th,
+.oc-calendar-grid td { padding: 0; text-align: center; }
+.oc-calendar-weekday { inline-size: var(--oc-calendar-cell); padding-block-end: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--oc-muted-foreground); }
+.oc-calendar-day {
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--oc-calendar-cell);
+  block-size: var(--oc-calendar-cell);
+  padding: 0;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--oc-foreground);
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+}
+.oc-calendar-day:hover { background: var(--oc-accent); }
+.oc-calendar-day:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-calendar-day--today { background: var(--oc-muted); font-weight: 600; }
+.oc-calendar-day--outside { color: var(--oc-muted-foreground); opacity: 0.55; }
+.oc-calendar-day:disabled { opacity: 0.35; pointer-events: none; }
+.oc-calendar-day[aria-selected="true"],
+.oc-calendar-day--range-start,
+.oc-calendar-day--range-end { background: var(--oc-primary); color: var(--oc-primary-foreground); font-weight: 600; opacity: 1; }
+.oc-calendar-day--range-middle { background: color-mix(in oklab, var(--oc-primary) 16%, transparent); border-radius: 0; }
+.oc-calendar-day--range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
+.oc-calendar-day--range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
+
+/* ===================================================================
+   DATE PICKER — button trigger + popover with a calendar. The popover modifier removes padding so the calendar is the panel.
+   Zero-JS alternative: <input class="oc-input" type="date"> (native picker; inherits color-scheme, so it follows the page theme, not the OS).
+   =================================================================== */
+.oc-popover--calendar[popover] { inline-size: auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
+.oc-popover--calendar .oc-calendar { box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15); }
+.oc-date-picker-trigger { justify-content: space-between; min-inline-size: 14rem; font-weight: 400; }
+.oc-date-picker-trigger[data-empty] { color: var(--oc-muted-foreground); }
+input.oc-input[type="date"],
+input.oc-input[type="time"],
+input.oc-input[type="datetime-local"],
+input.oc-input[type="month"] { inline-size: auto; min-inline-size: 11rem; }
+
+/* ===================================================================
+   CHART TOKENS — categorical series colors from the Omnia palette (light-dark). Use as fill/stroke/background.
+   Helpers: .oc-chart-legend · .oc-chart-swatch · .oc-chart-bars (+ --oc-bar) · .oc-chart-pie (conic-gradient from inline stops)
+   Series: nth-child auto-assigns --oc-chart-color 1..5 on .oc-chart-bars > *, .oc-chart-legend > *.
+   =================================================================== */
+:root {
+  --oc-chart-1: light-dark(var(--color-vividblue-95), var(--color-vividblue-50));
+  --oc-chart-2: light-dark(var(--color-teal-70), var(--color-teal-30));
+  --oc-chart-3: light-dark(var(--color-orange-90), var(--color-orange-50));
+  --oc-chart-4: light-dark(var(--color-purple-50), var(--color-purple-30));
+  --oc-chart-5: light-dark(var(--color-pink-95), var(--color-pink-50));
+  --oc-chart-grid: var(--oc-border);
+  --oc-chart-axis: var(--oc-muted-foreground);
+}
+.oc-chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-chart-legend > li { display: inline-flex; align-items: center; gap: 0.4rem; }
+.oc-chart-swatch { inline-size: 0.65rem; block-size: 0.65rem; flex: none; border-radius: 2px; background: var(--oc-chart-color, var(--oc-chart-1)); }
+.oc-chart-legend > :nth-child(1) { --oc-chart-color: var(--oc-chart-1); }
+.oc-chart-legend > :nth-child(2) { --oc-chart-color: var(--oc-chart-2); }
+.oc-chart-legend > :nth-child(3) { --oc-chart-color: var(--oc-chart-3); }
+.oc-chart-legend > :nth-child(4) { --oc-chart-color: var(--oc-chart-4); }
+.oc-chart-legend > :nth-child(5) { --oc-chart-color: var(--oc-chart-5); }
+.oc-chart-bars {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: end;
+  gap: 0.5rem;
+  block-size: 10rem;
+  margin: 0;
+  padding: 0 0 0.25rem;
+  list-style: none;
+  border-block-end: 1px solid var(--oc-chart-grid);
+  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--oc-chart-grid) calc(25% - 1px) 25%);
+}
+.oc-chart-bars > * {
+  --oc-bar: 50%;
+  block-size: var(--oc-bar);
+  background: var(--oc-chart-color, var(--oc-chart-1));
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  font-size: 0.7rem;
+  text-align: center;
+  color: var(--oc-primary-foreground);
+}
+.oc-chart-bars > :nth-child(5n + 1) { --oc-chart-color: var(--oc-chart-1); }
+.oc-chart-bars > :nth-child(5n + 2) { --oc-chart-color: var(--oc-chart-2); }
+.oc-chart-bars > :nth-child(5n + 3) { --oc-chart-color: var(--oc-chart-3); }
+.oc-chart-bars > :nth-child(5n + 4) { --oc-chart-color: var(--oc-chart-4); }
+.oc-chart-bars > :nth-child(5n + 5) { --oc-chart-color: var(--oc-chart-5); }
+.oc-chart-pie { --oc-pie-size: 9rem; inline-size: var(--oc-pie-size); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--oc-chart-1) 0 40%, var(--oc-chart-2) 0 65%, var(--oc-chart-3) 0 82%, var(--oc-chart-4) 0 100%); }
+.oc-chart-pie--donut { mask: radial-gradient(circle, transparent 0 52%, var(--color-black-60) 53%); }
+
+/* ===================================================================
+   EXTENSIONS OF EXISTING COMPONENTS (registered in the manifest): button-group · label · radio · scroll-area · separator
+   =================================================================== */
+.oc-btn-group > .oc-btn:focus-visible { position: relative; z-index: 1; }
+.oc-btn-group--vertical { flex-direction: column; }
+.oc-btn-group--vertical .oc-btn,
+.oc-btn-group--vertical .oc-btn:first-child,
+.oc-btn-group--vertical .oc-btn:last-child { border-radius: 0; }
+.oc-btn-group--vertical .oc-btn:first-child { border-radius: var(--oc-radius) var(--oc-radius) 0 0; }
+.oc-btn-group--vertical .oc-btn:last-child { border-radius: 0 0 var(--oc-radius) var(--oc-radius); }
+.oc-btn-group--vertical .oc-btn + .oc-btn { margin-left: 0; margin-top: -1px; }
+.oc-btn-group-text {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  font-size: 0.875rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-input);
+  margin-left: -1px;
+}
+
+.oc-label--required::after { content: " *"; color: var(--oc-destructive); }
+.oc-label--inline { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0; cursor: pointer; }
+.oc-label--muted { font-weight: 400; color: var(--oc-muted-foreground); }
+
+.oc-radio-group { display: flex; flex-direction: column; gap: 0.625rem; margin: 0; padding: 0; border: 0; }
+.oc-radio-group--row { flex-direction: row; flex-wrap: wrap; gap: 0.625rem 1.25rem; }
+.oc-radio-item { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--oc-foreground); cursor: pointer; }
+.oc-radio-item > .oc-radio { flex: none; margin-block-start: 0.15rem; }
+.oc-radio-item small { display: block; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-radio-item:has(:disabled) { opacity: 0.55; cursor: not-allowed; }
+.oc-radio-item--card { padding: 0.75rem 1rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius); }
+.oc-radio-item--card:has(:checked) { border-color: var(--oc-primary); background: color-mix(in oklab, var(--oc-primary) 8%, transparent); }
+.oc-radio-item--card:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+.oc-scroll-area {
+  max-block-size: 14rem;
+  padding: 0.75rem 1rem;
+  overflow: auto;
+  font-size: 0.875rem;
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  scrollbar-width: thin;
+  scrollbar-color: var(--oc-border-strong) transparent;
+}
+.oc-scroll-area:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-scroll-area--x { max-block-size: none; overflow-y: hidden; white-space: nowrap; }
+/* shadows at the edges that still have content to scroll to (pure CSS, no JavaScript) */
+.oc-scroll-area--shadows {
+  --oc-scroll-shadow: oklch(from var(--oc-foreground) l c h / 0.18);
+  background:
+    linear-gradient(var(--oc-card) 30%, transparent) center top / 100% 2rem no-repeat local,
+    linear-gradient(transparent, var(--oc-card) 70%) center bottom / 100% 2rem no-repeat local,
+    radial-gradient(farthest-side at 50% 0, var(--oc-scroll-shadow), transparent) center top / 100% 0.6rem no-repeat scroll,
+    radial-gradient(farthest-side at 50% 100%, var(--oc-scroll-shadow), transparent) center bottom / 100% 0.6rem no-repeat scroll,
+    var(--oc-card);
+}
+
+.oc-separator-text { display: flex; align-items: center; gap: 0.75rem; margin: 16px 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--oc-muted-foreground); }
+.oc-separator-text::before,
+.oc-separator-text::after { content: ""; flex: 1; block-size: 1px; background: var(--oc-border); }
+.oc-separator--strong { background: var(--oc-border-strong); }