@birdycom/omniaui 0.11.0 → 0.11.1

package/dist/oc-theme.css

@@ -1,69 +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);
-}
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.11.1. 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

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

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

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

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