@vielzeug/refine 1.3.0 → 1.4.0

package/dist/styles/theme.css

@@ -113,6 +113,23 @@
     --grid-11: repeat(11, minmax(0, 1fr));
     --grid-12: repeat(12, minmax(0, 1fr));
 
+    /* ========================================
+       Z-Index Scale
+       A page only has one stacking context to reason about — every layer
+       (sticky headers, dropdowns, overlays, modals, popovers, tooltips,
+       toasts) needs one shared, monotonic scale, not ad-hoc literals
+       scattered across components and page code alike.
+       ======================================== */
+    --z-base: 0;
+    --z-sticky: 40;
+    --z-dropdown: 100;
+    --z-fixed: 300;
+    --z-overlay: 500;
+    --z-modal: 600;
+    --z-popover: 1000;
+    --z-tooltip: 1100;
+    --z-toast: 9999;
+
     /* ========================================
        Border Widths
        ======================================== */
@@ -161,21 +178,30 @@
        All shadows use light-dark() to remain visible in dark mode.
        ======================================== */
     --shadow-none: 0 0 transparent;
-    --shadow-2xs: light-dark(0 1px 2px rgb(0 0 0 / 3%), 0 1px 2px rgb(0 0 0 / 20%));
-    --shadow-xs: light-dark(0 2px 4px rgb(0 0 0 / 3%), 0 2px 4px rgb(0 0 0 / 22%));
-    --shadow-sm: light-dark(0 4px 10px -1px rgb(0 0 0 / 5%), 0 4px 10px -1px rgb(0 0 0 / 28%));
-    --shadow: light-dark(0 8px 16px -2px rgb(0 0 0 / 6%), 0 8px 16px -2px rgb(0 0 0 / 32%));
-    --shadow-md: light-dark(0 12px 24px -4px rgb(0 0 0 / 6%), 0 12px 24px -4px rgb(0 0 0 / 34%));
-    --shadow-lg: light-dark(0 24px 32px -8px rgb(0 0 0 / 8%), 0 24px 32px -8px rgb(0 0 0 / 38%));
-    --shadow-xl: light-dark(0 32px 64px -16px rgb(0 0 0 / 12%), 0 32px 64px -16px rgb(0 0 0 / 44%));
-    --shadow-2xl: light-dark(0 48px 80px -20px rgb(0 0 0 / 20%), 0 48px 80px -20px rgb(0 0 0 / 52%));
-
-    /* Inset Shadows — also light-dark() for dark mode depth */
+
+    /* light-dark() only accepts <color> arguments (spec: CSS Color 5) — these used
+       to wrap the *entire* shadow (offset + blur + color), which is invalid CSS.
+       Custom properties store any token soup, so the declaration itself never
+       errored, but every consumer substituting it into an actual `box-shadow`
+       got an unparseable value and silently computed to `none` in spec-compliant
+       browsers. Fixed by keeping offset/blur outside and wrapping only the color
+       — offset/blur are identical between light and dark here anyway, only the
+       alpha differs. */
+    --shadow-2xs: 0 1px 2px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 20%));
+    --shadow-xs: 0 2px 4px light-dark(rgb(0 0 0 / 3%), rgb(0 0 0 / 22%));
+    --shadow-sm: 0 4px 10px -1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 28%));
+    --shadow: 0 8px 16px -2px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 32%));
+    --shadow-md: 0 12px 24px -4px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 34%));
+    --shadow-lg: 0 24px 32px -8px light-dark(rgb(0 0 0 / 8%), rgb(0 0 0 / 38%));
+    --shadow-xl: 0 32px 64px -16px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 44%));
+    --shadow-2xl: 0 48px 80px -20px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 52%));
+
+    /* Inset Shadows — same light-dark()-color-only fix as above. */
     --inset-shadow-none: inset 0 0 transparent;
-    --inset-shadow-2xs: light-dark(inset 0 1px rgb(0 0 0 / 5%), inset 0 1px rgb(255 255 255 / 4%));
-    --inset-shadow-xs: light-dark(inset 0 1px 1px rgb(0 0 0 / 5%), inset 0 1px 1px rgb(255 255 255 / 4%));
-    --inset-shadow-sm: light-dark(inset 0 2px 4px rgb(0 0 0 / 5%), inset 0 2px 4px rgb(0 0 0 / 25%));
-    --inset-shadow: light-dark(inset 0 2px 4px rgb(0 0 0 / 6%), inset 0 2px 4px rgb(0 0 0 / 28%));
+    --inset-shadow-2xs: inset 0 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
+    --inset-shadow-xs: inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 4%));
+    --inset-shadow-sm: inset 0 2px 4px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 25%));
+    --inset-shadow: inset 0 2px 4px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 28%));
 
     /* Drop Shadows (for filters) */
     --drop-shadow-none: 0 0 transparent;
@@ -319,7 +345,9 @@
        ======================================== */
     color-scheme: light dark;
 
-    /* Contrast scale — Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline */
+    /* ── theme-tokens:generated:begin — run `pnpm run sync:theme`, do not hand-edit ── */
+
+    /* ── Contrast scale — Neutral OKLCH with a lifted, non-pure-black Dark Mode baseline ── */
     --color-contrast-50: light-dark(oklch(99% 0.001 264deg), oklch(17% 0.001 250deg)); /* Canvas, page background */
     --color-contrast-100: light-dark(oklch(97% 0.001 264deg), oklch(21% 0.001 250deg)); /* Cards, elevated surfaces */
     --color-contrast-150: light-dark(
@@ -337,7 +365,7 @@
     --color-contrast-500: light-dark(
       oklch(49% 0.002 264deg),
       oklch(58% 0.001 250deg)
-    ); /* Tertiary text - AA compliant */
+    ); /* Tertiary text - AA large-text compliant */
 
     --color-contrast-600: light-dark(
       oklch(40% 0.002 264deg),
@@ -355,166 +383,336 @@
     --color-divider: color-mix(in oklch, var(--color-contrast-300) 85%, transparent);
     --color-contrast: color-mix(in oklch, var(--color-contrast-900) 85%, transparent);
 
-    /* Halo Shadows */
+    /* ── Shade ramp — shared derivation recipe for every color family below ──── */
+
+    /* Every family only authors a `base` (+ content/contrast ink pair); every  */
+
+    /* other sub-token is `oklch(from var(--color-x) ...)`, derived from that   */
+
+    /* single base using the deltas below. Tune a family by editing its base;   */
+
+    /* tune the ramp shape itself (e.g. how much lighter "-lighter" is) here,    */
+
+    /* once, for all 7 families at once. */
+    --shade-lighter-l: 0.3;
+    --shade-lighter-c: 0.35;
+    --shade-light-l: 0.14;
+    --shade-light-c: 0.8;
+    --shade-dark-l: -0.14;
+    --shade-darker-l: -0.26;
+    --shade-darker-c: 0.85;
+    --shade-darker-h: -12;
+    --shade-focus-l: 0.06;
+    --shade-border-alpha: 60%;
+    --shade-focus-ring-strength: 40%;
+    --shade-backdrop-l-light: 93%;
+    --shade-backdrop-l-dark: 24%;
+    --shade-backdrop-c-light: 0.3;
+    --shade-backdrop-c-dark: 0.5;
+    --shade-backdrop-alpha-light: 83%;
+    --shade-backdrop-alpha-dark: 50%;
+    --shade-halo-glow: 15%;
+    --shade-halo-glow-soft: 8%;
+
+    /* ── Halo shadows — branded glow per color family ───────────────────────── */
     --halo-shadow-neutral:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 15%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(0 0 0 / 20%)) inset,
-      0 var(--size-2) var(--size-6) light-dark(oklch(58% 0 264deg / 15%), oklch(72% 0 250deg / 15%)),
-      0 var(--size-1) var(--size-3) light-dark(oklch(58% 0 264deg / 8%), oklch(72% 0 250deg / 8%));
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-neutral) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-neutral) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-primary:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-primary) 15%, transparent),
-      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-primary) 8%, transparent);
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-primary) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-primary) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-secondary:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-secondary) 12%, transparent),
-      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-secondary) 7%, transparent);
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-secondary) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-secondary) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-info:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) light-dark(oklch(60% 0.18 230deg / 15%), oklch(74% 0.16 230deg / 15%)),
-      0 var(--size-1) var(--size-3) light-dark(oklch(60% 0.18 230deg / 8%), oklch(74% 0.16 230deg / 8%));
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-info) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-info) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-success:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) light-dark(oklch(62% 0.15 160deg / 15%), oklch(78% 0.14 160deg / 15%)),
-      0 var(--size-1) var(--size-3) light-dark(oklch(62% 0.15 160deg / 8%), oklch(78% 0.14 160deg / 8%));
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-success) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-success) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-warning:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) light-dark(oklch(74% 0.18 70deg / 15%), oklch(84% 0.16 70deg / 15%)),
-      0 var(--size-1) var(--size-3) light-dark(oklch(74% 0.18 70deg / 8%), oklch(84% 0.16 70deg / 8%));
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-warning) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-warning) var(--shade-halo-glow-soft), transparent);
     --halo-shadow-error:
       inset 0 1px 1px light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 3%)),
       0 0 var(--size-1) light-dark(rgb(255 255 255 / 10%), rgb(255 255 255 / 12%)) inset,
-      0 var(--size-2) var(--size-6) light-dark(oklch(54% 0.2 29deg / 15%), oklch(66% 0.18 29deg / 15%)),
-      0 var(--size-1) var(--size-3) light-dark(oklch(54% 0.2 29deg / 8%), oklch(66% 0.18 29deg / 8%));
-
-    /* ── Neutral ─────────────────────────────────────────────────────────────── */
-    --color-neutral: light-dark(oklch(56% 0 264deg), oklch(72% 0 250deg));
-    --color-neutral-backdrop: light-dark(oklch(97% 0 264deg / 83%), oklch(27% 0 250deg / 60%));
-    --color-neutral-content: light-dark(oklch(98% 0 264deg), oklch(15% 0 250deg));
-    --color-neutral-contrast: light-dark(oklch(99% 0 264deg), oklch(13% 0 250deg));
-    --color-neutral-focus: light-dark(oklch(62% 0 264deg), oklch(78% 0 250deg));
-    --color-neutral-border: light-dark(oklch(86% 0 264deg / 75%), oklch(72% 0 250deg / 40%));
+      0 var(--size-2) var(--size-6) color-mix(in oklch, var(--color-error) var(--shade-halo-glow), transparent),
+      0 var(--size-1) var(--size-3) color-mix(in oklch, var(--color-error) var(--shade-halo-glow-soft), transparent);
+
+    /* ── Neutral — True gray — neutral UI surfaces ── */
+    --color-neutral: light-dark(oklch(52% 0 264deg), oklch(72% 0 250deg));
+    --color-neutral-backdrop: light-dark(
+      oklch(
+        from var(--color-neutral) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-neutral) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
+    );
+    --color-neutral-content: light-dark(
+      oklch(from var(--color-neutral) 99% calc(c * 0) h),
+      oklch(from var(--color-neutral) 22% calc(c * 0) h)
+    );
+    --color-neutral-contrast: light-dark(
+      oklch(from var(--color-neutral) 99% calc(c * 0) h),
+      oklch(from var(--color-neutral) 13% calc(c * 0) h)
+    );
+    --color-neutral-lighter: oklch(
+      from var(--color-neutral) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
+    );
+    --color-neutral-light: oklch(
+      from var(--color-neutral) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-neutral-dark: oklch(from var(--color-neutral) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-neutral-darker: oklch(
+      from var(--color-neutral) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-neutral-focus: oklch(from var(--color-neutral) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-neutral-border: oklch(from var(--color-neutral) l c h / var(--shade-border-alpha));
     --color-neutral-focus-shadow:
-      0 0 0 4px color-mix(in oklch, var(--color-neutral) 40%, transparent), var(--shadow-sm);
+      0 0 0 4px color-mix(in oklch, var(--color-neutral) var(--shade-focus-ring-strength), transparent),
+      var(--shadow-sm);
 
-    /* ── Primary hue — the single knob that themes both primary and secondary ──── */
-
-    /* Override this one variable (e.g. 220deg for blue, 160deg for teal) to      */
-
-    /* shift the entire primary palette and have secondary auto-derive from it.   */
+    /* ── Primary — Periwinkle violet — primary brand color ── */
     --color-primary-hue: 293deg;
-
-    /* ── Primary (violet) ────────────────────────────────────────────────────── */
-    --color-primary: light-dark(
-      oklch(56% 0.22 var(--color-primary-hue)),
-      oklch(72% 0.2 var(--color-primary-hue))
-    ); /* Bright enough to read on dark canvas */
-
+    --color-primary: light-dark(oklch(56% 0.22 var(--color-primary-hue)), oklch(72% 0.148 var(--color-primary-hue)));
     --color-primary-backdrop: light-dark(
-      oklch(93% 0.04 var(--color-primary-hue)),
-      oklch(24% 0.1 var(--color-primary-hue) / 40%)
+      oklch(
+        from var(--color-primary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-primary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
     );
     --color-primary-content: light-dark(
-      oklch(98% 0.01 var(--color-primary-hue)),
-      oklch(15% 0.08 var(--color-primary-hue))
-    ); /* Dark ink on bright dark-mode button */
-
+      oklch(from var(--color-primary) 97% calc(c * 0.05) h),
+      oklch(from var(--color-primary) 22% calc(c * 0.3) h)
+    );
     --color-primary-contrast: light-dark(
-      oklch(98% 0.01 var(--color-primary-hue)),
-      oklch(14% 0.06 var(--color-primary-hue))
+      oklch(from var(--color-primary) 98% calc(c * 0.045) h),
+      oklch(from var(--color-primary) 14% calc(c * 0.3) h)
+    );
+    --color-primary-lighter: oklch(
+      from var(--color-primary) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
     );
-    --color-primary-focus: light-dark(
-      oklch(62% 0.22 var(--color-primary-hue)),
-      oklch(78% 0.2 var(--color-primary-hue))
+    --color-primary-light: oklch(
+      from var(--color-primary) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
     );
-    --color-primary-border: light-dark(
-      oklch(56% 0.22 var(--color-primary-hue) / 60%),
-      oklch(72% 0.2 var(--color-primary-hue) / 60%)
+    --color-primary-dark: oklch(from var(--color-primary) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-primary-darker: oklch(
+      from var(--color-primary) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
     );
+    --color-primary-focus: oklch(from var(--color-primary) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-primary-border: oklch(from var(--color-primary) l c h / var(--shade-border-alpha));
     --color-primary-focus-shadow:
-      0 0 0 4px color-mix(in oklch, var(--color-primary) 40%, transparent), var(--shadow-sm);
-
-    /* ── Secondary — auto-derived from --color-primary-hue ─────────────────────── */
-
-    /* Near-black (light) / near-white (dark) with a subtle tint of the primary    */
-
-    /* hue. Mixing 7 % of the primary chroma/hue into an achromatic near-black or  */
+      0 0 0 4px color-mix(in oklch, var(--color-primary) var(--shade-focus-ring-strength), transparent),
+      var(--shadow-sm);
 
-    /* near-white base gives a visually grounded dark that breathes with the brand. */
+    /* ── Secondary — Ink/charcoal (light) · silver (dark) — auto-derived from --color-primary-hue ── */
     --color-secondary: light-dark(
-      color-mix(in oklch, oklch(20% 0 none) 93%, oklch(56% 0.22 var(--color-primary-hue))),
-      color-mix(in oklch, oklch(83% 0 none) 93%, oklch(72% 0.2 var(--color-primary-hue)))
+      color-mix(in oklch, oklch(20% 0 none) 86%, var(--color-primary)),
+      color-mix(in oklch, oklch(83% 0 none) 86%, var(--color-primary))
     );
     --color-secondary-backdrop: light-dark(
-      color-mix(in oklch, oklch(95% 0 none / 83%) 97%, oklch(56% 0.22 var(--color-primary-hue) / 83%)),
-      color-mix(in oklch, oklch(20% 0 none / 60%) 97%, oklch(72% 0.2 var(--color-primary-hue) / 60%))
+      oklch(
+        from var(--color-secondary) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-secondary) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
     );
     --color-secondary-content: light-dark(
-      oklch(98% 0.002 var(--color-primary-hue)),
-      oklch(15% 0.003 var(--color-primary-hue))
+      oklch(from var(--color-secondary) 97% 0.0015 h),
+      oklch(from var(--color-secondary) 22% 0.002 h)
     );
     --color-secondary-contrast: light-dark(
-      oklch(98% 0.002 var(--color-primary-hue)),
-      oklch(13% 0.003 var(--color-primary-hue))
+      oklch(from var(--color-secondary) 98% 0.002 h),
+      oklch(from var(--color-secondary) 13% 0.003 h)
     );
-    --color-secondary-focus: light-dark(
-      color-mix(in oklch, oklch(28% 0 none) 93%, oklch(56% 0.22 var(--color-primary-hue))),
-      color-mix(in oklch, oklch(90% 0 none) 93%, oklch(72% 0.2 var(--color-primary-hue)))
+    --color-secondary-lighter: oklch(
+      from var(--color-secondary) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
     );
-    --color-secondary-border: color-mix(in oklch, var(--color-secondary) 60%, transparent);
+    --color-secondary-light: oklch(
+      from var(--color-secondary) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-secondary-dark: oklch(from var(--color-secondary) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-secondary-darker: oklch(
+      from var(--color-secondary) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-secondary-focus: oklch(from var(--color-secondary) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-secondary-border: oklch(from var(--color-secondary) l c h / var(--shade-border-alpha));
     --color-secondary-focus-shadow:
-      0 0 0 4px color-mix(in oklch, var(--color-secondary) 40%, transparent), var(--shadow-sm);
-
-    /* ── Info (cyan-blue) ────────────────────────────────────────────────────── */
-    --color-info: light-dark(oklch(60% 0.18 230deg), oklch(74% 0.16 230deg));
-    --color-info-backdrop: light-dark(oklch(92% 0.06 230deg / 83%), oklch(24% 0.08 230deg / 50%));
+      0 0 0 4px color-mix(in oklch, var(--color-secondary) var(--shade-focus-ring-strength), transparent),
+      var(--shadow-sm);
+
+    /* ── Info — Blue (light mode) · cyan-blue (dark mode) — informational messages ── */
+    --color-info: light-dark(oklch(54% 0.169 255deg), oklch(74% 0.133 230deg));
+    --color-info-backdrop: light-dark(
+      oklch(
+        from var(--color-info) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-info) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
+    );
     --color-info-content: light-dark(
-      oklch(15% 0.08 230deg),
-      oklch(15% 0.08 230deg)
-    ); /* Base is bright in both modes, content stays dark */
-
-    --color-info-contrast: light-dark(oklch(97% 0.02 230deg), oklch(18% 0.06 230deg));
-    --color-info-focus: light-dark(oklch(66% 0.18 230deg), oklch(80% 0.16 230deg));
-    --color-info-border: light-dark(oklch(60% 0.18 230deg / 60%), oklch(74% 0.16 230deg / 60%));
-    --color-info-focus-shadow: 0 0 0 4px color-mix(in oklch, var(--color-info) 40%, transparent), var(--shadow-sm);
-
-    /* ── Success (teal-green) ────────────────────────────────────────────────── */
-    --color-success: light-dark(
-      oklch(62% 0.15 160deg),
-      oklch(78% 0.14 160deg)
-    ); /* Kept brighter than error for colorblindness */
-
-    --color-success-backdrop: light-dark(oklch(93% 0.04 160deg / 83%), oklch(22% 0.07 160deg / 50%));
-    --color-success-content: light-dark(oklch(15% 0.06 160deg), oklch(15% 0.06 160deg));
-    --color-success-contrast: light-dark(oklch(97% 0.02 160deg), oklch(17% 0.06 160deg));
-    --color-success-focus: light-dark(oklch(66% 0.15 160deg), oklch(84% 0.14 160deg));
-    --color-success-border: light-dark(oklch(62% 0.15 160deg / 60%), oklch(78% 0.14 160deg / 60%));
+      oklch(from var(--color-info) 97% 0.0122 h),
+      oklch(from var(--color-info) 15% 0.024 h)
+    );
+    --color-info-contrast: light-dark(
+      oklch(from var(--color-info) 98% 0.0081 h),
+      oklch(from var(--color-info) 12% 0.019 h)
+    );
+    --color-info-lighter: oklch(
+      from var(--color-info) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
+    );
+    --color-info-light: oklch(
+      from var(--color-info) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-info-dark: oklch(from var(--color-info) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-info-darker: oklch(
+      from var(--color-info) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-info-focus: oklch(from var(--color-info) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-info-border: oklch(from var(--color-info) l c h / var(--shade-border-alpha));
+    --color-info-focus-shadow:
+      0 0 0 4px color-mix(in oklch, var(--color-info) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);
+
+    /* ── Success — Green (light mode) · teal (dark mode) — positive outcomes & confirmations ── */
+    --color-success: light-dark(oklch(53% 0.145 137deg), oklch(78% 0.14 160deg));
+    --color-success-backdrop: light-dark(
+      oklch(
+        from var(--color-success) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-success) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
+    );
+    --color-success-content: light-dark(
+      oklch(from var(--color-success) 97% 0.0494 h),
+      oklch(from var(--color-success) 15% 0.027 h)
+    );
+    --color-success-contrast: light-dark(
+      oklch(from var(--color-success) 98% 0.0323 h),
+      oklch(from var(--color-success) 12% 0.022 h)
+    );
+    --color-success-lighter: oklch(
+      from var(--color-success) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
+    );
+    --color-success-light: oklch(
+      from var(--color-success) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-success-dark: oklch(from var(--color-success) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-success-darker: oklch(
+      from var(--color-success) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-success-focus: oklch(from var(--color-success) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-success-border: oklch(from var(--color-success) l c h / var(--shade-border-alpha));
     --color-success-focus-shadow:
-      0 0 0 4px color-mix(in oklch, var(--color-success) 40%, transparent), var(--shadow-sm);
-
-    /* ── Warning (amber) ─────────────────────────────────────────────────────── */
-    --color-warning: light-dark(oklch(74% 0.18 70deg), oklch(84% 0.16 70deg));
-    --color-warning-backdrop: light-dark(oklch(93% 0.07 70deg / 83%), oklch(26% 0.08 70deg / 50%));
-    --color-warning-content: light-dark(oklch(15% 0.08 70deg), oklch(15% 0.08 70deg));
-    --color-warning-contrast: light-dark(oklch(96% 0.03 70deg), oklch(22% 0.06 70deg));
-    --color-warning-focus: light-dark(oklch(79% 0.18 70deg), oklch(90% 0.16 70deg));
-    --color-warning-border: light-dark(oklch(74% 0.18 70deg / 60%), oklch(84% 0.16 70deg / 60%));
+      0 0 0 4px color-mix(in oklch, var(--color-success) var(--shade-focus-ring-strength), transparent),
+      var(--shadow-sm);
+
+    /* ── Warning — Amber — cautionary states & alerts ── */
+    --color-warning: light-dark(oklch(54% 0.111 70deg), oklch(84% 0.113 70deg));
+    --color-warning-backdrop: light-dark(
+      oklch(
+        from var(--color-warning) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-warning) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
+    );
+    --color-warning-content: light-dark(
+      oklch(from var(--color-warning) 97% 0.0184 h),
+      oklch(from var(--color-warning) 15% 0.026 h)
+    );
+    --color-warning-contrast: light-dark(
+      oklch(from var(--color-warning) 98% 0.0122 h),
+      oklch(from var(--color-warning) 12% 0.021 h)
+    );
+    --color-warning-lighter: oklch(
+      from var(--color-warning) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
+    );
+    --color-warning-light: oklch(
+      from var(--color-warning) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-warning-dark: oklch(from var(--color-warning) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-warning-darker: oklch(
+      from var(--color-warning) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-warning-focus: oklch(from var(--color-warning) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-warning-border: oklch(from var(--color-warning) l c h / var(--shade-border-alpha));
     --color-warning-focus-shadow:
-      0 0 0 4px color-mix(in oklch, var(--color-warning) 40%, transparent), var(--shadow-sm);
-
-    /* ── Error (red-orange) ──────────────────────────────────────────────────── */
-    --color-error: light-dark(oklch(54% 0.2 29deg), oklch(66% 0.18 29deg)); /* Deeper than success for colorblindness */
-    --color-error-backdrop: light-dark(oklch(92% 0.06 29deg / 83%), oklch(20% 0.08 29deg / 50%));
-    --color-error-content: light-dark(oklch(98% 0.03 29deg), oklch(15% 0.06 29deg));
-    --color-error-contrast: light-dark(oklch(97% 0.02 29deg), oklch(16% 0.06 29deg));
-    --color-error-focus: light-dark(oklch(60% 0.2 29deg), oklch(72% 0.18 29deg));
-    --color-error-border: light-dark(oklch(54% 0.2 29deg / 60%), oklch(66% 0.18 29deg / 60%));
-    --color-error-focus-shadow: 0 0 0 4px color-mix(in oklch, var(--color-error) 40%, transparent), var(--shadow-sm);
+      0 0 0 4px color-mix(in oklch, var(--color-warning) var(--shade-focus-ring-strength), transparent),
+      var(--shadow-sm);
+
+    /* ── Error — Vermilion — destructive actions & errors ── */
+    --color-error: light-dark(oklch(54% 0.2 29deg), oklch(66% 0.18 29deg));
+    --color-error-backdrop: light-dark(
+      oklch(
+        from var(--color-error) var(--shade-backdrop-l-light) calc(c * var(--shade-backdrop-c-light)) h /
+          var(--shade-backdrop-alpha-light)
+      ),
+      oklch(
+        from var(--color-error) var(--shade-backdrop-l-dark) calc(c * var(--shade-backdrop-c-dark)) h /
+          var(--shade-backdrop-alpha-dark)
+      )
+    );
+    --color-error-content: light-dark(
+      oklch(from var(--color-error) 97% 0.0125 h),
+      oklch(from var(--color-error) 22% 0.077 h)
+    );
+    --color-error-contrast: light-dark(
+      oklch(from var(--color-error) 98% 0.0088 h),
+      oklch(from var(--color-error) 14% 0.052 h)
+    );
+    --color-error-lighter: oklch(
+      from var(--color-error) clamp(0, calc(l + var(--shade-lighter-l)), 1) calc(c * var(--shade-lighter-c)) h
+    );
+    --color-error-light: oklch(
+      from var(--color-error) clamp(0, calc(l + var(--shade-light-l)), 1) calc(c * var(--shade-light-c)) h
+    );
+    --color-error-dark: oklch(from var(--color-error) clamp(0, calc(l + var(--shade-dark-l)), 1) c h);
+    --color-error-darker: oklch(
+      from var(--color-error) clamp(0, calc(l + var(--shade-darker-l)), 1) calc(c * var(--shade-darker-c))
+        calc(h + var(--shade-darker-h))
+    );
+    --color-error-focus: oklch(from var(--color-error) clamp(0, calc(l + var(--shade-focus-l)), 1) c h);
+    --color-error-border: oklch(from var(--color-error) l c h / var(--shade-border-alpha));
+    --color-error-focus-shadow:
+      0 0 0 4px color-mix(in oklch, var(--color-error) var(--shade-focus-ring-strength), transparent), var(--shadow-sm);
+
+    /* ── theme-tokens:generated:end ── */
   }
 
   /* ========================================
@@ -541,12 +739,23 @@
     }
   }
 
-  /* VitePress dark theme: force dark color-scheme so light-dark() resolves to dark values */
+  /* Refine's dark-mode contract: toggle `classList.add/remove('dark')` on   */
+
+  /* `<html>`, nothing else. Forcing `color-scheme` here (rather than only    */
+
+  /* relying on `prefers-color-scheme`) is what makes every `light-dark()`   */
+
+  /* token in this file resolve to the right branch once `.dark` is present, */
+
+  /* overriding the OS preference. See docs/refine/theming.md "Toggle dark   */
+
+  /* mode" — any consumer, not just this repo's own docs site, can rely on   */
+
+  /* this class toggle. */
   html.dark {
     color-scheme: dark;
   }
 
-  /* VitePress light theme: force light color-scheme so light-dark() resolves to light values */
   html:not(.dark) {
     color-scheme: light;
   }

package/dist/switch.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/checkable.cjs"),s=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(e){let t=(0,f.useEmit)(),n=(0,f.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=null,d=o.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,getFormField:()=>i,helper:e.helper,onToggle:e=>{d.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:a.lifecycleSignal(f.onCleanup),validateOn:n?.validateOn,value:e.value});i=s.useField({disabled:d.disabled,toFormValue:e=>e,value:d.checkableFormValue});let{assistiveId:p,checked:m,disabled:h,errorText:g,handleClick:_,handleKeydown:v,helperText:y,labelId:b}=d;return c.applyCheckableBinding(r.size,{assistiveId:p,checked:m,disabled:h,errorText:g,handleClick:_,handleKeydown:v,helperText:y,labelId:b},`switch`),f.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/checkable.cjs"),s=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(e){let t=(0,f.useEmit)(),n=(0,f.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=o.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,helper:e.helper,onToggle:e=>{i.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:a.lifecycleSignal(f.onCleanup),validateOn:n?.validateOn,value:e.value});i.attachFormField(s.useField({disabled:i.disabled,toFormValue:e=>e,value:i.checkableFormValue}));let{assistiveId:d,checked:p,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y}=i;return c.applyCheckableBinding(r.size,{assistiveId:d,checked:p,disabled:m,errorText:h,handleClick:g,handleKeydown:_,helperText:v,labelId:y},`switch`),f.html`
       <div class="switch-wrapper" part="switch">
         <div class="switch-track" part="track">
           <div class="switch-thumb" part="thumb"></div>
         </div>
       </div>
-      <span class="label" part="label" id="${b}"><slot></slot></span>
-      ${u.renderHelperRegion(p,g,y)}
+      <span class="label" part="label" id="${y}"><slot></slot></span>
+      ${u.renderHelperRegion(d,h,v)}
     `},styles:[n.colorThemeMixin,n.forcedColorsFormControlMixin,t.disabledStateMixin,e.sizeVariantMixin(i.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=p;
 //# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    _formField = useField<string | null>({\n      disabled: checkable.disabled,\n      toFormValue: (v) => v,\n      value: checkable.checkableFormValue,\n    });\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"goBAmEA,IAAa,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAgC,EAEhC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAE3C,EAAgD,KAC9C,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,iBAAoB,EACpB,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAa,EAAA,SAAwB,CACnC,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,EAED,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAQvG,OANA,EAAA,sBACE,EAAU,KACV,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"goBAmEA,IAAa,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAgC,EAEhC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAEzC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAU,gBACR,EAAA,SAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAQvG,OANA,EAAA,sBACE,EAAU,KACV,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}