@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/testing/css-variables.generated.js

@@ -1,5 +1,5 @@
 "use client";
-const KIT_NAMES = "--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border --border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted --breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 --chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong --danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg --hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border --hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast --hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg --hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink --media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income --money-income-contrast --money-net --money-net-contrast --money-neutral --money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error --status-pending --status-synced --success --success-bg --success-border --success-contrast --text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary --text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border --toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg --toast-warning-border --warning --warning-bg --warning-border --warning-border-strong --warning-contrast --z-toast";
+const KIT_NAMES = "--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border --border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted --breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 --chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong --danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg --hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border --hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast --hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg --hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink --media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income --money-income-contrast --money-net --money-net-contrast --money-neutral --money-neutral-contrast --neutral --neutral-contrast --success --success-bg --success-border --success-contrast --text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary --text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border --toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg --toast-warning-border --warning --warning-bg --warning-border --warning-border-strong --warning-contrast --z-toast";
 const TAILWIND_THEME_NAMES = "--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl --blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg --breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 --color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 --color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black --color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 --color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 --color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 --color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 --color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 --color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 --color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 --color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 --color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 --color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 --color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 --color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 --color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 --color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 --color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 --color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 --color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 --color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 --color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 --color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 --color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 --color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 --color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 --color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 --color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 --color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 --color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 --color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 --color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 --color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 --color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 --color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 --color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 --color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 --color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 --color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 --color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 --color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 --color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 --color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 --color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 --color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 --color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 --color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 --color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 --color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 --color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 --color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 --color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 --color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 --color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 --color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 --color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 --color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 --color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 --color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 --container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl --container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl --container-xs --default-font-family --default-font-feature-settings --default-font-variation-settings --default-mono-font-family --default-mono-font-feature-settings --default-mono-font-variation-settings --default-transition-duration --default-transition-timing-function --drop-shadow-2xl --drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in --ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black --font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light --font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin --inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal --leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic --perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl --radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl --shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl --text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height --text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl --text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height --text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs --text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm --text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height --tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider --tracking-widest";
 export {
   KIT_NAMES,

package/dist/testing/css-variables.generated.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/css-variables.generated.ts"],"sourcesContent":["// GENERATED by scripts/gen-kit-css-variables.mjs — do not edit by hand. Re-run it after\n// changing tokens.css or upgrading Tailwind; src/__tests__/token-vars-declared.test.ts\n// fails while this is stale.\n\n/** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`\n *  left out (102 names). */\nexport const KIT_NAMES =\n  \"--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border \" +\n  \"--border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted \" +\n  \"--breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 \" +\n  \"--chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong \" +\n  \"--danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg \" +\n  \"--hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border \" +\n  \"--hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast \" +\n  \"--hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg \" +\n  \"--hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink \" +\n  \"--media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income \" +\n  \"--money-income-contrast --money-net --money-net-contrast --money-neutral \" +\n  \"--money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error \" +\n  \"--status-pending --status-synced --success --success-bg --success-border --success-contrast \" +\n  \"--text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary \" +\n  \"--text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border \" +\n  \"--toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg \" +\n  \"--toast-warning-border --warning --warning-bg --warning-border --warning-border-strong \" +\n  \"--warning-contrast --z-toast\";\n\n/** The theme variables of Tailwind 4.3.3's `theme.css` (413 names). */\nexport const TAILWIND_THEME_NAMES =\n  \"--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl \" +\n  \"--blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg \" +\n  \"--breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 \" +\n  \"--color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 \" +\n  \"--color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black \" +\n  \"--color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 \" +\n  \"--color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 \" +\n  \"--color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 \" +\n  \"--color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 \" +\n  \"--color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 \" +\n  \"--color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 \" +\n  \"--color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 \" +\n  \"--color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 \" +\n  \"--color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 \" +\n  \"--color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 \" +\n  \"--color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 \" +\n  \"--color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 \" +\n  \"--color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 \" +\n  \"--color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 \" +\n  \"--color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 \" +\n  \"--color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 \" +\n  \"--color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 \" +\n  \"--color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 \" +\n  \"--color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 \" +\n  \"--color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 \" +\n  \"--color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 \" +\n  \"--color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 \" +\n  \"--color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 \" +\n  \"--color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 \" +\n  \"--color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 \" +\n  \"--color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 \" +\n  \"--color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 \" +\n  \"--color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 \" +\n  \"--color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 \" +\n  \"--color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 \" +\n  \"--color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 \" +\n  \"--color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 \" +\n  \"--color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 \" +\n  \"--color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 \" +\n  \"--color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 \" +\n  \"--color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 \" +\n  \"--color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 \" +\n  \"--color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 \" +\n  \"--color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 \" +\n  \"--color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 \" +\n  \"--color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 \" +\n  \"--color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 \" +\n  \"--color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 \" +\n  \"--color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 \" +\n  \"--color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 \" +\n  \"--color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 \" +\n  \"--color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 \" +\n  \"--color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 \" +\n  \"--color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 \" +\n  \"--color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 \" +\n  \"--color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 \" +\n  \"--color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 \" +\n  \"--color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 \" +\n  \"--color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 \" +\n  \"--color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 \" +\n  \"--color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 \" +\n  \"--container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl \" +\n  \"--container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl \" +\n  \"--container-xs --default-font-family --default-font-feature-settings \" +\n  \"--default-font-variation-settings --default-mono-font-family \" +\n  \"--default-mono-font-feature-settings --default-mono-font-variation-settings \" +\n  \"--default-transition-duration --default-transition-timing-function --drop-shadow-2xl \" +\n  \"--drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in \" +\n  \"--ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black \" +\n  \"--font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light \" +\n  \"--font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin \" +\n  \"--inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal \" +\n  \"--leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic \" +\n  \"--perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl \" +\n  \"--radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl \" +\n  \"--shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl \" +\n  \"--text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height \" +\n  \"--text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl \" +\n  \"--text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height \" +\n  \"--text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs \" +\n  \"--text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm \" +\n  \"--text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height \" +\n  \"--tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider \" +\n  \"--tracking-widest\";\n"],"mappings":";AAMO,MAAM,YACX;AAoBK,MAAM,uBACX;","names":[]}
+{"version":3,"sources":["../../src/testing/css-variables.generated.ts"],"sourcesContent":["// GENERATED by scripts/gen-kit-css-variables.mjs — do not edit by hand. Re-run it after\n// changing tokens.css or upgrading Tailwind; src/__tests__/token-vars-declared.test.ts\n// fails while this is stale.\n\n/** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`\n *  left out (98 names). */\nexport const KIT_NAMES =\n  \"--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border \" +\n  \"--border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted \" +\n  \"--breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 \" +\n  \"--chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong \" +\n  \"--danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg \" +\n  \"--hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border \" +\n  \"--hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast \" +\n  \"--hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg \" +\n  \"--hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink \" +\n  \"--media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income \" +\n  \"--money-income-contrast --money-net --money-net-contrast --money-neutral \" +\n  \"--money-neutral-contrast --neutral --neutral-contrast --success --success-bg --success-border \" +\n  \"--success-contrast --text-caption --text-inverse --text-micro --text-muted --text-placeholder \" +\n  \"--text-primary --text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg \" +\n  \"--toast-danger-border --toast-info-bg --toast-info-border --toast-success-bg \" +\n  \"--toast-success-border --toast-warning-bg --toast-warning-border --warning --warning-bg \" +\n  \"--warning-border --warning-border-strong --warning-contrast --z-toast\";\n\n/** The theme variables of Tailwind 4.3.4's `theme.css` (413 names). */\nexport const TAILWIND_THEME_NAMES =\n  \"--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl \" +\n  \"--blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg \" +\n  \"--breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 \" +\n  \"--color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 \" +\n  \"--color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black \" +\n  \"--color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 \" +\n  \"--color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 \" +\n  \"--color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 \" +\n  \"--color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 \" +\n  \"--color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 \" +\n  \"--color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 \" +\n  \"--color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 \" +\n  \"--color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 \" +\n  \"--color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 \" +\n  \"--color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 \" +\n  \"--color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 \" +\n  \"--color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 \" +\n  \"--color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 \" +\n  \"--color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 \" +\n  \"--color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 \" +\n  \"--color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 \" +\n  \"--color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 \" +\n  \"--color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 \" +\n  \"--color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 \" +\n  \"--color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 \" +\n  \"--color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 \" +\n  \"--color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 \" +\n  \"--color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 \" +\n  \"--color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 \" +\n  \"--color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 \" +\n  \"--color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 \" +\n  \"--color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 \" +\n  \"--color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 \" +\n  \"--color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 \" +\n  \"--color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 \" +\n  \"--color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 \" +\n  \"--color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 \" +\n  \"--color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 \" +\n  \"--color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 \" +\n  \"--color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 \" +\n  \"--color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 \" +\n  \"--color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 \" +\n  \"--color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 \" +\n  \"--color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 \" +\n  \"--color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 \" +\n  \"--color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 \" +\n  \"--color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 \" +\n  \"--color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 \" +\n  \"--color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 \" +\n  \"--color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 \" +\n  \"--color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 \" +\n  \"--color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 \" +\n  \"--color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 \" +\n  \"--color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 \" +\n  \"--color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 \" +\n  \"--color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 \" +\n  \"--color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 \" +\n  \"--color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 \" +\n  \"--color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 \" +\n  \"--color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 \" +\n  \"--color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 \" +\n  \"--container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl \" +\n  \"--container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl \" +\n  \"--container-xs --default-font-family --default-font-feature-settings \" +\n  \"--default-font-variation-settings --default-mono-font-family \" +\n  \"--default-mono-font-feature-settings --default-mono-font-variation-settings \" +\n  \"--default-transition-duration --default-transition-timing-function --drop-shadow-2xl \" +\n  \"--drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in \" +\n  \"--ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black \" +\n  \"--font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light \" +\n  \"--font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin \" +\n  \"--inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal \" +\n  \"--leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic \" +\n  \"--perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl \" +\n  \"--radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl \" +\n  \"--shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl \" +\n  \"--text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height \" +\n  \"--text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl \" +\n  \"--text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height \" +\n  \"--text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs \" +\n  \"--text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm \" +\n  \"--text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height \" +\n  \"--tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider \" +\n  \"--tracking-widest\";\n"],"mappings":";AAMO,MAAM,YACX;AAmBK,MAAM,uBACX;","names":[]}

package/dist/theme/chart-palette.d.ts

@@ -73,8 +73,26 @@ export declare const EDGE_MIN_CONTRAST = 3;
  * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can
  * sit on (the card and the page), and the WORST of them decides. Anything it cannot
  * measure gets no edge rather than a guessed one.
+ *
+ * Treemap's tiles take this ink; SeriesChart's bars and areas take their own shade
+ * ({@link chartShade}) since 0.55, where this says they need an edge at all.
  */
 export declare function chartEdge(fill: string, surfaces: readonly string[], ink?: string): string | undefined;
+/**
+ * `fill`'s own shade that clears `min` ({@link EDGE_MIN_CONTRAST}, 3:1) against every one of
+ * `surfaces`: `fill` itself when it does already, else its hue and chroma moved in OKLCH
+ * lightness away from the grounds — darker on a light page, lighter on a dark one — until it
+ * does (`solveLightness`, measured on the hex). `undefined` for a fill or grounds it cannot
+ * measure, or a shade it cannot reach.
+ *
+ * The edge a SeriesChart bar or area takes under More contrast (0.55, held back from 0.53's
+ * code review), in place of {@link chartEdge}'s ink: the ink outlined a low-contrast area
+ * at its full width (0.52's stop-gap; 0.51 drew it 1px), a near-black line where the
+ * reader looked for the series' colour. Its own darker shade is the same series, and one
+ * the ground lets them see. The money tokens under More contrast are solved the same way
+ * (`contrast-tokens.ts`, `moneyOn`).
+ */
+export declare function chartShade(fill: string, surfaces: readonly string[], min?: number): string | undefined;
 export declare const PALETTE_HEX: {
     readonly light: readonly ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];
     readonly dark: readonly ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];

package/dist/theme/chart-palette.js

@@ -1,5 +1,5 @@
 "use client";
-import { contrast, parseHex as parseRgbHex } from "./color.js";
+import { contrast, hexToOklch, oklchToHex, parseHex as parseRgbHex, solveLightness } from "./color.js";
 const PALETTE_SIZE = 8;
 const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3];
 function paletteFor(index, options) {
@@ -36,6 +36,21 @@ function chartEdge(fill, surfaces, ink = CHART_ROLES.outline) {
   const worst = Math.min(...measurable.map((s) => contrast(fill, s)));
   return worst < EDGE_MIN_CONTRAST ? ink : void 0;
 }
+function chartShade(fill, surfaces, min = EDGE_MIN_CONTRAST) {
+  const lch = hexToOklch(fill);
+  const grounds = surfaces.flatMap((s) => parseRgbHex(s) ?? []);
+  if (!lch || grounds.length === 0) return void 0;
+  const clears = (hex) => grounds.every((ground) => contrast(hex, ground) >= min);
+  if (clears(fill)) return fill;
+  const light = grounds.every((ground) => contrast(ground, BLACK) >= contrast(ground, WHITE));
+  const direction = light ? "darker" : "lighter";
+  const solved = grounds.map((ground) => solveLightness(min, ground, lch.h, lch.c, direction));
+  const l = direction === "darker" ? Math.min(...solved) : Math.max(...solved);
+  const shade = oklchToHex({ l, c: lch.c, h: lch.h });
+  return clears(shade) ? shade : void 0;
+}
+const BLACK = "#000000";
+const WHITE = "#ffffff";
 const IMPRINT_HEX = ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];
 const PALETTE_HEX = {
   light: IMPRINT_HEX,
@@ -92,6 +107,7 @@ export {
   PALETTE_HEX,
   PALETTE_SIZE,
   chartEdge,
+  chartShade,
   lerpHex,
   paletteFor,
   textOn

package/dist/theme/chart-palette.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..8 = anyplot's \"Imprint\" hues (https://anyplot.ai/palette, 0.49 — Paul Tol\n// \"Muted\" before, still selectable as the `paul-tol` preset).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\n/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,\n *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset\n *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the\n *  by-index ramp wraps after eight, so the same series keeps the same colour whichever\n *  preset is active. */\nexport const PALETTE_SIZE = 8;\n\n/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order\n *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.\n *  An option (`paletteFor(i, { order: \"cvd\" })`), not the default: the default order is\n *  anyplot's own slot order, so series 1 is always the green. */\nexport const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;\n\nexport interface PaletteForOptions {\n  /** `\"slot\"` (default): anyplot's slot order. `\"cvd\"`: {@link CVD_ORDER}. */\n  order?: \"slot\" | \"cvd\";\n}\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp\n *  wraps after {@link PALETTE_SIZE}.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number, options?: PaletteForOptions): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;\n  const slot = options?.order === \"cvd\" ? CVD_ORDER[position] : position;\n  return `var(--chart-${slot + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  neutral: \"var(--money-neutral)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n  /** A generic total line — not money-coloured, the chart's neutral ink. */\n  total: \"var(--chart-ink)\",\n} as const;\n\n/**\n * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are\n * the only chart colours that change between light and dark — the eight hues do not:\n *\n * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A\n *   treemap's \"rest\" bucket or a pie's \"Other\" slice takes this instead of wrapping\n *   round to a hue the reader will match to a real series.\n * - `total` / `baseline` / `outline` → the neutral INK.\n */\nexport const CHART_ROLES = {\n  other: \"var(--chart-muted)\",\n  rest: \"var(--chart-muted)\",\n  disabled: \"var(--chart-muted)\",\n  band: \"var(--chart-muted)\",\n  total: \"var(--chart-ink)\",\n  baseline: \"var(--chart-ink)\",\n  outline: \"var(--chart-ink)\",\n} as const;\n\n/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_MUTED_HEX = { light: \"#6b6a63\", dark: \"#a8a79f\" } as const;\n\n/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */\nexport const EDGE_MIN_CONTRAST = 3;\n\n/**\n * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.\n *\n * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre\n * and green on cream; matte red and rose on the dark ground): outline the shape in ink,\n * so its boundary is legible while the fill keeps the hue that identifies the series.\n * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an\n * outline on every bar is noise.\n *\n * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can\n * sit on (the card and the page), and the WORST of them decides. Anything it cannot\n * measure gets no edge rather than a guessed one.\n */\nexport function chartEdge(\n  fill: string,\n  surfaces: readonly string[],\n  ink: string = CHART_ROLES.outline,\n): string | undefined {\n  if (!parseRgbHex(fill)) return undefined;\n  const measurable = surfaces.filter((s) => parseRgbHex(s));\n  if (measurable.length === 0) return undefined;\n  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));\n  return worst < EDGE_MIN_CONTRAST ? ink : undefined;\n}\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\n//\n// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark\n// ground, and neither does the kit any more; `chartEdge` outlines the two that fall\n// under 3:1 there (matte red, rose) instead of lifting them into different colours.\nconst IMPRINT_HEX = [\"#009e73\", \"#c475fd\", \"#4467a3\", \"#bd8233\", \"#ae3030\", \"#2abccd\", \"#954477\", \"#99b314\"] as const;\nexport const PALETTE_HEX = {\n  light: IMPRINT_HEX,\n  dark: IMPRINT_HEX,\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →\n    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).\n    The hues are the same in both themes; only the midpoint flips with the ground. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#faf8f1\", // anyplot's light paper — the diverging scale's 0\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#1a1a17\", // anyplot's ink — the diverging scale's 0 on the dark ground\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":";AAOA,SAAS,UAAU,YAAY,mBAAmB;AAO3C,MAAM,eAAe;AAMrB,MAAM,YAAY,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAiBzC,SAAS,WAAW,OAAe,SAAqC;AAC7E,QAAM,IAAI,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI;AACvD,QAAM,YAAa,IAAI,eAAgB,gBAAgB;AACvD,QAAM,OAAO,SAAS,UAAU,QAAQ,UAAU,QAAQ,IAAI;AAC9D,SAAO,eAAe,OAAO,CAAC;AAChC;AAIO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,OAAO;AACT;AAWO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;AAGO,MAAM,kBAAkB,EAAE,OAAO,WAAW,MAAM,UAAU;AAG5D,MAAM,oBAAoB;AAe1B,SAAS,UACd,MACA,UACA,MAAc,YAAY,SACN;AACpB,MAAI,CAAC,YAAY,IAAI,EAAG,QAAO;AAC/B,QAAM,aAAa,SAAS,OAAO,CAAC,MAAM,YAAY,CAAC,CAAC;AACxD,MAAI,WAAW,WAAW,EAAG,QAAO;AACpC,QAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,IAAI,CAAC,MAAM,SAAS,MAAM,CAAC,CAAC,CAAC;AAClE,SAAO,QAAQ,oBAAoB,MAAM;AAC3C;AAkBA,MAAM,cAAc,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AACpG,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AACR;AAiBO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AACF;AAGO,SAAS,QAAQ,GAAW,GAAW,GAAmB;AAC/D,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,IAAI,CAAC,MAAc,KAAK,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;AACxE,SAAO,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACpF;AAKA,MAAM,WAAW;AACjB,MAAM,YAAY;AAmBX,SAAS,OAAO,KAAqB;AAC1C,QAAM,MAAM,YAAY,GAAG;AAC3B,MAAI,CAAC,IAAK,QAAO;AAGjB,SAAO,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,IAAI,WAAW;AAC1E;AAIA,MAAM,aAAuC,CAAC,KAAM,KAAM,GAAI;AAoB9D,SAAS,SAAS,KAA8C;AAC9D,QAAM,MAAM,YAAY,GAAG;AAC3B,SAAO,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI;AACvC;AAEA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACjC;","names":[]}
+{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..8 = anyplot's \"Imprint\" hues (https://anyplot.ai/palette, 0.49 — Paul Tol\n// \"Muted\" before, still selectable as the `paul-tol` preset).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, hexToOklch, oklchToHex, parseHex as parseRgbHex, solveLightness } from \"./color\";\n\n/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,\n *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset\n *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the\n *  by-index ramp wraps after eight, so the same series keeps the same colour whichever\n *  preset is active. */\nexport const PALETTE_SIZE = 8;\n\n/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order\n *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.\n *  An option (`paletteFor(i, { order: \"cvd\" })`), not the default: the default order is\n *  anyplot's own slot order, so series 1 is always the green. */\nexport const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;\n\nexport interface PaletteForOptions {\n  /** `\"slot\"` (default): anyplot's slot order. `\"cvd\"`: {@link CVD_ORDER}. */\n  order?: \"slot\" | \"cvd\";\n}\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp\n *  wraps after {@link PALETTE_SIZE}.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number, options?: PaletteForOptions): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;\n  const slot = options?.order === \"cvd\" ? CVD_ORDER[position] : position;\n  return `var(--chart-${slot + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  neutral: \"var(--money-neutral)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n  /** A generic total line — not money-coloured, the chart's neutral ink. */\n  total: \"var(--chart-ink)\",\n} as const;\n\n/**\n * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are\n * the only chart colours that change between light and dark — the eight hues do not:\n *\n * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A\n *   treemap's \"rest\" bucket or a pie's \"Other\" slice takes this instead of wrapping\n *   round to a hue the reader will match to a real series.\n * - `total` / `baseline` / `outline` → the neutral INK.\n */\nexport const CHART_ROLES = {\n  other: \"var(--chart-muted)\",\n  rest: \"var(--chart-muted)\",\n  disabled: \"var(--chart-muted)\",\n  band: \"var(--chart-muted)\",\n  total: \"var(--chart-ink)\",\n  baseline: \"var(--chart-ink)\",\n  outline: \"var(--chart-ink)\",\n} as const;\n\n/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_MUTED_HEX = { light: \"#6b6a63\", dark: \"#a8a79f\" } as const;\n\n/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */\nexport const EDGE_MIN_CONTRAST = 3;\n\n/**\n * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.\n *\n * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre\n * and green on cream; matte red and rose on the dark ground): outline the shape in ink,\n * so its boundary is legible while the fill keeps the hue that identifies the series.\n * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an\n * outline on every bar is noise.\n *\n * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can\n * sit on (the card and the page), and the WORST of them decides. Anything it cannot\n * measure gets no edge rather than a guessed one.\n *\n * Treemap's tiles take this ink; SeriesChart's bars and areas take their own shade\n * ({@link chartShade}) since 0.55, where this says they need an edge at all.\n */\nexport function chartEdge(\n  fill: string,\n  surfaces: readonly string[],\n  ink: string = CHART_ROLES.outline,\n): string | undefined {\n  if (!parseRgbHex(fill)) return undefined;\n  const measurable = surfaces.filter((s) => parseRgbHex(s));\n  if (measurable.length === 0) return undefined;\n  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));\n  return worst < EDGE_MIN_CONTRAST ? ink : undefined;\n}\n\n/**\n * `fill`'s own shade that clears `min` ({@link EDGE_MIN_CONTRAST}, 3:1) against every one of\n * `surfaces`: `fill` itself when it does already, else its hue and chroma moved in OKLCH\n * lightness away from the grounds — darker on a light page, lighter on a dark one — until it\n * does (`solveLightness`, measured on the hex). `undefined` for a fill or grounds it cannot\n * measure, or a shade it cannot reach.\n *\n * The edge a SeriesChart bar or area takes under More contrast (0.55, held back from 0.53's\n * code review), in place of {@link chartEdge}'s ink: the ink outlined a low-contrast area\n * at its full width (0.52's stop-gap; 0.51 drew it 1px), a near-black line where the\n * reader looked for the series' colour. Its own darker shade is the same series, and one\n * the ground lets them see. The money tokens under More contrast are solved the same way\n * (`contrast-tokens.ts`, `moneyOn`).\n */\nexport function chartShade(\n  fill: string,\n  surfaces: readonly string[],\n  min: number = EDGE_MIN_CONTRAST,\n): string | undefined {\n  const lch = hexToOklch(fill);\n  const grounds = surfaces.flatMap((s) => parseRgbHex(s) ?? []);\n  if (!lch || grounds.length === 0) return undefined;\n  const clears = (hex: string) => grounds.every((ground) => contrast(hex, ground) >= min);\n  if (clears(fill)) return fill;\n  // Away from the grounds, which share a theme: a ground black text reads better on is a\n  // light one, and the shade goes darker on it.\n  const light = grounds.every((ground) => contrast(ground, BLACK) >= contrast(ground, WHITE));\n  const direction = light ? \"darker\" : \"lighter\";\n  // One solve per ground, and the furthest of them: it clears every one.\n  const solved = grounds.map((ground) => solveLightness(min, ground, lch.h, lch.c, direction));\n  const l = direction === \"darker\" ? Math.min(...solved) : Math.max(...solved);\n  const shade = oklchToHex({ l, c: lch.c, h: lch.h });\n  return clears(shade) ? shade : undefined;\n}\n\nconst BLACK = \"#000000\";\nconst WHITE = \"#ffffff\";\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\n//\n// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark\n// ground, and neither does the kit any more; `chartEdge` outlines the two that fall\n// under 3:1 there (matte red, rose) instead of lifting them into different colours.\nconst IMPRINT_HEX = [\"#009e73\", \"#c475fd\", \"#4467a3\", \"#bd8233\", \"#ae3030\", \"#2abccd\", \"#954477\", \"#99b314\"] as const;\nexport const PALETTE_HEX = {\n  light: IMPRINT_HEX,\n  dark: IMPRINT_HEX,\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →\n    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).\n    The hues are the same in both themes; only the midpoint flips with the ground. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#faf8f1\", // anyplot's light paper — the diverging scale's 0\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#1a1a17\", // anyplot's ink — the diverging scale's 0 on the dark ground\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":"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","names":[]}

package/dist/theme/contrast-tokens.d.ts

@@ -26,9 +26,9 @@ import type { TokenSet } from "./palette-presets.js";
  *   stepped well. A dark set's well stands 1.11–1.13:1 from its card already, and its
  *   money has no room: nothing of it steps.
  *
- * What does NOT move here, because it is not inline: the light status, hue and field-sync
- * literals and `--bg-active` step in tokens.css's `:root[data-contrast="more"]:not(.dark)`
- * block, solved over these stepped wells.
+ * What does NOT move here, because it is not inline: the light status and hue literals
+ * and `--bg-active` step in tokens.css's `:root[data-contrast="more"]:not(.dark)` block,
+ * solved over these stepped wells.
  */
 /** The custom properties a contrast step writes. The last five only for a light set. */
 export declare const CONTRAST_STEPPED_VARS: readonly ["--text-secondary", "--text-muted", "--text-placeholder", "--border", "--bg-surface-2", "--money-income", "--money-expense", "--money-net", "--money-neutral"];

package/dist/theme/contrast-tokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/contrast-tokens.ts"],"sourcesContent":["import {\n  contrast,\n  hexToOklch,\n  luminance,\n  oklchToHex,\n  oklchToRgb,\n  parseHex,\n  rgbToOklch,\n  solveLightness,\n  toHex,\n} from \"./color\";\nimport type { TokenSet } from \"./palette-presets\";\n\n/**\n * The \"More contrast\" step on a token set (docs/text-size-harmonization.md §5, §10.5).\n * INTERNAL — `applyTokenSet` and the contrast layer share it; it is not re-exported.\n *\n * The step happens HERE, in JS, because the tokens it changes are written inline on\n * `<html>` by `applyTokenSet`: an inline value beats any `[data-contrast=more]` rule and\n * any `@media (prefers-contrast: more)` block, so a stylesheet cannot do it (§10.5, the\n * keksdose review). `--text-placeholder` is a CSS-derived token, and it is written inline\n * here too rather than redefined per attribute in tokens.css.\n *\n * What moves (§5):\n * - `--text-muted` becomes the set's `--text-secondary`;\n * - `--text-secondary` moves halfway to `--text-primary`;\n * - `--text-placeholder` becomes the set's `--text-muted` (4.6–5.5:1 on every shipped\n *   preset, where the CSS formula gives 2.4–2.8:1) — the order primary > secondary >\n *   muted > placeholder survives the step;\n * - `--border` moves toward `--text-primary` until it clears 3:1 against the worst of the\n *   three surfaces (WCAG 1.4.11, a field's boundary), and never less far than\n *   `--border-strong`'s 45 % — so every border is at least as strong as a \"strong\" one was.\n *   `--border-strong` stays derived in tokens.css and grows with it;\n * - in a LIGHT set only (0.36, docs/colour-roles-harmonization.md §13): the well\n *   (`--bg-surface-2`) becomes {@link WELL_INK_MORE} of `--text-primary` mixed into the\n *   card, and each of the four money colours that falls under 4.5:1 on that well is\n *   solved darker at its own hue and chroma. The border above is solved against the\n *   stepped well. A dark set's well stands 1.11–1.13:1 from its card already, and its\n *   money has no room: nothing of it steps.\n *\n * What does NOT move here, because it is not inline: the light status, hue and field-sync\n * literals and `--bg-active` step in tokens.css's `:root[data-contrast=\"more\"]:not(.dark)`\n * block, solved over these stepped wells.\n */\n\n/** The custom properties a contrast step writes. The last five only for a light set. */\nexport const CONTRAST_STEPPED_VARS = [\n  \"--text-secondary\",\n  \"--text-muted\",\n  \"--text-placeholder\",\n  \"--border\",\n  \"--bg-surface-2\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n] as const;\n\n/** The light well under More contrast and the money that reads on it (§13.4). */\nexport interface WellStep {\n  bgSurface2: string;\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n}\n\nexport interface ContrastStep {\n  textSecondary: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n  /** The stepped well and money, or null for a dark set (which does not step them). */\n  well: WellStep | null;\n}\n\ninterface Lab {\n  l: number;\n  a: number;\n  b: number;\n}\n\nfunction toLab(hex: string): Lab | null {\n  const rgb = parseHex(hex);\n  if (!rgb) return null;\n  const { l, c, h } = rgbToOklch(rgb);\n  const rad = (h * Math.PI) / 180;\n  return { l, a: c * Math.cos(rad), b: c * Math.sin(rad) };\n}\n\n/** `color-mix(in oklab, a p, b)` as a hex — the same formula tokens.css's derived roles\n *  use, so a stepped value sits where the stylesheet would have put it. A colour that is\n *  not hex (a consumer's own token set) comes back unmixed. The deriver mixes with it\n *  too (`--bg-hover`, `--brand-muted`, `--brand-bg`, `--brand-bg-hover`). */\nexport function mix(a: string, b: string, p: number): string {\n  const A = toLab(a);\n  const B = toLab(b);\n  if (!A || !B) return a;\n  const l = A.l * p + B.l * (1 - p);\n  const x = A.a * p + B.a * (1 - p);\n  const y = A.b * p + B.b * (1 - p);\n  const c = Math.hypot(x, y);\n  const h = c < 1e-6 ? 0 : ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360;\n  return toHex(oklchToRgb({ l, c, h }));\n}\n\n/**\n * `--bg-hover` in tokens.css: this share of `--text-primary` mixed into `--bg-surface`.\n *\n * 5.5 %, down from 7 % in 0.33 (docs/colour-roles-harmonization.md §12.10): a hovered row\n * on a card is the darkest fill (in dark, the lightest) that text sits on, and at 7 % the\n * light status colours, the money colours and Ink/Moss/Plum's muted text fell to\n * 4.25–4.49:1 on it. The status literals are fixed, the same in every preset, so the\n * hover moved instead: text wins over the hover's step. At 5.5 % the step from the card\n * is still 1.09–1.13:1, above the 1.08:1 the kit's hover rule asks (§12.2). The deriver\n * solves the money colours against this fill, and tokens-css-audit.test.ts measures\n * every text role on it in every shipped preset, so the two cannot part.\n */\nexport const HOVER_INK = 0.055;\n\n/** The card's hover fill (`--bg-hover`) for `t`, as tokens.css mixes it. */\nexport function hoverFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string {\n  return mix(t.textPrimary, t.bgSurface, HOVER_INK);\n}\n\n/**\n * The light well under More contrast: this share of `--text-primary` mixed into the card,\n * `--bg-hover`'s formula at a larger share (0.36, docs/colour-roles-harmonization.md §13).\n *\n * In light the well is the page (§5.3), 1.09–1.11:1 from the card. At 10 % it stands\n * 1.19–1.24:1 from it, about twice that. The rule it is held to: **the stepped well stands\n * at least 1.17:1 from the card**, two of the hover rule's 1.08 steps; 9 % is the least\n * that clears it in every shipped preset, with no room. The step cannot ship alone: on a\n * 10 % well money, status and two hues read 4.07–4.28:1, so the money is solved with it\n * here and the status and hue literals in tokens.css.\n */\nexport const WELL_INK_MORE = 0.1;\n\n/** The least the stepped light well stands from the card (§13.3, decision 2). */\nexport const WELL_STEP_MIN = 1.17;\n\n/** True when `t` is a light set: its body ink darker than its card. */\nfunction isLightSet(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): boolean | null {\n  const ink = parseHex(t.textPrimary);\n  const card = parseHex(t.bgSurface);\n  if (!ink || !card) return null;\n  return luminance(ink) < luminance(card);\n}\n\n/** Money as text: WCAG 1.4.3 AA. */\nconst MONEY_TARGET = 4.5;\n\n/** `color` as it is when it clears 4.5:1 on `well`, else solved darker at its own hue and\n *  chroma until it does — measured on the hex (`solveLightness`). */\nfunction moneyOn(color: string, well: string): string {\n  if (contrast(color, well) >= MONEY_TARGET) return color;\n  const lch = hexToOklch(color);\n  const bg = parseHex(well);\n  if (!lch || !bg) return color;\n  const l = solveLightness(MONEY_TARGET, bg, lch.h, lch.c, \"darker\");\n  return oklchToHex({ l, c: lch.c, h: lch.h });\n}\n\n/** The light well under More contrast for `t`, or null for a dark set (or one whose ink or\n *  card is not hex, which cannot be mixed). The deriver solves the brand against it. */\nexport function steppedWellFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string | null {\n  return isLightSet(t) ? mix(t.textPrimary, t.bgSurface, WELL_INK_MORE) : null;\n}\n\n/** The stepped well and money of a light set, or null (see {@link steppedWellFill}). */\nfunction wellStep(t: TokenSet): WellStep | null {\n  const well = steppedWellFill(t);\n  if (!well) return null;\n  return {\n    bgSurface2: well,\n    moneyIncome: moneyOn(t.moneyIncome, well),\n    moneyExpense: moneyOn(t.moneyExpense, well),\n    moneyNet: moneyOn(t.moneyNet, well),\n    moneyNeutral: moneyOn(t.moneyNeutral, well),\n  };\n}\n\n/**\n * `--brand-muted` in tokens.css: this share of `--brand` mixed into `--text-primary`.\n *\n * 62 %, down from 70 % in 0.33 (docs/colour-roles-harmonization.md §12.11): the brand as\n * text sits on its soft chip HOVERED too (`--brand-bg-hover` — ButtonGroupLink's current\n * page, a selected day), and at 70 % it read 4.08–4.42:1 there in Default and Moss light\n * and in Ink, Moss, Plum and Contrast dark. The brand could not move instead: the dark\n * brands would have flipped their white label to the dark ink. Nor could the chip's hover\n * lighten: by the time the text cleared 4.5:1 the hover sat 1.00:1 from the chip it\n * hovers. So the text moves toward the ink, as `--bg-hover` moved for its text.\n */\nexport const BRAND_MUTED_SHARE = 0.62;\n/** `--brand-bg` and `--brand-bg-hover` in tokens.css: these shares of `--brand` mixed\n *  into `--bg-surface`. */\nexport const BRAND_BG_SHARE = 0.14;\nexport const BRAND_BG_HOVER_SHARE = 0.24;\n\n/** `--brand-muted`, `--brand-bg` and `--brand-bg-hover` for `t`, as tokens.css mixes them.\n *  tokens-css-audit.test.ts holds the three shares equal to the stylesheet's. */\nexport function brandSoft(t: Pick<TokenSet, \"brand\" | \"textPrimary\" | \"bgSurface\">): {\n  brandMuted: string;\n  brandBg: string;\n  brandBgHover: string;\n} {\n  return {\n    brandMuted: mix(t.brand, t.textPrimary, BRAND_MUTED_SHARE),\n    brandBg: mix(t.brand, t.bgSurface, BRAND_BG_SHARE),\n    brandBgHover: mix(t.brand, t.bgSurface, BRAND_BG_HOVER_SHARE),\n  };\n}\n\n/** WCAG 1.4.11 for a component's boundary. */\nconst BORDER_TARGET = 3;\n/** `--border-strong` in tokens.css: 55 % border, 45 % text. */\nconst BORDER_STRONG_SHARE = 0.45;\n\n/** The worst of the three surfaces; `well`, when the step has one, in place of the set's. */\nfunction worstContrast(color: string, t: TokenSet, well: string): number {\n  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, well));\n}\n\nfunction steppedBorder(t: TokenSet, well: WellStep | null): string {\n  // The share of `--text-primary` in the border: at least --border-strong's, more until\n  // 3:1. Monotonic in the share (the mix walks from the border to the text, away from\n  // every surface), so a bisection finds the least that clears it. Against the stepped\n  // light well (§13.4), which is the darkest surface under More contrast.\n  const surface2 = well?.bgSurface2 ?? t.bgSurface2;\n  let lo = BORDER_STRONG_SHARE;\n  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET)\n    return mix(t.border, t.textPrimary, 1 - lo);\n  let hi = 1;\n  for (let i = 0; i < 16; i++) {\n    const mid = (lo + hi) / 2;\n    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t, surface2) >= BORDER_TARGET) hi = mid;\n    else lo = mid;\n  }\n  return mix(t.border, t.textPrimary, 1 - hi);\n}\n\n/** The stepped values for `t`: the four text and line tokens, and for a light set the\n *  well and money (`well`, null in dark). Pure. */\nexport function contrastStep(t: TokenSet): ContrastStep {\n  const well = wellStep(t);\n  return {\n    textSecondary: mix(t.textSecondary, t.textPrimary, 0.5),\n    textMuted: t.textSecondary,\n    textPlaceholder: t.textMuted,\n    border: steppedBorder(t, well),\n    well,\n  };\n}\n\n/* ── The token set last written to an element ───────────────────────────── */\n\nconst lastWritten = new WeakMap<HTMLElement, TokenSet>();\n\n/** Remember the set `applyTokenSet` wrote, so a contrast change can re-apply it. */\nexport function rememberTokenSet(el: HTMLElement, t: TokenSet): void {\n  lastWritten.set(el, t);\n}\n\n/** The set `applyTokenSet` last wrote to `el`, or undefined when nothing did — an app\n *  without the palette layer, whose base tokens come from tokens.css. */\nexport function rememberedTokenSet(el: HTMLElement): TokenSet | undefined {\n  return lastWritten.get(el);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/contrast-tokens.ts"],"sourcesContent":["import {\n  contrast,\n  hexToOklch,\n  luminance,\n  oklchToHex,\n  oklchToRgb,\n  parseHex,\n  rgbToOklch,\n  solveLightness,\n  toHex,\n} from \"./color\";\nimport type { TokenSet } from \"./palette-presets\";\n\n/**\n * The \"More contrast\" step on a token set (docs/text-size-harmonization.md §5, §10.5).\n * INTERNAL — `applyTokenSet` and the contrast layer share it; it is not re-exported.\n *\n * The step happens HERE, in JS, because the tokens it changes are written inline on\n * `<html>` by `applyTokenSet`: an inline value beats any `[data-contrast=more]` rule and\n * any `@media (prefers-contrast: more)` block, so a stylesheet cannot do it (§10.5, the\n * keksdose review). `--text-placeholder` is a CSS-derived token, and it is written inline\n * here too rather than redefined per attribute in tokens.css.\n *\n * What moves (§5):\n * - `--text-muted` becomes the set's `--text-secondary`;\n * - `--text-secondary` moves halfway to `--text-primary`;\n * - `--text-placeholder` becomes the set's `--text-muted` (4.6–5.5:1 on every shipped\n *   preset, where the CSS formula gives 2.4–2.8:1) — the order primary > secondary >\n *   muted > placeholder survives the step;\n * - `--border` moves toward `--text-primary` until it clears 3:1 against the worst of the\n *   three surfaces (WCAG 1.4.11, a field's boundary), and never less far than\n *   `--border-strong`'s 45 % — so every border is at least as strong as a \"strong\" one was.\n *   `--border-strong` stays derived in tokens.css and grows with it;\n * - in a LIGHT set only (0.36, docs/colour-roles-harmonization.md §13): the well\n *   (`--bg-surface-2`) becomes {@link WELL_INK_MORE} of `--text-primary` mixed into the\n *   card, and each of the four money colours that falls under 4.5:1 on that well is\n *   solved darker at its own hue and chroma. The border above is solved against the\n *   stepped well. A dark set's well stands 1.11–1.13:1 from its card already, and its\n *   money has no room: nothing of it steps.\n *\n * What does NOT move here, because it is not inline: the light status and hue literals\n * and `--bg-active` step in tokens.css's `:root[data-contrast=\"more\"]:not(.dark)` block,\n * solved over these stepped wells.\n */\n\n/** The custom properties a contrast step writes. The last five only for a light set. */\nexport const CONTRAST_STEPPED_VARS = [\n  \"--text-secondary\",\n  \"--text-muted\",\n  \"--text-placeholder\",\n  \"--border\",\n  \"--bg-surface-2\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n] as const;\n\n/** The light well under More contrast and the money that reads on it (§13.4). */\nexport interface WellStep {\n  bgSurface2: string;\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n}\n\nexport interface ContrastStep {\n  textSecondary: string;\n  textMuted: string;\n  textPlaceholder: string;\n  border: string;\n  /** The stepped well and money, or null for a dark set (which does not step them). */\n  well: WellStep | null;\n}\n\ninterface Lab {\n  l: number;\n  a: number;\n  b: number;\n}\n\nfunction toLab(hex: string): Lab | null {\n  const rgb = parseHex(hex);\n  if (!rgb) return null;\n  const { l, c, h } = rgbToOklch(rgb);\n  const rad = (h * Math.PI) / 180;\n  return { l, a: c * Math.cos(rad), b: c * Math.sin(rad) };\n}\n\n/** `color-mix(in oklab, a p, b)` as a hex — the same formula tokens.css's derived roles\n *  use, so a stepped value sits where the stylesheet would have put it. A colour that is\n *  not hex (a consumer's own token set) comes back unmixed. The deriver mixes with it\n *  too (`--bg-hover`, `--brand-muted`, `--brand-bg`, `--brand-bg-hover`). */\nexport function mix(a: string, b: string, p: number): string {\n  const A = toLab(a);\n  const B = toLab(b);\n  if (!A || !B) return a;\n  const l = A.l * p + B.l * (1 - p);\n  const x = A.a * p + B.a * (1 - p);\n  const y = A.b * p + B.b * (1 - p);\n  const c = Math.hypot(x, y);\n  const h = c < 1e-6 ? 0 : ((Math.atan2(y, x) * 180) / Math.PI + 360) % 360;\n  return toHex(oklchToRgb({ l, c, h }));\n}\n\n/**\n * `--bg-hover` in tokens.css: this share of `--text-primary` mixed into `--bg-surface`.\n *\n * 5.5 %, down from 7 % in 0.33 (docs/colour-roles-harmonization.md §12.10): a hovered row\n * on a card is the darkest fill (in dark, the lightest) that text sits on, and at 7 % the\n * light status colours, the money colours and Ink/Moss/Plum's muted text fell to\n * 4.25–4.49:1 on it. The status literals are fixed, the same in every preset, so the\n * hover moved instead: text wins over the hover's step. At 5.5 % the step from the card\n * is still 1.09–1.13:1, above the 1.08:1 the kit's hover rule asks (§12.2). The deriver\n * solves the money colours against this fill, and tokens-css-audit.test.ts measures\n * every text role on it in every shipped preset, so the two cannot part.\n */\nexport const HOVER_INK = 0.055;\n\n/** The card's hover fill (`--bg-hover`) for `t`, as tokens.css mixes it. */\nexport function hoverFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string {\n  return mix(t.textPrimary, t.bgSurface, HOVER_INK);\n}\n\n/**\n * The light well under More contrast: this share of `--text-primary` mixed into the card,\n * `--bg-hover`'s formula at a larger share (0.36, docs/colour-roles-harmonization.md §13).\n *\n * In light the well is the page (§5.3), 1.09–1.11:1 from the card. At 10 % it stands\n * 1.19–1.24:1 from it, about twice that. The rule it is held to: **the stepped well stands\n * at least 1.17:1 from the card**, two of the hover rule's 1.08 steps; 9 % is the least\n * that clears it in every shipped preset, with no room. The step cannot ship alone: on a\n * 10 % well money, status and two hues read 4.07–4.28:1, so the money is solved with it\n * here and the status and hue literals in tokens.css.\n */\nexport const WELL_INK_MORE = 0.1;\n\n/** The least the stepped light well stands from the card (§13.3, decision 2). */\nexport const WELL_STEP_MIN = 1.17;\n\n/** True when `t` is a light set: its body ink darker than its card. */\nfunction isLightSet(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): boolean | null {\n  const ink = parseHex(t.textPrimary);\n  const card = parseHex(t.bgSurface);\n  if (!ink || !card) return null;\n  return luminance(ink) < luminance(card);\n}\n\n/** Money as text: WCAG 1.4.3 AA. */\nconst MONEY_TARGET = 4.5;\n\n/** `color` as it is when it clears 4.5:1 on `well`, else solved darker at its own hue and\n *  chroma until it does — measured on the hex (`solveLightness`). */\nfunction moneyOn(color: string, well: string): string {\n  if (contrast(color, well) >= MONEY_TARGET) return color;\n  const lch = hexToOklch(color);\n  const bg = parseHex(well);\n  if (!lch || !bg) return color;\n  const l = solveLightness(MONEY_TARGET, bg, lch.h, lch.c, \"darker\");\n  return oklchToHex({ l, c: lch.c, h: lch.h });\n}\n\n/** The light well under More contrast for `t`, or null for a dark set (or one whose ink or\n *  card is not hex, which cannot be mixed). The deriver solves the brand against it. */\nexport function steppedWellFill(t: Pick<TokenSet, \"textPrimary\" | \"bgSurface\">): string | null {\n  return isLightSet(t) ? mix(t.textPrimary, t.bgSurface, WELL_INK_MORE) : null;\n}\n\n/** The stepped well and money of a light set, or null (see {@link steppedWellFill}). */\nfunction wellStep(t: TokenSet): WellStep | null {\n  const well = steppedWellFill(t);\n  if (!well) return null;\n  return {\n    bgSurface2: well,\n    moneyIncome: moneyOn(t.moneyIncome, well),\n    moneyExpense: moneyOn(t.moneyExpense, well),\n    moneyNet: moneyOn(t.moneyNet, well),\n    moneyNeutral: moneyOn(t.moneyNeutral, well),\n  };\n}\n\n/**\n * `--brand-muted` in tokens.css: this share of `--brand` mixed into `--text-primary`.\n *\n * 62 %, down from 70 % in 0.33 (docs/colour-roles-harmonization.md §12.11): the brand as\n * text sits on its soft chip HOVERED too (`--brand-bg-hover` — ButtonGroupLink's current\n * page, a selected day), and at 70 % it read 4.08–4.42:1 there in Default and Moss light\n * and in Ink, Moss, Plum and Contrast dark. The brand could not move instead: the dark\n * brands would have flipped their white label to the dark ink. Nor could the chip's hover\n * lighten: by the time the text cleared 4.5:1 the hover sat 1.00:1 from the chip it\n * hovers. So the text moves toward the ink, as `--bg-hover` moved for its text.\n */\nexport const BRAND_MUTED_SHARE = 0.62;\n/** `--brand-bg` and `--brand-bg-hover` in tokens.css: these shares of `--brand` mixed\n *  into `--bg-surface`. */\nexport const BRAND_BG_SHARE = 0.14;\nexport const BRAND_BG_HOVER_SHARE = 0.24;\n\n/** `--brand-muted`, `--brand-bg` and `--brand-bg-hover` for `t`, as tokens.css mixes them.\n *  tokens-css-audit.test.ts holds the three shares equal to the stylesheet's. */\nexport function brandSoft(t: Pick<TokenSet, \"brand\" | \"textPrimary\" | \"bgSurface\">): {\n  brandMuted: string;\n  brandBg: string;\n  brandBgHover: string;\n} {\n  return {\n    brandMuted: mix(t.brand, t.textPrimary, BRAND_MUTED_SHARE),\n    brandBg: mix(t.brand, t.bgSurface, BRAND_BG_SHARE),\n    brandBgHover: mix(t.brand, t.bgSurface, BRAND_BG_HOVER_SHARE),\n  };\n}\n\n/** WCAG 1.4.11 for a component's boundary. */\nconst BORDER_TARGET = 3;\n/** `--border-strong` in tokens.css: 55 % border, 45 % text. */\nconst BORDER_STRONG_SHARE = 0.45;\n\n/** The worst of the three surfaces; `well`, when the step has one, in place of the set's. */\nfunction worstContrast(color: string, t: TokenSet, well: string): number {\n  return Math.min(contrast(color, t.bgPage), contrast(color, t.bgSurface), contrast(color, well));\n}\n\nfunction steppedBorder(t: TokenSet, well: WellStep | null): string {\n  // The share of `--text-primary` in the border: at least --border-strong's, more until\n  // 3:1. Monotonic in the share (the mix walks from the border to the text, away from\n  // every surface), so a bisection finds the least that clears it. Against the stepped\n  // light well (§13.4), which is the darkest surface under More contrast.\n  const surface2 = well?.bgSurface2 ?? t.bgSurface2;\n  let lo = BORDER_STRONG_SHARE;\n  if (worstContrast(mix(t.border, t.textPrimary, 1 - lo), t, surface2) >= BORDER_TARGET)\n    return mix(t.border, t.textPrimary, 1 - lo);\n  let hi = 1;\n  for (let i = 0; i < 16; i++) {\n    const mid = (lo + hi) / 2;\n    if (worstContrast(mix(t.border, t.textPrimary, 1 - mid), t, surface2) >= BORDER_TARGET) hi = mid;\n    else lo = mid;\n  }\n  return mix(t.border, t.textPrimary, 1 - hi);\n}\n\n/** The stepped values for `t`: the four text and line tokens, and for a light set the\n *  well and money (`well`, null in dark). Pure. */\nexport function contrastStep(t: TokenSet): ContrastStep {\n  const well = wellStep(t);\n  return {\n    textSecondary: mix(t.textSecondary, t.textPrimary, 0.5),\n    textMuted: t.textSecondary,\n    textPlaceholder: t.textMuted,\n    border: steppedBorder(t, well),\n    well,\n  };\n}\n\n/* ── The token set last written to an element ───────────────────────────── */\n\nconst lastWritten = new WeakMap<HTMLElement, TokenSet>();\n\n/** Remember the set `applyTokenSet` wrote, so a contrast change can re-apply it. */\nexport function rememberTokenSet(el: HTMLElement, t: TokenSet): void {\n  lastWritten.set(el, t);\n}\n\n/** The set `applyTokenSet` last wrote to `el`, or undefined when nothing did — an app\n *  without the palette layer, whose base tokens come from tokens.css. */\nexport function rememberedTokenSet(el: HTMLElement): TokenSet | undefined {\n  return lastWritten.get(el);\n}\n"],"mappings":"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","names":[]}

package/dist/theme/contrast.d.ts

@@ -7,10 +7,10 @@ import type { PersistedAppearanceOptions } from "./text-size.js";
  * In force it is `<html data-contrast="more">` (else `"standard"`), which does two things:
  * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s
  *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);
- * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,
- *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,
- *   colour-roles §13), and turns on the `contrast:` variant for anything else a
- *   component wants to change.
+ * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status
+ *   and hue literals and `--bg-active` to read on the stepped well (0.36, colour-roles
+ *   §13), and turns on the `contrast:` variant for anything else a component wants to
+ *   change.
  *
  * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the
  * stored format, the attribute.

package/dist/theme/contrast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,\n *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,\n *   colour-roles §13), and turns on the `contrast:` variant for anything else a\n *   component wants to change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the stepped tokens are written over the stylesheet for the\n * default preset in the current light/dark, or removed again: the four text and line\n * tokens in both modes, and in light the well and the four money colours too (0.36,\n * docs/colour-roles-harmonization.md §13.3 decision 10). In dark those five stay removed,\n * so the stylesheet's dark well and money paint.\n *\n * It never calls `applyTokenSet` here: that would remember a token set on `<html>`, and\n * this app would then take the palette branch above, which a theme switch does not re-run\n * (the class observer in `useApplyContrast` re-writes only while nothing is remembered).\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n  // One line per variable, not a loop: the step's fields are not the variables' names.\n  if (step.well) {\n    el.style.setProperty(\"--bg-surface-2\", step.well.bgSurface2);\n    el.style.setProperty(\"--money-income\", step.well.moneyIncome);\n    el.style.setProperty(\"--money-expense\", step.well.moneyExpense);\n    el.style.setProperty(\"--money-net\", step.well.moneyNet);\n    el.style.setProperty(\"--money-neutral\", step.well.moneyNeutral);\n  }\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** The frozen format holding a mode this kit knows — the shape `readStoredJson` admits. */\nconst holdsContrast = (blob: unknown): blob is { state: { contrast: ContrastMode } } =>\n  isContrastMode((blob as PersistedContrast | null)?.state?.contrast);\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a mode). */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  return readStoredJson(storageKey, holdsContrast)?.state.contrast ?? null;\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyContrast` re-resolves to the account's mode, else \"system\",\n  // and re-steps the tokens.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useContrastStore.getState().setContrast(null),\n  });\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status\n *   and hue literals and `--bg-active` to read on the stepped well (0.36, colour-roles\n *   §13), and turns on the `contrast:` variant for anything else a component wants to\n *   change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the stepped tokens are written over the stylesheet for the\n * default preset in the current light/dark, or removed again: the four text and line\n * tokens in both modes, and in light the well and the four money colours too (0.36,\n * docs/colour-roles-harmonization.md §13.3 decision 10). In dark those five stay removed,\n * so the stylesheet's dark well and money paint.\n *\n * It never calls `applyTokenSet` here: that would remember a token set on `<html>`, and\n * this app would then take the palette branch above, which a theme switch does not re-run\n * (the class observer in `useApplyContrast` re-writes only while nothing is remembered).\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n  // One line per variable, not a loop: the step's fields are not the variables' names.\n  if (step.well) {\n    el.style.setProperty(\"--bg-surface-2\", step.well.bgSurface2);\n    el.style.setProperty(\"--money-income\", step.well.moneyIncome);\n    el.style.setProperty(\"--money-expense\", step.well.moneyExpense);\n    el.style.setProperty(\"--money-net\", step.well.moneyNet);\n    el.style.setProperty(\"--money-neutral\", step.well.moneyNeutral);\n  }\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** The frozen format holding a mode this kit knows — the shape `readStoredJson` admits. */\nconst holdsContrast = (blob: unknown): blob is { state: { contrast: ContrastMode } } =>\n  isContrastMode((blob as PersistedContrast | null)?.state?.contrast);\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a mode). */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  return readStoredJson(storageKey, holdsContrast)?.state.contrast ?? null;\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyContrast` re-resolves to the account's mode, else \"system\",\n  // and re-steps the tokens.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useContrastStore.getState().setContrast(null),\n  });\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}

package/dist/tour/tour-overlay.js

@@ -20,6 +20,7 @@ import { anchoredInline, viewportSize } from "../hooks/use-anchored-panel.js";
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useCoarsePointer } from "../hooks/use-large-text.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
+import { isEditableContent } from "../lib/editable-content.js";
 import { isComposing } from "../lib/ime.js";
 import { focusQuietly } from "../lib/quiet-focus.js";
 import { devWarnings, isShown, stepContext } from "./tour-gates.js";
@@ -524,7 +525,7 @@ function fieldValues(el) {
 }
 function ownsKey(target, key) {
   if (!(target instanceof HTMLElement)) return false;
-  if (target.isContentEditable) return true;
+  if (isEditableContent(target)) return true;
   const tag = target.tagName;
   if (tag === "TEXTAREA" || tag === "SELECT") return true;
   if (tag === "INPUT") {