@epilot/spark-ui 0.26.1 → 0.27.1

package/dist/components/toast.cjs

@@ -2,8 +2,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_button = require("./button.cjs");
 const require_components_theme = require("./theme.cjs");
+const require_components_button = require("./button.cjs");
 const require_components_spinner = require("./spinner.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/toast.js

@@ -1,8 +1,8 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { buttonVariants } from "./button.js";
 import { PortalTheme } from "./theme.js";
+import { buttonVariants } from "./button.js";
 import { Spinner } from "./spinner.js";
 import "react";
 import { Cancel, CheckCircle, Close, Info, Warning } from "@epilot/spark-icons";

package/dist/components/toggle-group.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { SparkButtonColor } from "./button.cjs";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.cjs";
 import { ToggleProps, ToggleStyle } from "./toggle.cjs";
 import * as React$1 from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";

package/dist/components/toggle-group.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { SparkButtonColor } from "./button.js";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.js";
 import { ToggleProps, ToggleStyle } from "./toggle.js";
 import * as React$1 from "react";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";

package/dist/components/toggle.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.cjs";
-import { SparkButtonColor, buttonVariants } from "./button.cjs";
+import { g as SparkStyle, n as SparkButtonColor } from "../theme-types-CKZzOmSa.cjs";
+import { buttonVariants } from "./button.cjs";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";

package/dist/components/toggle.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { f as SparkStyle } from "../theme-types-Bn5E15-P.js";
-import { SparkButtonColor, buttonVariants } from "./button.js";
+import { g as SparkStyle, n as SparkButtonColor } from "../theme-types-CKZzOmSa.js";
+import { buttonVariants } from "./button.js";
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";

package/dist/lib/accent-theme.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { c as SparkNeutralFamily, s as SparkNeutral } from "../theme-types-Bn5E15-P.cjs";
+import { d as SparkNeutral, f as SparkNeutralFamily } from "../theme-types-CKZzOmSa.cjs";
 import { t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.cjs";
 
 //#region src/lib/accent-theme.d.ts

package/dist/lib/accent-theme.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { c as SparkNeutralFamily, s as SparkNeutral } from "../theme-types-Bn5E15-P.js";
+import { d as SparkNeutral, f as SparkNeutralFamily } from "../theme-types-CKZzOmSa.js";
 import { t as generateRadixColors } from "../generate-radix-colors-BY4Wjsm7.js";
 
 //#region src/lib/accent-theme.d.ts

package/dist/lib/container-chrome.cjs

@@ -12,12 +12,12 @@ const radiusClasses = {
 	full: "rounded-full"
 };
 const containerChrome = {
-	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
-	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
-	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
+	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
+	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]",
 	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
 	ghost: "[--spark-card-bg:transparent]",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]"
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",

package/dist/lib/container-chrome.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
+{"version":3,"file":"container-chrome.cjs","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is Card's cva key for an unset `variant` prop and List's opt-in `variant` — not\n// part of the public SparkCardVariant union, which Card shares with Theme's `cardVariant`.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}

package/dist/lib/container-chrome.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.cjs";
+import { s as SparkCardVariant } from "../theme-types-CKZzOmSa.cjs";
 
 //#region src/lib/container-chrome.d.ts
 type ContainerVariant = SparkCardVariant | 'ambient';

package/dist/lib/container-chrome.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { r as SparkCardVariant } from "../theme-types-Bn5E15-P.js";
+import { s as SparkCardVariant } from "../theme-types-CKZzOmSa.js";
 
 //#region src/lib/container-chrome.d.ts
 type ContainerVariant = SparkCardVariant | 'ambient';

package/dist/lib/container-chrome.js

@@ -11,12 +11,12 @@ const radiusClasses = {
 	full: "rounded-full"
 };
 const containerChrome = {
-	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))",
-	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]",
-	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]",
+	ambient: "border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]",
+	soft: "bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]",
+	surface: "border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]",
 	outline: "border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]",
 	ghost: "[--spark-card-bg:transparent]",
-	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]"
+	solid: "bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]"
 };
 const containerPaddingX = {
 	ambient: "px-(--spark-card-px,1rem)",

package/dist/lib/container-chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is the internal cva key for an unset `variant` prop — not part of the public\n// SparkCardVariant union, which only lists variants a consumer can actually pass.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3))',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}
+{"version":3,"file":"container-chrome.js","names":[],"sources":["../../src/lib/container-chrome.ts"],"sourcesContent":["import type { SparkCardVariant } from './theme-types'\n\n// `ambient` is Card's cva key for an unset `variant` prop and List's opt-in `variant` — not\n// part of the public SparkCardVariant union, which Card shares with Theme's `cardVariant`.\nexport type ContainerVariant = SparkCardVariant | 'ambient'\n\nexport type ContainerRadius =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full'\n\nexport const radiusClasses: Record<ContainerRadius, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n  '3xl': 'rounded-3xl',\n  full: 'rounded-full',\n}\n\n// Fill/border/token-overrides only. Padding is a separate axis (containerPaddingX/All below) —\n// Card insets horizontally and owns its own vertical rhythm; Box has no such assumption.\n// Every non-ambient entry also writes --spark-card-bg (not just its `bg-` class): a\n// per-card `variant` prop applies these classes directly and never touches the\n// [data-card-variant] CSS block that normally populates that var for the ambient/\n// inherited case, but `elevated`'s gradient overlay (containerElevated below) needs\n// to read *some* var to know the variant's fill, whichever path set it.\nexport const containerChrome: Record<ContainerVariant, string> = {\n  ambient:\n    'border-(length:--spark-card-border-width,0px) border-(--spark-card-border,transparent) bg-(--spark-card-bg,var(--neutral-a3)) [--spark-skeleton-bg:var(--neutral-a5)] [--color-focus-root:var(--spark-card-focus,var(--spark-11))]',\n  soft: 'bg-(--spark-card-c-soft,var(--neutral-a3)) [--spark-card-bg:var(--spark-card-c-soft,var(--neutral-a3))] [--spark-skeleton-bg:var(--neutral-a5)]',\n  surface:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) bg-(--spark-card-c-surface,var(--neutral-2)) [--spark-card-bg:var(--spark-card-c-surface,var(--neutral-2))] [--spark-card-focus:var(--spark-11)] [--color-focus-root:var(--spark-11)]',\n  outline:\n    'border border-(--spark-card-c-border,var(--neutral-a6)) [--spark-card-bg:transparent]',\n  ghost: '[--spark-card-bg:transparent]',\n  solid:\n    'bg-(--spark-card-c-solid,var(--neutral-1)) [--spark-card-bg:var(--spark-card-c-solid,var(--neutral-1))] [--spark-card-fg-muted:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-fg:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-icon:var(--spark-card-c-contrast,var(--neutral-12))] [--spark-card-focus:var(--spark-card-c-contrast,var(--neutral-12))] [--color-focus-root:var(--spark-card-focus)]',\n}\n\nexport const containerPaddingX: Record<ContainerVariant, string> = {\n  ambient: 'px-(--spark-card-px,1rem)',\n  soft: 'px-4',\n  surface: 'px-4',\n  outline: 'px-4',\n  ghost: '',\n  solid: 'px-4',\n}\n\nexport const containerPaddingAll: Record<ContainerVariant, string> = {\n  ambient: 'p-(--spark-card-px,1rem)',\n  soft: 'p-4',\n  surface: 'p-4',\n  outline: 'p-4',\n  ghost: '',\n  solid: 'p-4',\n}\n\n// `elevated`: the hover tint targets the gradient layer instead of `background-color` —\n// the base stays the opaque --spark-elevated fill, so a hover never leaks the backdrop.\nexport function containerInteractiveClasses(\n  resolved: ContainerVariant,\n  elevated?: boolean,\n) {\n  const softHover =\n    (resolved === 'ambient' || resolved === 'soft') &&\n    (elevated\n      ? 'hover:[background-image:linear-gradient(var(--spark-card-c-soft-hover,var(--neutral-a4)),var(--spark-card-c-soft-hover,var(--neutral-a4)))]'\n      : 'hover:bg-(--spark-card-c-soft-hover,var(--neutral-a4))')\n  return [\n    'cursor-pointer text-left no-underline transition-colors motion-reduce:transition-none',\n    'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',\n    // hover deepens the fill one step; bordered/bare variants only ring\n    softHover,\n  ]\n}\n\n// Opaque base + the variant's own fill painted as an image layer over it — no\n// variant/color combination can render translucent, which matters when the container\n// sits over an arbitrary backdrop (a photo) rather than the flat app canvas.\nexport const containerElevated =\n  'bg-(--spark-elevated) ' +\n  '[background-image:linear-gradient(var(--spark-card-bg,transparent),var(--spark-card-bg,transparent))] ' +\n  'shadow-(--spark-card-shadow,var(--spark-shadow-1))'\n"],"mappings":";;AAgBA,MAAa,gBAAiD;CAC5D,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,MAAM;AACR;AASA,MAAa,kBAAoD;CAC/D,SACE;CACF,MAAM;CACN,SACE;CACF,SACE;CACF,OAAO;CACP,OACE;AACJ;AAEA,MAAa,oBAAsD;CACjE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAEA,MAAa,sBAAwD;CACnE,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,OAAO;AACT;AAIA,SAAgB,4BACd,UACA,UACA;CAMA,OAAO;EACL;EACA;EACA;GAPC,aAAa,aAAa,aAAa,YACvC,WACG,gJACA;CAON;AACF;AAKA,MAAa,oBACX"}

package/dist/lib/input-box-variants.cjs

@@ -3,20 +3,20 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let cn = require("cn");
 //#region src/lib/input-box-variants.ts
 const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
-const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8";
-const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!";
+const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)";
+const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!";
 const boxChrome = {
 	soft: {
-		brand: (0, cn.cn)(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active"),
-		gray: (0, cn.cn)(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8")
+		brand: (0, cn.cn)(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)")
 	},
 	surface: {
-		brand: (0, cn.cn)(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: (0, cn.cn)(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: (0, cn.cn)(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	outlined: {
-		brand: (0, cn.cn)(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: (0, cn.cn)(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: (0, cn.cn)(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: (0, cn.cn)(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	ghost: {
 		brand: (0, cn.cn)(GHOST_UNDERLINE, "border-b-input"),

package/dist/lib/input-box-variants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants.cjs","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,GAAA,IACE,WACA,sFACF;EACA,OAAA,GAAA,GAAA,IACE,WACA,4EACF;CACF;CACA,SAAS;EACP,QAAA,GAAA,GAAA,IACE,UACA,mGACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,gGACF;CACF;CACA,UAAU;EACR,QAAA,GAAA,GAAA,IACE,UACA,4EACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,2EACF;CACF;CACA,OAAO;EACL,QAAA,GAAA,GAAA,IAAU,iBAAiB,gBAAgB;EAC3C,OAAA,GAAA,GAAA,IAAS,iBAAiB,qBAAqB;CACjD;AACF"}
+{"version":3,"file":"input-box-variants.cjs","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,QAAA,GAAA,GAAA,IACE,WACA,8FACF;EACA,OAAA,GAAA,GAAA,IACE,WACA,yFACF;CACF;CACA,SAAS;EACP,QAAA,GAAA,GAAA,IACE,UACA,+GACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,6GACF;CACF;CACA,UAAU;EACR,QAAA,GAAA,GAAA,IACE,UACA,wFACF;EACA,OAAA,GAAA,GAAA,IACE,UACA,wFACF;CACF;CACA,OAAO;EACL,QAAA,GAAA,GAAA,IAAU,iBAAiB,gBAAgB;EAC3C,OAAA,GAAA,GAAA,IAAS,iBAAiB,qBAAqB;CACjD;AACF"}

package/dist/lib/input-box-variants.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.cjs";
+import { c as SparkInputColor, l as SparkInputStyle } from "../theme-types-CKZzOmSa.cjs";
 
 //#region src/lib/input-box-variants.d.ts
 declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";

package/dist/lib/input-box-variants.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor } from "../theme-types-Bn5E15-P.js";
+import { c as SparkInputColor, l as SparkInputStyle } from "../theme-types-CKZzOmSa.js";
 
 //#region src/lib/input-box-variants.d.ts
 declare const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";

package/dist/lib/input-box-variants.js

@@ -2,20 +2,20 @@
 import { cn } from "../utils/cn.js";
 //#region src/lib/input-box-variants.ts
 const GHOST_UNDERLINE = "h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled";
-const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8";
-const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!";
+const SOFT_BASE = "user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)";
+const BORDERED = "border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!";
 const boxChrome = {
 	soft: {
-		brand: cn(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active"),
-		gray: cn(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8")
+		brand: cn(SOFT_BASE, "bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)"),
+		gray: cn(SOFT_BASE, "bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)")
 	},
 	surface: {
-		brand: cn(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: cn(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: cn(BORDERED, "border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: cn(BORDERED, "border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	outlined: {
-		brand: cn(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-spark-a4"),
-		gray: cn(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4")
+		brand: cn(BORDERED, "border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)"),
+		gray: cn(BORDERED, "border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)")
 	},
 	ghost: {
 		brand: cn(GHOST_UNDERLINE, "border-b-input"),

package/dist/lib/input-box-variants.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-box-variants.js","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-red-a8 disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-red-a8 group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-red-a8'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-1 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-red-a4! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-red-a4! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-red-a4!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-input-active',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-gray-a8',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-spark-a4',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-gray-a4',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,sFACF;EACA,MAAM,GACJ,WACA,4EACF;CACF;CACA,SAAS;EACP,OAAO,GACL,UACA,mGACF;EACA,MAAM,GACJ,UACA,gGACF;CACF;CACA,UAAU;EACR,OAAO,GACL,UACA,4EACF;EACA,MAAM,GACJ,UACA,2EACF;CACF;CACA,OAAO;EACL,OAAO,GAAG,iBAAiB,gBAAgB;EAC3C,MAAM,GAAG,iBAAiB,qBAAqB;CACjD;AACF"}
+{"version":3,"file":"input-box-variants.js","names":[],"sources":["../../src/lib/input-box-variants.ts"],"sourcesContent":["import { cn } from '../utils/cn'\nimport type { SparkInputColor, SparkInputStyle } from './theme-types'\n\nexport const GHOST_UNDERLINE =\n  'h-10 rounded-none border-0 border-b-2 px-0 py-2 text-base focus:border-b-input-active focus-visible:border-b-input-active user-valid:border-b-input-active user-invalid:border-b-input-invalid user-invalid:text-error user-invalid:focus:border-b-red-a8! user-invalid:focus-visible:border-b-red-a8! aria-invalid:border-b-input-invalid aria-invalid:text-error aria-invalid:focus:border-b-red-a8! aria-invalid:focus-visible:border-b-red-a8! group-data-[invalid=true]/field:border-b-input-invalid! group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus:border-b-red-a8! group-data-[invalid=true]/field:focus-visible:border-b-red-a8! disabled:border-b-input-disabled'\n\nconst SOFT_BASE =\n  'user-invalid:bg-base-error-soft user-invalid:text-error user-invalid:not-disabled:hover:bg-red-a4 focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:ring-(--color-error-active) disabled:bg-base-gray-soft disabled:opacity-50 aria-invalid:bg-base-error-soft aria-invalid:text-error aria-invalid:not-disabled:hover:bg-red-a4 aria-invalid:focus-visible:ring-(--color-error-active) group-data-[invalid=true]/field:bg-base-error-soft group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:not-disabled:hover:bg-red-a4 group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)'\n\nconst BORDERED =\n  'border user-invalid:border-input-invalid user-invalid:text-error focus-visible:ring-2 focus-visible:ring-offset-2 user-invalid:focus-visible:border-input-invalid! user-invalid:focus-visible:ring-(--color-error-active)! disabled:border-input-disabled disabled:opacity-50 aria-invalid:border-input-invalid aria-invalid:text-error aria-invalid:focus-visible:border-input-invalid! aria-invalid:focus-visible:ring-(--color-error-active)! group-data-[invalid=true]/field:border-input-invalid group-data-[invalid=true]/field:text-error group-data-[invalid=true]/field:focus-visible:border-input-invalid! group-data-[invalid=true]/field:focus-visible:ring-(--color-error-active)!'\nexport const boxChrome: Record<\n  SparkInputStyle,\n  Record<SparkInputColor, string>\n> = {\n  soft: {\n    brand: cn(\n      SOFT_BASE,\n      'bg-input-base not-disabled:hover:bg-input-base-hover focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      SOFT_BASE,\n      'bg-base-gray-soft not-disabled:hover:bg-gray-a4 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  surface: {\n    brand: cn(\n      BORDERED,\n      'border-input bg-base-accent-surface focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray bg-base-gray-surface focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  outlined: {\n    brand: cn(\n      BORDERED,\n      'border-input focus-visible:border-input-active focus-visible:ring-(--color-focus-root)',\n    ),\n    gray: cn(\n      BORDERED,\n      'border-input-gray focus-visible:border-gray-a8 focus-visible:ring-(--color-focus-root)',\n    ),\n  },\n  ghost: {\n    brand: cn(GHOST_UNDERLINE, 'border-b-input'),\n    gray: cn(GHOST_UNDERLINE, 'border-b-input-gray'),\n  },\n}\n"],"mappings":";;;AAGA,MAAa,kBACX;AAEF,MAAM,YACJ;AAEF,MAAM,WACJ;AACF,MAAa,YAGT;CACF,MAAM;EACJ,OAAO,GACL,WACA,8FACF;EACA,MAAM,GACJ,WACA,yFACF;CACF;CACA,SAAS;EACP,OAAO,GACL,UACA,+GACF;EACA,MAAM,GACJ,UACA,6GACF;CACF;CACA,UAAU;EACR,OAAO,GACL,UACA,wFACF;EACA,MAAM,GACJ,UACA,wFACF;CACF;CACA,OAAO;EACL,OAAO,GAAG,iBAAiB,gBAAgB;EAC3C,MAAM,GAAG,iBAAiB,qBAAqB;CACjD;AACF"}

package/dist/lib/selection-list.cjs

@@ -0,0 +1,17 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/lib/selection-list.ts
+const BOXED = "overflow-hidden rounded-md border border-input-gray divide-y divide-input-gray data-[invalid=true]:border-input-invalid data-[invalid=true]:divide-input-invalid";
+/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */
+const selectionListClasses = {
+	soft: "group/selection-list gap-px overflow-hidden rounded-md",
+	surface: `group/selection-list gap-0 bg-base-gray-surface ${BOXED}`,
+	outlined: `group/selection-list gap-0 ${BOXED}`,
+	ghost: "group/selection-list gap-0"
+};
+const selectionRowClasses = "group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3";
+//#endregion
+exports.selectionListClasses = selectionListClasses;
+exports.selectionRowClasses = selectionRowClasses;
+
+//# sourceMappingURL=selection-list.cjs.map

package/dist/lib/selection-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-list.cjs","names":[],"sources":["../../src/lib/selection-list.ts"],"sourcesContent":["import type { SparkInputStyle } from './theme-types'\n\nconst BOXED =\n  'overflow-hidden rounded-md border border-input-gray divide-y divide-input-gray data-[invalid=true]:border-input-invalid data-[invalid=true]:divide-input-invalid'\n\n/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */\nexport const selectionListClasses: Record<SparkInputStyle, string> = {\n  soft: 'group/selection-list gap-px overflow-hidden rounded-md',\n  surface: `group/selection-list gap-0 bg-base-gray-surface ${BOXED}`,\n  outlined: `group/selection-list gap-0 ${BOXED}`,\n  ghost: 'group/selection-list gap-0',\n}\n\nexport const selectionRowClasses =\n  'group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3'\n"],"mappings":";;;AAEA,MAAM,QACJ;;AAGF,MAAa,uBAAwD;CACnE,MAAM;CACN,SAAS,mDAAmD;CAC5D,UAAU,8BAA8B;CACxC,OAAO;AACT;AAEA,MAAa,sBACX"}

package/dist/lib/selection-list.d.cts

@@ -0,0 +1,11 @@
+"use client";
+
+import { l as SparkInputStyle } from "../theme-types-CKZzOmSa.cjs";
+
+//#region src/lib/selection-list.d.ts
+/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */
+declare const selectionListClasses: Record<SparkInputStyle, string>;
+declare const selectionRowClasses = "group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3";
+//#endregion
+export { selectionListClasses, selectionRowClasses };
+//# sourceMappingURL=selection-list.d.cts.map

package/dist/lib/selection-list.d.ts

@@ -0,0 +1,11 @@
+"use client";
+
+import { l as SparkInputStyle } from "../theme-types-CKZzOmSa.js";
+
+//#region src/lib/selection-list.d.ts
+/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */
+declare const selectionListClasses: Record<SparkInputStyle, string>;
+declare const selectionRowClasses = "group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3";
+//#endregion
+export { selectionListClasses, selectionRowClasses };
+//# sourceMappingURL=selection-list.d.ts.map

package/dist/lib/selection-list.js

@@ -0,0 +1,15 @@
+"use client";
+//#region src/lib/selection-list.ts
+const BOXED = "overflow-hidden rounded-md border border-input-gray divide-y divide-input-gray data-[invalid=true]:border-input-invalid data-[invalid=true]:divide-input-invalid";
+/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */
+const selectionListClasses = {
+	soft: "group/selection-list gap-px overflow-hidden rounded-md",
+	surface: `group/selection-list gap-0 bg-base-gray-surface ${BOXED}`,
+	outlined: `group/selection-list gap-0 ${BOXED}`,
+	ghost: "group/selection-list gap-0"
+};
+const selectionRowClasses = "group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3";
+//#endregion
+export { selectionListClasses, selectionRowClasses };
+
+//# sourceMappingURL=selection-list.js.map

package/dist/lib/selection-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-list.js","names":[],"sources":["../../src/lib/selection-list.ts"],"sourcesContent":["import type { SparkInputStyle } from './theme-types'\n\nconst BOXED =\n  'overflow-hidden rounded-md border border-input-gray divide-y divide-input-gray data-[invalid=true]:border-input-invalid data-[invalid=true]:divide-input-invalid'\n\n/** Group chrome per `listStyle`; the group also sets `data-list-style` for its rows. */\nexport const selectionListClasses: Record<SparkInputStyle, string> = {\n  soft: 'group/selection-list gap-px overflow-hidden rounded-md',\n  surface: `group/selection-list gap-0 bg-base-gray-surface ${BOXED}`,\n  outlined: `group/selection-list gap-0 ${BOXED}`,\n  ghost: 'group/selection-list gap-0',\n}\n\nexport const selectionRowClasses =\n  'group-data-[list-style=soft]/selection-list:bg-base-gray-soft group-data-[list-style=soft]/selection-list:px-3 group-data-[list-style=soft]/selection-list:group-data-[invalid=true]/selection-list:bg-base-error-soft group-data-[list-style=surface]/selection-list:px-3 group-data-[list-style=outlined]/selection-list:px-3'\n"],"mappings":";;AAEA,MAAM,QACJ;;AAGF,MAAa,uBAAwD;CACnE,MAAM;CACN,SAAS,mDAAmD;CAC5D,UAAU,8BAA8B;CACxC,OAAO;AACT;AAEA,MAAa,sBACX"}

package/dist/lib/theme-types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"theme-types.cjs","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n  'slate',\n  'mauve',\n  'gray',\n  'sage',\n  'olive',\n  'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n  value: string,\n): value is SparkNeutralFamily {\n  return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n"],"mappings":";;;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}
+{"version":3,"file":"theme-types.cjs","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n  'slate',\n  'mauve',\n  'gray',\n  'sage',\n  'olive',\n  'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n  value: string,\n): value is SparkNeutralFamily {\n  return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */\nexport type SparkButtonColor =\n  | 'primary'\n  | 'accent'\n  | 'neutral'\n  | 'destructive'\n  | 'danger'\nexport type SparkButtonEmphasis = 'primary' | 'secondary' | 'tertiary'\nexport interface SparkButtonRole {\n  style?: SparkStyle\n  color?: SparkButtonColor\n}\n/** Per-emphasis `<Button>` look; a nested `<Theme>` replaces only the roles it sets. */\nexport type SparkButtonRoles = Partial<\n  Record<SparkButtonEmphasis, SparkButtonRole>\n>\n"],"mappings":";;;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}

package/dist/lib/theme-types.d.cts

@@ -1,4 +1,4 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, p as isSparkNeutralFamily, r as SparkCardVariant, s as SparkNeutral, t as SPARK_NEUTRAL_FAMILIES, u as SparkScaling } from "../theme-types-Bn5E15-P.cjs";
-export { SPARK_NEUTRAL_FAMILIES, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };
+import { _ as isSparkNeutralFamily, a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, t as SPARK_NEUTRAL_FAMILIES, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.cjs";
+export { SPARK_NEUTRAL_FAMILIES, SparkButtonColor, SparkButtonEmphasis, SparkButtonRole, SparkButtonRoles, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };

package/dist/lib/theme-types.d.ts

@@ -1,4 +1,4 @@
 "use client";
 
-import { a as SparkInputStyle, c as SparkNeutralFamily, d as SparkSpacing, f as SparkStyle, i as SparkInputColor, l as SparkRadius, n as SparkCardColor, o as SparkLabelPosition, p as isSparkNeutralFamily, r as SparkCardVariant, s as SparkNeutral, t as SPARK_NEUTRAL_FAMILIES, u as SparkScaling } from "../theme-types-Bn5E15-P.js";
-export { SPARK_NEUTRAL_FAMILIES, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };
+import { _ as isSparkNeutralFamily, a as SparkButtonRoles, c as SparkInputColor, d as SparkNeutral, f as SparkNeutralFamily, g as SparkStyle, h as SparkSpacing, i as SparkButtonRole, l as SparkInputStyle, m as SparkScaling, n as SparkButtonColor, o as SparkCardColor, p as SparkRadius, r as SparkButtonEmphasis, s as SparkCardVariant, t as SPARK_NEUTRAL_FAMILIES, u as SparkLabelPosition } from "../theme-types-CKZzOmSa.js";
+export { SPARK_NEUTRAL_FAMILIES, SparkButtonColor, SparkButtonEmphasis, SparkButtonRole, SparkButtonRoles, SparkCardColor, SparkCardVariant, SparkInputColor, SparkInputStyle, SparkLabelPosition, SparkNeutral, SparkNeutralFamily, SparkRadius, SparkScaling, SparkSpacing, SparkStyle, isSparkNeutralFamily };

package/dist/lib/theme-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme-types.js","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n  'slate',\n  'mauve',\n  'gray',\n  'sage',\n  'olive',\n  'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n  value: string,\n): value is SparkNeutralFamily {\n  return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n"],"mappings":";;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}
+{"version":3,"file":"theme-types.js","names":[],"sources":["../../src/lib/theme-types.ts"],"sourcesContent":["/** The 6 curated Radix gray families — the only values `getMatchingNeutral` ever returns. */\nexport const SPARK_NEUTRAL_FAMILIES = [\n  'slate',\n  'mauve',\n  'gray',\n  'sage',\n  'olive',\n  'sand',\n] as const\nexport type SparkNeutralFamily = (typeof SPARK_NEUTRAL_FAMILIES)[number]\nexport function isSparkNeutralFamily(\n  value: string,\n): value is SparkNeutralFamily {\n  return (SPARK_NEUTRAL_FAMILIES as readonly string[]).includes(value)\n}\n\n/**\n * `'auto'` pairs a neutral automatically; one of the 6 curated families picks it by\n * name; any other string is a literal color seed (regenerated against `backgroundColor`\n * exactly like a custom family — see `resolveAutoNeutral`/`generateAccentScale`).\n */\nexport type SparkNeutral = 'auto' | SparkNeutralFamily | (string & {})\nexport type SparkRadius = 'none' | 'small' | 'medium' | 'large' | 'full'\nexport type SparkScaling = '90%' | '95%' | '100%' | '105%' | '110%'\nexport type SparkSpacing = 'dense' | 'default' | 'roomy'\nexport type SparkStyle = 'solid' | 'soft' | 'surface' | 'ghost' | 'outline'\n/**\n * Card chrome variants. `solid` pairs the neutral scale's own background/text\n * extremes (`--neutral-1` fill, `--neutral-12` ink) — the same pairing Radix\n * guarantees stays AA-compliant in both light and dark, so it needs no fixed\n * (non-appearance-tracking) override the way accent's solid ink does.\n */\nexport type SparkCardVariant = SparkStyle\n/**\n * Card container chrome palette. `neutral` (default) paints through the app\n * theme's neutral scale, so a card inherits the configured neutral colour;\n * `accent` tints the card's private mini-scale with the brand accent (chrome\n * only — never the content controls inside). Open union: grows into feedback\n * colours / custom palettes later.\n */\nexport type SparkCardColor = 'neutral' | 'accent'\nexport type SparkLabelPosition = 'outset' | 'inset'\nexport type SparkInputStyle = 'soft' | 'surface' | 'outlined' | 'ghost'\nexport type SparkInputColor = 'brand' | 'gray'\n/** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */\nexport type SparkButtonColor =\n  | 'primary'\n  | 'accent'\n  | 'neutral'\n  | 'destructive'\n  | 'danger'\nexport type SparkButtonEmphasis = 'primary' | 'secondary' | 'tertiary'\nexport interface SparkButtonRole {\n  style?: SparkStyle\n  color?: SparkButtonColor\n}\n/** Per-emphasis `<Button>` look; a nested `<Theme>` replaces only the roles it sets. */\nexport type SparkButtonRoles = Partial<\n  Record<SparkButtonEmphasis, SparkButtonRole>\n>\n"],"mappings":";;;AACA,MAAa,yBAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,qBACd,OAC6B;CAC7B,OAAQ,uBAA6C,SAAS,KAAK;AACrE"}

package/dist/lib/toggle-group-context.d.cts

@@ -1,6 +1,7 @@
 "use client";
 
-import { ButtonProps, SparkButtonColor } from "../components/button.cjs";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.cjs";
+import { ButtonProps } from "../components/button.cjs";
 import { ToggleStyle } from "../components/toggle.cjs";
 import * as React$1 from "react";
 

package/dist/lib/toggle-group-context.d.ts

@@ -1,6 +1,7 @@
 "use client";
 
-import { ButtonProps, SparkButtonColor } from "../components/button.js";
+import { n as SparkButtonColor } from "../theme-types-CKZzOmSa.js";
+import { ButtonProps } from "../components/button.js";
 import { ToggleStyle } from "../components/toggle.js";
 import * as React$1 from "react";
 

package/dist/styles/spark-default.css

@@ -852,7 +852,8 @@
 
   /*
    * Card container chrome — a CONTAINER-only knob (contract §11). Everything here
-   * writes only --spark-card-* / --spark-card-c-*, tokens read EXCLUSIVELY by <Card>;
+   * writes only --spark-card-* / --spark-card-c-*, tokens read only by <Card> and an ambient <List>
+   * (--spark-card-list-gapped is List's 0|1 row-gap switch);
    * it never touches data-style, --spark-style-*, or the --spark-* scale, so styling
    * OR colouring a card never cascades into the Buttons/Checkboxes inside it.
    *
@@ -890,6 +891,8 @@
   [data-card-variant='soft'],
   :where([data-card-variant='soft'] .spark-theme),
   :where([data-card-variant='soft'] [data-card-color]) {
+    --spark-card-focus: initial;
+    --spark-card-list-gapped: 1;
     --spark-card-px: 1rem;
     --spark-card-bg: var(--spark-card-c-soft, var(--neutral-a3));
     --spark-card-border: transparent;
@@ -902,6 +905,8 @@
   [data-card-variant='surface'],
   :where([data-card-variant='surface'] .spark-theme),
   :where([data-card-variant='surface'] [data-card-color]) {
+    --spark-card-focus: initial;
+    --spark-card-list-gapped: 0;
     --spark-card-px: 1rem;
     --spark-card-bg: var(--spark-card-c-surface, var(--neutral-2));
     --spark-card-border: var(--spark-card-c-border, var(--neutral-a6));
@@ -914,6 +919,8 @@
   [data-card-variant='outline'],
   :where([data-card-variant='outline'] .spark-theme),
   :where([data-card-variant='outline'] [data-card-color]) {
+    --spark-card-focus: initial;
+    --spark-card-list-gapped: 0;
     --spark-card-px: 1rem;
     --spark-card-bg: transparent;
     --spark-card-border: var(--spark-card-c-border, var(--neutral-a6));
@@ -926,7 +933,9 @@
   [data-card-variant='ghost'],
   :where([data-card-variant='ghost'] .spark-theme),
   :where([data-card-variant='ghost'] [data-card-color]) {
+    --spark-card-focus: initial;
     /* flush horizontally (no chrome to inset against); vertical rhythm kept by py-3 */
+    --spark-card-list-gapped: 1;
     --spark-card-px: 0px;
     --spark-card-bg: transparent;
     --spark-card-border: transparent;
@@ -942,6 +951,7 @@
     /* neutral: --neutral-1/--neutral-12 fill/ink — Radix's own bg+text pair, so
        contrast holds in both appearances with no fixed override needed. accent:
        --spark-9/--spark-contrast (AA-enforced) instead, via the accent block above. */
+    --spark-card-list-gapped: 1;
     --spark-card-px: 1rem;
     --spark-card-bg: var(--spark-card-c-solid, var(--neutral-1));
     --spark-card-border: transparent;
@@ -949,6 +959,7 @@
     --spark-card-fg: var(--spark-card-c-contrast, var(--neutral-12));
     --spark-card-fg-muted: var(--spark-card-c-contrast, var(--neutral-12));
     --spark-card-icon: var(--spark-card-c-contrast, var(--neutral-12));
+    --spark-card-focus: var(--spark-card-c-contrast, var(--neutral-12));
   }
 
   /*