@owodesign/owoui 0.1.4 → 0.1.6

package/dist/style.css

@@ -0,0 +1,355 @@
+/* ================================================================== */
+/*  tokens.css — Standard CSS Variables (ref -> sys -> cmp)            */
+/*                                                                     */
+/*  This file has TWO responsibilities:                                */
+/*  1. :root: Raw/ref CSS variables as foundational primitives         */
+/*  2. :root: Shared ref -> sys -> cmp mapping chains                  */
+/*                                                                     */
+/*  Theme-specific values live in theme-light.css / theme-dark.css.    */
+/*  Do NOT add theme-specific colors here.                             */
+/* ================================================================== */
+:root {
+  /* Neutral scale — initial values (light); overridden per-theme */
+  --owo-ref-color-neutral-900: #1a1a1a;
+  --owo-ref-color-neutral-800: #2d2d2d;
+  --owo-ref-color-neutral-700: #4a4a4a;
+  --owo-ref-color-neutral-600: #71717a;
+  --owo-ref-color-neutral-500: #a1a1aa;
+  --owo-ref-color-neutral-400: #d4d4d8;
+  --owo-ref-color-neutral-300: #e4e4e7;
+  --owo-ref-color-neutral-200: #f0f0f2;
+  --owo-ref-color-neutral-100: #f8f8f9;
+
+  /* Brand — initial values (light); overridden per-theme */
+  --owo-ref-color-brand-primary: #1a1a1a;
+  --owo-ref-color-brand-primary-hover: #000000;
+  --owo-ref-color-brand-accent: #4a4a4a;
+
+  /* Surface — initial values (light); overridden per-theme */
+  --owo-ref-color-surface-canvas: #ffffff;
+  --owo-ref-color-surface-base: #ffffff;
+  --owo-ref-color-surface-subtle: #fafaf9;
+  --owo-ref-color-surface-raised: #ffffff;
+  --owo-ref-color-surface-inset: #f5f5f4;
+  --owo-ref-color-surface-border: #e5e7eb;
+  --owo-ref-color-surface-ring: #d6d3d1;
+  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
+  --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
+  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
+  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
+  --owo-ref-color-text-on-brand: #ffffff;
+  --owo-ref-color-code-block-bg: #f4f4f5;
+  --owo-ref-color-code-block-border: #e4e4e7;
+  --owo-ref-color-code-block-divider: #ececed;
+  --owo-ref-color-code-inline-bg: #f4f4f5;
+  --owo-ref-shadow-raised: 0 10px 20px rgba(15, 23, 42, 0.08);
+  --owo-ref-shadow-popover: 0 18px 40px rgba(15, 23, 42, 0.10);
+
+  /* Status — initial values (light); overridden per-theme */
+  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
+  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
+  --owo-ref-color-status-success-text: #047857;
+  --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
+  --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
+  --owo-ref-color-status-warning-text: #b45309;
+  --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
+  --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
+  --owo-ref-color-status-danger-text: #b91c1c;
+  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
+  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
+  --owo-ref-color-status-info-text: #0369a1;
+
+  /* Typography — shared across all themes */
+  --owo-ref-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Roboto, sans-serif;
+  --owo-ref-font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
+  --owo-ref-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+
+  /* Radius — shared across all themes */
+  --owo-ref-radius-0: 0px;
+  --owo-ref-radius-xs: 0.375rem;
+  --owo-ref-radius-sm: 0.5rem;
+  --owo-ref-radius-md: 0.75rem;
+  --owo-ref-radius-lg: 1rem;
+  --owo-ref-radius-xl: 1.5rem;
+  --owo-ref-radius-2xl: 2rem;
+  --owo-ref-radius-full: 9999px;
+
+  /* Motion — shared across all themes */
+  --owo-ref-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --owo-ref-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
+  --owo-ref-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --owo-ref-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+
+  /* ================================================================ */
+  /*  Shared mapping chains: ref -> sys -> cmp                         */
+  /*  Theme files set --owo-sys-theme-*, presets set                   */
+  /*  --owo-sys-preset-* and this layer exposes the final              */
+  /*  --owo-cmp-* component contracts.                                 */
+  /* ================================================================ */
+
+  /* Preset defaults — theme -> preset (overridden by preset-*.css) */
+  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
+  --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
+  --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
+  --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
+  --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
+  --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
+  --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
+  --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
+  --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
+  --owo-sys-preset-surface-blur: 0px;
+  --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
+  --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
+  --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
+  --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
+  --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
+  --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
+  --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
+  --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
+  --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
+  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
+  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
+  --owo-sys-preset-control-height-xs: 1.75rem;
+  --owo-sys-preset-control-height-sm: 2rem;
+  --owo-sys-preset-control-height-md: 2.25rem;
+  --owo-sys-preset-control-height-lg: 2.5rem;
+  --owo-sys-preset-control-height-xl: 3rem;
+  --owo-sys-preset-control-border-width: 1px;
+
+  /* Final component contract layer — preset/theme -> cmp */
+  --owo-cmp-surface-bg: var(--owo-sys-preset-surface-bg);
+  --owo-cmp-surface-bg-subtle: var(--owo-sys-preset-surface-bg-subtle);
+  --owo-cmp-surface-bg-raised: var(--owo-sys-preset-surface-bg-raised);
+  --owo-cmp-surface-bg-inset: var(--owo-sys-preset-surface-bg-inset);
+  --owo-cmp-surface-border: var(--owo-sys-preset-surface-border);
+  --owo-cmp-surface-border-muted: var(--owo-sys-preset-surface-border-muted);
+  --owo-cmp-surface-border-strong: var(--owo-sys-preset-surface-border-strong);
+  --owo-cmp-surface-shadow: var(--owo-sys-preset-surface-shadow);
+  --owo-cmp-surface-shadow-strong: var(--owo-sys-preset-surface-shadow-strong);
+  --owo-cmp-surface-blur: var(--owo-sys-preset-surface-blur);
+
+  --owo-cmp-canvas-bg: var(--owo-sys-preset-canvas-bg);
+  --owo-cmp-canvas-bg-subtle: var(--owo-sys-preset-canvas-bg-subtle);
+
+  --owo-cmp-surface-container: var(--owo-sys-preset-surface-container);
+  --owo-cmp-surface-container-high: var(--owo-sys-preset-surface-container-high);
+  --owo-cmp-surface-container-highest: var(--owo-sys-preset-surface-container-highest);
+
+  --owo-cmp-text-primary: var(--owo-sys-theme-text-primary);
+  --owo-cmp-text-secondary: var(--owo-sys-theme-text-secondary);
+  --owo-cmp-text-muted: var(--owo-sys-theme-text-muted);
+  --owo-cmp-text-on-accent: var(--owo-sys-theme-text-on-accent);
+
+  --owo-cmp-accent-bg: var(--owo-sys-theme-accent-bg);
+  --owo-cmp-accent-bg-hover: var(--owo-sys-theme-accent-bg-hover);
+  --owo-cmp-accent-bg-muted: var(--owo-sys-theme-accent-bg-muted);
+  --owo-cmp-accent-text: var(--owo-sys-theme-text-on-accent);
+  --owo-cmp-accent-border: var(--owo-sys-theme-accent-border);
+
+  --owo-cmp-success-bg: var(--owo-sys-theme-success-bg);
+  --owo-cmp-success-border: var(--owo-sys-theme-success-border);
+  --owo-cmp-success-text: var(--owo-sys-theme-success-text);
+  --owo-cmp-warning-bg: var(--owo-sys-theme-warning-bg);
+  --owo-cmp-warning-border: var(--owo-sys-theme-warning-border);
+  --owo-cmp-warning-text: var(--owo-sys-theme-warning-text);
+  --owo-cmp-danger-bg: var(--owo-sys-theme-danger-bg);
+  --owo-cmp-danger-bg-emphasis: var(--owo-sys-theme-danger-bg-emphasis);
+  --owo-cmp-danger-border: var(--owo-sys-theme-danger-border);
+  --owo-cmp-danger-text: var(--owo-sys-theme-danger-text);
+  --owo-cmp-info-bg: var(--owo-sys-theme-info-bg);
+  --owo-cmp-info-border: var(--owo-sys-theme-info-border);
+  --owo-cmp-info-text: var(--owo-sys-theme-info-text);
+
+  --owo-cmp-control-radius-sm: var(--owo-sys-preset-control-radius-sm);
+  --owo-cmp-control-radius-md: var(--owo-sys-preset-control-radius-md);
+  --owo-cmp-control-radius-lg: var(--owo-sys-preset-control-radius-lg);
+  --owo-cmp-control-radius-xl: var(--owo-sys-preset-control-radius-xl);
+  --owo-cmp-control-radius-2xl: var(--owo-sys-preset-control-radius-2xl);
+  --owo-cmp-control-radius-full: var(--owo-sys-preset-control-radius-full);
+  --owo-cmp-control-height-xs: var(--owo-sys-preset-control-height-xs);
+  --owo-cmp-control-height-sm: var(--owo-sys-preset-control-height-sm);
+  --owo-cmp-control-height-md: var(--owo-sys-preset-control-height-md);
+  --owo-cmp-control-height-lg: var(--owo-sys-preset-control-height-lg);
+  --owo-cmp-control-height-xl: var(--owo-sys-preset-control-height-xl);
+  --owo-cmp-control-border-width: var(--owo-sys-preset-control-border-width);
+  --owo-cmp-control-focus-ring: var(--owo-sys-theme-control-focus-ring);
+  --owo-cmp-control-focus-ring-offset: var(--owo-sys-theme-control-focus-ring-offset);
+
+  --owo-cmp-font-heading: var(--owo-ref-font-heading);
+
+  /* Motion & density */
+  --owo-cmp-motion-duration-fast: 0.15s;
+  --owo-cmp-motion-duration-default: 0.2s;
+  --owo-cmp-motion-ease-standard: var(--owo-ref-motion-ease-standard);
+  --owo-cmp-motion-ease-decelerate: var(--owo-ref-motion-ease-decelerate);
+  --owo-cmp-motion-ease-accelerate: var(--owo-ref-motion-ease-accelerate);
+  --owo-cmp-density-compact: 0.875;
+  --owo-cmp-density-default: 1;
+  --owo-cmp-density-comfortable: 1.125;
+
+  /* Overlay & layering */
+  --owo-cmp-overlay-bg: var(--owo-sys-theme-overlay-bg);
+  --owo-cmp-z-dropdown: 1000;
+  --owo-cmp-z-modal: 1100;
+  --owo-cmp-z-toast: 1200;
+
+  /* Feedback pattern — documented public contract (shared by Toast, StatusNotice) */
+  --owo-feedback-neutral-bg: var(--owo-cmp-surface-bg-raised);
+  --owo-feedback-neutral-border: var(--owo-cmp-surface-border);
+  --owo-feedback-neutral-text: var(--owo-cmp-text-primary);
+  --owo-feedback-neutral-icon: var(--owo-cmp-text-secondary);
+  --owo-feedback-info-bg: var(--owo-cmp-info-bg);
+  --owo-feedback-info-border: var(--owo-cmp-info-border);
+  --owo-feedback-info-text: var(--owo-cmp-info-text);
+  --owo-feedback-info-icon: var(--owo-cmp-info-text);
+  --owo-feedback-success-bg: var(--owo-cmp-success-bg);
+  --owo-feedback-success-border: var(--owo-cmp-success-border);
+  --owo-feedback-success-text: var(--owo-cmp-success-text);
+  --owo-feedback-success-icon: var(--owo-cmp-success-text);
+  --owo-feedback-warning-bg: var(--owo-cmp-warning-bg);
+  --owo-feedback-warning-border: var(--owo-cmp-warning-border);
+  --owo-feedback-warning-text: var(--owo-cmp-warning-text);
+  --owo-feedback-warning-icon: var(--owo-cmp-warning-text);
+  --owo-feedback-danger-bg: var(--owo-cmp-danger-bg);
+  --owo-feedback-danger-border: var(--owo-cmp-danger-border);
+  --owo-feedback-danger-text: var(--owo-cmp-danger-text);
+  --owo-feedback-danger-icon: var(--owo-cmp-danger-text);
+}
+:root[data-preset="default"],
+.owoui-preset-default {
+  --owo-sys-preset-surface-bg: var(--owo-sys-theme-surface-base);
+  --owo-sys-preset-surface-bg-subtle: var(--owo-sys-theme-surface-subtle);
+  --owo-sys-preset-surface-bg-raised: var(--owo-sys-theme-surface-raised);
+  --owo-sys-preset-surface-bg-inset: var(--owo-sys-theme-surface-inset);
+  --owo-sys-preset-surface-border: var(--owo-sys-theme-surface-border);
+  --owo-sys-preset-surface-border-muted: var(--owo-sys-theme-surface-border-muted);
+  --owo-sys-preset-surface-border-strong: var(--owo-sys-theme-surface-border-strong);
+  --owo-sys-preset-surface-shadow: var(--owo-ref-shadow-raised);
+  --owo-sys-preset-surface-shadow-strong: var(--owo-ref-shadow-popover);
+  --owo-sys-preset-surface-blur: 0px;
+  --owo-sys-preset-canvas-bg: var(--owo-sys-theme-surface-canvas);
+  --owo-sys-preset-canvas-bg-subtle: var(--owo-sys-theme-canvas-bg-subtle);
+  --owo-sys-preset-surface-container: var(--owo-sys-theme-surface-container);
+  --owo-sys-preset-surface-container-high: var(--owo-sys-theme-surface-container-high);
+  --owo-sys-preset-surface-container-highest: var(--owo-sys-theme-surface-container-highest);
+  --owo-sys-preset-control-radius-sm: var(--owo-ref-radius-sm);
+  --owo-sys-preset-control-radius-md: var(--owo-ref-radius-md);
+  --owo-sys-preset-control-radius-lg: var(--owo-ref-radius-lg);
+  --owo-sys-preset-control-radius-xl: var(--owo-ref-radius-xl);
+  --owo-sys-preset-control-radius-2xl: var(--owo-ref-radius-2xl);
+  --owo-sys-preset-control-radius-full: var(--owo-ref-radius-full);
+  --owo-sys-preset-control-height-xs: 1.75rem;
+  --owo-sys-preset-control-height-sm: 2rem;
+  --owo-sys-preset-control-height-md: 2.25rem;
+  --owo-sys-preset-control-height-lg: 2.5rem;
+  --owo-sys-preset-control-height-xl: 3rem;
+  --owo-sys-preset-control-border-width: 1px;
+}
+/* ================================================================== */
+/*  Light theme — all --owo-ref-* primitives + --owo-sys-theme-* maps  */
+/*                                                                     */
+/*  :root (bare) is included so light acts as the default when no      */
+/*  explicit data-theme is set.                                        */
+/* ================================================================== */
+:root,
+:root[data-theme="light"],
+.owoui-theme-light {
+  /* Neutral scale */
+  --owo-ref-color-neutral-900: #1a1a1a;
+  --owo-ref-color-neutral-800: #2d2d2d;
+  --owo-ref-color-neutral-700: #4a4a4a;
+  --owo-ref-color-neutral-600: #71717a;
+  --owo-ref-color-neutral-500: #a1a1aa;
+  --owo-ref-color-neutral-400: #d4d4d8;
+  --owo-ref-color-neutral-300: #e4e4e7;
+  --owo-ref-color-neutral-200: #f0f0f2;
+  --owo-ref-color-neutral-100: #f8f8f9;
+
+  /* Brand */
+  --owo-ref-color-brand-primary: #1a1a1a;
+  --owo-ref-color-brand-primary-hover: #000000;
+  --owo-ref-color-brand-accent: #4a4a4a;
+
+  /* Surfaces */
+  --owo-ref-color-surface-canvas: #ffffff;
+  --owo-ref-color-surface-base: #ffffff;
+  --owo-ref-color-surface-subtle: #fafaf9;
+  --owo-ref-color-surface-raised: #ffffff;
+  --owo-ref-color-surface-inset: #f5f5f4;
+  --owo-ref-color-surface-border: #e5e7eb;
+  --owo-ref-color-surface-ring: #d6d3d1;
+  --owo-ref-color-surface-overlay: rgba(0, 0, 0, 0.4);
+
+  /* Overlays & highlights */
+  --owo-ref-color-overlay-soft: rgba(244, 238, 230, 0.56);
+  --owo-ref-color-overlay-strong: rgba(15, 23, 42, 0.18);
+  --owo-ref-color-highlight-soft: rgba(255, 255, 255, 0.56);
+  --owo-ref-color-highlight-sheen: rgba(255, 255, 255, 0.34);
+
+  /* Text on brand */
+  --owo-ref-color-text-on-brand: #ffffff;
+
+  /* Code blocks */
+  --owo-ref-color-code-block-bg: #f4f4f5;
+  --owo-ref-color-code-block-border: #e4e4e7;
+  --owo-ref-color-code-block-divider: #ececed;
+  --owo-ref-color-code-inline-bg: #f4f4f5;
+
+  /* Status */
+  --owo-ref-color-status-success-bg: rgba(16, 185, 129, 0.10);
+  --owo-ref-color-status-success-border: rgba(16, 185, 129, 0.20);
+  --owo-ref-color-status-success-text: #047857;
+  --owo-ref-color-status-warning-bg: rgba(245, 158, 11, 0.10);
+  --owo-ref-color-status-warning-border: rgba(245, 158, 11, 0.20);
+  --owo-ref-color-status-warning-text: #b45309;
+  --owo-ref-color-status-danger-bg: rgba(239, 68, 68, 0.10);
+  --owo-ref-color-status-danger-border: rgba(239, 68, 68, 0.20);
+  --owo-ref-color-status-danger-text: #b91c1c;
+  --owo-ref-color-status-info-bg: rgba(14, 165, 233, 0.10);
+  --owo-ref-color-status-info-border: rgba(14, 165, 233, 0.20);
+  --owo-ref-color-status-info-text: #0369a1;
+
+  /* ---- Theme semantic mappings (--owo-ref-* -> --owo-sys-theme-*) ---- */
+  --owo-sys-theme-surface-canvas: var(--owo-ref-color-surface-canvas);
+  --owo-sys-theme-surface-base: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-surface-subtle: var(--owo-ref-color-surface-subtle);
+  --owo-sys-theme-surface-raised: var(--owo-ref-color-surface-raised);
+  --owo-sys-theme-surface-inset: var(--owo-ref-color-surface-inset);
+  --owo-sys-theme-surface-border: var(--owo-ref-color-surface-border);
+  --owo-sys-theme-surface-border-muted: rgba(0, 0, 0, 0.06);
+  --owo-sys-theme-surface-border-strong: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-canvas-bg-subtle: #f5f5f4;
+  --owo-sys-theme-surface-container: #f4f4f5;
+  --owo-sys-theme-surface-container-high: #ececed;
+  --owo-sys-theme-surface-container-highest: #e4e4e7;
+  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
+  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
+  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
+  --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
+  --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
+  --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);
+  --owo-sys-theme-accent-bg-muted: color-mix(in srgb, var(--owo-ref-color-brand-primary) 10%, var(--owo-ref-color-surface-base));
+  --owo-sys-theme-accent-border: color-mix(in srgb, var(--owo-ref-color-brand-primary) 40%, transparent);
+  --owo-sys-theme-success-bg: var(--owo-ref-color-status-success-bg);
+  --owo-sys-theme-success-border: var(--owo-ref-color-status-success-border);
+  --owo-sys-theme-success-text: var(--owo-ref-color-status-success-text);
+  --owo-sys-theme-warning-bg: var(--owo-ref-color-status-warning-bg);
+  --owo-sys-theme-warning-border: var(--owo-ref-color-status-warning-border);
+  --owo-sys-theme-warning-text: var(--owo-ref-color-status-warning-text);
+  --owo-sys-theme-danger-bg: var(--owo-ref-color-status-danger-bg);
+  --owo-sys-theme-danger-bg-emphasis: rgba(239, 68, 68, 0.18);
+  --owo-sys-theme-danger-border: var(--owo-ref-color-status-danger-border);
+  --owo-sys-theme-danger-text: var(--owo-ref-color-status-danger-text);
+  --owo-sys-theme-info-bg: var(--owo-ref-color-status-info-bg);
+  --owo-sys-theme-info-border: var(--owo-ref-color-status-info-border);
+  --owo-sys-theme-info-text: var(--owo-ref-color-status-info-text);
+  --owo-sys-theme-control-focus-ring: var(--owo-ref-color-surface-ring);
+  --owo-sys-theme-control-focus-ring-offset: var(--owo-ref-color-surface-base);
+  --owo-sys-theme-overlay-bg: var(--owo-ref-color-overlay-strong);
+}
+
+@layer owoui.components {
+.root{--avatar-bg: var(--owo-cmp-surface-bg-inset);--avatar-text: var(--owo-cmp-text-secondary);--avatar-border: transparent;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--owo-cmp-control-radius-full);font-weight:500;user-select:none;background:var(--avatar-bg);color:var(--avatar-text);border:1px solid var(--avatar-border)}.root[data-size=xs]{height:1.5rem;width:1.5rem;font-size:10px}.root[data-size=sm]{height:2rem;width:2rem;font-size:.75rem;line-height:1rem}.root[data-size=md]{height:2.5rem;width:2.5rem;font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{height:3.5rem;width:3.5rem;font-size:1.125rem;line-height:1.75rem}.root>img{height:100%;width:100%;object-fit:cover}.root[data-tone=subtle]{--avatar-bg: var(--owo-cmp-surface-bg-subtle);--avatar-text: var(--owo-cmp-text-muted)}.root{--badge-bg: var(--owo-cmp-surface-bg-inset);--badge-text: var(--owo-cmp-text-secondary);--badge-border: transparent;display:inline-flex;align-items:center;border-radius:var(--owo-cmp-control-radius-full);border:1px solid var(--badge-border);color:var(--badge-text);background:var(--badge-bg)}.root[data-size=xs]{padding:.25rem .625rem;font-size:11px}.root[data-size=sm]{padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500}.root[data-variant=outline]{--badge-bg: transparent;--badge-border: var(--owo-cmp-surface-border)}.root[data-tone=info]{--badge-bg: var(--owo-cmp-info-bg);--badge-text: var(--owo-cmp-info-text);--badge-border: var(--owo-cmp-info-border)}.root[data-tone=info][data-variant=outline]{--badge-bg: transparent}.root[data-tone=success]{--badge-bg: var(--owo-cmp-success-bg);--badge-text: var(--owo-cmp-success-text);--badge-border: var(--owo-cmp-success-border)}.root[data-tone=success][data-variant=outline]{--badge-bg: transparent}.root[data-tone=warning]{--badge-bg: var(--owo-cmp-warning-bg);--badge-text: var(--owo-cmp-warning-text);--badge-border: var(--owo-cmp-warning-border)}.root[data-tone=warning][data-variant=outline]{--badge-bg: transparent}.root[data-tone=danger]{--badge-bg: var(--owo-cmp-danger-bg);--badge-text: var(--owo-cmp-danger-text);--badge-border: var(--owo-cmp-danger-border)}.root[data-tone=danger][data-variant=outline]{--badge-bg: transparent}.root{display:inline-flex}.root[data-animate=spin]{animation:owo-spin 1s linear infinite}@keyframes owo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.root[data-animate=spin]{animation:none}}.root{--button-bg: var(--owo-cmp-surface-bg);--button-bg-hover: var(--owo-cmp-surface-bg-inset);--button-bg-active: var(--owo-cmp-surface-bg-subtle);--button-text: var(--owo-cmp-text-primary);--button-border: var(--owo-cmp-surface-border);--button-ring: var(--owo-cmp-control-focus-ring);--button-disabled-opacity: .5;display:inline-flex;align-items:center;justify-content:center;padding:0;gap:.5rem;border-radius:var(--owo-cmp-control-radius-md);border:1px solid var(--button-border);font-weight:500;transition-property:color,background-color,border-color;transition-duration:.15s;appearance:none;background:var(--button-bg);color:var(--button-text)}.root[data-size=xs]{min-height:var(--owo-cmp-control-height-xs);padding-inline:.625rem;font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{min-height:var(--owo-cmp-control-height-sm);padding-inline:.75rem;font-size:.75rem;line-height:1rem}.root[data-size=md]{min-height:var(--owo-cmp-control-height-md);padding-inline:1rem;font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{min-height:var(--owo-cmp-control-height-lg);padding-inline:1.125rem;font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{min-height:var(--owo-cmp-control-height-xl);padding-inline:1.25rem;font-size:1rem;line-height:1.5rem}.root:focus-visible{box-shadow:inset 0 0 0 2px var(--button-ring);outline:none}.root:hover{background:var(--button-bg-hover)}.root:active{background:var(--button-bg-active)}.root:disabled{cursor:not-allowed;opacity:var(--button-disabled-opacity)}.root[data-loading=true]{pointer-events:none;cursor:wait}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.icon :global(svg){display:block}.label{display:inline-flex;align-items:center}.root[data-variant=primary]{--button-bg: var(--owo-cmp-accent-bg);--button-bg-hover: var(--owo-cmp-accent-bg-hover);--button-bg-active: color-mix(in srgb, var(--owo-cmp-accent-bg-hover) 88%, black);--button-text: var(--owo-cmp-accent-text);--button-border: transparent}.root[data-variant=ghost]{--button-bg: transparent;--button-bg-hover: var(--owo-cmp-surface-bg-inset);--button-bg-active: var(--owo-cmp-surface-bg-subtle);--button-text: var(--owo-cmp-text-secondary);--button-border: transparent}.root[data-variant=danger]{--button-bg: var(--owo-cmp-danger-bg);--button-bg-hover: color-mix(in srgb, var(--owo-cmp-danger-bg) 92%, var(--owo-cmp-danger-border));--button-bg-active: color-mix(in srgb, var(--owo-cmp-danger-bg) 84%, var(--owo-cmp-danger-border));--button-text: var(--owo-cmp-danger-text);--button-border: var(--owo-cmp-danger-border);--button-ring: var(--owo-cmp-danger-border)}:where(.root [data-part=trigger]){border:0;padding:0;appearance:none;background:var(--collapsible-trigger-bg, transparent);color:inherit;font:inherit;cursor:pointer;transition:background-color .18s ease,color .18s ease}:where(.root [data-part=trigger]:hover){background:var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent))}:where(.root [data-part=trigger][data-state=open]){background:var(--collapsible-trigger-bg-open, var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent)))}:where(.root [data-part=content]){height:auto;overflow:hidden;transition:height .18s ease;background:var(--collapsible-content-bg, transparent)}.triggerInner{display:flex;width:100%;align-items:center;gap:var(--collapsible-trigger-gap, .75rem)}.triggerIcon,.triggerIndicator{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;line-height:0;color:inherit}.triggerLabel{min-width:0;flex:1 1 auto;text-align:inherit}.contentInner{min-height:0}.overlay{position:fixed;inset:0;z-index:var(--owo-cmp-z-modal);display:flex;align-items:center;justify-content:center}.overlay [data-part=backdrop]{position:absolute;inset:0;padding:0;border:0;background:var(--owo-cmp-overlay-bg);animation:dialog-backdrop-in .2s var(--owo-cmp-motion-ease-standard)}.panel{position:relative;z-index:10;width:100%;border-radius:var(--owo-cmp-control-radius-xl);background:var(--owo-cmp-surface-bg-raised);border:1px solid var(--owo-cmp-surface-border);color:var(--owo-cmp-text-primary);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:dialog-in .2s var(--owo-cmp-motion-ease-standard)}.panel[data-size=sm]{max-width:26rem}.panel[data-size=md]{max-width:32rem}.overlay [data-part=header]{padding:1.25rem 1.25rem .25rem;font-size:1rem;line-height:1.5;font-weight:600;color:var(--owo-cmp-text-primary)}.overlay [data-part=body]{padding:.75rem 1.25rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-cmp-text-secondary)}.overlay [data-part=footer]{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.25rem}.confirmDescription{white-space:pre-wrap}@keyframes dialog-in{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dialog-backdrop-in{0%{opacity:0}to{opacity:1}}.trigger{border:0;padding:0;appearance:none;background:transparent;color:inherit;font:inherit}.content{min-width:12rem;overflow-y:auto;border:1px solid var(--owo-cmp-surface-border);border-radius:var(--owo-cmp-control-radius-lg);background:var(--owo-cmp-surface-bg-raised);box-shadow:var(--_owo-dropdown-menu-shadow, var(--owo-cmp-surface-shadow-strong));padding:.375rem;color:var(--owo-cmp-text-primary);outline:none;z-index:var(--owo-cmp-z-dropdown);animation:owo-dropdown-menu-in var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard)}.content[data-side=top]{transform-origin:bottom center}.content[data-side=bottom]{transform-origin:top center}.content[data-side=left]{transform-origin:center right}.content[data-side=right]{transform-origin:center left}.content [data-part=group]+[data-part=group]{margin-top:.375rem;padding-top:.375rem;border-top:1px solid color-mix(in srgb,var(--owo-cmp-surface-border) 80%,transparent)}.content [data-part=label]{padding:.35rem .625rem .25rem;font-size:.675rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--owo-cmp-text-muted)}.content [data-part=separator]{margin:.375rem .25rem;border-top:1px solid color-mix(in srgb,var(--owo-cmp-surface-border) 82%,transparent)}.content [data-part=item],.subTrigger{display:flex;width:100%;align-items:center;gap:.75rem;border:0;border-radius:calc(var(--owo-cmp-control-radius-md) - .125rem);background:transparent;padding:.625rem .75rem;text-align:left;color:inherit;cursor:default;transition:background-color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard),color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);appearance:none}.content [data-part=item]:hover,.content [data-part=item][data-highlighted],.subTrigger:hover,.subTrigger[data-highlighted]{background:var(--owo-cmp-surface-bg-inset)}.content [data-part=item][data-selected]{background:color-mix(in srgb,var(--owo-cmp-accent-bg) 10%,var(--owo-cmp-surface-bg-raised))}.content [data-part=item][data-selected] .itemMain{color:var(--owo-cmp-text-primary);font-weight:600}.content [data-part=item][data-disabled],.subTrigger[data-disabled]{opacity:.5;cursor:not-allowed}.content [data-part=item][data-destructive],.subTrigger[data-destructive]{color:var(--owo-cmp-danger-text)}.itemInset{padding-left:1rem}.itemMain{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shortcut,.indicator,.submenuIndicator{flex:0 0 auto;color:var(--owo-cmp-text-muted);font-size:.75rem}.indicator{min-width:1rem;text-align:center;color:var(--owo-cmp-accent-bg);font-weight:700}.subTrigger[data-state=open]{background:var(--owo-cmp-surface-bg-inset)}@keyframes owo-dropdown-menu-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.panel{--drawer-surface: var(--owo-cmp-surface-bg-raised);--drawer-border: var(--owo-cmp-surface-border);--drawer-shadow: var(--owo-cmp-surface-shadow-strong);z-index:calc(var(--owo-cmp-z-modal) + 1);display:flex;max-width:100%;flex-direction:column;will-change:transform;transform:translate(0);transition:transform var(--owo-cmp-motion-duration-default) var(--owo-cmp-motion-ease-standard);background:var(--drawer-surface);border-color:var(--drawer-border);box-shadow:var(--drawer-shadow)}.panel[data-position=fixed]{position:fixed}.panel[data-position=absolute]{position:absolute}.panel[data-side=left]{left:0;top:0}.panel[data-side=right]{right:0;top:0}.panel[data-state=open]{pointer-events:auto;visibility:visible;transform:translate(0)}.panel[data-state=closed]{pointer-events:none;visibility:hidden}.panel[data-state=closed][data-side=left]{transform:translate(-100%)}.panel[data-state=closed][data-side=right]{transform:translate(100%)}.backdrop{--drawer-backdrop: var(--owo-cmp-overlay-bg);inset:0;z-index:var(--owo-cmp-z-modal);padding:0;border:0;background:var(--drawer-backdrop)}.backdrop[data-position=fixed]{position:fixed}.backdrop[data-position=absolute]{position:absolute}.root{--field-label: var(--owo-cmp-text-secondary);--field-help: var(--owo-cmp-text-muted);display:block}.root .label{display:block;margin-bottom:.25rem;font-size:.75rem;line-height:1rem;color:var(--field-label)}.root .help{display:block;margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--field-help)}.root{--icon-button-bg: transparent;--icon-button-bg-hover: var(--owo-cmp-surface-bg-inset);--icon-button-bg-active: var(--owo-cmp-surface-bg-subtle);--icon-button-text: var(--owo-cmp-text-muted);--icon-button-ring: var(--owo-cmp-control-focus-ring);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--owo-cmp-control-radius-md);transition-property:color,background-color;transition-duration:.15s;background:var(--icon-button-bg);color:var(--icon-button-text)}.root[data-size=xs]{height:var(--owo-cmp-control-height-xs);width:var(--owo-cmp-control-height-xs)}.root[data-size=sm]{height:var(--owo-cmp-control-height-sm);width:var(--owo-cmp-control-height-sm)}.root[data-size=md]{height:var(--owo-cmp-control-height-md);width:var(--owo-cmp-control-height-md)}.root[data-size=lg]{height:var(--owo-cmp-control-height-lg);width:var(--owo-cmp-control-height-lg)}.root[data-size=xl]{height:var(--owo-cmp-control-height-xl);width:var(--owo-cmp-control-height-xl)}.root:focus-visible{box-shadow:inset 0 0 0 2px var(--icon-button-ring);outline:none}.root:hover{background:var(--icon-button-bg-hover);color:var(--owo-cmp-text-primary)}.root:active{background:var(--icon-button-bg-active)}.root[data-variant=subtle]{--icon-button-bg: var(--owo-cmp-surface-bg-inset);--icon-button-bg-hover: var(--owo-cmp-surface-bg-subtle);--icon-button-bg-active: var(--owo-cmp-surface-bg-raised);--icon-button-text: var(--owo-cmp-text-primary)}.root{--field-bg: var(--owo-cmp-surface-bg);--field-border: var(--owo-cmp-surface-border);--field-text: var(--owo-cmp-text-primary);--field-placeholder: var(--owo-cmp-text-muted);--field-ring: var(--owo-cmp-control-focus-ring);background:var(--field-bg);border:1px solid var(--field-border);color:var(--field-text);width:100%;min-height:var(--owo-cmp-control-height-md);border-radius:var(--owo-cmp-control-radius-md);padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}.root[data-size=xs]{min-height:var(--owo-cmp-control-height-xs);padding:.25rem .5rem;font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{min-height:var(--owo-cmp-control-height-sm);padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.root[data-size=lg]{min-height:var(--owo-cmp-control-height-lg);padding:.5625rem .875rem;font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{min-height:var(--owo-cmp-control-height-xl);padding:.75rem 1rem;font-size:1rem;line-height:1.5rem}.root::placeholder{color:var(--field-placeholder)}.root:hover:not(:disabled){--field-border: var(--owo-cmp-surface-border-strong)}.root:focus-visible{outline:none;--field-border: var(--field-ring);box-shadow:none}.root[data-tone=warning]{--field-border: var(--owo-cmp-warning-border);--field-ring: var(--owo-cmp-warning-border)}.root{--panel-bg: var(--owo-cmp-surface-bg);--panel-border: var(--owo-cmp-surface-border);--panel-section-border: var(--owo-cmp-surface-border);--panel-shadow: none;border-radius:var(--owo-cmp-control-radius-lg);border:1px solid var(--panel-border);background:var(--panel-bg);box-shadow:var(--panel-shadow)}.root[data-padding=sm]{padding:1rem}.root[data-padding=md]{padding:1.25rem}.root[data-padding=lg]{padding:1.5rem}.root [data-part=header]{border-bottom:1px solid var(--panel-section-border);padding:1.25rem 1.5rem}.root [data-part=body]{padding:1.25rem 1.5rem}.root [data-part=footer]{border-top:1px solid var(--panel-section-border);padding:1rem 1.5rem}.root[data-variant=subtle]{--panel-bg: var(--owo-cmp-surface-bg-subtle)}.root[data-variant=raised]{--panel-bg: var(--owo-cmp-surface-bg-raised);--panel-shadow: var(--owo-cmp-surface-shadow)}.root{--segmented-bg: var(--owo-cmp-surface-bg-inset);--segmented-border: var(--owo-cmp-surface-border);--segmented-item-text: var(--owo-cmp-text-muted);--segmented-item-hover-text: var(--owo-cmp-text-secondary);--segmented-item-active-bg: var(--owo-cmp-surface-bg-raised);--segmented-item-active-text: var(--owo-cmp-text-primary);--segmented-ring: var(--owo-cmp-control-focus-ring);display:inline-flex;border-radius:var(--owo-cmp-control-radius-md);padding:.125rem;background:var(--segmented-bg);box-shadow:0 0 0 1px var(--segmented-border)}.root[data-size=xs]{font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{font-size:.75rem;line-height:1rem}.root[data-size=md]{font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{font-size:1rem;line-height:1.5rem}.item{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--owo-cmp-control-radius-sm);background:transparent;font-weight:500;transition:color .15s,background-color .15s;color:var(--segmented-item-text)}.item:focus{outline:none}.item:focus-visible{box-shadow:inset 0 0 0 1px var(--segmented-ring)}.item:disabled{cursor:not-allowed;opacity:.5}.item:hover{color:var(--segmented-item-hover-text)}.item[data-active=true]{background:var(--segmented-item-active-bg);color:var(--segmented-item-active-text)}.root[data-size=xs]>.item{min-height:calc(var(--owo-cmp-control-height-xs) - .25rem);padding:.125rem .5rem}.root[data-size=sm]>.item{min-height:calc(var(--owo-cmp-control-height-sm) - .25rem);padding:.25rem .625rem}.root[data-size=md]>.item{min-height:calc(var(--owo-cmp-control-height-md) - .25rem);padding:.375rem .75rem}.root[data-size=lg]>.item{min-height:calc(var(--owo-cmp-control-height-lg) - .25rem);padding:.5rem .875rem}.root[data-size=xl]>.item{min-height:calc(var(--owo-cmp-control-height-xl) - .25rem);padding:.625rem 1rem}.root{position:relative;display:inline-block}.root [data-part=trigger]{--select-bg: var(--owo-cmp-surface-bg);--select-border: var(--owo-cmp-surface-border);--select-text: var(--owo-cmp-text-primary);--select-ring: var(--owo-cmp-control-focus-ring);display:flex;width:100%;align-items:center;justify-content:space-between;padding:0;gap:.5rem;border-radius:var(--owo-cmp-control-radius-md);text-align:left;transition:color .15s,background-color .15s,border-color .15s;appearance:none;background:var(--select-bg);border:.5px solid var(--select-border);color:var(--select-text)}.root [data-part=trigger]:focus-visible{outline:none;--select-border: var(--select-ring);box-shadow:none}.root [data-part=trigger][data-size=xs]{height:var(--owo-cmp-control-height-xs);min-height:var(--owo-cmp-control-height-xs);padding:0 .5rem;font-size:.6875rem;line-height:.875rem}.root [data-part=trigger][data-size=sm]{height:var(--owo-cmp-control-height-sm);min-height:var(--owo-cmp-control-height-sm);padding:0 .5rem;font-size:.75rem;line-height:1rem}.root [data-part=trigger][data-size=md]{height:var(--owo-cmp-control-height-md);min-height:var(--owo-cmp-control-height-md);padding:0 .75rem;font-size:.875rem;line-height:1.25rem}.root [data-part=trigger][data-size=lg]{height:var(--owo-cmp-control-height-lg);min-height:var(--owo-cmp-control-height-lg);padding:0 .875rem;font-size:.9375rem;line-height:1.375rem}.root [data-part=trigger][data-size=xl]{height:var(--owo-cmp-control-height-xl);min-height:var(--owo-cmp-control-height-xl);padding:0 1rem;font-size:1rem;line-height:1.5rem}.root [data-part=trigger]:hover:not(:disabled){--select-border: var(--owo-cmp-surface-border-strong)}.root [data-part=trigger][data-state=open]{--select-border: var(--owo-cmp-surface-border-strong)}.root [data-part=trigger][data-tone=warning]{--select-border: var(--owo-cmp-warning-border);--select-ring: var(--owo-cmp-warning-border)}.valueText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder{color:var(--owo-cmp-text-muted)}.root [data-part=chevron]{width:.875rem;height:.875rem;flex-shrink:0;transition:transform .15s;color:var(--owo-cmp-text-muted)}.root [data-part=chevron][data-state=open]{transform:rotate(180deg)}.root [data-part=dropdown]{--select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);position:absolute;z-index:var(--owo-cmp-z-dropdown);margin-top:.25rem;max-height:15rem;width:100%;overflow:auto;border:1px solid var(--owo-cmp-surface-border);border-radius:var(--owo-cmp-control-radius-md);padding:.25rem 0;background:var(--owo-cmp-surface-bg-raised);box-shadow:var(--select-dropdown-shadow)}.root [data-part=dropdown][data-size=sm]{font-size:.75rem;line-height:1rem}.root [data-part=dropdown][data-size=md]{font-size:.875rem;line-height:1.25rem}.root [data-part=dropdown][data-size=xs]{font-size:.6875rem;line-height:.875rem}.root [data-part=dropdown][data-size=lg]{font-size:.9375rem;line-height:1.375rem}.root [data-part=dropdown][data-size=xl]{font-size:1rem;line-height:1.5rem}.root [data-part=option]{cursor:default;user-select:none;padding:.375rem .75rem;transition:background-color .15s}.root [data-part=option][data-disabled]{cursor:not-allowed;opacity:.5}.root [data-part=option][data-focused]{background:var(--owo-cmp-surface-bg-inset)}.root [data-part=option][data-selected]{color:var(--owo-cmp-accent-bg);font-weight:500}.root{border-radius:var(--owo-cmp-control-radius-sm);--_owo-skeleton-scan-duration: 3.6s;--skeleton-bg: linear-gradient( 180deg, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100% );--skeleton-bg-emphasis: linear-gradient( 180deg, color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100% );--skeleton-sheen: linear-gradient( 100deg, transparent 0%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%, var(--owo-ref-color-highlight-sheen) 50%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%, transparent 100% );--skeleton-top-highlight: var(--owo-ref-color-highlight-soft);position:relative;overflow:hidden;background:var(--skeleton-bg);box-shadow:inset 0 1px 0 var(--skeleton-top-highlight);transform:translateZ(0)}.root[data-tone=emphasis]{background:var(--skeleton-bg-emphasis)}.root:before{content:"";position:absolute;inset:0;background:inherit;opacity:.84}.root:after{content:"";position:absolute;inset:-35%;background:var(--skeleton-sheen);transform:translate(-140%) skew(-14deg);opacity:0;will-change:transform,opacity}.root[data-animation=pulse]:after{display:none}.root[data-animation=pulse]:before{animation:owo-skeleton-breathe 2.6s var(--owo-cmp-motion-ease-standard) infinite}.root[data-animation=scan]:before{opacity:1;filter:none}.root[data-animation=scan]:after{opacity:1;animation:owo-skeleton-scan var(--_owo-skeleton-scan-duration) cubic-bezier(.3,0,.2,1) infinite}@keyframes owo-skeleton-breathe{0%,to{opacity:.8;filter:saturate(.96) brightness(.98)}50%{opacity:1;filter:saturate(1.04) brightness(1.04)}}@keyframes owo-skeleton-scan{0%{transform:translate(-140%) skew(-14deg);opacity:0}18%{opacity:.82}52%{transform:translate(6%) skew(-14deg);opacity:1}82%{opacity:.82}to{transform:translate(140%) skew(-14deg);opacity:0}}@media(prefers-reduced-motion:reduce){.root:before{animation:none;opacity:.94;filter:none}.root:after{animation:none;opacity:0}}.root{--status-notice-bg: var(--owo-feedback-neutral-bg);--status-notice-border: var(--owo-feedback-neutral-border);--status-notice-text: var(--owo-feedback-neutral-text);--status-notice-icon: var(--owo-feedback-neutral-icon);border-radius:var(--owo-cmp-control-radius-md);border-width:1px;border-style:solid;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;background:var(--status-notice-bg);border-color:var(--status-notice-border);color:var(--status-notice-text)}.withIcon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem}.icon{color:var(--status-notice-icon)}.root:not([data-layout=vertical]) .icon{margin-top:.125rem;flex-shrink:0}.text{min-width:0}.title{font-weight:500;color:var(--owo-cmp-text-primary)}.root[data-layout=vertical]{border-radius:var(--owo-cmp-control-radius-lg)}.root[data-layout=vertical] .body{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 0;text-align:center}.root[data-layout=vertical] .icon{font-size:1.125rem;line-height:1.75rem}.root[data-layout=vertical] .title{color:var(--status-notice-text)}.root[data-layout=vertical] .action{margin-top:.5rem}.root[data-tone=info]{--status-notice-bg: var(--owo-feedback-info-bg);--status-notice-border: var(--owo-feedback-info-border);--status-notice-text: var(--owo-feedback-info-text);--status-notice-icon: var(--owo-feedback-info-icon)}.root[data-tone=success]{--status-notice-bg: var(--owo-feedback-success-bg);--status-notice-border: var(--owo-feedback-success-border);--status-notice-text: var(--owo-feedback-success-text);--status-notice-icon: var(--owo-feedback-success-icon)}.root[data-tone=warning]{--status-notice-bg: var(--owo-feedback-warning-bg);--status-notice-border: var(--owo-feedback-warning-border);--status-notice-text: var(--owo-feedback-warning-text);--status-notice-icon: var(--owo-feedback-warning-icon)}.root[data-tone=danger]{--status-notice-bg: var(--owo-feedback-danger-bg);--status-notice-border: var(--owo-feedback-danger-border);--status-notice-text: var(--owo-feedback-danger-text);--status-notice-icon: var(--owo-feedback-danger-icon)}.root{--switch-track-width: calc(var(--owo-cmp-control-height-md) + .5rem);--switch-thumb-size: 1.125rem;--switch-thumb-offset: .125rem;position:relative;display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;padding:0;box-sizing:border-box;border-radius:var(--owo-cmp-control-radius-full);border:2px solid transparent;transition:background-color .15s,border-color .15s;background:var(--owo-cmp-surface-border-strong)}.root:focus{outline:none}.root:focus-visible{box-shadow:0 0 0 2px var(--owo-cmp-surface-bg),0 0 0 4px var(--owo-cmp-control-focus-ring)}.root:disabled{cursor:not-allowed;opacity:.5}.root[data-size=xs]{height:calc(var(--owo-cmp-control-height-xs) - .75rem);width:calc(var(--owo-cmp-control-height-xs) + .25rem);--switch-track-width: calc(var(--owo-cmp-control-height-xs) + .25rem);--switch-thumb-size: .625rem}.root[data-size=sm]{height:calc(var(--owo-cmp-control-height-sm) - .75rem);width:calc(var(--owo-cmp-control-height-sm) + .25rem);--switch-track-width: calc(var(--owo-cmp-control-height-sm) + .25rem);--switch-thumb-size: .875rem}.root[data-size=md]{height:calc(var(--owo-cmp-control-height-md) - .75rem);width:calc(var(--owo-cmp-control-height-md) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-md) + .5rem);--switch-thumb-size: 1.125rem}.root[data-size=lg]{height:calc(var(--owo-cmp-control-height-lg) - .75rem);width:calc(var(--owo-cmp-control-height-lg) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-lg) + .5rem);--switch-thumb-size: 1.375rem}.root[data-size=xl]{height:calc(var(--owo-cmp-control-height-xl) - .75rem);width:calc(var(--owo-cmp-control-height-xl) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-xl) + .5rem);--switch-thumb-size: 1.875rem}.root[aria-checked=true]{background:var(--owo-cmp-accent-bg)}.root:hover:not(:disabled){background:color-mix(in srgb,var(--owo-cmp-surface-border-strong) 82%,var(--owo-cmp-text-muted))}.root[aria-checked=true]:hover:not(:disabled){background:var(--owo-cmp-accent-bg-hover)}.root .thumb{pointer-events:none;display:inline-block;border-radius:var(--owo-cmp-control-radius-full);background:#fff;box-shadow:0 1px 3px #00000026;transition:transform .15s;transform:translate(var(--switch-thumb-offset))}.root[data-size=xs]>.thumb{height:.625rem;width:.625rem}.root[data-size=sm]>.thumb{height:.875rem;width:.875rem}.root[data-size=md]>.thumb{height:1.125rem;width:1.125rem}.root[data-size=lg]>.thumb{height:1.375rem;width:1.375rem}.root[data-size=xl]>.thumb{height:1.875rem;width:1.875rem}.root[aria-checked=true]>.thumb{transform:translate(calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset)))}.root [data-part=list]{--tabs-border: var(--owo-cmp-surface-border);display:flex;align-items:flex-end;gap:.25rem;border-bottom-width:1px;border-bottom-style:solid;border-color:var(--tabs-border)}.root [data-part=trigger]{--tabs-text: var(--owo-cmp-text-muted);--tabs-hover-text: var(--owo-cmp-text-secondary);--tabs-active-text: var(--owo-cmp-text-primary);--tabs-active-border: var(--owo-cmp-accent-border);--tabs-active-bg: color-mix(in srgb, var(--owo-cmp-accent-bg-muted) 35%, transparent);--tabs-ring: var(--owo-cmp-control-focus-ring);position:relative;margin-bottom:-1px;display:inline-flex;min-height:var(--owo-cmp-control-height-md);align-items:center;justify-content:center;border:0;border-top-left-radius:var(--owo-cmp-control-radius-md);border-top-right-radius:var(--owo-cmp-control-radius-md);border-bottom:2px solid transparent;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:color .15s ease;appearance:none;background:transparent;color:var(--tabs-text)}.root [data-part=trigger]:focus{outline:none}.root [data-part=trigger]:focus-visible{box-shadow:inset 0 0 0 2px var(--tabs-ring)}.root [data-part=trigger]:disabled{cursor:not-allowed;opacity:.5}.root [data-part=trigger]:hover{color:var(--tabs-hover-text)}.root [data-part=trigger][data-state=active]{background:var(--tabs-active-bg);border-bottom-color:var(--tabs-active-border);color:var(--tabs-active-text)}.root [data-part=content]{padding-top:1rem;color:var(--owo-cmp-text-primary)}.root{min-height:calc(4.5em + 1rem);line-height:1.5}.root[data-auto-resize=true]{overflow-y:hidden}.container{pointer-events:none;position:fixed;bottom:1rem;right:1rem;z-index:var(--owo-cmp-z-toast);display:flex;flex-direction:column-reverse;gap:.5rem}.toast{--toast-bg: var(--owo-feedback-neutral-bg);--toast-border: var(--owo-feedback-neutral-border);--toast-text: var(--owo-feedback-neutral-text);--toast-icon: var(--owo-feedback-neutral-icon);--toast-shadow: var(--owo-cmp-surface-shadow-strong);pointer-events:auto;border-radius:var(--owo-cmp-control-radius-lg);border:1px solid var(--toast-border);font-size:.875rem;line-height:1.25rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--toast-bg);color:var(--toast-text);box-shadow:var(--toast-shadow);animation:toast-in .25s var(--owo-cmp-motion-ease-standard)}.toastDefault{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 1rem}.toast [data-part=icon]{margin-top:.125rem;flex-shrink:0;color:var(--toast-icon)}.toast [data-part=content]{min-width:0;flex:1}.toast [data-part=title]{display:block;font-weight:500;color:inherit}.toast [data-part=message]{display:block}.toast [data-part=close]{margin-right:-.25rem;margin-top:-.125rem;flex-shrink:0;border-radius:var(--owo-cmp-control-radius-sm);padding:.125rem;color:currentColor;opacity:.5;transition:opacity .15s;background:transparent;border:0;cursor:pointer}.toast [data-part=close]:hover{opacity:1}.toast[data-tone=success]{--toast-bg: var(--owo-feedback-success-bg);--toast-border: var(--owo-feedback-success-border);--toast-text: var(--owo-feedback-success-text);--toast-icon: var(--owo-feedback-success-icon)}.toast[data-tone=warning]{--toast-bg: var(--owo-feedback-warning-bg);--toast-border: var(--owo-feedback-warning-border);--toast-text: var(--owo-feedback-warning-text);--toast-icon: var(--owo-feedback-warning-icon)}.toast[data-tone=danger]{--toast-bg: var(--owo-feedback-danger-bg);--toast-border: var(--owo-feedback-danger-border);--toast-text: var(--owo-feedback-danger-text);--toast-icon: var(--owo-feedback-danger-icon)}.toast[data-tone=info]{--toast-bg: var(--owo-feedback-info-bg);--toast-border: var(--owo-feedback-info-border);--toast-text: var(--owo-feedback-info-text);--toast-icon: var(--owo-feedback-info-icon)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.trigger{display:inline-flex}.content{--tooltip-bg: var(--owo-cmp-surface-bg-raised);--tooltip-border: var(--owo-cmp-surface-border);--tooltip-text: var(--owo-cmp-text-primary);--tooltip-shadow: var(--owo-cmp-surface-shadow-strong);--tooltip-arrow-color: var(--tooltip-bg);position:fixed;z-index:var(--owo-cmp-z-toast);border-radius:var(--owo-cmp-control-radius-lg);line-height:1.625;background:var(--tooltip-bg);color:var(--tooltip-text);border:1px solid var(--tooltip-border);box-shadow:var(--tooltip-shadow);backdrop-filter:blur(10px);animation:tooltip-in .15s var(--owo-cmp-motion-ease-standard)}.content[data-density=compact]{padding:.25rem .5rem;font-size:11px;max-width:200px}.content[data-density=default]{padding:.5rem .75rem;font-size:.75rem;line-height:1rem;max-width:20rem}.content [data-part=arrow]{position:absolute;color:var(--tooltip-arrow-color);filter:drop-shadow(0 1px 0 var(--tooltip-border))}@keyframes tooltip-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
+
+}

package/{src → dist}/theme-dark.css

@@ -1,5 +1,3 @@
-@import "./tokens.css";
-
 :root[data-theme="dark"],
 .owoui-theme-dark {
   --owo-ref-color-neutral-900: #fafafa;
@@ -9,6 +7,8 @@
   --owo-ref-color-neutral-500: #71717a;
   --owo-ref-color-neutral-400: #3f3f46;
   --owo-ref-color-neutral-300: #27272a;
+  --owo-ref-color-neutral-200: #1f1f22;
+  --owo-ref-color-neutral-100: #18181a;
 
   --owo-ref-color-brand-primary: #c6c6c7;
   --owo-ref-color-brand-primary-hover: #d4d4d8;
@@ -60,9 +60,9 @@
   --owo-sys-theme-surface-container: #1e1e22;
   --owo-sys-theme-surface-container-high: #252529;
   --owo-sys-theme-surface-container-highest: #2d2d32;
-  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
-  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
-  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
+  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
+  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
+  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
   --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
   --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
   --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);

package/{src → dist}/theme-light.css

@@ -1,12 +1,9 @@
-@import "./styles/tokens.css";
-
 /* ================================================================== */
 /*  Light theme — all --owo-ref-* primitives + --owo-sys-theme-* maps  */
 /*                                                                     */
 /*  :root (bare) is included so light acts as the default when no      */
 /*  explicit data-theme is set.                                        */
 /* ================================================================== */
-
 :root,
 :root[data-theme="light"],
 .owoui-theme-light {
@@ -18,6 +15,8 @@
   --owo-ref-color-neutral-500: #a1a1aa;
   --owo-ref-color-neutral-400: #d4d4d8;
   --owo-ref-color-neutral-300: #e4e4e7;
+  --owo-ref-color-neutral-200: #f0f0f2;
+  --owo-ref-color-neutral-100: #f8f8f9;
 
   /* Brand */
   --owo-ref-color-brand-primary: #1a1a1a;
@@ -76,9 +75,9 @@
   --owo-sys-theme-surface-container: #f4f4f5;
   --owo-sys-theme-surface-container-high: #ececed;
   --owo-sys-theme-surface-container-highest: #e4e4e7;
-  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-800);
-  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-600);
-  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-500);
+  --owo-sys-theme-text-primary: var(--owo-ref-color-neutral-900);
+  --owo-sys-theme-text-secondary: var(--owo-ref-color-neutral-700);
+  --owo-sys-theme-text-muted: var(--owo-ref-color-neutral-600);
   --owo-sys-theme-text-on-accent: var(--owo-ref-color-text-on-brand);
   --owo-sys-theme-accent-bg: var(--owo-ref-color-brand-primary);
   --owo-sys-theme-accent-bg-hover: var(--owo-ref-color-brand-primary-hover);