@astryxdesign/core 0.4.2 → 0.4.3-canary.ac850d9

package/dist/TextArea/TextArea.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/TextArea.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/TextArea/ (showcase blocks)
  */
-import { useId, useOptimistic, useTransition, useRef, useCallback } from 'react';
+import { useId, useOptimistic, useTransition, useRef, useCallback, useMemo } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -29,6 +29,7 @@ import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { themeProps } from "../utils/themeProps.js";
+import { characterCount } from "../utils/characters.js";
 import { useTranslator } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const COUNTER_WARNING_THRESHOLD = 0.8;
@@ -208,7 +209,11 @@ export function TextArea({
       return;
     }
     const newValue = e.target.value;
-    announceCounter(newValue.length);
+    // Guarded here, not just inside announceCounter, so textareas without a
+    // maxLength never pay for segmenting the whole value on each keystroke.
+    if (maxLength != null) {
+      announceCounter(characterCount(newValue));
+    }
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
       startTransition(async () => {
@@ -217,6 +222,12 @@ export function TextArea({
       });
     }
   };
+
+  // Counter semantics count user-perceived characters, so an emoji or flag
+  // sequence counts as one character, not its code units.
+  // Only measured when a counter exists — segmentation is O(value length),
+  // and memoized so re-renders that keep the same value skip it entirely.
+  const valueLength = useMemo(() => maxLength != null ? characterCount(optimisticValue) : 0, [maxLength, optimisticValue]);
   const effectivelyDisabled = isDisabled || isBusy;
 
   // Focus textarea when clicking anywhere on the wrapper (icons, padding, etc.)
@@ -293,7 +304,7 @@ export function TextArea({
         "data-autofocus": hasAutoFocus || undefined,
         "aria-describedby": ariaDescribedBy,
         "aria-required": isRequired && !isOptional ? 'true' : undefined,
-        "aria-invalid": status?.type === 'error' || maxLength != null && optimisticValue.length > maxLength ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' || maxLength != null && valueLength > maxLength ? 'true' : undefined,
         "aria-busy": isBusy || undefined,
         ...stylex.props(styles.textarea, textareaSizeStyles[size], isDisabled && styles.textareaDisabled, Boolean(startIcon) && styles.textareaWithStartIcon,
         // Reserve trailing space only when the end slot actually renders
@@ -318,8 +329,8 @@ export function TextArea({
           1: {
             className: "x10l6tqk x112dmjn x13oyzgk x47corl x78zum5 x6s0dn4 xzye2dw x9ynric x141an7d x1ltkj2j xjt36v0"
           }
-        }[!!(optimisticValue.length > maxLength) << 0],
-        children: [optimisticValue.length > maxLength &&
+        }[!!(valueLength > maxLength) << 0],
+        children: [valueLength > maxLength &&
         /*#__PURE__*/
         // Non-color cue so the over-limit state isn't conveyed by the red
         // color alone (WCAG 1.4.1). Decorative — the count text and the
@@ -327,7 +338,7 @@ export function TextArea({
         _jsx(Icon, {
           icon: "warning",
           size: "sm"
-        }), optimisticValue.length, "/", maxLength]
+        }), valueLength, "/", maxLength]
       })]
     }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });

package/dist/TreeList/TreeList.js

@@ -226,7 +226,8 @@ export function TreeList({
     ref: ref,
     "data-testid": testId,
     ...mergeProps(themeProps('tree-list', {
-      density
+      density,
+      variant
     }), stylex.props(styles.root, xstyle), className, style),
     children: [header != null && /*#__PURE__*/_jsx("div", {
       id: headerId,

package/dist/astryx.css

@@ -378,6 +378,7 @@
   .x1pjcqnp:not(#\#):not(#\#){border-radius:inherit}
   .x1ws5lxm:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_dropdown-menu-radius,var(--spacing-2)) - var(--_dropdown-menu-padding,var(--spacing-1))))}
   .xc910v0:not(#\#):not(#\#){border-radius:max(0px,calc(var(--_segmented-control-radius) - var(--_segmented-control-padding)))}
+  .x1vf2byn:not(#\#):not(#\#){border-radius:var(--_banner-radius,var(--radius-container))}
   .x1jxw6zd:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-element))}
   .xy0xnkn:not(#\#):not(#\#){border-radius:var(--_button-radius,var(--radius-full))}
   .x153u1i6:not(#\#):not(#\#){border-radius:var(--_card-radius)}
@@ -639,14 +640,14 @@
   .x18o3ruo:not(#\#):not(#\#):not(#\#){background-image:none}
   .x1mwwwfo:not(#\#):not(#\#):not(#\#){border-collapse:collapse}
   .x16uus16:not(#\#):not(#\#):not(#\#){border-end-end-radius:0}
+  .x1eprgri:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--_banner-radius,var(--radius-container))}
   .x6k0y1c:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--_chat-composer-radius)}
-  .xiaxfje:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-container)}
   .x14i3lts:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
   .x1dgc8on:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-full)}
   .x1whkvtz:not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-inner)}
   .xbiv7yw:not(#\#):not(#\#):not(#\#){border-end-start-radius:0}
+  .x1k5g1gk:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--_banner-radius,var(--radius-container))}
   .xkvxy4d:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--_chat-composer-radius)}
-  .x14k8p9y:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-container)}
   .xquck67:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
   .x1wc3881:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-full)}
   .xrfs2vl:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-inner)}
@@ -664,16 +665,16 @@
   .xtpqe59:not(#\#):not(#\#):not(#\#){border-inline-start-width:var(--spacing-0-5)}
   .x1gukg7c:not(#\#):not(#\#):not(#\#){border-spacing:0}
   .x1ga7v0g:not(#\#):not(#\#):not(#\#){border-start-end-radius:0}
+  .x13nour3:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--_banner-radius,var(--radius-container))}
   .xzc3kxz:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--_chat-composer-radius)}
   .xg0tfu:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-chat)}
-  .x7hs6f1:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-container)}
   .xxbepff:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x8agd5o:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-full)}
   .x126per9:not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-inner)}
   .x15mokao:not(#\#):not(#\#):not(#\#){border-start-start-radius:0}
+  .xwxb7qi:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--_banner-radius,var(--radius-container))}
   .xy7p8pm:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--_chat-composer-radius)}
   .x1n70msy:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-chat)}
-  .x81l70g:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-container)}
   .x19415el:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-full)}
   .x3qb8m:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-inner)}
   .x183tx6i:not(#\#):not(#\#):not(#\#){border-start-start-radius:var(--radius-page)}
@@ -972,6 +973,7 @@
   .x1t137rt:not(#\#):not(#\#):not(#\#){outline-style:none}
   .x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
   .x9y5y3v:not(#\#):not(#\#):not(#\#){overflow-clip-margin:1px}
+  .xj0a0fe:not(#\#):not(#\#):not(#\#){overflow-wrap:anywhere}
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
   .xyri2b:not(#\#):not(#\#):not(#\#){padding-inline-end:0}

package/dist/theme/defineTheme.d.ts

@@ -112,9 +112,14 @@ export interface DefineThemeInput {
     /** Theme name — used for data-astryx-theme attribute and identification */
     name: string;
     /**
-     * Base theme to extend. When provided, the new theme starts with the
-     * base theme's tokens, components, and fonts, then applies overrides
-     * from this input on top. The base theme's values have lowest precedence.
+     * Base theme to extend. When provided, the new theme starts with everything
+     * the base resolved to — tokens, component overrides, icons, indicators, and
+     * its `onDark`/`onLight` surfaces — then applies this input on top. The base
+     * theme's values have lowest precedence.
+     *
+     * The result is flat: an extended theme carries its inheritance in its own
+     * resolved output, so `astryx theme build` emits one self-contained
+     * stylesheet and the base's CSS does not need to be loaded alongside it.
      *
      * Use this to create variant themes that customize only a few aspects
      * (e.g. icons, accent color) without re-specifying the full theme.
@@ -189,20 +194,38 @@ export interface DefineThemeInput {
      */
     radius?: RadiusScaleConfig;
     /**
-     * Color scale configuration. Generates color token overrides from a
-     * single accent color using the HCT perceptual color model.
+     * Color scale configuration. Generates color token overrides from an
+     * accent seed using the HCT perceptual color model.
      *
      * Only generates tokens derivable from the accent — status colors,
      * categorical hues, and fixed tokens (on-dark/on-light) use defaults.
-     * Explicit `tokens` entries always take precedence.
+     *
+     * `accent` accepts a single hex (same seed for both color schemes) or a
+     * `[light, dark]` tuple, matching `TokenValue`. With a tuple, the light
+     * scheme's full palette derives from the light seed and the dark
+     * scheme's from the dark seed.
      *
      * `accent` is optional — omit it for a neutral-only theme, which keeps
      * the default accent tokens and only themes the neutrals.
      *
+     * Precedence vs `tokens`: explicit `tokens` entries win over generated
+     * values, token by token. Because `--color-accent-muted`,
+     * `--color-text-accent` and `--color-icon-accent` are generated as
+     * `var(--color-accent)` references, a `tokens['--color-accent']`
+     * override re-points them at runtime. `--color-on-accent` does NOT
+     * follow: it is baked from the `color.accent` seed (a contrast
+     * computation CSS cannot express), so overriding the accent through
+     * `tokens` without also overriding `--color-on-accent` leaves the two
+     * out of sync. To re-seat the whole palette per scheme, prefer a tuple
+     * `color.accent` over the `tokens['--color-accent']` workaround.
+     *
      * @example
-     * ```tsx
+     * ```
      * color: { accent: '#0064E0', neutralStyle: 'cool', contrast: 'standard' }
      *
+     * // Per-scheme accents — light palette from the first seed, dark from the second
+     * color: { accent: ['#0064E0', '#48CAE4'] }
+     *
      * // Neutral-only — accent tokens stay at their defaults
      * color: { neutralStyle: 'warm' }
      * ```

package/dist/theme/defineTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defineTheme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"defineTheme.d.ts","sourceRoot":"","sources":["../../src/theme/defineTheme.ts"],"names":[],"mappings":"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"}

package/dist/theme/defineTheme.js

@@ -44,6 +44,7 @@ import { expandRadiusScale } from "./expandRadiusScale.js";
 import { expandColorScale } from "./expandColorScale.js";
 import { domainTokenDefaults } from "./domainTokens/index.js";
 import { registerTheme } from "./themeRegistry.js";
+import { deepMergeComponents } from "./mergeComponents.js";
 
 // =============================================================================
 // Types
@@ -155,48 +156,6 @@ function resolveTokenValue(value) {
   return value;
 }
 
-/**
- * Deep-merge two component style maps.
- * Properties in `overrides` take precedence over `base`.
- * This allows typeScale-generated rules to be overridden by explicit components.
- */
-function deepMergeComponents(base, overrides) {
-  if (!base && !overrides) {
-    return undefined;
-  }
-  if (!base) {
-    return overrides;
-  }
-  if (!overrides) {
-    return base;
-  }
-  const result = {};
-
-  // Start with all base entries
-  for (const [component, rules] of Object.entries(base)) {
-    result[component] = {
-      ...rules
-    };
-  }
-
-  // Merge overrides on top
-  for (const [component, rules] of Object.entries(overrides)) {
-    if (!result[component]) {
-      result[component] = {
-        ...rules
-      };
-    } else {
-      for (const [key, styles] of Object.entries(rules)) {
-        result[component][key] = {
-          ...result[component][key],
-          ...styles
-        };
-      }
-    }
-  }
-  return result;
-}
-
 /**
  * Resolve a FontWeight name to a var() reference.
  * Named weights map to var(--font-weight-*); raw values pass through.
@@ -226,6 +185,24 @@ function buildFontFamily(family, fallbacks) {
   return quoted;
 }
 
+/**
+ * Describe a rejected `extends` value for the error message — enough to tell a
+ * missed import (`undefined`) from a module namespace or a plain object.
+ */
+function describeBadBase(value) {
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value !== 'object') {
+    return typeof value;
+  }
+  const keys = Object.keys(value);
+  return `an object with keys [${keys.slice(0, 4).join(', ')}${keys.length > 4 ? ', …' : ''}]`;
+}
+
 /**
  * Create an Astryx theme.
  *
@@ -239,7 +216,15 @@ function buildFontFamily(family, fallbacks) {
 export function defineTheme(input) {
   const tokens = {};
 
-  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence)
+  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence).
+  // A base that is not a theme is refused rather than ignored: `extends` used
+  // to inherit nothing when its value was undefined, which is what a named
+  // import silently resolving to the wrong module hands over, and the theme
+  // then built into a plausible-looking stylesheet missing everything it was
+  // supposed to inherit.
+  if ('extends' in input && !isDefinedTheme(input.extends)) {
+    throw new Error(`defineTheme("${input.name}"): \`extends\` must be a theme from defineTheme(), got ${describeBadBase(input.extends)}. ` + `Check that the import naming your base theme resolves to its source and exports that name — ` + `a generated \`<theme>.js\` artifact sitting next to the source exports \`<name>Theme\`, not the source's own export.`);
+  }
   const base = input.extends;
   if (base) {
     for (const [key, value] of Object.entries(base.tokens)) {
@@ -370,9 +355,10 @@ export function defineTheme(input) {
     components = deepMergeComponents(base.components, components);
   }
 
-  // 4. Resolve on-media token overrides (defaults + user overrides)
-  const __onDark = resolveOnMedia('dark', input.onDark);
-  const __onLight = resolveOnMedia('light', input.onLight);
+  // 4. Resolve on-media token overrides (base's resolved surface, then
+  // defaults, then this theme's own overrides)
+  const __onDark = resolveOnMedia('dark', input.onDark, base?.__onDark);
+  const __onLight = resolveOnMedia('light', input.onLight, base?.__onLight);
 
   // 5. Merge icons — input icons override base icons
   const icons = input.icons && base?.icons ? {
@@ -392,7 +378,10 @@ export function defineTheme(input) {
     components,
     icons,
     indicators,
-    __inputTokens: input.tokens,
+    __inputTokens: base?.__inputTokens || input.tokens ? {
+      ...base?.__inputTokens,
+      ...input.tokens
+    } : undefined,
     __onDark,
     __onLight
   };

package/dist/theme/expandColorScale.d.ts

@@ -6,6 +6,9 @@
  * // Minimal — just a seed color
  * { accent: '#0064E0' }
  *
+ * // Per-scheme seeds: light palettes from '#0064E0', dark from '#48CAE4'
+ * { accent: ['#0064E0', '#48CAE4'] }
+ *
  * // With customization
  * { accent: '#B7410E', neutralStyle: 'warm', contrast: 'high' }
  *
@@ -15,14 +18,18 @@
  */
 export interface ColorScaleConfig {
     /**
-     * Seed accent color as hex (#RRGGBB). Everything derives from this.
+     * Seed accent color. Everything derives from this.
+     *
+     * Either a single hex (#RRGGBB) used for both color schemes, or a
+     * `[light, dark]` hex tuple: the light scheme's palettes derive from
+     * the light seed and the dark scheme's palettes from the dark seed.
      *
      * Optional. When omitted, the neutral palettes are seeded from the
      * default accent's hue and the accent tokens (--color-accent,
      * --color-accent-muted, --color-on-accent) are not generated — they
      * fall through to colorDefaults.
      */
-    accent?: string;
+    accent?: string | [light: string, dark: string];
     /**
      * Neutral tone warmth. Controls how much of the seed's hue bleeds
      * into neutral/background colors.
@@ -56,6 +63,11 @@ export declare function ensureContrastTone(hue: number, chroma: number, startTon
  * --color-on-dark/on-light) are NOT generated — they fall through
  * to colorDefaults.
  *
+ * A `[light, dark]` tuple accent seeds each scheme separately: the light
+ * half of every generated `light-dark()` pair comes from the light seed's
+ * palettes, the dark half from the dark seed's. A string accent seeds both
+ * halves from the same palettes, exactly as before tuples were supported.
+ *
  * Without an `accent`, the accent tokens join that fall-through set: the
  * neutrals are seeded from the default accent's hue, and --color-accent,
  * --color-accent-muted and --color-on-accent keep their colorDefaults values.
@@ -65,6 +77,9 @@ export declare function ensureContrastTone(hue: number, chroma: number, startTon
  * const tokens = expandColorScale({ accent: '#0064E0' });
  * // tokens['--color-accent'] === 'light-dark(#..., #...)'
  *
+ * const perScheme = expandColorScale({ accent: ['#0064E0', '#48CAE4'] });
+ * // light half derives from #0064E0, dark half from #48CAE4
+ *
  * const neutralOnly = expandColorScale({ neutralStyle: 'warm' });
  * // neutralOnly['--color-accent'] === undefined
  * ```

package/dist/theme/expandColorScale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandColorScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandColorScale.ts"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAE3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAyCtD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EACZ,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CAoI3E"}
+{"version":3,"file":"expandColorScale.d.ts","sourceRoot":"","sources":["../../src/theme/expandColorScale.ts"],"names":[],"mappings":"AAgDA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IAEhD;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAE3C;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAChC;AAED,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAyCtD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,EACZ,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GACf,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,gBAAgB,GAAG,gBAAgB,CA0J3E"}

package/dist/theme/expandColorScale.js

@@ -6,8 +6,8 @@
  * @output Token overrides for derivable color tokens
  * @position Theme utility; consumed by defineTheme.ts
  *
- * Generates color token overrides from a single accent color using the
- * HCT perceptual color model. Only produces tokens that meaningfully
+ * Generates color token overrides from an accent seed using the HCT
+ * perceptual color model. Only produces tokens that meaningfully
  * derive from the accent — status colors, categorical hues, and fixed
  * tokens (on-dark/on-light) fall through to colorDefaults.
  *
@@ -15,11 +15,19 @@
  * ramp (seeded from the default accent's hue) while the accent tokens
  * themselves fall through to colorDefaults, same as the tokens above.
  *
+ * `accent` also accepts a `[light, dark]` tuple (matching `TokenValue` in
+ * defineTheme). A tuple seeds each color scheme from its own half: the
+ * light side of every generated `light-dark()` pair derives from the light
+ * accent's palettes, the dark side from the dark accent's. A plain string
+ * seeds both sides identically, token for token the same output as before
+ * tuples existed.
+ *
  * WCAG contrast guarantees (asserted in expandColorScale.test.ts):
  * - Text tones are guaranteed >= 4.5:1 against their surfaces by tone
  *   spacing alone — HCT tone is CIE L*, which fixes relative luminance
  *   regardless of hue/chroma, so the fixed tone assignments hold for any
- *   accent/neutralStyle (WCAG 1.4.3).
+ *   accent/neutralStyle (WCAG 1.4.3), and each half of a tuple pairs with
+ *   surfaces derived from that same seed.
  * - --color-border-emphasized (form-control boundaries) is tone-bumped
  *   until it reaches >= 3:1 against the generated surface (WCAG 1.4.11).
  * - --color-border, --color-skeleton, and --color-track are intentionally
@@ -46,6 +54,9 @@ import { hexToHct, hctToHex, tonalPalette, hexWithAlpha } from "./hct.js";
  * // Minimal — just a seed color
  * { accent: '#0064E0' }
  *
+ * // Per-scheme seeds: light palettes from '#0064E0', dark from '#48CAE4'
+ * { accent: ['#0064E0', '#48CAE4'] }
+ *
  * // With customization
  * { accent: '#B7410E', neutralStyle: 'warm', contrast: 'high' }
  *
@@ -126,6 +137,11 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
  * --color-on-dark/on-light) are NOT generated — they fall through
  * to colorDefaults.
  *
+ * A `[light, dark]` tuple accent seeds each scheme separately: the light
+ * half of every generated `light-dark()` pair comes from the light seed's
+ * palettes, the dark half from the dark seed's. A string accent seeds both
+ * halves from the same palettes, exactly as before tuples were supported.
+ *
  * Without an `accent`, the accent tokens join that fall-through set: the
  * neutrals are seeded from the default accent's hue, and --color-accent,
  * --color-accent-muted and --color-on-accent keep their colorDefaults values.
@@ -135,6 +151,9 @@ export function ensureContrastTone(hue, chroma, startTone, step, background, min
  * const tokens = expandColorScale({ accent: '#0064E0' });
  * // tokens['--color-accent'] === 'light-dark(#..., #...)'
  *
+ * const perScheme = expandColorScale({ accent: ['#0064E0', '#48CAE4'] });
+ * // light half derives from #0064E0, dark half from #48CAE4
+ *
  * const neutralOnly = expandColorScale({ neutralStyle: 'warm' });
  * // neutralOnly['--color-accent'] === undefined
  * ```
@@ -145,14 +164,26 @@ export function expandColorScale(config) {
     neutralStyle = 'cool',
     contrast = 'standard'
   } = config;
-  const seed = hexToHct(accent ?? DEFAULT_ACCENT_SEED);
-  const seedHue = seed.hue;
-  const primaryChroma = Math.max(seed.chroma, 48);
+
+  // Normalize to per-scheme seeds. A string accent (or an absent one) uses
+  // the same seed for both halves, which keeps single-seed output identical
+  // to the pre-tuple implementation.
+  const [lightAccent, darkAccent] = Array.isArray(accent) ? accent : [accent, accent];
+  const lightSeed = hexToHct(lightAccent ?? DEFAULT_ACCENT_SEED);
+  const sameSeed = darkAccent === lightAccent;
+  const darkSeed = sameSeed ? lightSeed : hexToHct(darkAccent ?? DEFAULT_ACCENT_SEED);
   const neutralChroma = NEUTRAL_CHROMA[neutralStyle] ?? 5;
   const neutralVariantChroma = NEUTRAL_VARIANT_CHROMA[neutralStyle] ?? 8;
-  const P = tonalPalette(seedHue, primaryChroma);
-  const N = tonalPalette(seedHue, neutralChroma);
-  const NV = tonalPalette(seedHue, neutralVariantChroma);
+
+  // Palette naming: *L palettes feed the light (first) half of each ld()
+  // pair below, *D palettes the dark (second) half. With a single seed the
+  // D palettes alias the L ones.
+  const PL = tonalPalette(lightSeed.hue, Math.max(lightSeed.chroma, 48));
+  const NL = tonalPalette(lightSeed.hue, neutralChroma);
+  const NVL = tonalPalette(lightSeed.hue, neutralVariantChroma);
+  const PD = sameSeed ? PL : tonalPalette(darkSeed.hue, Math.max(darkSeed.chroma, 48));
+  const ND = sameSeed ? NL : tonalPalette(darkSeed.hue, neutralChroma);
+  const NVD = sameSeed ? NVL : tonalPalette(darkSeed.hue, neutralVariantChroma);
   const isHigh = contrast === 'high';
   const textPrimaryLightTone = isHigh ? 0 : 10;
   const textPrimaryDarkTone = isHigh ? 99 : 90;
@@ -173,7 +204,7 @@ export function expandColorScale(config) {
   // contrast starts at 70/30 and walks toward mid-scale only as far as needed.
   const borderEmphasizedStartLight = isHigh ? 50 : 70;
   const borderEmphasizedStartDark = isHigh ? 50 : 30;
-  const borderEmphasized = ld(ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartLight, -1, N[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(seedHue, neutralVariantChroma, borderEmphasizedStartDark, 1, N[10], NON_TEXT_MIN_CONTRAST));
+  const borderEmphasized = ld(ensureContrastTone(lightSeed.hue, neutralVariantChroma, borderEmphasizedStartLight, -1, NL[99], NON_TEXT_MIN_CONTRAST), ensureContrastTone(darkSeed.hue, neutralVariantChroma, borderEmphasizedStartDark, 1, ND[10], NON_TEXT_MIN_CONTRAST));
   return {
     // Core semantic — only with a seed accent. Without one these fall through
     // to colorDefaults, whose --color-accent is NOT what the default seed
@@ -181,47 +212,46 @@ export function expandColorScale(config) {
     // recolor every neutral-only theme. Nullish and not truthy, matching the
     // seed above, so a supplied-but-malformed accent keeps its old behavior.
     ...(accent != null ? {
-      '--color-accent': ld(P[40], P[80]),
+      '--color-accent': ld(PL[40], PD[80]),
       // Derived accent tokens reference --color-accent instead of baking its
       // resolved hex, so a scoped override of the base token re-accents the
       // whole subtree at runtime. --color-on-accent stays baked: it is a
       // contrast computation against the accent, which CSS cannot express.
       '--color-accent-muted': ld(accentWithAlpha(0.2), accentWithAlpha(0.25)),
-      '--color-on-accent': ld(P[100], P[20])
+      '--color-on-accent': ld(PL[100], PD[20])
     } : null),
-    '--color-neutral': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[90], 0.2)),
-    '--color-background-surface': ld(N[99], N[10]),
-    '--color-background-body': ld(N[95], N[5]),
-    '--color-overlay': ld(hexWithAlpha(N[10], 0.4), hexWithAlpha(N[10], 0.6)),
-    '--color-overlay-hover': ld(hexWithAlpha(N[10], 0.05), hexWithAlpha(N[100], 0.05)),
-    '--color-overlay-pressed': ld(hexWithAlpha(N[10], 0.1), hexWithAlpha(N[100], 0.1)),
-    '--color-background-muted': ld(hexWithAlpha(N[10], 0.05), hexWithAlpha(N[10], 0.5)),
+    '--color-neutral': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[90], 0.2)),
+    '--color-background-surface': ld(NL[99], ND[10]),
+    '--color-background-body': ld(NL[95], ND[5]),
+    '--color-overlay': ld(hexWithAlpha(NL[10], 0.4), hexWithAlpha(ND[10], 0.6)),
+    '--color-overlay-hover': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[100], 0.05)),
+    '--color-overlay-pressed': ld(hexWithAlpha(NL[10], 0.1), hexWithAlpha(ND[100], 0.1)),
+    '--color-background-muted': ld(hexWithAlpha(NL[10], 0.05), hexWithAlpha(ND[10], 0.5)),
     // Text
-    '--color-text-primary': ld(N[textPrimaryLightTone], N[textPrimaryDarkTone]),
-    '--color-text-secondary': ld(NV[textSecondaryLightTone], NV[textSecondaryDarkTone]),
-    '--color-text-disabled': ld(NV[60], NV[40]),
+    '--color-text-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
+    '--color-text-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
+    '--color-text-disabled': ld(NVL[60], NVD[40]),
     '--color-text-accent': 'var(--color-accent)',
     // Icon
     '--color-icon-accent': 'var(--color-accent)',
-    '--color-icon-primary': ld(N[textPrimaryLightTone], N[textPrimaryDarkTone]),
-    '--color-icon-secondary': ld(NV[textSecondaryLightTone], NV[textSecondaryDarkTone]),
-    '--color-icon-disabled': ld(NV[60], NV[40]),
+    '--color-icon-primary': ld(NL[textPrimaryLightTone], ND[textPrimaryDarkTone]),
+    '--color-icon-secondary': ld(NVL[textSecondaryLightTone], NVD[textSecondaryDarkTone]),
+    '--color-icon-disabled': ld(NVL[60], NVD[40]),
     // Surface variants
-    '--color-background-card': ld(N[99], N[10]),
-    '--color-background-popover': ld(N[99], N[20]),
-    '--color-background-inverted': ld(N[10], N[99]),
-    // Border
+    '--color-background-card': ld(NL[99], ND[10]),
+    '--color-background-popover': ld(NL[99], ND[20]),
+    '--color-background-inverted': ld(NL[10], ND[99]),
     // Border
     // Decorative hairline — not a WCAG 1.4.11 boundary. High contrast
     // doubles the alpha so structural boundaries stay perceivable.
-    '--color-border': ld(hexWithAlpha(N[10], borderSubtleAlpha), hexWithAlpha(N[95], borderSubtleAlpha)),
+    '--color-border': ld(hexWithAlpha(NL[10], borderSubtleAlpha), hexWithAlpha(ND[95], borderSubtleAlpha)),
     '--color-border-emphasized': borderEmphasized,
     // Effects
-    '--color-skeleton': ld(NV[70], NV[30]),
+    '--color-skeleton': ld(NVL[70], NVD[30]),
     // Channel-on-body surface (ProgressBar/Slider tracks, Switch off-state).
     // Defaults to the same NV[70]/NV[30] ramp stop as --color-skeleton.
-    '--color-track': ld(NV[70], NV[30]),
-    '--color-shadow': ld(hexWithAlpha(N[0], 0.1), hexWithAlpha(N[0], 0.3)),
+    '--color-track': ld(NVL[70], NVD[30]),
+    '--color-shadow': ld(hexWithAlpha(NL[0], 0.1), hexWithAlpha(ND[0], 0.3)),
     '--color-tint-hover': ld('black', 'white')
   };
 }

package/dist/theme/mergeComponents.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @file Component style-map merging
+ *
+ * One merge rule for component overrides, shared by every layer that composes
+ * them: `extends` inheritance, generated type-scale rules, and the on-media
+ * (`onDark`/`onLight`) surfaces. Merging is per style key, so a child that
+ * restates one property of `button.base` keeps the rest of the base's.
+ *
+ * @input two ComponentStyleMaps — the base and the overrides that win
+ * @output a merged ComponentStyleMap
+ * @position packages/core/src/theme/mergeComponents.ts
+ */
+import type { ComponentStyleMap } from './defineTheme';
+/**
+ * Deep-merge component style maps: `overrides` wins per style key, and every
+ * component and key the base declared that the overrides do not mention is
+ * carried through untouched.
+ */
+export declare function deepMergeComponents(base?: ComponentStyleMap, overrides?: ComponentStyleMap): ComponentStyleMap | undefined;
+//# sourceMappingURL=mergeComponents.d.ts.map

package/dist/theme/mergeComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeComponents.d.ts","sourceRoot":"","sources":["../../src/theme/mergeComponents.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,CAAC,EAAE,iBAAiB,EACxB,SAAS,CAAC,EAAE,iBAAiB,GAC5B,iBAAiB,GAAG,SAAS,CAiC/B"}