@tristan2828/ui-foundation 4.62.0 → 4.63.1

package/dist/components/ui/input.js

@@ -3,6 +3,6 @@ import * as React from "react";
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import { cn } from "cn";
 function Input({ className, type, ...props }) {
-    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Input };

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,7 @@
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+declare function Progress({ className, children, value, ...props }: ProgressPrimitive.Root.Props): import("react").JSX.Element;
+declare function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props): import("react").JSX.Element;
+declare function ProgressIndicator({ className, ...props }: ProgressPrimitive.Indicator.Props): import("react").JSX.Element;
+declare function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props): import("react").JSX.Element;
+declare function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props): import("react").JSX.Element;
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/components/ui/progress.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import { cn } from "cn";
+function Progress({ className, children, value, ...props }) {
+    return (_jsxs(ProgressPrimitive.Root, { value: value, "data-slot": "progress", className: cn("flex flex-wrap gap-3", className), ...props, children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
+}
+function ProgressTrack({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Track, { className: cn("relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted", className), "data-slot": "progress-track", ...props }));
+}
+function ProgressIndicator({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full bg-primary transition-all", className), ...props }));
+}
+function ProgressLabel({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Label, { className: cn("text-sm font-medium", className), "data-slot": "progress-label", ...props }));
+}
+function ProgressValue({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Value, { className: cn("ml-auto text-sm text-muted-foreground tabular-nums", className), "data-slot": "progress-value", ...props }));
+}
+export { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, };

package/dist/components/ui/select.js

@@ -12,7 +12,7 @@ function SelectValue({ className, ...props }) {
     return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn("flex flex-1 text-left", className), ...props }));
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: "isolate z-50", children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, className: cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));

package/dist/components/ui/sheet.js

@@ -18,7 +18,7 @@ function SheetPortal({ ...props }) {
     return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({ className, ...props }) {
-    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), ...props }));
+    return (_jsx(SheetPrimitive.Backdrop, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/20 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-sm dark:bg-black/40", className), ...props }));
 }
 function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
     return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { "data-slot": "sheet-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-3 right-3", size: "icon-sm" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));

package/dist/components/ui/slider.d.ts

@@ -0,0 +1,3 @@
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react").JSX.Element;
+export { Slider };

package/dist/components/ui/slider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import { cn } from "cn";
+function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
+    const _values = Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+            ? defaultValue
+            : [min, max];
+    return (_jsx(SliderPrimitive.Root, { className: cn("data-horizontal:w-full data-vertical:h-full", className), "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, thumbAlignment: "edge", ...props, children: _jsxs(SliderPrimitive.Control, { className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col", children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1", children: _jsx(SliderPrimitive.Indicator, { "data-slot": "slider-range", className: "bg-primary select-none data-horizontal:h-full data-vertical:w-full" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] palette:shadow-(--thumb-glow) select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50" }, index)))] }) }));
+}
+export { Slider };

package/dist/components/ui/textarea.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "cn";
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Textarea };

package/dist/hooks/use-palette.d.ts

@@ -0,0 +1,14 @@
+import type { PaletteName } from '../lib/palettes.js';
+export type PaletteState = {
+    /** The palette on screen, or null for an app without one (light and dark as the system says). */
+    palette: PaletteName | null;
+    /** The app's own default. */
+    defaultPalette: PaletteName | null;
+    /** Whether this app lets a device pick (FoundationProviders' `palettePicker`). */
+    picker: boolean;
+    /** Saves `palette` as this device's choice. Does nothing without the picker. */
+    setPalette: (palette: PaletteName) => void;
+};
+export declare const PaletteContext: import("react").Context<PaletteState>;
+/** The palette on screen and, with the picker on, a way to change it on this device. */
+export declare function usePalette(): PaletteState;

package/dist/hooks/use-palette.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+const NO_PALETTE = { palette: null, defaultPalette: null, picker: false, setPalette: () => { } };
+export const PaletteContext = createContext(NO_PALETTE);
+/** The palette on screen and, with the picker on, a way to change it on this device. */
+export function usePalette() {
+    return useContext(PaletteContext);
+}

package/dist/index.d.ts

@@ -76,6 +76,8 @@ export { useWakeLock } from './hooks/use-wake-lock.js';
 export { useSessionClock, type SessionClock, type SessionClockOptions, type SessionClockState, type SessionStatus, } from './hooks/use-session-clock.js';
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion.js';
 export { useMuted } from './hooks/use-muted.js';
+export { usePalette, type PaletteState } from './hooks/use-palette.js';
+export { PALETTE_LABELS, PALETTE_STORAGE_KEY, PALETTES, isPaletteName, type PaletteName } from './lib/palettes.js';
 export { createPushController, usePushPermission, type PushController, type PushControllerOptions, type PushEnvironment, type PushPermission, type PushStatus, } from './hooks/use-push-permission.js';
 export { cn } from './lib/utils.js';
 export { canVibrate, cancelCues, chime, cuesInSync, hush, onCuesRecovered, say, sequence, unlockAudio, vibrate, type ChimeOptions, type Cue, type CueTime, type SayOptions, type SequenceOptions, } from './lib/audio-cues.js';

package/dist/index.js

@@ -79,6 +79,8 @@ export { useWakeLock } from './hooks/use-wake-lock.js';
 export { useSessionClock, } from './hooks/use-session-clock.js';
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion.js';
 export { useMuted } from './hooks/use-muted.js';
+export { usePalette } from './hooks/use-palette.js';
+export { PALETTE_LABELS, PALETTE_STORAGE_KEY, PALETTES, isPaletteName } from './lib/palettes.js';
 export { createPushController, usePushPermission, } from './hooks/use-push-permission.js';
 // Utilities
 export { cn } from './lib/utils.js';

package/dist/lib/palettes.d.ts

@@ -0,0 +1,21 @@
+export declare const PALETTES: readonly ["indigo-cyan", "indigo-rose", "graphite-periwinkle", "violet"];
+export type PaletteName = (typeof PALETTES)[number];
+/** Each palette's name as a person reads it, in the guide's ranked order. */
+export declare const PALETTE_LABELS: Record<PaletteName, string>;
+/** Where a device's chosen palette is kept. */
+export declare const PALETTE_STORAGE_KEY = "ui-foundation:palette";
+export declare function isPaletteName(value: unknown): value is PaletteName;
+type StorageLike = Pick<Storage, 'getItem' | 'setItem'>;
+export type PaletteStore = {
+    /** The saved choice, or null when there is none (or storage is blocked, or it names no palette). */
+    get: () => PaletteName | null;
+    set: (palette: PaletteName) => void;
+    subscribe: (listener: () => void) => () => void;
+    /** Another tab saved a choice: forget the in-memory one and re-read. */
+    changedElsewhere: () => void;
+};
+/** The store under usePalette, taking the storage so its rules are unit tested (tests/palettes.test.ts). */
+export declare function createPaletteStore(getStorage: () => StorageLike | undefined): PaletteStore;
+export declare const browserPaletteStore: PaletteStore;
+export declare function subscribeToBrowserPaletteStore(listener: () => void): () => void;
+export {};

package/dist/lib/palettes.js

@@ -0,0 +1,74 @@
+// The four palettes (design-language.md "Palettes"): an app's own dark
+// look, one of those the shared style guide chose. FoundationProviders'
+// `palette` names the app's default; with `palettePicker` the app shell
+// offers all four and the choice is remembered on this device
+// (localStorage, this store). A new device starts on the default. The
+// palette rides on <html> as data-palette, so popups portaled to <body>
+// wear it too, and styles/theme.css's `.dark[data-palette]` blocks do the
+// rest (components/app/palette-provider.tsx, hooks/use-palette.ts).
+export const PALETTES = ['indigo-cyan', 'indigo-rose', 'graphite-periwinkle', 'violet'];
+/** Each palette's name as a person reads it, in the guide's ranked order. */
+export const PALETTE_LABELS = {
+    'indigo-cyan': 'Indigo and Cyan',
+    'indigo-rose': 'Indigo and Rose',
+    'graphite-periwinkle': 'Graphite and Periwinkle',
+    violet: 'Violet',
+};
+/** Where a device's chosen palette is kept. */
+export const PALETTE_STORAGE_KEY = 'ui-foundation:palette';
+export function isPaletteName(value) {
+    return typeof value === 'string' && PALETTES.includes(value);
+}
+/** The store under usePalette, taking the storage so its rules are unit tested (tests/palettes.test.ts). */
+export function createPaletteStore(getStorage) {
+    // What this page chose, for when storage refuses it.
+    let memory = null;
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    return {
+        get() {
+            if (memory)
+                return memory;
+            try {
+                const stored = getStorage()?.getItem(PALETTE_STORAGE_KEY);
+                return isPaletteName(stored) ? stored : null;
+            }
+            catch {
+                return null;
+            }
+        },
+        set(palette) {
+            memory = palette;
+            try {
+                getStorage()?.setItem(PALETTE_STORAGE_KEY, palette);
+            }
+            catch {
+                // Storage blocked or full: kept for this page only.
+            }
+            notify();
+        },
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        changedElsewhere() {
+            memory = null;
+            notify();
+        },
+    };
+}
+export const browserPaletteStore = createPaletteStore(() => (typeof window === 'undefined' ? undefined : window.localStorage));
+let listeningForOtherTabs = false;
+export function subscribeToBrowserPaletteStore(listener) {
+    if (!listeningForOtherTabs && typeof window !== 'undefined') {
+        listeningForOtherTabs = true;
+        window.addEventListener('storage', (event) => {
+            if (event.key === PALETTE_STORAGE_KEY || event.key === null)
+                browserPaletteStore.changedElsewhere();
+        });
+    }
+    return browserPaletteStore.subscribe(listener);
+}

package/dist/testing/index.d.ts

@@ -1,5 +1,6 @@
 import { expect, type Page } from '@playwright/test';
 import { type NavEntry } from '../components/app/app-shell-nav.js';
+import { type PaletteName } from '../lib/palettes.js';
 import type { MswOverride } from '../mocks/override.js';
 export type { MswHandle, MswOverride } from '../mocks/override.js';
 export { expect };
@@ -81,6 +82,13 @@ export type A11ySuiteOptions = {
      * the check in one file that passes the whole nav.
      */
     checkSidebar?: boolean;
+    /**
+     * For an app with a palette (`<FoundationProviders palette>`), which is
+     * dark only: the palettes to check instead of light and dark, each saved
+     * as the device's choice before the page loads. Pass the app's default on
+     * every spec and all of `PALETTES` on one (the shell's).
+     */
+    palettes?: readonly PaletteName[];
 };
 /**
  * Every data view on the page has loaded: at least one shows its data (or,
@@ -103,9 +111,10 @@ export declare function expectDataViewsLoaded(page: Page, { success }?: {
  * one file keeps the whole-sidebar check. axe's
  * color-contrast rule against the rendered dark DOM is also what keeps the
  * dark-mode tokens readable. The theme follows the OS setting, so
- * emulateMedia switches it.
+ * emulateMedia switches it. An app with a palette passes `palettes`, and
+ * each is checked (dark) in place of light and dark.
  */
-export declare function defineA11ySuite({ formRoutes, viewRoutes, loggedOutRoutes, nav, checkSidebar, }: A11ySuiteOptions): void;
+export declare function defineA11ySuite({ formRoutes, viewRoutes, loggedOutRoutes, nav, checkSidebar, palettes, }: A11ySuiteOptions): void;
 export type MockModeBannerSuiteOptions = {
     /** Screens to check, logged-out ones included (e.g. '/login'). */
     routes: readonly string[];
@@ -137,6 +146,8 @@ export type DataEnvironmentBannerSuiteOptions = {
      * (production data, so no banner).
      */
     dataLabel?: string | null;
+    /** For an app with a palette: the palettes to check the banner in, in place of light and dark (as for `defineA11ySuite`). */
+    palettes?: readonly PaletteName[];
 };
 /**
  * DataEnvironmentBanner: shown on every route, logged-out ones included,
@@ -151,4 +162,4 @@ export type DataEnvironmentBannerSuiteOptions = {
  * route, or is absent when it's null, which is how a production deploy
  * runs.
  */
-export declare function defineDataEnvironmentBannerSuite({ routes, mockMode, dataLabel, }: DataEnvironmentBannerSuiteOptions): void;
+export declare function defineDataEnvironmentBannerSuite({ routes, mockMode, dataLabel, palettes, }: DataEnvironmentBannerSuiteOptions): void;

package/dist/testing/index.js

@@ -14,6 +14,7 @@
 import AxeBuilder from '@axe-core/playwright';
 import { expect, test as base } from '@playwright/test';
 import { navPathname, navTargets } from '../components/app/app-shell-nav.js';
+import { PALETTE_STORAGE_KEY } from '../lib/palettes.js';
 export { expect };
 // A page load returns at the load event, but the app isn't up yet: React
 // renders only after MSW's worker.start(), which took up to 2.4 s past
@@ -174,6 +175,34 @@ async function navRoutes(page, isMobile) {
 // The pages a list of routes names, by path: a `to` that opens a list on a
 // saved view ('/widgets?status=active') is the /widgets page.
 const pagePaths = (routes) => [...new Set(routes.map(navPathname))].sort();
+function a11yThemes(palettes) {
+    if (palettes?.length)
+        return palettes.map((palette) => ({ label: palette, colorScheme: 'dark', palette }));
+    return [
+        { label: 'light', colorScheme: 'light' },
+        { label: 'dark', colorScheme: 'dark' },
+    ];
+}
+/** Puts the page in a theme: the OS colour scheme, and the palette saved as this device's choice before any script runs. */
+async function applyTheme(page, theme) {
+    await page.emulateMedia({ colorScheme: theme.colorScheme });
+    if (theme.palette) {
+        await page.addInitScript(([key, value]) => {
+            try {
+                window.localStorage.setItem(key, value);
+            }
+            catch {
+                // Storage blocked: the app falls back to its default palette.
+            }
+        }, [PALETTE_STORAGE_KEY, theme.palette]);
+    }
+}
+/** The theme is on the page: its class on <html>, and its palette. */
+async function expectTheme(page, theme) {
+    await expect(page.locator('html')).toHaveClass(theme.colorScheme);
+    if (theme.palette)
+        await expect(page.locator('html')).toHaveAttribute('data-palette', theme.palette);
+}
 // A page's share of the one discovering test's time: load, data, axe.
 const NAV_PAGE_BUDGET_MS = 10_000;
 /**
@@ -194,9 +223,9 @@ export async function expectDataViewsLoaded(page, { success = true } = {}) {
         await expect(page.getByRole('main').first()).toBeVisible();
     await expect(page.locator('[data-state="loading"]')).toHaveCount(0);
 }
-async function expectNavPageAccessible(page, route, colorScheme) {
+async function expectNavPageAccessible(page, route, theme) {
     await page.goto(route);
-    await expect(page.locator('html')).toHaveClass(colorScheme);
+    await expectTheme(page, theme);
     // Wait for data, not the loading skeleton, so the real UI is checked. A
     // nav page may have no data view, or only an empty one, so none has to
     // show data.
@@ -212,9 +241,10 @@ async function expectNavPageAccessible(page, route, colorScheme) {
  * one file keeps the whole-sidebar check. axe's
  * color-contrast rule against the rendered dark DOM is also what keeps the
  * dark-mode tokens readable. The theme follows the OS setting, so
- * emulateMedia switches it.
+ * emulateMedia switches it. An app with a palette passes `palettes`, and
+ * each is checked (dark) in place of light and dark.
  */
-export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes = [], nav, checkSidebar = true, }) {
+export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes = [], nav, checkSidebar = true, palettes, }) {
     // Each `to` as given, query string and all, so a page that opens on a
     // saved view is checked on it.
     const listed = nav && navTargets(nav);
@@ -224,15 +254,15 @@ export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes =
             expect(pagePaths(rendered), 'The sidebar and the nav given to defineA11ySuite differ: pass the same NavEntry[] AppShell gets').toEqual(pagePaths(listed));
         });
     }
-    for (const colorScheme of ['light', 'dark']) {
-        test.describe(`accessibility (${colorScheme})`, () => {
+    for (const theme of a11yThemes(palettes)) {
+        test.describe(`accessibility (${theme.label})`, () => {
             test.beforeEach(async ({ page }) => {
-                await page.emulateMedia({ colorScheme });
+                await applyTheme(page, theme);
             });
             if (listed) {
                 for (const route of listed) {
                     test(`nav page ${route} has zero axe violations`, async ({ page }) => {
-                        await expectNavPageAccessible(page, route, colorScheme);
+                        await expectNavPageAccessible(page, route, theme);
                     });
                 }
             }
@@ -242,7 +272,7 @@ export function defineA11ySuite({ formRoutes, viewRoutes = [], loggedOutRoutes =
                     // One test for every page: its time grows with the app.
                     test.setTimeout(testInfo.timeout + routes.length * NAV_PAGE_BUDGET_MS);
                     for (const route of routes) {
-                        await test.step(route, () => expectNavPageAccessible(page, route, colorScheme));
+                        await test.step(route, () => expectNavPageAccessible(page, route, theme));
                     }
                 });
             }
@@ -326,7 +356,7 @@ async function gotoWithDataLabel(page, route) {
  * route, or is absent when it's null, which is how a production deploy
  * runs.
  */
-export function defineDataEnvironmentBannerSuite({ routes, mockMode = process.env.VITE_API !== 'real', dataLabel = process.env.DATA_LABEL?.trim() || null, }) {
+export function defineDataEnvironmentBannerSuite({ routes, mockMode = process.env.VITE_API !== 'real', dataLabel = process.env.DATA_LABEL?.trim() || null, palettes, }) {
     const banner = (page) => page.getByRole('status').filter({ hasText: "changes here don't reach production" });
     const expectAbsentEverywhere = async (page) => {
         for (const route of routes) {
@@ -365,13 +395,13 @@ export function defineDataEnvironmentBannerSuite({ routes, mockMode = process.en
         const fill = (locator) => locator.evaluate((element) => getComputedStyle(element).backgroundColor);
         expect(await fill(banner(page))).not.toBe(await fill(page.getByRole('status').filter({ hasText: 'Mock data' })));
     });
-    for (const colorScheme of ['light', 'dark']) {
-        test(`the data-environment banner has zero axe violations (${colorScheme})`, async ({ page }) => {
-            await page.emulateMedia({ colorScheme });
+    for (const theme of a11yThemes(palettes)) {
+        test(`the data-environment banner has zero axe violations (${theme.label})`, async ({ page }) => {
+            await applyTheme(page, theme);
             await forceLabel(page);
             for (const route of routes) {
                 await gotoWithDataLabel(page, route);
-                await expect(page.locator('html')).toHaveClass(colorScheme);
+                await expectTheme(page, theme);
                 await expect(banner(page)).toBeVisible();
                 await expect(page.locator('[data-state="loading"]')).toHaveCount(0);
                 await test.step(route, () => expectNoAxeViolations(page));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "4.62.0",
+  "version": "4.63.1",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {

package/styles/index.css

@@ -20,6 +20,11 @@
    composite's own rows and padding tighten under data-density="compact"
    on any ancestor, the way the table's tokens do. `density-compact:py-1`.
    Text never shrinks under it. */
+/* Under a palette only (FoundationProviders' `palette`, data-palette on
+   <html>): the shared style guide's glow, which an app without one never
+   gets. `palette:hover:shadow-(--primary-glow)`. */
+@custom-variant palette (&:where([data-palette] *));
+
 @custom-variant density-compact (&:where([data-density="compact"], [data-density="compact"] *));
 
 @theme inline {
@@ -54,6 +59,7 @@
     --color-info-foreground: var(--info-foreground);
     --color-info-text: var(--info-text);
     --color-link: var(--link);
+    --color-card-header: var(--card-header);
     --color-highlight-amber: var(--highlight-amber);
     --color-highlight-yellow: var(--highlight-yellow);
     --color-highlight-green: var(--highlight-green);
@@ -94,6 +100,10 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    /* Motion (the shared style guide): quick, standard easing, for every
+       transition-* utility that doesn't name its own duration. */
+    --default-transition-duration: 120ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Typography roles: one class sets size, line height and weight together,
@@ -102,11 +112,13 @@
   font-size: var(--type-page-title-size);
   line-height: var(--type-page-title-leading);
   font-weight: var(--type-page-title-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-section-title {
   font-size: var(--type-section-title-size);
   line-height: var(--type-section-title-leading);
   font-weight: var(--type-section-title-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-body {
   font-size: var(--type-body-size);
@@ -135,11 +147,13 @@
   font-size: var(--type-heading-1-size);
   line-height: var(--type-heading-1-leading);
   font-weight: var(--type-heading-1-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-heading-2 {
   font-size: var(--type-heading-2-size);
   line-height: var(--type-heading-2-leading);
   font-weight: var(--type-heading-2-weight);
+  letter-spacing: var(--type-heading-tracking);
 }
 @utility type-heading-3 {
   font-size: var(--type-heading-3-size);
@@ -147,6 +161,52 @@
   font-weight: var(--type-heading-3-weight);
 }
 
+/* A hovered hub tile, widget or card, under a palette: its edge turns the
+   accent and a soft halo of it shows (--edge-glow). On an element that
+   draws its edge with ring-1 and its shadow with shadow-* (Card does), it
+   recolours the ring and adds the halo to the shadow it already has.
+   ModuleCard, WidgetCard and Board's cards carry it; a DataTable card
+   layout's cards get it with `*:data-[slot=card]:glow-edge` on the
+   item. */
+@utility glow-edge {
+  transition-property: box-shadow;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+  &:where([data-palette] *):hover {
+    --tw-ring-color: color-mix(in srgb, var(--primary) 75%, var(--border));
+    --tw-shadow: var(--card-shadow, 0 0 #0000), var(--edge-glow);
+  }
+}
+
+/* A primary button's shine under a palette: a light band sweeping across
+   on hover (650ms), once. Not under reduced motion, and never on another
+   variant. In components, so a button's own position utility still wins. */
+@layer components {
+  [data-palette] [data-slot="button"][data-variant="default"] {
+    position: relative;
+    overflow: hidden;
+  }
+  [data-palette] [data-slot="button"][data-variant="default"]::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--white) 40%, transparent) 50%, transparent 65%);
+    transform: translateX(-130%);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    [data-palette] [data-slot="button"][data-variant="default"]:hover::after {
+      animation: button-shine 650ms ease-out;
+    }
+  }
+}
+
+@keyframes button-shine {
+  to {
+    transform: translateX(130%);
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;