@birdycom/omniaui 0.0.0-stage → 0.11.0

package/dist/docs-ui.css

@@ -0,0 +1,265 @@
+/* ===================================================================
+   DOCS UI — the pieces the OmniaCSS documentation site is built from, offered as components.
+   Index: sidebar--docs · toc · topbar (+ navmenu--site) · footerbar · search · demo panel · code-window copy ·
+          btn--toggle ("Show more")
+   Every color is an --oc-* theme token or an Omnia palette token, so light and dark follow the theme.
+   =================================================================== */
+
+/* ---- Sidebar, documentation variant: .oc-sidebar.oc-sidebar--docs -------------------------------
+   Same parts as the app sidebar (menu, menu-button, menu-sub, group-label) plus .oc-sidebar-title.
+   Outlined "pill" items, always-visible sub items, no own scroll (the page shell scrolls it).        */
+.oc-sidebar--docs {
+  --oc-sidebar-width: auto;
+  --oc-sidebar-docs-active: oklch(from var(--oc-primary) l c h / 0.1);
+  inline-size: auto;
+  block-size: auto;
+  background: transparent;
+  border: 0;
+  gap: 0;
+}
+.oc-sidebar-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--oc-foreground); }
+.oc-sidebar--docs .oc-sidebar-group-label {
+  margin: 1rem 0 0.5rem;
+  padding: 0;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--oc-muted-foreground);
+}
+.oc-sidebar--docs .oc-sidebar-menu { gap: 6px; }
+.oc-sidebar--docs .oc-sidebar-menu-button {
+  display: block;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid transparent;
+  border-radius: 8px;
+}
+.oc-sidebar--docs .oc-sidebar-menu-button:hover {
+  color: var(--oc-foreground);
+  border-color: var(--oc-border);
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-sidebar--docs .oc-sidebar-menu-button[aria-current="page"],
+.oc-sidebar--docs .oc-sidebar-menu-button.is-active {
+  color: var(--oc-foreground);
+  font-weight: 500;
+  border-color: var(--oc-primary);
+  background: var(--oc-sidebar-docs-active);
+}
+.oc-sidebar--docs .oc-sidebar-menu-sub {
+  margin: 4px 0 0 0.625rem;
+  padding: 0 0 0 0.625rem;
+  gap: 4px;
+  border-inline-start: 1px dashed var(--oc-border);
+}
+.oc-sidebar--docs .oc-sidebar-menu-sub .oc-sidebar-menu-button { padding: 0.375rem 0.5rem; font-size: 0.84rem; }
+.oc-sidebar--docs details.oc-sidebar-collapsible > summary { display: flex; }
+/* Docs sidebars never switch to icon-only mode */
+.oc-sidebar--docs.oc-sidebar--collapsed { inline-size: auto; }
+
+/* ---- On this page: .oc-toc ---------------------------------------------------------------------- */
+.oc-toc { position: sticky; inset-block-start: 0; max-block-size: 100%; overflow: auto; padding-block-start: 2px; padding-inline-end: 0.5rem; }
+.oc-toc-title { margin: 1rem 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--oc-muted-foreground); }
+.oc-toc-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.oc-toc-link {
+  display: block;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  color: var(--oc-muted-foreground);
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+}
+.oc-toc-link:hover { color: var(--oc-foreground); border-color: var(--oc-border); }
+.oc-toc-link:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-toc-link[aria-current],
+.oc-toc-link.is-active { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+/* Scroll-spy without JavaScript: the link of the heading you are reading is highlighted (native :target-current). */
+.oc-toc-list { scroll-target-group: auto; }
+.oc-toc-link:target-current { color: var(--oc-foreground); border-color: var(--oc-primary); background: oklch(from var(--oc-primary) l c h / 0.1); }
+.oc-toc-item--sub { margin-inline-start: 0.75rem; }
+.oc-toc-item--sub .oc-toc-link { font-size: 0.8125rem; }
+
+/* ---- Site header: .oc-topbar (+ .oc-navmenu--site) ----------------------------------------------
+   Brand · navigation · actions. Tune per site with --ocm-header-height, --ocm-header-bg, --ocm-header-border. */
+.oc-topbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  box-sizing: border-box;
+  min-block-size: var(--ocm-header-height, 3.75rem);
+  flex-wrap: wrap;
+  padding-inline: clamp(14px, 2vw, 28px);
+  color: var(--oc-foreground);
+  background: var(--ocm-header-bg, oklch(from var(--oc-background) l c h / 0.78));
+  border-block-end: 1px solid var(--ocm-header-border, var(--oc-border));
+  backdrop-filter: blur(6px);
+}
+.oc-topbar--fixed { position: fixed; inset: 0 0 auto 0; z-index: 1100; }
+.oc-topbar-brand { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; color: inherit; text-decoration: none; white-space: nowrap; }
+.oc-topbar-nav { display: block; }
+.oc-topbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin: 0; }
+
+/* Pill style menu (site navigation) */
+.oc-navmenu--site { gap: 8px; }
+.oc-navmenu--site .oc-navmenu-link {
+  gap: 4px;
+  padding: 0.5rem 0.75rem;
+  font-weight: 400;
+  border: 1px solid var(--oc-border);
+  border-radius: 10px;
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-navmenu--site .oc-navmenu-link:hover,
+.oc-navmenu--site .oc-navmenu-link[aria-current="page"] {
+  color: var(--oc-foreground);
+  border-color: var(--oc-primary);
+  background: oklch(from var(--oc-foreground) l c h / 0.03);
+}
+.oc-navmenu-icon { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
+
+/* CSS-only mobile menu: <input type="checkbox" class="oc-topbar-toggle"> + <label class="oc-topbar-burger"> */
+.oc-topbar-toggle { position: absolute; opacity: 0; pointer-events: none; }
+.oc-topbar-burger {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.25rem;
+  block-size: 2.25rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+  color: var(--oc-foreground);
+}
+.oc-topbar-burger:hover { background: var(--oc-accent); }
+.oc-topbar-toggle:focus-visible + .oc-topbar-burger { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+@media (max-width: 760px) {
+  .oc-topbar { padding-block: 8px; }
+  .oc-topbar--collapsible .oc-topbar-burger { display: inline-flex; }
+  .oc-topbar--collapsible .oc-topbar-nav { display: none; order: 3; inline-size: 100%; }
+  .oc-topbar--collapsible:has(.oc-topbar-toggle:checked) .oc-topbar-nav { display: block; }
+}
+
+/* ---- Site footer bar: .oc-footerbar ------------------------------------------------------------- */
+.oc-footerbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25em;
+  box-sizing: border-box;
+  block-size: var(--ocm-footer-height, 2.25rem);
+  padding-inline: clamp(14px, 2vw, 28px);
+  font-size: 0.82rem;
+  text-align: center;
+  color: var(--oc-muted-foreground);
+  background: var(--ocm-footer-bg, oklch(from var(--oc-background) l c h / 0.9));
+  border-block-start: 1px solid var(--ocm-header-border, var(--oc-border));
+  backdrop-filter: blur(6px);
+}
+.oc-footerbar a { color: var(--oc-primary); }
+.oc-footerbar--fixed { position: fixed; inset: auto 0 0 0; z-index: 1000; }
+
+/* ---- Search field: .oc-search ------------------------------------------------------------------- */
+.oc-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  inline-size: 100%;
+  max-inline-size: 20rem;
+  padding-inline: 0.625rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-background);
+  border: 1px solid var(--oc-border-strong);
+  border-radius: var(--oc-radius);
+}
+.oc-search:focus-within { border-color: var(--oc-ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--oc-ring) 25%, transparent); }
+.oc-search-icon { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; }
+.oc-search-input { flex: 1; min-inline-size: 0; padding-block: 0.5rem; font: inherit; font-size: 0.875rem; color: var(--oc-foreground); background: none; border: 0; outline: 0; }
+.oc-search-input::placeholder { color: var(--oc-muted-foreground); }
+.oc-search-input::-webkit-search-cancel-button { cursor: pointer; }
+.oc-search-hint {
+  padding: 0.1rem 0.4rem;
+  font: 0.72rem var(--oc-font-mono, ui-monospace, monospace);
+  color: var(--oc-muted-foreground);
+  border: 1px solid var(--oc-border);
+  border-radius: 4px;
+}
+.oc-search:focus-within .oc-search-hint { display: none; }
+
+/* ---- Demo panel: .oc-demo -----------------------------------------------------------------------
+   "Demo" title -> live preview -> "Code" title -> code block. Variant --tabs shows preview OR code (radio tabs, CSS only). */
+.oc-demo {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin: 12px 0 20px;
+  padding: clamp(12px, 2vw, 20px);
+  border: 1px solid var(--oc-border);
+  border-radius: 12px;
+  background: color-mix(in oklch, light-dark(var(--color-white-50), var(--color-shallowblue-80)) 70%, transparent);
+}
+.oc-demo > .oc-preview__title { margin: 4px 0 0; }
+.oc-demo__preview {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-start;
+  padding: clamp(12px, 2vw, 20px);
+  border: 1px solid var(--oc-border);
+  border-radius: 10px;
+  background: var(--oc-background);
+  overflow-x: auto;
+}
+.oc-demo__preview > * { min-width: 0; }
+.oc-demo__preview--tall { min-block-size: 20rem; align-items: flex-start; overflow: visible; }
+.oc-demo__preview--center { justify-content: center; align-items: center; }
+.oc-demo .oc-code-block { margin: 0; }
+
+.oc-demo__tablist { display: flex; gap: 4px; padding: 3px; inline-size: fit-content; border-radius: calc(var(--oc-radius) + 2px); background: var(--oc-muted); }
+.oc-demo__tab { position: relative; padding: 0.3rem 0.9rem; font-size: 0.8125rem; font-weight: 500; color: var(--oc-muted-foreground); border-radius: var(--oc-radius); cursor: pointer; }
+.oc-demo__tab input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
+.oc-demo__tab:has(input:checked) { color: var(--oc-foreground); background: var(--oc-background); box-shadow: 0 1px 2px oklch(from var(--oc-foreground) l c h / 0.15); }
+.oc-demo__tab:has(input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+.oc-demo--tabs > .oc-demo__code { display: none; }
+.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__preview { display: none; }
+.oc-demo--tabs:has(.oc-demo__tab:nth-child(2) input:checked) > .oc-demo__code { display: block; }
+
+/* ---- Code window + copy button ------------------------------------------------------------------- */
+.oc-code-copy {
+  position: absolute;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  font: inherit;
+  font-size: 0.75rem;
+  color: var(--oc-muted-foreground);
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  transition: color var(--oc-transition-fast), border-color var(--oc-transition-fast);
+}
+.oc-code-copy:hover { color: var(--oc-foreground); border-color: var(--oc-border-strong); }
+.oc-code-copy:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-code-copy.is-copied { color: var(--oc-success); border-color: currentColor; }
+.oc-code-window:has(.oc-code-copy) { position: relative; }
+.oc-code-window__bar .oc-code-copy { position: static; margin-inline-start: auto; }
+
+/* ---- Toggle button ("Show more / Show less"): .oc-btn--toggle ------------------------------------
+   <label class="oc-btn oc-btn--outline oc-btn--toggle"><input type="checkbox"> <span class="oc-btn-toggle__off">…</span> <span class="oc-btn-toggle__on">…</span></label>
+   Reveal content in the same container with .oc-showmore / .oc-showmore__extra.                          */
+.oc-btn--toggle { position: relative; }
+.oc-btn--toggle > input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
+.oc-btn--toggle:has(> input:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+.oc-btn--toggle .oc-btn-toggle__on,
+.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__off { display: none; }
+.oc-btn--toggle:has(> input:checked) .oc-btn-toggle__on { display: inline; }
+.oc-showmore__extra { display: none; }
+.oc-showmore:has(.oc-btn--toggle > input:checked) .oc-showmore__extra { display: revert; }
+
+/* Wide docs components take the full width of a demo preview */
+.oc-demo__preview > :is(.oc-topbar, .oc-footerbar, .oc-demo, .oc-code-window, .oc-expandable-table, .oc-showmore) { flex: 1 1 100%; }
+/* Marketing pieces that should span the preview stage (timeline, facts, project and price cards). */
+.oc-demo__preview > :is(.oc-timeline, .oc-fact-list, .oc-project-card, .oc-price-card) { inline-size: 100%; }

package/dist/oc-theme.css

@@ -0,0 +1,69 @@
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.11.0. Do not edit. */
+/* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
+/* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
+:root {
+  color-scheme: light dark;
+
+  /* Brand */
+  --oc-brand-1: light-dark(var(--color-teal-80), var(--color-skycyan-60));
+  --oc-brand-2: light-dark(var(--color-blue-40), var(--color-blue-10));
+  --oc-brand-3: light-dark(var(--color-purple-40), var(--color-purple-10));
+
+  /* Core surfaces */
+  --oc-background: light-dark(var(--color-frostblue-2), var(--color-shallowblue-95));
+  --oc-foreground: light-dark(var(--color-duskblue-60), var(--color-frostblue-10));
+  --oc-muted: light-dark(var(--color-frostblue-60), var(--color-shallowblue-50));
+  --oc-muted-foreground: light-dark(var(--color-stormblue-40), var(--color-mistblue-70));
+  --oc-card: light-dark(var(--color-white-50), var(--color-shallowblue-70));
+  --oc-popover: light-dark(var(--color-white-50), var(--color-shallowblue-60));
+  --oc-popover-foreground: var(--oc-foreground);
+  --oc-surface: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.04), oklch(from var(--color-white-50) l c h / 0.04));
+  --oc-surface-strong: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.08), oklch(from var(--color-white-50) l c h / 0.07));
+
+  /* Semantic accents */
+  --oc-primary: light-dark(var(--color-vividblue-95), var(--color-vividblue-100));
+  --oc-primary-foreground: light-dark(var(--color-white-50), var(--color-shallowblue-95));
+  --oc-secondary: var(--oc-muted);
+  --oc-secondary-foreground: var(--oc-foreground);
+  --oc-accent: var(--oc-muted);
+  --oc-accent-foreground: var(--oc-foreground);
+  --oc-destructive: light-dark(var(--color-red-70), var(--color-red-50));
+  --oc-destructive-foreground: var(--color-white-50);
+  --oc-success: light-dark(var(--color-green-60), var(--color-green-2));
+  --oc-success-foreground: light-dark(var(--color-white-50), var(--color-shallowblue-95));
+  --oc-warning: light-dark(var(--color-orange-95), var(--color-orange-50));
+  --oc-warning-foreground: light-dark(var(--color-white-50), var(--color-shallowblue-95));
+
+  /* Borders and inputs */
+  --oc-border: light-dark(var(--color-frostblue-80), var(--color-duskblue-30));
+  --oc-border-strong: light-dark(var(--color-mistblue-80), var(--color-stormblue-30));
+  --oc-input: var(--oc-border);
+  --oc-ring: var(--oc-primary);
+
+  /* Interaction states */
+  --oc-row-alt: light-dark(var(--color-frostblue-2), var(--color-shallowblue-100));
+  --oc-hover: light-dark(var(--color-frostblue-100), var(--color-duskblue-50));
+  --oc-pressed: light-dark(var(--color-frostblue-60), var(--color-duskblue-40));
+  --oc-selected: light-dark(var(--color-mistblue-2), var(--color-stormblue-60));
+  --oc-selected-foreground: var(--oc-foreground);
+  --oc-disabled-foreground: light-dark(var(--color-duskblue-2), var(--color-duskblue-10));
+
+  /* Gradients */
+  --oc-gradient-brand: linear-gradient(100deg, var(--oc-brand-1), var(--oc-brand-2) 50%, var(--oc-brand-3));
+
+  /* Shape, focus, motion, fonts */
+  --oc-radius: 0.5rem;
+  --oc-focus-width: 2px;
+  --oc-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --oc-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --oc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Cantarell, "Helvetica Neue", sans-serif;
+  --oc-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, ui-monospace, monospace;
+
+  /* Shadows (x y blur spread; color + alpha per mode in --oc-shadow-<name>-color) */
+  --oc-shadow-sm-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.08), oklch(from var(--color-black-50) l c h / 0.4));
+  --oc-shadow-sm: 0px 1px 2px 0px var(--oc-shadow-sm-color);
+  --oc-shadow-md-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.12), oklch(from var(--color-black-50) l c h / 0.5));
+  --oc-shadow-md: 0px 4px 12px -2px var(--oc-shadow-md-color);
+  --oc-shadow-lg-color: light-dark(oklch(from var(--color-stormblue-50) l c h / 0.16), oklch(from var(--color-black-50) l c h / 0.6));
+  --oc-shadow-lg: 0px 12px 32px -6px var(--oc-shadow-lg-color);
+}

package/dist/parts/app-accordion-accent.css

@@ -0,0 +1,60 @@
+/* File: packages/ui/src/parts/app-accordion-accent.css | Map: accent accordion (separate cards) -> item card + left accent -> trigger -> open state -> color modifiers (presets) -> flush combination */
+/* Accordion accent: every item becomes its own card with a colored accent on the start edge.
+   Add .oc-accordion--accent to an .oc-accordion. The color comes from --oc-accordion-accent:
+   primary by default, or an existing .oc-accent--* preset (blue, cyan, green, orange, red, violet, yellow)
+   on the accordion (all items) or on a single .oc-accordion-item. Works with <details> and the JS hooks. */
+
+.oc-accordion--accent {
+  --oc-accordion-accent: var(--oc-accent-from, var(--oc-primary));
+  display: grid;
+  gap: 0.5rem;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+}
+
+/* Each item is a card; the accent is a 3px start border in the item color. */
+.oc-accordion--accent .oc-accordion-item {
+  --oc-accordion-accent: var(--oc-accent-from, var(--oc-primary));
+  overflow: hidden;
+  background: var(--oc-card);
+  border: 1px solid var(--oc-border);
+  border-inline-start: 3px solid var(--oc-accordion-accent);
+  border-radius: var(--oc-radius);
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+/* The base accordion draws a line between items; cards do not need it. */
+.oc-accordion--accent .oc-accordion-item + .oc-accordion-item { border-top: 1px solid var(--oc-border); }
+
+/* Trigger: a bit tighter, title in the foreground color. */
+.oc-accordion--accent .oc-accordion-trigger { padding: 0.75rem 1rem; font-weight: 600; }
+.oc-accordion--accent .oc-accordion-trigger:hover { background: oklch(from var(--oc-accordion-accent) l c h / 0.06); }
+
+/* Open item: tinted head, soft shadow and an accent-colored frame. */
+.oc-accordion--accent :is(details.oc-accordion-item[open], .oc-accordion-item.is-open, .oc-accordion-item[aria-expanded="true"]) {
+  border-color: oklch(from var(--oc-accordion-accent) l c h / 0.35);
+  border-inline-start-color: var(--oc-accordion-accent);
+  box-shadow: 0 4px 14px oklch(from var(--color-black-60) l c h / 0.06);
+}
+.oc-accordion--accent :is(details.oc-accordion-item[open], .oc-accordion-item.is-open, .oc-accordion-item[aria-expanded="true"]) > .oc-accordion-trigger {
+  background: oklch(from var(--oc-accordion-accent) l c h / 0.08);
+}
+.oc-accordion--accent .oc-accordion-content { padding: 0.75rem 1rem 1rem; color: var(--oc-foreground); }
+
+/* Optional short label at the end of the trigger ("3 items"), in the accent color. */
+.oc-accordion-accent-meta { margin-inline: auto 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--oc-accordion-accent); }
+
+/* Semantic colors (theme tokens), as an alternative to the .oc-accent--* presets. */
+.oc-accordion--accent .oc-accordion-item--success,
+.oc-accordion--accent.oc-accordion--success .oc-accordion-item { --oc-accordion-accent: var(--oc-success); }
+.oc-accordion--accent .oc-accordion-item--warning,
+.oc-accordion--accent.oc-accordion--warning .oc-accordion-item { --oc-accordion-accent: var(--oc-warning); }
+.oc-accordion--accent .oc-accordion-item--danger,
+.oc-accordion--accent.oc-accordion--danger .oc-accordion-item { --oc-accordion-accent: var(--oc-destructive); }
+
+/* Accent + flush: no frame around each card except the accent edge. */
+.oc-accordion--accent.oc-accordion--flush .oc-accordion-item { border-block: 0; border-inline-end: 0; border-radius: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-accordion--accent .oc-accordion-item { transition: none; }
+}

package/dist/parts/app-alpha-tabs.css

@@ -0,0 +1,68 @@
+/* File: packages/ui/src/parts/app-alpha-tabs.css | Map: bar (scrolling row) -> item -> "All" item -> states (current, empty) -> wrap + size modifiers -> reduced motion */
+/* Alpha tabs: "All" + A-Z filter bar for long lists (dictionary, contacts).
+   Each letter is a link (?letter=A) or a button. Current letter: aria-current="true" (or .is-active).
+   Letters without entries: aria-disabled="true". The row scrolls sideways on small screens. */
+
+.oc-alpha-tabs {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 2px;
+  inline-size: 100%;
+  padding: 0.25rem;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  scrollbar-width: thin;
+  background: var(--oc-muted);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+}
+
+/* One letter. Square-ish, fixed width, centered text. */
+.oc-alpha-tabs-item {
+  flex: 0 0 auto;
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 1.875rem;
+  block-size: 1.875rem;
+  padding-inline: 0.375rem;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--oc-muted-foreground);
+  text-decoration: none;
+  background: none;
+  border: 0;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition: color var(--oc-transition-fast), background var(--oc-transition-fast);
+}
+.oc-alpha-tabs-item:hover { color: var(--oc-foreground); background: var(--oc-surface-strong); }
+.oc-alpha-tabs-item:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+
+/* "All" is wider and separated from the letters by a thin line. */
+.oc-alpha-tabs-item--all { padding-inline: 0.75rem; margin-inline-end: 0.25rem; box-shadow: 0.25rem 0 0 -0.2rem var(--oc-border); }
+
+/* Current letter: filled with the primary token. */
+.oc-alpha-tabs-item[aria-current="true"],
+.oc-alpha-tabs-item[aria-selected="true"],
+.oc-alpha-tabs-item.is-active { color: var(--oc-primary-foreground); background: var(--oc-primary); }
+
+/* Letter without entries: visible but not clickable. */
+.oc-alpha-tabs-item[aria-disabled="true"],
+.oc-alpha-tabs-item:disabled { opacity: 0.4; pointer-events: none; }
+
+/* Wrap: letters wrap onto more rows instead of scrolling. */
+.oc-alpha-tabs--wrap { flex-wrap: wrap; overflow: visible; }
+
+/* Small: tighter letters. */
+.oc-alpha-tabs--sm .oc-alpha-tabs-item { min-inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.75rem; }
+
+/* Plain: no frame (for inside a toolbar or card). */
+.oc-alpha-tabs--plain { padding: 0; background: none; border: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-alpha-tabs-item { transition: none; }
+}

package/dist/parts/app-busy-overlay.css

@@ -0,0 +1,25 @@
+/* File: packages/ui/src/parts/app-busy-overlay.css | Map: dialog + backdrop -> box -> spinner / progress -> title + text -> motion
+   Busy overlay: a modal <dialog closedby="none"> shown while a long request runs (saving, uploading, processing photos).
+   The modal dialog makes the page inert, so nothing can be clicked twice. Based on the Verdavita admin save overlay. */
+
+.oc-busy-overlay {
+  inline-size: min(100vw - 2rem, 24rem);
+  padding: 1.75rem 2rem;
+  border: 1px solid var(--oc-border);
+  border-radius: 14px;
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  text-align: center;
+  box-shadow: 0 1.25rem 3rem oklch(from var(--color-black-50) l c h / 0.25);
+}
+.oc-busy-overlay[open] { display: grid; justify-items: center; gap: 0.75rem; }
+.oc-busy-overlay::backdrop { background: oklch(from var(--color-black-60) l c h / 0.5); backdrop-filter: blur(2px); }
+.oc-busy-overlay > .oc-spinner { --oc-spinner-size: 2.5rem; color: var(--oc-primary); }
+.oc-busy-overlay__title { margin: 0; font-size: 1rem; font-weight: 700; }
+.oc-busy-overlay__text { margin: 0; color: var(--oc-muted-foreground); font-size: 0.875rem; }
+.oc-busy-overlay > .oc-progress { inline-size: 100%; }
+
+/* Fade in, so short requests do not flash: the box appears after 300ms */
+.oc-busy-overlay[open], .oc-busy-overlay[open]::backdrop { animation: oc-busy-in 0.2s 0.3s both; }
+@keyframes oc-busy-in { from { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .oc-busy-overlay[open], .oc-busy-overlay[open]::backdrop { animation-duration: 0s; } }

package/dist/parts/app-column-menu.css

@@ -0,0 +1,85 @@
+/* File: packages/ui/src/parts/app-column-menu.css | Map: menu panel -> title + list -> item states -> footer -> CSS-only column hiding (scope) */
+/* Column menu: a popover with one checkbox per table column (column visibility).
+   CSS-only hiding: wrap the menu and the table in .oc-column-menu-scope and give each checkbox
+   data-col="<column number>". An unchecked box hides that column (th and td) through :has(). */
+
+/* Panel look. Without the popover attribute it is a normal block (e.g. inside a sheet or sidebar). */
+.oc-column-menu {
+  inline-size: 14rem;
+  max-inline-size: calc(100vw - 1rem);
+  padding: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--oc-popover-foreground);
+  background: var(--oc-popover);
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius);
+  box-shadow: 0 8px 24px oklch(from var(--color-black-60) l c h / 0.15);
+}
+/* As a popover: in the top layer, tethered to its trigger like the dropdown. */
+.oc-column-menu[popover] {
+  position: fixed;
+  inset: auto;
+  margin: 4px 0 0;
+  position-area: block-end span-inline-start;
+  position-try-fallbacks: flip-block, flip-inline;
+  transition: opacity var(--oc-transition-fast), display var(--oc-transition-fast) allow-discrete, overlay var(--oc-transition-fast) allow-discrete;
+}
+.oc-column-menu[popover]:popover-open {
+  display: block;
+  @starting-style { opacity: 0; }
+}
+
+/* Small heading above the list ("Columns"). */
+.oc-column-menu-title {
+  margin: 0;
+  padding: 0.375rem 0.5rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--oc-muted-foreground);
+}
+
+/* The list is a <form>, so a native <button type="reset"> restores the default columns. */
+.oc-column-menu-list { display: grid; gap: 1px; margin: 0; max-block-size: 18rem; overflow-y: auto; }
+
+/* One row: label around a checkbox and the column name. */
+.oc-column-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--oc-radius) - 2px);
+  cursor: pointer;
+  user-select: none;
+}
+.oc-column-menu-item:hover { background: var(--oc-accent); }
+.oc-column-menu-item:has(:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: -2px; }
+.oc-column-menu-item input { margin: 0; accent-color: var(--oc-primary); }
+/* Locked column (always visible): <input disabled checked>. */
+.oc-column-menu-item:has(input:disabled) { color: var(--oc-muted-foreground); cursor: default; }
+.oc-column-menu-item:has(input:disabled):hover { background: none; }
+
+/* Footer row with "Reset" (type="reset") or other small buttons. */
+.oc-column-menu-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.25rem;
+  margin-block-start: 0.375rem;
+  padding-block-start: 0.375rem;
+  border-block-start: 1px solid var(--oc-border);
+}
+
+/* ---- CSS-only column hiding (columns 1 to 10) ---- */
+.oc-column-menu-scope:has([data-col="1"]:not(:checked)) .oc-table :is(th, td):nth-child(1),
+.oc-column-menu-scope:has([data-col="2"]:not(:checked)) .oc-table :is(th, td):nth-child(2),
+.oc-column-menu-scope:has([data-col="3"]:not(:checked)) .oc-table :is(th, td):nth-child(3),
+.oc-column-menu-scope:has([data-col="4"]:not(:checked)) .oc-table :is(th, td):nth-child(4),
+.oc-column-menu-scope:has([data-col="5"]:not(:checked)) .oc-table :is(th, td):nth-child(5),
+.oc-column-menu-scope:has([data-col="6"]:not(:checked)) .oc-table :is(th, td):nth-child(6),
+.oc-column-menu-scope:has([data-col="7"]:not(:checked)) .oc-table :is(th, td):nth-child(7),
+.oc-column-menu-scope:has([data-col="8"]:not(:checked)) .oc-table :is(th, td):nth-child(8),
+.oc-column-menu-scope:has([data-col="9"]:not(:checked)) .oc-table :is(th, td):nth-child(9),
+.oc-column-menu-scope:has([data-col="10"]:not(:checked)) .oc-table :is(th, td):nth-child(10) { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-column-menu[popover] { transition: none; }
+}

package/dist/parts/app-confirm-dialog.css

@@ -0,0 +1,70 @@
+/* File: packages/ui/src/parts/app-confirm-dialog.css | Map: confirm modifier (icon ring) -> close button -> typed confirm field -> confirm lock -> three-button footer -> narrow screens */
+/* Confirm dialog: a variant of the alert dialog (dialog.oc-modal + .oc-alert-dialog).
+   Add .oc-alert-dialog--confirm next to the type modifier (--warning, --error, ...).
+   Extras: a larger thin icon ring, a close (X) button, an optional typed confirmation
+   ("type DELETE to confirm") and a third "discard" action. No JavaScript: the confirm button is a
+   submit button of a <form method="dialog">, so the browser blocks it until the typed value matches. */
+
+/* Larger content box, room for the close button. */
+.oc-alert-dialog--confirm { position: relative; max-inline-size: 27.5rem; padding: 1.75rem 1.5rem 0; border-radius: calc(var(--oc-radius) + 8px); }
+
+/* Thin ring (80px) with the glyph or an SVG in the type color; the inner disc uses the card color. */
+.oc-alert-dialog--confirm .oc-alert-dialog-icon {
+  inline-size: 5rem;
+  block-size: 5rem;
+  margin-block-end: 1.25rem;
+  font-size: 2.25rem;
+  font-weight: 400;
+  border-width: 2px;
+  background: var(--oc-card);
+  box-shadow: 0 0 0 6px oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
+}
+.oc-alert-dialog--confirm .oc-alert-dialog-icon svg { inline-size: 2.25rem; block-size: 2.25rem; }
+
+/* Close (X) in the top corner. Use command="close" commandfor="<dialog id>". */
+.oc-alert-dialog-close {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  block-size: 2rem;
+  padding: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--oc-muted-foreground);
+  background: none;
+  border: 0;
+  border-radius: var(--oc-radius);
+  cursor: pointer;
+}
+.oc-alert-dialog-close:hover { color: var(--oc-foreground); background: var(--oc-accent); }
+.oc-alert-dialog-close:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* The form wraps body + footer; it adds no layout of its own. */
+.oc-alert-dialog-form { display: contents; }
+
+/* Typed confirmation: label with the word in <code>, then the input. */
+.oc-alert-dialog-typed { display: grid; gap: 0.375rem; align-self: stretch; margin-block-end: 1rem; text-align: start; font-size: 0.875rem; }
+.oc-alert-dialog-typed code {
+  padding: 0.1rem 0.35rem;
+  font-size: 0.8125rem;
+  color: var(--oc-alert-dialog-color, var(--oc-warning));
+  background: oklch(from var(--oc-alert-dialog-color, var(--oc-warning)) l c h / 0.1);
+  border-radius: 4px;
+}
+
+/* While the typed value does not match the pattern, the confirm button looks disabled. */
+.oc-alert-dialog--confirm:has(.oc-alert-dialog-typed input:invalid) .oc-alert-dialog-confirm { opacity: 0.5; cursor: not-allowed; }
+
+/* Three buttons: discard at the start, cancel + confirm at the end. */
+.oc-alert-dialog--confirm .oc-modal-footer { flex-wrap: wrap; gap: 0.5rem; padding-block: 0.5rem 1.5rem; }
+.oc-alert-dialog-discard { margin-inline-end: auto; }
+.oc-alert-dialog--confirm .oc-modal-footer:has(.oc-alert-dialog-discard) { justify-content: flex-end; }
+
+/* Narrow screens: full-width stacked buttons, confirm on top. */
+@media (max-width: 30rem) {
+  .oc-alert-dialog--confirm .oc-modal-footer { flex-direction: column-reverse; }
+  .oc-alert-dialog--confirm .oc-modal-footer > * { inline-size: 100%; margin: 0; }
+}