pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

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

@@ -0,0 +1,34 @@
+// Web binding for the focusRing token pair — colors come from tokens/builders/focusRing.ts; CSS shape is web-only.
+/** Inner band, in the surface tone: separates the ring from the control's own fill. */
+export const FOCUS_HALO_WIDTH = 2;
+/** Outer edge of the brand band. The band itself is the 2px between halo and ring. */
+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}`;
+// 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.
+export const focusVisibleRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusRingShadow(colors),
+});
+/** Blurred, never a flat band: a band has a hard outer edge at every opacity and reads as a second border. */
+export const FOCUS_GLOW_BLUR = 6;
+/** Negative spread keeps the bloom tight to the border instead of haloing the whole control. */
+export const FOCUS_GLOW_SPREAD = -1;
+/** Step on `primary.opacity`. Safe to raise because a blur has no edge to sharpen. */
+export const FOCUS_GLOW_ALPHA = 32;
+export const focusGlowShadow = (colors) => `0 0 ${FOCUS_GLOW_BLUR}px ${FOCUS_GLOW_SPREAD}px ${colors.primary.opacity[FOCUS_GLOW_ALPHA]}`;
+/** Field focus: the brand border is the indicator, this only makes it findable. */
+export const fieldFocusVisible = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "2px",
+    boxShadow: focusGlowShadow(colors),
+});
+/** Both selectors a control needs to keep the ring on top of its own hover/active styling. */
+export const focusVisibleStyles = (colors) => {
+    const ring = focusVisibleRing(colors);
+    return { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring };
+};

package/dist/esm/Theme/chakra/fonts.web.js

@@ -1,10 +1,6 @@
 /** Self-hosted Inter Variable (wght 100–900); required for theme fontWeights to render correctly. */
 import "@fontsource-variable/inter/index.css";
 import typography from "../tokens/primitives/typography.js";
-/**
- * Web font binding: loads the Inter font face (CSS side-effect) and re-exports the pure
- * typography tokens. The CSS import lives here rather than in `tokens/` so the token
- * layer stays portable to mobile.
- */
+// Web font binding: loads Inter (CSS side-effect) and re-exports typography tokens, kept out of tokens/ for portability.
 const fonts = typography;
 export default fonts;

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

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+export const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
+const MEDIA = "(prefers-reduced-motion: reduce)";
+// NOTE: jsdom has no matchMedia; Chakra's hook throws there and breaks consumer test suites.
+const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const readPreference = () => hasMatchMedia() && window.matchMedia(MEDIA).matches;
+export const usePrefersReducedMotion = () => {
+    const [reduced, setReduced] = useState(readPreference);
+    useEffect(() => {
+        if (!hasMatchMedia())
+            return;
+        const query = window.matchMedia(MEDIA);
+        const onChange = () => setReduced(query.matches);
+        query.addEventListener("change", onChange);
+        return () => query.removeEventListener("change", onChange);
+    }, []);
+    return reduced;
+};
+/** 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 },
+});

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

@@ -0,0 +1,43 @@
+import { overlayScrim } from "../tokens/builders/scrim.js";
+import { raisedRule } from "../tokens/builders/surfaceRaised.js";
+export const OVERLAY_BLUR = "blur(4px)";
+/** The one Modal/Drawer backdrop; reuse it for any custom full-screen scrim. */
+export const overlayScrimStyles = (colors) => ({
+    bg: overlayScrim(colors),
+    backdropFilter: OVERLAY_BLUR,
+});
+/** Shared dialog chrome for Modal and Drawer: surface, header/body/footer rhythm, close button. */
+export const dialogPartStyles = (colors) => ({
+    overlay: overlayScrimStyles(colors),
+    dialog: {
+        color: colors.text[900],
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: colors.boxborder[200],
+        boxShadow: "lg",
+    },
+    header: {
+        px: 5,
+        py: 4,
+        pe: 12,
+        fontSize: "1rem",
+        fontWeight: 600,
+        lineHeight: 1.5,
+        color: colors.header[900],
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: raisedRule(colors),
+    },
+    closeButton: { top: 3, insetEnd: 4 },
+    body: { px: 5, py: 4 },
+    footer: {
+        px: 5,
+        py: 4,
+        display: "flex",
+        justifyContent: "flex-end",
+        gap: 3,
+        borderTopWidth: "1px",
+        borderTopStyle: "solid",
+        borderTopColor: raisedRule(colors),
+    },
+});

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

@@ -2,8 +2,5 @@ import { assertPixelizePalette } from "../assertPalette.js";
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 export const paletteOf = (theme) => assertPixelizePalette(theme);
 const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-/**
- * `colorScheme` is a consumer-supplied Chakra scale name, so this lookup is genuinely dynamic —
- * it can name a built-in we never themed. An unknown name resolves to the neutral ramp.
- */
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns resolve to gray.
 export const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };

package/dist/esm/Theme/index.js

@@ -1,11 +1,6 @@
 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`.
- *
- * These used to be seven near-identical `<Brand>/theme.ts` files that differed only in
- * which palette they imported; `createBrandTheme` is that shared body.
- */
+// Chakra themes per brand, built from the pure palettes in tokens/brands via createBrandTheme.
 const lavender = createBrandTheme(lightPalettes.lavender);
 const meadow = createBrandTheme(lightPalettes.meadow);
 const radiant = createBrandTheme(lightPalettes.radiant);
@@ -16,12 +11,7 @@ const rosewood = createBrandTheme(lightPalettes.rosewood);
 const storefront = createBrandTheme(lightPalettes.storefront);
 const zinc = createBrandTheme(lightPalettes.zinc);
 export { skyline, meadow, radiant, lavender, slate, emerald, rosewood, storefront, zinc };
-/**
- * Published contract — consumers iterate this to render theme pickers, so both the keys
- * and their order are load-bearing. Stays light-only: these are the exact theme objects
- * apps already pass to `withTheme`, and dark is opt-in via `PixelizeThemeProvider`.
- * `storefront`/`zinc` are appended at the end — additive, doesn't reorder existing entries.
- */
+// NOTE: consumers iterate this to render theme pickers — key order is load-bearing. Stays light-only.
 export const ThemesList = {
     lavender: lavender,
     meadow: meadow,
@@ -33,12 +23,7 @@ export const ThemesList = {
     storefront: storefront,
     zinc: zinc,
 };
-/**
- * `dark` is built on first read, not at import. Nine `createBrandTheme` calls measure ~15ms on a
- * dev machine, and a light-only app (tickets, and every app before it opts in) never reads one.
- * A getter — rather than a lazy map — keeps `Object.keys(brandThemes)` and its order intact,
- * which `ThemeSwitcher` iterates to render the brand picker.
- */
+// NOTE: dark is built on first read via a getter, not at import — keeps Object.keys() order intact for ThemeSwitcher.
 const withLazyDark = (brand, light) => {
     let dark;
     return {

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

@@ -7,20 +7,7 @@ import { getSystemColorMode, readStoredTheme, subscribeToSystemColorMode, writeS
 const DEFAULT_BRAND = "lavender";
 const DEFAULT_MODE = "system";
 const DEFAULT_STORAGE_KEY = "pixelize-theme";
-/**
- * Chakra's default `colorModeManager` reads/writes its OWN `localStorage["chakra-ui-color-mode"]`
- * key — entirely separate from this app's `storageKey` above — and that stored value wins over
- * `theme.config.initialColorMode` on every load. `createBrandTheme` sets `initialColorMode: "light"`
- * on every theme object specifically so Chakra's native dark mode (and every un-migrated built-in
- * `_dark:` block — Card's "elevated" variant reaches for `gray.700`, which our reversed dark ramp
- * makes LIGHT) never fires. But a stale `"dark"` value in that key — from Chakra's own toggle ever
- * having been used on this origin, by this app or a prior version of it — silently overrides that
- * default and reintroduces exactly the bug `initialColorMode: "light"` was meant to prevent: a
- * washed-out light Card on an otherwise-correct dark canvas, while everything reading the palette
- * directly (i.e. everything else) stays right. Forcing this manager to always report `"light"` and
- * never persist removes Chakra's native color mode from the equation entirely, so no stray
- * `_dark:` block anywhere (present or future) can ever fire, regardless of what's in storage.
- */
+// NOTE: forces Chakra's own color mode to "light" always — a stale chakra-ui-color-mode key would otherwise re-fire un-migrated `_dark:` blocks.
 const forcedLightColorModeManager = {
     type: "localStorage",
     ssr: false,
@@ -28,27 +15,10 @@ const forcedLightColorModeManager = {
     set: () => { },
 };
 export const ThemeModeContext = createContext(undefined);
-/**
- * Chakra's own color mode is deliberately NOT synced to `resolvedMode`, and must not be.
- *
- * This provider adapts for dark by swapping the palette, so `theme.colors` is already correct for
- * the active mode. Putting Chakra into dark mode on top of that adapts a second time: its built-in
- * `_dark` blocks reach for `gray.700`/`gray.800` expecting those rungs to be dark, but our dark
- * ramp runs dark -> light, so they resolve LIGHT — a white Card/Skeleton/Menu on a dark canvas.
- * A previous revision synced it to keep `useColorModeValue()` working and shipped exactly that.
- *
- * Consequence for consumers: `useColorModeValue(light, dark)` always returns its LIGHT argument.
- * That is correct here — the palette has already resolved the mode, so the "light" argument is
- * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
- * unaffected: they are light-only, where that argument was always the one returned anyway.
- */
+// 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, }) => {
-    // Seed from storage during the first render: StrictMode re-runs the persist effect, and a
-    // ref guard cannot stop that second pass writing defaults over the stored value.
     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; });
-    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
-    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
     const [systemMode, setSystemMode] = useState(getSystemColorMode);
     useEffect(() => {
         setSystemMode(getSystemColorMode());
@@ -63,12 +33,6 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         if (stored.brand)
             setBrandState(stored.brand);
     }, [disablePersistence, storageKey]);
-    // `brandProp` only seeds initial state above, so a consumer that re-renders with a new
-    // `brand` prop after mount (e.g. persisting the pick through its own store, like tickets'
-    // Settings page dispatching Redux instead of calling `setBrand`) would otherwise never see
-    // it applied. Sync it here instead so every consumer gets it for free.
-    // Compare the previous prop, never a "first run" flag: StrictMode double-invokes effects while
-    // refs survive, so a flag guard lets pass 2 reset state to the prop and clobber stored values.
     const prevBrandProp = useRef(brandProp);
     useEffect(() => {
         if (prevBrandProp.current === brandProp)
@@ -76,8 +40,6 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         prevBrandProp.current = brandProp;
         setBrandState(brandProp);
     }, [brandProp]);
-    // Same prop-sync for the mode, so an app owning it in its own store no longer needs the
-    // `mode` -> store mirror effect that deadlocks against this one.
     const prevModeProp = useRef(defaultMode);
     useEffect(() => {
         if (prevModeProp.current === defaultMode)
@@ -85,8 +47,6 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         prevModeProp.current = defaultMode;
         setModeState(defaultMode);
     }, [defaultMode]);
-    // Skipping the mount run keeps the defaults from being written over a stored value before
-    // the rehydrate effect above has applied it.
     const isFirstPersistRun = useRef(true);
     useEffect(() => {
         if (isFirstPersistRun.current) {
@@ -98,26 +58,14 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         writeStoredTheme(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
-    /**
-     * Native browser UI (the `<select>` dropdown popup chrome, the `<input type="date">` calendar
-     * picker) is painted by the browser's own UA stylesheet keyed off the CSS `color-scheme`
-     * property, entirely separate from Chakra/React theming — no component style or palette swap
-     * above can reach it. Without this, that chrome always renders light, even on an otherwise dark
-     * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
-     * light-only, see the module doc's "Key rules" — are untouched.
-     */
+    // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
     useLayoutEffect(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
-    // Chakra's ColorModeProvider re-writes color-scheme in a passive effect, after the layout
-    // effect above, and forcedLightColorModeManager pins it to "light". Re-assert after it.
+    // NOTE: re-asserted after Chakra's own ColorModeProvider effect overwrites it back to "light".
     useEffect(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
-    // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
-    // invalidate the context value on every render of the consuming app. Written in a layout
-    // effect, not during render — a render-phase write is unsafe under StrictMode's double
-    // invocation, and this still lands before any click handler can fire.
     const onModeChangeRef = useRef(onModeChange);
     const onBrandChangeRef = useRef(onBrandChange);
     useLayoutEffect(() => {
@@ -134,30 +82,16 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         setBrandState(next);
         (_a = onBrandChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBrandChangeRef, next);
     }, []);
-    // From "system", flip to the opposite of what the OS currently gives, so a click always
-    // visibly changes the UI.
     const toggle = useCallback(() => setMode(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode, setMode]);
     const value = useMemo(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
-    // `themeOverrides` is caller-supplied, and the idiomatic way to pass it is an inline object
-    // literal — a new identity every render. Keying the memo on identity would re-run `extendTheme`
-    // and hand `ChakraProvider` a new theme on every render of the consuming app, invalidating
-    // emotion's style resolution for everything beneath it. Compare by value instead.
+    // 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;
-        // Keyed on the serialized overrides, not their identity. `brand`/`resolvedMode` must stay:
-        // overrides re-layer onto the CURRENT palette (see the prop's doc comment above).
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [brand, resolvedMode, overridesKey]);
-    /**
-     * The library ships its `var(--color-*)` tokens light-only on `:root` (global.css), so any
-     * consumer that styles with those CSS vars rather than Chakra tokens stays light in dark mode —
-     * invisible text on the dark canvas, white panels. In dark, re-point every used var at the
-     * already-dark-correct resolved palette; in light, clear them so the static `:root` values apply
-     * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
-     * `data-mode` for consumers that want to hook their own dark CSS.
-     */
+    // 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;
@@ -169,8 +103,6 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         ];
         const SEMANTIC_SCALES = ["success", "error", "warning", "info"];
         const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-        // The dark gray ramp runs dark(50) → light(900), so low rungs read as surfaces
-        // and high rungs as text — correct in dark, cleared in light.
         const SEMANTIC_VARS = {
             "text-heading": gray[900], "text-body": gray[700],
             "text-subtle": gray[500], "text-input": gray[500],

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from "react";
+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 { useCustomTheme } from "../useCustomTheme.js";
 import { useThemeMode } from "./useThemeMode.js";
+import { focusGlowShadow, focusVisibleRing } from "../chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../tokens/builders/outlineRung.js";
 const MODE_OPTIONS = [
     { value: "light", label: "Light", Icon: Sun },
     { value: "system", label: "System", Icon: Monitor },
@@ -16,18 +18,13 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-/**
- * Same swatch each brand's own theme carries at `colors.primary[500]` (the
- * anchor a filled button reads) — resolved per brand from its OWN palette so
- * the dot always matches what selecting that brand actually looks like,
- * regardless of which brand/mode is currently active.
- */
+// 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];
-const BrandSwatch = ({ brand }) => (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
-/**
- * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
- * are read straight from the active theme — no `useColorModeValue` pairing needed here.
- */
+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 }));
+};
+// Palette already differs per mode, so tokens read straight from the active theme — no useColorModeValue needed.
 const useSwitcherColors = () => {
     const { colors } = useCustomTheme();
     return {
@@ -36,28 +33,33 @@ const useSwitcherColors = () => {
         activeColor: colors.primary[500],
         mutedColor: colors.text[600],
         hoverBg: colors.gray[100],
-        borderColor: colors.border[200],
+        borderColor: colors.boxborder[200],
         // NOTE: menuBg lives in Menu.styles.ts — re-pushing it via `sx` flickers on every render.
         menuColor: colors.text[900],
+        focusRing: focusVisibleRing(colors),
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = useThemeMode();
-    const { mutedColor, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor, focusRing } = useSwitcherColors();
     const brands = Object.keys(brandThemes);
-    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: brand }), _jsx(Text, { as: "span", children: toBrandLabel(brand) })] }) }), _jsx(MenuList, { minW: "9rem", color: menuColor, children: _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: focusRing, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: brand }), _jsx(Text, { as: "span", children: toBrandLabel(brand) })] }) }), _jsx(MenuList, { minW: "9rem", color: menuColor, children: _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = useThemeMode();
-    const { mutedColor, hoverBg } = useSwitcherColors();
+    const { mutedColor, hoverBg, focusRing } = useSwitcherColors();
     const isDark = resolvedMode === "dark";
     const Icon = isDark ? Moon : Sun;
     const accessibleLabel = label !== null && label !== void 0 ? label : `Switch to ${isDark ? "light" : "dark"} mode`;
-    return (_jsx(Tooltip, { label: accessibleLabel, openDelay: 400, children: _jsx(IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }) }));
+    return (_jsx(Tooltip, { label: accessibleLabel, openDelay: 400, children: _jsx(IconButton, { "aria-label": accessibleLabel, "aria-pressed": isDark, icon: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), onClick: toggle, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }) }));
 };
 const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
     const { mode, setMode } = useThemeMode();
     const { trackBg, activeBg, activeColor, mutedColor, borderColor } = useSwitcherColors();
+    const { colors } = useCustomTheme();
+    // One tab stop, so the group wears the indicator: brand border plus the field bloom.
+    const focusBorder = liftToContrast(colors.primary[500], trackBg, AA_NON_TEXT);
+    const [showFocus, setShowFocus] = useState(false);
     const optionRefs = useRef([]);
     // APG radiogroup behavior: arrows move focus and selection together.
     const handleKeyDown = (event, index) => {
@@ -71,20 +73,20 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
         setMode(MODE_OPTIONS[next].value);
         (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return (_jsxs(HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: borderColor, borderRadius: "full", children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
+    return (_jsxs(HStack, { role: "radiogroup", "aria-label": label !== null && label !== void 0 ? label : "Color mode", display: "inline-flex", spacing: 1, p: "0.25rem", bg: trackBg, border: "0.063rem solid", borderColor: showFocus ? focusBorder : borderColor, boxShadow: showFocus ? focusGlowShadow(colors) : undefined, borderRadius: "full", onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), children: [MODE_OPTIONS.map(({ value, label: optionLabel, Icon }, index) => {
                 const isSelected = mode === value;
                 return (_jsx(Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { boxShadow: "outline" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: _jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && _jsx(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = useThemeMode();
-    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor, focusRing } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(brandThemes);
-    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: _jsx(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), _jsxs(MenuList, { minW: "10rem", color: menuColor, children: [_jsx(MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => (_jsx(MenuItemOption, { value: value, children: _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), _jsx(Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
+    return (_jsxs(Menu, { children: [_jsx(MenuButton, { as: IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: _jsx(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: focusRing }), _jsxs(MenuList, { minW: "10rem", color: menuColor, children: [_jsx(MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => (_jsx(MenuItemOption, { value: value, children: _jsxs(HStack, { spacing: 2, children: [_jsx(Icon, { size: SIZES[size].icon, "aria-hidden": true }), _jsx(Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && (_jsxs(_Fragment, { children: [_jsx(MenuDivider, {}), _jsx(MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => (_jsx(MenuItemOption, { value: option, children: _jsxs(HStack, { spacing: 2, children: [_jsx(BrandSwatch, { brand: option }), _jsx(Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 export const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

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

@@ -1,8 +1,5 @@
 const DARK_QUERY = "(prefers-color-scheme: dark)";
-/**
- * Stored values are untrusted input — a stale or hand-edited entry must never reach
- * `brandThemes[brand]` and hand Chakra an `undefined` theme.
- */
+// NOTE: stored values are untrusted — a stale/hand-edited entry must never reach brandThemes[brand] as undefined.
 const VALID_MODES = ["light", "dark", "system"];
 const VALID_BRANDS = [
     "lavender",

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

@@ -1,8 +1,4 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import light from "./palette.light.js";
-/**
- * Dark palette for the emerald brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = buildDarkPalette(light);
 export default palette;

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

@@ -18,10 +18,7 @@ const primary = {
 const palette = {
     ...neutralTokens,
     ...buildBrandInk(PRIMARY_500),
-    // Stops retuned so white gradient-button text (onGradient, accentText.ts) clears AA at both
-    // ends — the original pair let white drop to 3.38/2.43 against from/to. Same hue, darker.
-    // Both nudged one step further (4.537/4.515 -> 4.618/4.616): the first pass cleared AA by
-    // <0.02, too thin a margin to trust against rounding/rendering variance.
+    // NOTE: stops retuned so white gradient-button text clears AA at both ends — original let it drop to 3.38/2.43.
     gradient: { from: "#0d8474", to: "#048096" }, // teal → cyan
     primary,
     // 🌫️ Neutral gray (slightly cool to match teal)
@@ -31,12 +28,7 @@ const palette = {
         200: "#dce5e5",
         300: "#c3d2d2",
         400: "#9fb3b3",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#617474",
         600: "#5e7070",
         700: "#475555",

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

@@ -22,7 +22,9 @@ import { withSidebarTokens } from "../builders/sidebarAccent.js";
 import { buildMutedText } from "../builders/mutedText.js";
 import { buildSemanticText, buildOnSemantic } from "../builders/semanticText.js";
 import { withPlaceholderRung, withTableHoverRung } from "../builders/resolvedRungs.js";
+import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
+import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
@@ -32,10 +34,13 @@ export const finalizeLightPalette = (source) => ({
     semanticText: buildSemanticText(source.semantic, source.backgroundColor.main),
     onPrimary: onFilled(source.primary[500], source.white, source.black),
     onSemantic: buildOnSemantic(source.semantic, source.white, source.black),
+    focusRing: buildFocusRing(source),
+    surfaceRaised: buildSurfaceRaised(source),
 });
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-const resolveRungs = (palette) => withSurfaceRungs(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))));
+// 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. */
 export const lightPalettes = {

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

@@ -1,8 +1,4 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import light from "./palette.light.js";
-/**
- * Dark palette for the lavender brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = buildDarkPalette(light);
 export default palette;

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

@@ -1,4 +1,5 @@
 import { buildPrimaryOpacity, buildPrimaryShadowTint } from "../../builders/buildBrandTokens.js";
+import { rotateScaleHue } from "../../builders/brandInk.js";
 import { neutralTokens, sharedBoxShadow } from "../neutrals.js";
 const PRIMARY_500 = "#8B3FC8";
 const SECONDARY_ANCHOR = "#1e0f30";
@@ -28,19 +29,14 @@ const secondary = {
     900: "#08030b",
     opacity: buildPrimaryOpacity(SECONDARY_ANCHOR),
 };
-const tertiary = { ...secondary };
+const tertiary = { ...rotateScaleHue(secondary), opacity: secondary.opacity };
 const gray = {
     50: "#f9f7fb",
     100: "#f0eaf6",
     200: "#e4d9f0",
     300: "#cdbde3",
     400: "#a897cc",
-    // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-    // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-    // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-    // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-    // none pair them with gray[500] text; going dark enough to also clear those would push
-    // past gray[600]'s own lightness and break the ramp order.
+    // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
     500: "#746499",
     600: "#5e527a",
     700: "#4a4060",
@@ -142,12 +138,7 @@ const boxborder = {
     800: "#6d6879",
     900: "#52505b",
 };
-/**
- * The low rungs sat two steps too pale to draw anything: `200` — the default hairline for
- * cards, dividers and inputs — was L94 against a L98 canvas, so a card had no visible edge.
- * It now lands at L88, contrast 1.22 against a white card, matching Chakra's gray.200 hairline.
- * Rungs 700+ are unchanged; they were never the problem.
- */
+// NOTE: 200 lifted to L88 (was L94, invisible against an L98 canvas) — matches Chakra's gray.200 hairline.
 const border = {
     50: "#f6f4f9",
     100: "#ede9f4",

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

@@ -1,8 +1,4 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import light from "./palette.light.js";
-/**
- * Dark palette for the meadow brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = buildDarkPalette(light);
 export default palette;

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

@@ -18,25 +18,16 @@ const primary = {
 const palette = {
     ...neutralTokens,
     ...buildBrandInk(PRIMARY_500),
-    // `to` stop retuned so white gradient-button text (onGradient, accentText.ts) clears AA — the
-    // original let white drop to 2.49 there (`from` already passed at 6.39, unchanged).
-    // Nudged one step further (4.519 -> 4.627): the first pass cleared AA by <0.02, too thin a
-    // margin to trust against rounding/rendering variance.
+    // NOTE: `to` stop retuned so white gradient-button text clears AA — original let it drop to 2.49.
     gradient: { from: "#2d6a4f", to: "#0f8376" }, // forest green → teal
     primary,
-    tertiary: { ...primary },
     gray: {
         50: "#f6f9f7",
         100: "#ecf1ee",
         200: "#dce5e0",
         300: "#c4d2cb",
         400: "#93a99f",
-        // Retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff — a value that
-        // clears AA by <0.02 is treated as failing, see Wave D QA follow-up) against every
-        // backgroundColor surface it's actually rendered on (main/secondary/light/subtle —
-        // verified via usage grep). muted/accent/tertiary/etc. have 0-1 live call sites today and
-        // none pair them with gray[500] text; going dark enough to also clear those would push
-        // past gray[600]'s own lightness and break the ramp order.
+        // NOTE: retuned to clear AA with a safe >=4.6 margin (not the bare 4.5 cutoff) against live backgroundColor surfaces.
         500: "#5c7369",
         600: "#445f52",
         700: "#344a3f",

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

@@ -1,8 +1,4 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
 import light from "./palette.light.js";
-/**
- * Dark palette for the radiant brand, derived from its own light palette so the brand hue
- * carries through. Override individual tokens here if this brand needs a bespoke dark value.
- */
 const palette = buildDarkPalette(light);
 export default palette;