pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

package/dist/esm/Hooks/useIsTruncated.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { observeResize } from "./sharedResizeObserver.js";
 // NOTE: compares scrollWidth/Height vs clientWidth/Height to detect real ellipsis truncation; re-measures via ResizeObserver.
 export function useIsTruncated(content, enabled = true) {
     const ref = useRef(null);
@@ -14,11 +15,9 @@ export function useIsTruncated(content, enabled = true) {
             return;
         measure();
         const el = ref.current;
-        if (!el || typeof ResizeObserver === "undefined")
+        if (!el)
             return;
-        const observer = new ResizeObserver(measure);
-        observer.observe(el);
-        return () => observer.disconnect();
+        return observeResize(el, measure);
     }, [measure, content, enabled]);
     return { ref, isTruncated };
 }

package/dist/esm/Theme/chakra/Card.styles.js

@@ -36,10 +36,13 @@ const variants = {
     outline: definePartsStyle({
         container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
     }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
 };
 export const Card = defineMultiStyleConfig({
     baseStyle,
     sizes,
     variants,
-    defaultProps: { variant: "outline", size: "md" },
+    defaultProps: { variant: "elevated", size: "md" },
 });

package/dist/esm/Theme/chakra/Menu.styles.js

@@ -3,6 +3,7 @@ import { menuAnatomy } from "@chakra-ui/anatomy";
 import { listRowBackgrounds } from "../tokens/builders/rowStates.js";
 import { OPTION_ROW_SIZES, OPTION_ROW_RADIUS } from "../tokens/primitives/optionRowSizes.js";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const itemRowSpec = OPTION_ROW_SIZES.sm;
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(menuAnatomy.keys);
 const $bg = cssVar("menu-bg");
@@ -21,12 +22,14 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
         item: {
             minH: itemRowSpec.minH,
             px: itemRowSpec.px,
             py: itemRowSpec.py,
             mx: itemRowSpec.mx,
+            width: `calc(100% - 2 * ${itemRowSpec.mx})`,
             fontSize: itemRowSpec.fontSize,
             borderRadius: OPTION_ROW_RADIUS,
             bg: "transparent",

package/dist/esm/Theme/chakra/Popover.styles.js

@@ -1,6 +1,7 @@
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { popoverAnatomy } from "@chakra-ui/anatomy";
 import { paletteOf } from "./paletteFromTheme.js";
+import { POPUP_SURFACE } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(popoverAnatomy.keys);
 const $popperBg = cssVar("popper-bg");
 const $arrowShadowColor = cssVar("popper-arrow-shadow-color");
@@ -16,6 +17,7 @@ const baseStyle = definePartsStyle(({ theme }) => {
             borderWidth: "1px",
             borderStyle: "solid",
             borderColor: colors.boxborder[200],
+            ...POPUP_SURFACE,
         },
     };
 });

package/dist/esm/Theme/chakra/componentStyles.js

@@ -12,6 +12,7 @@ import { AA_NORMAL_TEXT, accentTextOnCanvas, isDarkCanvas } from "../tokens/buil
 import { labelOnFill, solidFillRung } from "../tokens/builders/filledSurface.js";
 import { liftToContrast, resolveHoverTint } from "../tokens/builders/outlineRung.js";
 import { resolveSoftTone } from "../tokens/builders/tone.js";
+import { skeletonShimmer } from "../tokens/builders/skeletonShimmer.js";
 import { tooltipSurface } from "../tokens/builders/tooltipSurface.js";
 import { Drawer } from "./Drawer.styles.js";
 import { Menu } from "./Menu.styles.js";
@@ -142,12 +143,15 @@ const $skeletonStart = cssVar("skeleton-start-color");
 const $skeletonEnd = cssVar("skeleton-end-color");
 // NOTE: fixes Chakra's Skeleton hardcoding gray.100/.400 via `_dark` (dead here) — an explicit startColor/endColor prop still wins.
 const Skeleton = {
-    baseStyle: ({ theme }) => ({
-        [$skeletonStart.variable]: paletteOf(theme).gray[100],
-        [$skeletonEnd.variable]: paletteOf(theme).gray[300],
-        background: $skeletonStart.reference,
-        borderColor: $skeletonEnd.reference,
-    }),
+    baseStyle: ({ theme }) => {
+        const shimmer = skeletonShimmer(paletteOf(theme));
+        return {
+            [$skeletonStart.variable]: shimmer.start,
+            [$skeletonEnd.variable]: shimmer.end,
+            background: $skeletonStart.reference,
+            borderColor: $skeletonEnd.reference,
+        };
+    },
 };
 // NOTE: uses Chakra's own shorthand style keys (bg/w/h/pos) + !important — extendTheme deep-merges by key, so mismatched keys let Chakra's stock value win.
 const Radio = {

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -5,18 +5,44 @@ import { componentStyles } from "./componentStyles.js";
 import { resolveFilledSurface } from "../tokens/builders/filledSurface.js";
 import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
 import { focusRingShadow } from "./focusRing.styles.js";
+import { shadowsFor } from "../tokens/primitives/shadows.js";
+import { reducedMotionGlobalStyles } from "./motion.js";
+import { TEXT_STYLES } from "../tokens/primitives/typography.js";
+import { memoiseByReads } from "../tokens/builders/memoByReads.js";
+const memoisedStyle = (value) => typeof value === "function" ? memoiseByReads(value) : value;
+const memoisedGroup = (group) => Object.fromEntries(Object.entries(group).map(([key, value]) => [key, memoisedStyle(value)]));
+const memoisedConfig = (config) => Object.fromEntries(Object.entries(config).map(([key, value]) => [
+    key,
+    key === "baseStyle"
+        ? memoisedStyle(value)
+        : key === "variants" || key === "sizes"
+            ? memoisedGroup(value)
+            : value,
+]));
+// NOTE: extendTheme deep-merges Chakra's and our style output on every call; cache it per theme.
+const withMemoisedStyles = (theme) => {
+    const components = theme.components;
+    return {
+        ...theme,
+        components: {
+            ...components,
+            ...Object.fromEntries(Object.keys(componentStyles).map((name) => [name, memoisedConfig(components[name])])),
+        },
+    };
+};
 // Builds a Chakra theme from a pure brand palette — dark mode works by swapping which palette it carries.
 export const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts,
         ...common,
         // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
-        shadows: { ...common.shadows, outline: focusRingShadow(palette) },
+        shadows: { ...shadowsFor(colorMode), outline: focusRingShadow(palette) },
     };
-    return extendTheme({
+    return withMemoisedStyles(extendTheme({
         ...brand,
         config: {
             ...common.config,
@@ -64,11 +90,15 @@ export const createBrandTheme = (palette, options = {}) => {
                             WebkitTextFillColor: palette.text[900],
                             caretColor: palette.text[900],
                         },
+                        ...motionRule,
                     },
                 },
             }
-            : {}),
+            : options.reducedMotion === "global"
+                ? { styles: { global: motionRule } }
+                : {}),
+        textStyles: TEXT_STYLES,
         components: componentStyles,
-    });
+    }));
 };
 export default createBrandTheme;

package/dist/esm/Theme/chakra/focusRing.styles.js

@@ -6,6 +6,9 @@ export const FOCUS_RING_WIDTH = 4;
 // NOTE: a box-shadow, not an outline — drawn outside the border box so it never resizes the control.
 export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+export const insetFocusRingShadow = (colors) => `inset 0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 export const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 // NOTE: transparent outline isn't decorative — forced-colors mode drops box-shadow but repaints an outline.

package/dist/esm/Theme/chakra/motion.js

@@ -1,8 +1,34 @@
 import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+export const MOTION_OK_QUERY = "@media (prefers-reduced-motion: no-preference)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
 export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export const reducedMotionSx = (overrides = {}) => ({
     [REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },
 });
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export const MOTION_KEEP_CLASS = "pz-motion-keep";
+const KEPT = [
+    ".chakra-spinner",
+    ".chakra-progress",
+    ".chakra-progress *",
+    `.${MOTION_KEEP_CLASS}`,
+    `.${MOTION_KEEP_CLASS} *`,
+];
+const notKept = KEPT.map((selector) => `:not(${selector})`).join("");
+export const REDUCED_MOTION_SELECTOR = [
+    `*${notKept}`,
+    `*${notKept}::before`,
+    `*${notKept}::after`,
+].join(", ");
+export const reducedMotionGlobalStyles = {
+    [REDUCED_MOTION_QUERY]: {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: "0.01ms !important",
+            animationDuration: "0.01ms !important",
+            animationIterationCount: "1 !important",
+            scrollBehavior: "auto !important",
+        },
+    },
+};

package/dist/esm/Theme/chakra/overlay.styles.js

@@ -1,6 +1,9 @@
 import { overlayScrim } from "../tokens/builders/scrim.js";
 import { raisedRule } from "../tokens/builders/surfaceRaised.js";
+import { RADIUS_ROLE } from "../tokens/primitives/radii.js";
 export const OVERLAY_BLUR = "blur(4px)";
+/** Radius and elevation every anchored popup shares: menus, popovers, selects, dropdowns. */
+export const POPUP_SURFACE = { borderRadius: RADIUS_ROLE.float, boxShadow: "md" };
 /** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
 export const overlayScrimStyles = (colors) => ({
     bg: overlayScrim(colors),

package/dist/esm/Theme/index.js

@@ -1,15 +1,18 @@
 import createBrandTheme from "./chakra/createBrandTheme.js";
 import { lightPalettes, darkPalettes } from "./tokens/brands/index.js";
-// Chakra themes per brand, built from the pure palettes in tokens/brands via createBrandTheme.
+import { lazyObject } from "./tokens/builders/lazy.js";
+// NOTE: lavender is built at import as the shape template — every light theme shares its keys.
 const lavender = createBrandTheme(lightPalettes.lavender);
-const meadow = createBrandTheme(lightPalettes.meadow);
-const radiant = createBrandTheme(lightPalettes.radiant);
-const skyline = createBrandTheme(lightPalettes.skyline);
-const slate = createBrandTheme(lightPalettes.slate);
-const emerald = createBrandTheme(lightPalettes.emerald);
-const rosewood = createBrandTheme(lightPalettes.rosewood);
-const storefront = createBrandTheme(lightPalettes.storefront);
-const zinc = createBrandTheme(lightPalettes.zinc);
+const lightThemeKeys = Object.keys(lavender);
+const lazyLightTheme = (brand) => lazyObject(lightThemeKeys, () => createBrandTheme(lightPalettes[brand]));
+const meadow = lazyLightTheme("meadow");
+const radiant = lazyLightTheme("radiant");
+const skyline = lazyLightTheme("skyline");
+const slate = lazyLightTheme("slate");
+const emerald = lazyLightTheme("emerald");
+const rosewood = lazyLightTheme("rosewood");
+const storefront = lazyLightTheme("storefront");
+const zinc = lazyLightTheme("zinc");
 export { skyline, meadow, radiant, lavender, slate, emerald, rosewood, storefront, zinc };
 // NOTE: consumers iterate this to render theme pickers — key order is load-bearing. Stays light-only.
 export const ThemesList = {

package/dist/esm/Theme/provider/PixelizeThemeProvider.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { brandThemes } from "../index.js";
 import ToasterProvider from "../../Components/Toaster/Toaster.js";
+import { reducedMotionGlobalStyles } from "../chakra/motion.js";
 import { getSystemColorMode, readStoredTheme, subscribeToSystemColorMode, writeStoredTheme, } from "./colorModeStorage.js";
 const DEFAULT_BRAND = "lavender";
 const DEFAULT_MODE = "system";
@@ -16,7 +17,7 @@ const forcedLightColorModeManager = {
 };
 export const ThemeModeContext = createContext(undefined);
 // NOTE: Chakra's own color mode stays unsynced from resolvedMode — its built-in `_dark:` blocks assume the opposite ramp direction. Read mode via useThemeMode(), not useColorModeValue().
-export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, reducedMotion = "components", }) => {
     const [mode, setModeState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
     const [brand, setBrandState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
     const [systemMode, setSystemMode] = useState(getSystemColorMode);
@@ -58,14 +59,17 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         writeStoredTheme(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
+    // NOTE: the page re-themes in an interruptible second commit; the switcher paints first.
+    const appliedMode = useDeferredValue(resolvedMode);
+    const appliedBrand = useDeferredValue(brand);
     // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
     useLayoutEffect(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     // NOTE: re-asserted after Chakra's own ColorModeProvider effect overwrites it back to "light".
     useEffect(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     const onModeChangeRef = useRef(onModeChange);
     const onBrandChangeRef = useRef(onBrandChange);
     useLayoutEffect(() => {
@@ -87,14 +91,18 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
     // NOTE: keyed by value, not identity — themeOverrides is usually an inline literal.
     const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = useMemo(() => {
-        const base = brandThemes[brand][resolvedMode];
-        return themeOverrides ? extendTheme(base, themeOverrides) : base;
+        const base = brandThemes[appliedBrand][appliedMode];
+        const extensions = [
+            ...(reducedMotion === "global" ? [{ styles: { global: reducedMotionGlobalStyles } }] : []),
+            ...(themeOverrides ? [themeOverrides] : []),
+        ];
+        return extensions.length ? extendTheme(base, ...extensions) : base;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [brand, resolvedMode, overridesKey]);
+    }, [appliedBrand, appliedMode, overridesKey, reducedMotion]);
     // NOTE: global.css ships var(--color-*) light-only — re-point them here in dark, clear in light.
     useLayoutEffect(() => {
         const root = document.documentElement;
-        root.dataset.mode = resolvedMode;
+        root.dataset.mode = appliedMode;
         const { colors } = resolvedTheme;
         const { gray, semantic } = colors;
         const HUE_SCALES = [
@@ -118,7 +126,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
-        if (resolvedMode === "dark") {
+        if (appliedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
                     set(`${s}-${r}`, colors[s][r]);
@@ -134,6 +142,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
             for (const name of Object.keys(SEMANTIC_VARS))
                 clear(name);
         }
-    }, [resolvedMode, resolvedTheme]);
-    return (_jsx(ThemeModeContext.Provider, { value: value, children: _jsx(ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: _jsx(ToasterProvider, { children: children }) }) }));
+    }, [appliedMode, resolvedTheme]);
+    const themedTree = useMemo(() => (_jsx(ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: _jsx(ToasterProvider, { children: children }) })), [resolvedTheme, children]);
+    return _jsx(ThemeModeContext.Provider, { value: value, children: themedTree });
 };

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { Box, Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItemOption, MenuList, MenuOptionGroup, Text, Tooltip, } from "@chakra-ui/react";
 import { Monitor, Moon, Sun } from "lucide-react";
 import { brandThemes } from "../index.js";
+import { lightPalettes } from "../tokens/brands/index.js";
 import { useCustomTheme } from "../useCustomTheme.js";
 import { useThemeMode } from "./useThemeMode.js";
 import { focusGlowShadow, focusVisibleRing } from "../chakra/focusRing.styles.js";
@@ -18,8 +19,8 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-// NOTE: resolved from each brand's OWN palette so the dot matches that brand, regardless of the active one.
-const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
+// NOTE: reads the brand's own palette, not its Chakra theme, so the picker builds no themes.
+const brandSwatchColor = (brand) => lightPalettes[brand].primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = useCustomTheme();
     return (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));

package/dist/esm/Theme/tokens/brands/emerald/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/index.js

@@ -26,9 +26,26 @@ import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
 import { buildStar } from "../builders/star.js";
+import { lazyPalette } from "../builders/lazy.js";
+import { contrastRatio, mix } from "../builders/color.js";
+export const LIGHT_CANVAS_STEP = 1.09;
+const CANVAS_MIX_STEP = 0.0025;
+const CANVAS_MIX_MAX = 0.5;
+const lightCanvas = (canvas, card, ink) => {
+    for (let weight = 0; weight < CANVAS_MIX_MAX; weight += CANVAS_MIX_STEP) {
+        const next = mix(canvas, ink, weight);
+        if (contrastRatio(next, card) >= LIGHT_CANVAS_STEP)
+            return next;
+    }
+    return mix(canvas, ink, CANVAS_MIX_MAX);
+};
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
+    backgroundColor: {
+        ...source.backgroundColor,
+        base: lightCanvas(source.backgroundColor.base, source.background[50], source.text[900]),
+    },
     sidebar: withSidebarTokens(source),
     accentText: pickAccentText(source.primary, source.backgroundColor.main),
     textMuted: buildMutedText(source.text, source.backgroundColor.main),
@@ -43,8 +60,8 @@ export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefron
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withSurfaceRaised(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))))));
-const lightBrand = (source) => resolveRungs(finalizeLightPalette(source));
-/** Light palette per brand. `lavender` is the base the other six extend. */
+const lightBrand = (source) => lazyPalette(source, () => resolveRungs(finalizeLightPalette(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 export const lightPalettes = {
     lavender: lightBrand(lavender),
     meadow: lightBrand(meadow),
@@ -56,18 +73,18 @@ export const lightPalettes = {
     storefront: lightBrand(storefront),
     zinc: lightBrand(zinc),
 };
-/** Dark palette per brand, derived from the matching light palette. */
-const darkBrand = (dark) => resolveRungs(dark);
+/** Dark palette per brand, derived from the matching light palette on first read. */
+const darkBrand = (source, dark) => lazyPalette(source, () => resolveRungs(dark));
 export const darkPalettes = {
-    lavender: darkBrand(lavenderDark),
-    meadow: darkBrand(meadowDark),
-    radiant: darkBrand(radiantDark),
-    skyline: darkBrand(skylineDark),
-    slate: darkBrand(slateDark),
-    emerald: darkBrand(emeraldDark),
-    rosewood: darkBrand(rosewoodDark),
-    storefront: darkBrand(storefrontDark),
-    zinc: darkBrand(zincDark),
+    lavender: darkBrand(lavender, lavenderDark),
+    meadow: darkBrand(meadow, meadowDark),
+    radiant: darkBrand(radiant, radiantDark),
+    skyline: darkBrand(skyline, skylineDark),
+    slate: darkBrand(slate, slateDark),
+    emerald: darkBrand(emerald, emeraldDark),
+    rosewood: darkBrand(rosewood, rosewoodDark),
+    storefront: darkBrand(storefront, storefrontDark),
+    zinc: darkBrand(zinc, zincDark),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/esm/Theme/tokens/brands/lavender/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/meadow/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/radiant/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/radiant/palette.light.js

@@ -15,8 +15,22 @@ const primary = {
     900: "#531a14",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
+const danger = {
+    50: "#fcedf3",
+    100: "#f5c5db",
+    200: "#f1a9ca",
+    300: "#ec82b4",
+    400: "#ea69a7",
+    500: "#e74494",
+    600: "#d23e87",
+    700: "#a43069",
+    800: "#7f2651",
+    900: "#611c3e",
+};
 const palette = {
     ...neutralTokens,
+    red: danger,
+    semantic: { ...neutralTokens.semantic, error: danger },
     ...buildBrandInk(PRIMARY_500),
     // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 4.37/2.15.
     gradient: { from: "#cd4733", to: "#a36807" }, // terracotta red → amber
@@ -118,6 +132,7 @@ const palette = {
     boxShadow: {
         primary: buildPrimaryShadowTint(PRIMARY_500),
         ...sharedBoxShadow,
+        error: `${danger[500]}47`,
     },
 };
 export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/palette.light.js

@@ -1,18 +1,18 @@
 import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
 import { buildBrandInk } from "../../builders/brandInk.js";
-const PRIMARY_500 = "#d16a7e"; // muted warm rose (not neon pink)
+const PRIMARY_500 = "#cb6b94";
 const primary = {
-    50: "#fdf2f5",
-    100: "#f9d6de",
-    200: "#f2aaba",
-    300: "#ea7f96",
-    400: "#de627d",
+    50: "#fcf2f7",
+    100: "#f6d6e5",
+    200: "#edabc9",
+    300: "#e480ad",
+    400: "#d76398",
     500: PRIMARY_500,
-    600: "#b9556b",
-    700: "#984558",
-    800: "#763646",
-    900: "#552634",
+    600: "#b35681",
+    700: "#93466a",
+    800: "#723754",
+    900: "#52273e",
     opacity: buildPrimaryOpacity(PRIMARY_500),
 };
 const palette = {

package/dist/esm/Theme/tokens/brands/skyline/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/slate/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/storefront/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;