@astryxdesign/core 0.5.0 → 0.5.1-canary.8359f1a

package/src/theme/Theme.tsx

@@ -42,6 +42,7 @@ import * as stylex from '@stylexjs/stylex';
 import type {ThemeMode} from './types';
 import {colorVars, typographyVars} from './tokens.stylex';
 import {generateThemeCSS, type DefinedTheme} from './defineTheme';
+import {generateDataTokenDefaultsCSS} from './generateThemeRules';
 import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
@@ -98,6 +99,16 @@ ThemeNestingContext.displayName = 'ThemeNestingContext';
 /** Track which themes have already been injected */
 const injectedThemes = new Set<string>();
 
+/**
+ * How many mounted `Theme`s are relying on the injected data-token defaults.
+ *
+ * The defaults are one document-wide `:root` block, shared by every theme, so
+ * they are injected once and removed only when the last theme that took a
+ * reference unmounts — tearing them down with whichever provider happened to
+ * inject them would strip the palette from the providers still mounted.
+ */
+let dataTokenDefaultsRefCount = 0;
+
 /**
  * Hook to inject theme CSS into the document.
  * Built themes (from `astryx theme build`) skip injection — their CSS
@@ -112,6 +123,8 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
       return;
     }
 
+    // Second and later `Theme`s using this theme do no work at all —
+    // generation included. Its CSS is document-wide and identical for each.
     const themeKey = `astryx-theme-${theme.name}`;
     if (injectedThemes.has(themeKey)) {
       return;
@@ -130,8 +143,26 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
     );
 
     const {prose, component} = generateThemeCSS(theme);
-    if (!prose && !component) {
-      return;
+    const base = generateDataTokenDefaultsCSS();
+    injectedThemes.add(themeKey);
+    const cleanups: (() => void)[] = [() => injectedThemes.delete(themeKey)];
+
+    // Data token defaults go into @layer astryx-base, where StyleX puts the
+    // core token defaults, so a theme's own `--color-data-*` outranks them by
+    // layer. Appended (never prepended) so it cannot register `astryx-base`
+    // ahead of `reset` and invert the layer order.
+    if (base) {
+      if (dataTokenDefaultsRefCount++ === 0) {
+        const baseStyle = document.createElement('style');
+        baseStyle.setAttribute(dataAttr('theme-base'), '');
+        baseStyle.textContent = `@layer astryx-base {\n${base}\n}`;
+        document.head.appendChild(baseStyle);
+      }
+      cleanups.push(() => {
+        if (--dataTokenDefaultsRefCount === 0) {
+          document.querySelector(`style[${dataAttr('theme-base')}]`)?.remove();
+        }
+      });
     }
 
     // Prose defaults go into @layer reset — lowest priority, scoped to
@@ -154,20 +185,24 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
       document.head.appendChild(compStyle);
     }
 
-    injectedThemes.add(themeKey);
+    if (prose || component) {
+      cleanups.push(() => {
+        // Matched by the astryx id marker, which is always written above.
+        const proseEl = document.querySelector(
+          `style[${dataAttr('theme-prose')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
+        );
+        const compEl = document.querySelector(
+          `style[${dataAttr('theme')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
+        );
+        proseEl?.remove();
+        compEl?.remove();
+      });
+    }
 
     return () => {
-      // Remove both prose and component style tags (matched by the new
-      // astryx id marker, which is always written above).
-      const proseEl = document.querySelector(
-        `style[${dataAttr('theme-prose')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
-      );
-      const compEl = document.querySelector(
-        `style[${dataAttr('theme')}="${theme.name}"][${dataAttr('id')}="${id}"]`,
-      );
-      proseEl?.remove();
-      compEl?.remove();
-      injectedThemes.delete(themeKey);
+      for (const cleanup of cleanups) {
+        cleanup();
+      }
     };
   }, [theme, id]);
 }

package/src/theme/defineTheme.test.ts

@@ -116,6 +116,29 @@ describe('generateThemeCSS', () => {
     expect(css).toContain('font-family: var(--font-family-heading)');
   });
 
+  it('keeps the data palette out of a theme that never mentions it', () => {
+    // That the palette IS declared is covered by `seeds the whole palette
+    // once, at :root` in generateThemeRules.test.ts. It is theme-independent,
+    // so there is nothing about it a theme can be used to assert.
+    const {component} = generateThemeCSS(defineTheme({name: 'chartless'}));
+    expect(component).not.toContain('--color-data-');
+  });
+
+  it('puts only the named data token in the theme block, not its siblings', () => {
+    const theme = defineTheme({
+      name: 'brand-charts',
+      tokens: {'--color-data-categorical-blue': '#00A3FF'},
+    });
+    const {component} = generateThemeCSS(theme);
+    expect(component).toContain('--color-data-categorical-blue: #00A3FF;');
+    // Leaving the siblings out of the theme's own block is what lets a nested
+    // theme inherit a parent's override instead of shadowing it.
+    expect(component).not.toContain('--color-data-categorical-orange');
+    // Defaults reach the stylesheet without entering the theme's own tokens,
+    // which are what `astryx theme build` reports as overrides.
+    expect(theme.tokens['--color-data-categorical-orange']).toBeUndefined();
+  });
+
   it('splits prose into reset layer and components into astryx-theme', () => {
     const theme = defineTheme({
       name: 'split-test',

package/src/theme/defineTheme.ts

@@ -36,7 +36,16 @@
  * - /packages/cli/assets/docs/theme.doc.mjs (`astryx docs theme`)
  */
 
-import type {IconRegistry} from '../Icon/globalIconRegistry';
+import type {ReactNode} from 'react';
+import type {IconName, NamespacedIconName} from '../Icon/globalIconRegistry';
+
+/**
+ * Icon overrides a theme may declare: any built-in semantic name, plus the
+ * namespaced keys components and libraries own (`'richtext:bold'`).
+ */
+type ThemeIconOverrides = Partial<
+  Record<IconName | NamespacedIconName, ReactNode>
+>;
 import type {IndicatorRegistry} from '../Indicator/types';
 import type {TypographyConfig, FontWeight} from './types';
 import {
@@ -319,7 +328,7 @@ export interface DefineThemeInput {
    */
   components?: ComponentStyleMap;
   /** Icon registry — maps semantic icon names to React nodes */
-  icons?: Partial<IconRegistry>;
+  icons?: ThemeIconOverrides;
   /**
    * Indicator overrides — replaces the components that draw stateful control
    * visuals with the theme's own, by name.
@@ -381,7 +390,7 @@ export interface DefinedTheme {
   /** Component style overrides */
   components?: ComponentStyleMap;
   /** Icon registry */
-  icons?: Partial<IconRegistry>;
+  icons?: ThemeIconOverrides;
   /** Indicator overrides for stateful control visuals, keyed by name */
   indicators?: IndicatorRegistry;
   /** Whether this theme has been pre-compiled by theme build CLI */

package/src/theme/derivedVarRegistry.test.ts

@@ -213,6 +213,7 @@ function discoverComponents(): ComponentInfo[] {
 // ---------------------------------------------------------------------------
 
 const DIR_TO_REGISTRY_KEY: Record<string, string> = {
+  Avatar: 'avatar',
   Banner: 'banner',
   Button: 'button',
   Card: 'card',
@@ -221,13 +222,13 @@ const DIR_TO_REGISTRY_KEY: Record<string, string> = {
   Dialog: 'dialog',
   DropdownMenu: 'dropdown-menu',
   Field: 'field',
-  HoverCard: 'hovercard',
+  HoverCard: 'hover-card',
   NumberInput: 'number-input',
   Popover: 'popover',
-  ProgressBar: 'progressbar-mark',
+  ProgressBar: 'progress-bar-mark',
   Section: 'section',
   SegmentedControl: 'segmented-control',
-  TextArea: 'textarea',
+  TextArea: 'text-area',
 };
 
 /**
@@ -279,6 +280,13 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   '--_thumbnail-hit-inset',
   '--_input-clear-hit-inset',
   '--_input-clear-hit-content',
+  // Placement and swipe lifecycle values are private Toast behavior. A theme
+  // author controls the surface transform/opacity as a whole, not these values.
+  '--_toast-slide-y',
+  '--_toast-swipe-y',
+  '--_toast-swipe-exit-y',
+  '--_toast-swipe-opacity',
+  '--_toast-swipe-scale',
   // Indentation and row-spacing metrics: --tree-list-indent is the authorable
   // step, --_tree-indent the per-row distance TreeListItem computes from it.
   // --tree-list-row-gap is applied as half a padding-block on each row wrapper,
@@ -292,6 +300,19 @@ const VARS_WITHOUT_DERIVED_MAPPING = new Set([
   // other.
   '--_card-elevation',
   '--_card-ring',
+  // The colour inside that composed ring, for a variant only a theme knows.
+  // It is one component of one shadow in the list, so no standard property
+  // maps onto it either — a theme sets it beside the fill it has to contrast.
+  '--selectable-card-ring-color',
+  // The spinner's ring is drawn as an SVG circle, so none of its four vars is
+  // a CSS property of the element carrying the theme target: `width` and
+  // `borderWidth` would name a box the ring is not, and a `color` mapping
+  // would take the label's text color with it. They are public vars a theme
+  // sets directly under a size- or shade-variant key.
+  '--spinner-diameter',
+  '--spinner-stroke-width',
+  '--spinner-color',
+  '--spinner-track-color',
 ]);
 
 // ---------------------------------------------------------------------------
@@ -418,6 +439,21 @@ describe('getDerivedVars', () => {
     expect(getDerivedVars('unknown', 'borderRadius')).toEqual([]);
   });
 
+  it('resolves a deprecated key to the entries of the key that replaced it', () => {
+    // A theme written against the old spelling still selects the element (the
+    // component emits both classes), so its derived vars must still expand —
+    // otherwise the rule lands and the var half of it silently does nothing.
+    expect(getDerivedVars('hovercard', 'borderRadius')).toEqual(
+      getDerivedVars('hover-card', 'borderRadius'),
+    );
+    expect(getDerivedVars('textarea', 'paddingInline')).toEqual(
+      getDerivedVars('text-area', 'paddingInline'),
+    );
+    expect(getDerivedVars('progressbar-mark', 'width')).toEqual(
+      getDerivedVars('progress-bar-mark', 'width'),
+    );
+  });
+
   it('returns empty for unregistered property', () => {
     expect(getDerivedVars('card', 'color')).toEqual([]);
   });
@@ -441,3 +477,51 @@ describe('getDerivedVars', () => {
     }
   });
 });
+
+// ---------------------------------------------------------------------------
+// Read check: a registered var nothing reads is a dead theming knob
+// ---------------------------------------------------------------------------
+
+/**
+ * Every source file under packages/core/src, concatenated once.
+ *
+ * `--_popover-radius` shipped documented and registered while `usePopover`
+ * hardcoded its radius, so `popover: {borderRadius}` set a var no element ever
+ * read. Sync between source, docs and registry cannot catch that: the three
+ * agreed with each other, and none of them required a reader.
+ */
+function readAllSource(dir: string): string {
+  let out = '';
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out += readAllSource(path);
+    } else if (
+      (entry.name.endsWith('.ts') || entry.name.endsWith('.tsx')) &&
+      !entry.name.includes('.test.') &&
+      !entry.name.endsWith('.d.ts')
+    ) {
+      out += readFileSync(path, 'utf-8');
+    }
+  }
+  return out;
+}
+
+describe('registered derived vars are read by component styles', () => {
+  const source = readAllSource(SRC_DIR);
+
+  for (const [component, entries] of Object.entries(derivedVarRegistry)) {
+    for (const varName of entries.flatMap(e => e.vars ?? [])) {
+      it(`${component}: ${varName} is read via var()`, () => {
+        expect(
+          source.includes(`var(${varName})`) ||
+            source.includes(`var(${varName},`),
+          `${varName} is registered as the derived var for a CSS property on ` +
+            `\`${component}\`, but no component reads it. A theme setting that ` +
+            `property would write a var nothing consumes. Read it in the ` +
+            `element's StyleX styles, or drop the derived entry.`,
+        ).toBe(true);
+      });
+    }
+  }
+});

package/src/theme/derivedVarRegistry.ts

@@ -43,6 +43,7 @@ export interface DerivedVarEntry {
  * entries share the same property.
  */
 export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
+  avatar: [{property: 'borderRadius', vars: ['--_avatar-radius']}],
   banner: [{property: 'borderRadius', vars: ['--_banner-radius']}],
   button: [{property: 'borderRadius', vars: ['--_button-radius']}],
   card: [
@@ -66,13 +67,13 @@ export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
     {property: 'padding', vars: ['--_dropdown-menu-padding']},
   ],
   field: [{property: 'borderRadius', vars: ['--_field-radius']}],
-  hovercard: [{property: 'borderRadius', vars: ['--_hovercard-radius']}],
+  'hover-card': [{property: 'borderRadius', vars: ['--_hovercard-radius']}],
   'number-input': [
     {property: 'padding', expand: 'container'},
     {property: 'borderRadius', vars: ['--_field-radius']},
   ],
   popover: [{property: 'borderRadius', vars: ['--_popover-radius']}],
-  'progressbar-mark': [
+  'progress-bar-mark': [
     {property: 'width', vars: ['--_progressbar-mark-width'], replaces: true},
     {property: 'height', vars: ['--_progressbar-mark-height'], replaces: true},
   ],
@@ -81,7 +82,7 @@ export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
     {property: 'borderRadius', vars: ['--_segmented-control-radius']},
     {property: 'padding', vars: ['--_segmented-control-padding']},
   ],
-  textarea: [
+  'text-area': [
     {
       property: 'paddingInline',
       vars: ['--_textarea-inline-padding'],
@@ -90,6 +91,21 @@ export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
   ],
 };
 
+/**
+ * Deprecated component keys → the key that superseded them.
+ *
+ * A renamed target keeps emitting its old class, so a theme written against
+ * the old key still selects the element. Without this the rule would land but
+ * its derived vars would not expand, and the half that travels through a var
+ * (a hover card's radius, a text area's inline padding) would silently do
+ * nothing. Drop these with the classes, in the next major.
+ */
+const DEPRECATED_REGISTRY_KEYS: Record<string, string> = {
+  hovercard: 'hover-card',
+  'progressbar-mark': 'progress-bar-mark',
+  textarea: 'text-area',
+};
+
 /**
  * Look up derived var entries for a component + CSS property.
  * Returns matching entries in priority order, or empty array if none.
@@ -98,7 +114,10 @@ export function getDerivedVars(
   component: string,
   property: string,
 ): DerivedVarEntry[] {
-  const entries = derivedVarRegistry[component];
+  const renamedTo = DEPRECATED_REGISTRY_KEYS[component];
+  const entries =
+    derivedVarRegistry[component] ??
+    (renamedTo ? derivedVarRegistry[renamedTo] : undefined);
   if (!entries) {
     return [];
   }

package/src/theme/generateThemeRules.test.ts

@@ -7,7 +7,13 @@
  */
 
 import {describe, it, expect} from 'vitest';
-import {defineTheme, generateThemeCSS, generateThemeRules} from './index';
+import {
+  dataTokenDefaults,
+  defineTheme,
+  generateThemeCSS,
+  generateThemeRules,
+} from './index';
+import {generateDataTokenDefaultsCSS} from './generateThemeRules';
 
 const defaultInput = {
   name: 'default',
@@ -702,3 +708,95 @@ describe('physical padding longhands', () => {
     expect(rule).not.toContain('--_dropdown-menu-padding');
   });
 });
+
+describe('renamed theme targets', () => {
+  // The renamed targets emit both classes, so a rule written against either
+  // key selects the element. What is easy to miss is the derived-var half: a
+  // key the registry does not know still emits a rule, minus every var the
+  // component actually reads — the same silent nothing a misspelled key gives.
+  it('expands derived vars for a renamed key and its deprecated spelling', () => {
+    const rules = (component: string, styles: Record<string, string>) =>
+      generateThemeRules(
+        defineTheme({
+          name: `test-renamed-${component}`,
+          components: {[component]: {base: styles}},
+        }),
+      ).join('\n');
+
+    const hoverCard = rules('hover-card', {borderRadius: '9px'});
+    expect(hoverCard).toContain('.astryx-hover-card');
+    expect(hoverCard).toContain('--_hovercard-radius: 9px');
+    expect(rules('hovercard', {borderRadius: '9px'})).toContain(
+      '--_hovercard-radius: 9px',
+    );
+
+    const textArea = rules('text-area', {paddingInline: '11px'});
+    expect(textArea).toContain('.astryx-text-area');
+    expect(textArea).toContain('--_textarea-inline-padding: 11px');
+    expect(rules('textarea', {paddingInline: '11px'})).toContain(
+      '--_textarea-inline-padding: 11px',
+    );
+
+    const mark = rules('progress-bar-mark', {width: '3px'});
+    expect(mark).toContain('.astryx-progress-bar-mark');
+    expect(mark).toContain('--_progressbar-mark-width: 3px');
+    expect(rules('progressbar-mark', {width: '3px'})).toContain(
+      '--_progressbar-mark-width: 3px',
+    );
+  });
+});
+
+describe('data visualization tokens', () => {
+  const scopeBlock = (theme: Parameters<typeof generateThemeRules>[0]) =>
+    generateThemeRules(theme).find(r => r.includes(':scope'));
+
+  it('seeds the whole palette once, at :root', () => {
+    const css = generateDataTokenDefaultsCSS();
+
+    expect(css.startsWith(':root {')).toBe(true);
+    for (const [name, value] of Object.entries(dataTokenDefaults)) {
+      expect(css).toContain(`${name}: ${value};`);
+    }
+  });
+
+  it('leaves the defaults out of a theme scope block', () => {
+    // A scope block that re-declared them would shadow a parent theme's
+    // override in every nested <Theme>, which no other token family does.
+    expect(scopeBlock(defineTheme({name: 'data-bare'}))).toBeUndefined();
+  });
+
+  it("puts only the theme's own data token in its scope block", () => {
+    const block = scopeBlock(
+      defineTheme({
+        name: 'data-override',
+        tokens: {'--color-data-categorical-blue': ['#123456', '#654321']},
+      }),
+    )!;
+
+    expect(block).toContain(
+      '--color-data-categorical-blue: light-dark(#123456, #654321);',
+    );
+    expect(block.match(/--color-data-/g)).toHaveLength(1);
+    expect(block).not.toContain('--color-data-categorical-orange');
+  });
+
+  it('keeps the palette out of the scoped stylesheet', () => {
+    // The palette's own contents are asserted once, against
+    // `dataTokenDefaults`, in `seeds the whole palette once, at :root` above.
+    const {component, prose} = generateThemeCSS(
+      defineTheme({name: 'data-css'}),
+    );
+
+    expect(component).not.toContain('--color-data-');
+    expect(prose).not.toContain('--color-data-');
+  });
+
+  it('keeps generateThemeCSS to its two scoped blocks', () => {
+    // The defaults are theme-independent, so they are not part of the theme
+    // CSS contract: `astryx theme build` formats them from the public
+    // `dataTokenDefaults` export instead.
+    expect(
+      Object.keys(generateThemeCSS(defineTheme({name: 'data-shape'}))).sort(),
+    ).toEqual(['component', 'prose']);
+  });
+});

package/src/theme/generateThemeRules.ts

@@ -18,6 +18,7 @@
 import type {DefinedTheme} from './defineTheme';
 import {parseStyleKey} from '../utils/parseStyleKey';
 import {getDerivedVars} from './derivedVarRegistry';
+import {dataTokenDefaults} from './domainTokens/dataTokens';
 import {cssVar, classPrefix, dataAttrNamespace} from '../naming';
 
 /**
@@ -758,6 +759,30 @@ export function generateOnMediaCSS(theme: DefinedTheme): string {
   return `@scope (${scopeSelector}) to (${THEME_SCOPE_TO}) {\n${inner}\n}`;
 }
 
+/**
+ * The `--color-data-*` defaults as one unscoped `:root` block.
+ *
+ * Core tokens reach CSS once, at `:root`, from StyleX's `defineVars` output in
+ * `@layer astryx-base`; a theme's own scope block then carries only the tokens
+ * that theme overrides, which is why a nested theme inherits its parent's
+ * override instead of shadowing it. Data tokens are not StyleX vars, so nothing
+ * declares them — this is their equivalent, and callers put it in
+ * `@layer astryx-base` so a theme's override wins by layer rather than by
+ * specificity. Seeding it per theme scope instead re-declares the default
+ * inside every nested theme, which is the shadowing this shape avoids.
+ *
+ * @internal Not exported from `@astryxdesign/core/theme`: the `<Theme>`
+ * runtime is the only caller. `astryx theme build` formats the same block from
+ * the public `dataTokenDefaults` export, and a CLI test asserts the two are
+ * byte-identical.
+ */
+export function generateDataTokenDefaultsCSS(): string {
+  const declarations = Object.entries(dataTokenDefaults)
+    .map(([prop, value]) => `  ${prop}: ${value};`)
+    .join('\n');
+  return `:root {\n${declarations}\n}`;
+}
+
 /**
  * Generate layered CSS for a theme — runtime path.
  *
@@ -768,6 +793,9 @@ export function generateOnMediaCSS(theme: DefinedTheme): string {
  * This separation ensures prose defaults (what bare HTML looks like in a theme)
  * sit at reset-layer priority where any class-based style wins, while component
  * overrides sit above StyleX so themes can restyle components intentionally.
+ *
+ * The theme-independent `--color-data-*` defaults are not part of this output:
+ * see `generateDataTokenDefaultsCSS`.
  */
 export function generateThemeCSS(theme: DefinedTheme): ThemeCSSOutput {
   const {component, prose} = generateThemeRulesSplit(theme);

package/src/theme/syntax/tokens.ts

@@ -44,8 +44,11 @@ export const syntaxTokenDefaults = {
   '--color-syntax-attribute': 'var(--color-text-teal)',
   // property -> cyan text (object properties)
   '--color-syntax-property': 'var(--color-text-cyan)',
-  // punctuation -> disabled text (brackets, semicolons)
-  '--color-syntax-punctuation': 'var(--color-text-disabled)',
+  // punctuation -> secondary text (brackets, semicolons). Not disabled text:
+  // disabled grey is calibrated to fail AA on purpose (WCAG exempts inactive
+  // controls), and punctuation in a code sample is normal, always-active
+  // text — see #5386.
+  '--color-syntax-punctuation': 'var(--color-text-secondary)',
   // background -> muted surface
   '--color-syntax-background': 'var(--color-background-muted)',
 } as const;

package/src/theme/useTheme.test.tsx

@@ -108,6 +108,16 @@ describe('useTheme', () => {
     expect(result.current.token('--color-text-primary')).toBe('#DFE2E5');
   });
 
+  it('keeps the token resolver and return object stable across rerenders', () => {
+    const {result, rerender} = renderHook(() => useTheme());
+    const first = result.current;
+
+    rerender();
+
+    expect(result.current.token).toBe(first.token);
+    expect(result.current).toBe(first);
+  });
+
   it('returns empty string for unknown tokens', () => {
     const {result} = renderHook(() => useTheme(), {
       wrapper: ({children}) => wrapper({children, mode: 'light'}),

package/src/theme/useTheme.ts

@@ -21,7 +21,13 @@
  * - /packages/core/src/theme/index.ts
  */
 
-import {createContext, use, useMemo, useSyncExternalStore} from 'react';
+import {
+  createContext,
+  use,
+  useCallback,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
 import type {ThemeMode} from './types';
 import type {DefinedTheme} from './defineTheme';
 import {resolveThemeTokens} from './tokens';
@@ -281,14 +287,14 @@ export function useTheme(): UseThemeReturn {
     [theme, effectiveMode],
   );
 
-  const token = (name: string): string => {
-    return tokens[name] ?? '';
-  };
+  const token = useCallback(
+    (name: string): string => tokens[name] ?? '',
+    [tokens],
+  );
+  const name = theme?.name ?? 'default';
 
-  return {
-    name: theme?.name ?? 'default',
-    mode: effectiveMode,
-    token,
-    tokens,
-  };
+  return useMemo(
+    () => ({name, mode: effectiveMode, token, tokens}),
+    [name, effectiveMode, token, tokens],
+  );
 }

package/src/utils/dateParser.test.ts

@@ -9,8 +9,8 @@
  * SYNC: When dateParser.ts changes, update tests to match new behavior
  */
 
-import {describe, it, expect} from 'vitest';
-import {parseDateInput} from './dateParser';
+import {describe, it, expect, vi} from 'vitest';
+import {isLocaleDayFirst, parseDateInput} from './dateParser';
 
 describe('parseDateInput', () => {
   describe('ISO format (YYYY-MM-DD)', () => {
@@ -280,6 +280,14 @@ describe('parseDateInput', () => {
   describe('ambiguous numeric formats follow the passed locale (#5074)', () => {
     // Both numbers are <= 12, so the day/month order is genuinely ambiguous
     // and resolved by isLocaleDayFirst(locale) rather than the host locale.
+    it('defaults ambiguous input to English month-first order', () => {
+      expect(parseDateInput('3/4/2026')).toEqual({
+        year: 2026,
+        month: 3,
+        day: 4,
+      });
+    });
+
     it('reads month-first for en-US', () => {
       expect(parseDateInput('3/4/2026', 'en-US')).toEqual({
         year: 2026,
@@ -297,6 +305,30 @@ describe('parseDateInput', () => {
     });
   });
 
+  describe('isLocaleDayFirst', () => {
+    it('defaults to English month-first order', () => {
+      expect(isLocaleDayFirst()).toBe(false);
+    });
+
+    it('requests Gregorian calendar data for locale ordering', () => {
+      const OriginalDateTimeFormat = globalThis.Intl.DateTimeFormat;
+      const dateTimeFormatSpy = vi
+        .spyOn(globalThis.Intl, 'DateTimeFormat')
+        .mockImplementation(function DateTimeFormat(locale, options) {
+          return new OriginalDateTimeFormat(locale, options);
+        });
+
+      try {
+        isLocaleDayFirst('en-US-u-ca-buddhist');
+        expect(dateTimeFormatSpy).toHaveBeenCalledWith('en-US-u-ca-buddhist', {
+          calendar: 'gregory',
+        });
+      } finally {
+        dateTimeFormatSpy.mockRestore();
+      }
+    });
+  });
+
   describe('edge cases', () => {
     it('returns null for empty string', () => {
       expect(parseDateInput('')).toBeNull();