@tristan2828/ui-foundation 4.63.0 → 4.63.2

package/conventions/docs/design-language.md

@@ -3,28 +3,28 @@
 <!-- index: written by `npm run docs:index` in the package from the headings below; never edit it by hand -->
 ## Index
 
-- [Palettes](#palettes) · lines 37–95
-- [Glow](#glow) · lines 97–115
-- [Semantic tones](#semantic-tones) · lines 117–145
-- [The three badge styles](#the-three-badge-styles) · lines 147–164
-- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 166–195
-- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 197–210
-- [Logos and brand marks](#logos-and-brand-marks) · lines 212–256
-- [Categorical colour](#categorical-colour) · lines 258–328
-- [Shapes and sizes](#shapes-and-sizes) · lines 330–351
-- [Typography](#typography) · lines 353–447
-  - [Written text (notes)](#written-text-notes) · lines 387–447
-- [Density](#density) · lines 449–506
-- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 508–622
-- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 624–693
-- [Notices](#notices) · lines 695–723
-- [A value over time](#a-value-over-time) · lines 725–803
-  - [Several values over time](#several-values-over-time) · lines 766–803
-- [A list as a board](#a-list-as-a-board) · lines 805–856
-- [A list as cards](#a-list-as-cards) · lines 858–904
-- [Key numbers on a record](#key-numbers-on-a-record) · lines 906–928
-- [Picking at random](#picking-at-random) · lines 930–961
-- [Filling in what's missing](#filling-in-whats-missing) · lines 963–1030
+- [Palettes](#palettes) · lines 37–103
+- [Glow](#glow) · lines 105–123
+- [Semantic tones](#semantic-tones) · lines 125–153
+- [The three badge styles](#the-three-badge-styles) · lines 155–172
+- [Mapping an enum to tones](#mapping-an-enum-to-tones) · lines 174–203
+- [Glyphs and icons: 3:1](#glyphs-and-icons-31) · lines 205–218
+- [Logos and brand marks](#logos-and-brand-marks) · lines 220–264
+- [Categorical colour](#categorical-colour) · lines 266–336
+- [Shapes and sizes](#shapes-and-sizes) · lines 338–359
+- [Typography](#typography) · lines 361–455
+  - [Written text (notes)](#written-text-notes) · lines 395–455
+- [Density](#density) · lines 457–514
+- [Widget cards (hub pages)](#widget-cards-hub-pages) · lines 516–630
+- [Module cards (a hub's places)](#module-cards-a-hubs-places) · lines 632–701
+- [Notices](#notices) · lines 703–731
+- [A value over time](#a-value-over-time) · lines 733–811
+  - [Several values over time](#several-values-over-time) · lines 774–811
+- [A list as a board](#a-list-as-a-board) · lines 813–864
+- [A list as cards](#a-list-as-cards) · lines 866–912
+- [Key numbers on a record](#key-numbers-on-a-record) · lines 914–936
+- [Picking at random](#picking-at-random) · lines 938–969
+- [Filling in what's missing](#filling-in-whats-missing) · lines 971–1038
 
 <!-- /index -->
 
@@ -94,6 +94,14 @@ The package's `e2e/fixtures-visual.spec.ts` runs every primitive,
 composite and tone story through axe in each palette, and measures every
 glyph and categorical slot against each palette's page and card.
 
+**An app's own axe specs** check its palettes instead of light and dark:
+`defineA11ySuite({ …, palettes: ['indigo-cyan'] })` (and
+`defineDataEnvironmentBannerSuite`'s `palettes`) saves each as the
+device's choice before the page loads and checks it dark. Pass the app's
+default on every spec and `PALETTES` on the one that covers the shell.
+Without `palettes`, a palette app's light run fails: there is no light
+theme to find.
+
 ## Glow
 
 Under a palette only, from `--primary` so each palette glows in its own

package/dist/components/app/entity-view.js

@@ -188,5 +188,5 @@ export function EntityView({ title, documentTitle, titleEdit, subtitle, badges,
     const railSections = sections.filter((section) => section.placement === 'rail');
     const mainSections = sections.filter((section) => section.placement !== 'rail');
     const main = (_jsx("div", { className: cn(RAIL_LAYOUT.main, railSections.length === 0 && RAIL_LAYOUT.mainAlone), children: mainSections.map((section) => (_jsx(ViewSection, { section: section }, section.title))) }));
-    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), !dialog && _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [_jsx("h1", { id: dialog?.titleId, className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), (actions || printButton) && (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [printButton, actions] }))] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
+    return (_jsx(EditInPlaceContext.Provider, { value: store, children: _jsxs("div", { className: layout === 'rail' ? RAIL_LAYOUT.page : 'flex max-w-4xl flex-col gap-6', "data-state": "success", "data-layout": layout, children: [editing && _jsx(LeaveGuard, { store: store }), !dialog && _jsx(BackLink, { back: back }), _jsxs("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-2 sm:min-w-64", children: [_jsx("h1", { id: dialog?.titleId, className: "type-page-title break-words text-foreground", children: titleEdit ? (_jsx(EditableValue, { label: titleEdit.label, edit: titleEdit, layout: "inline", className: "w-full", children: title })) : (title) }), subtitle && (_jsx("div", { "data-slot": "entity-view-subtitle", className: "type-body break-words text-muted-foreground", children: subtitle })), badges && _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: badges })] }), (actions || printButton) && (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 sm:justify-end", children: [printButton, actions] }))] }), _jsx("div", { role: "status", "data-slot": "entity-view-notice", className: "empty:hidden", children: notice }), strip && _jsx("div", { "data-slot": "entity-view-strip", children: strip }), layout === 'rail' ? (_jsxs("div", { className: RAIL_LAYOUT.columns, children: [mobileOrder === 'main-first' && main, railSections.length > 0 && (_jsx(Rail, { label: railLabel ?? `${title ?? 'Record'} details`, sections: railSections })), mobileOrder === 'rail-first' && main] })) : (sections.map((section) => _jsx(ViewSection, { section: section }, section.title))), footer && (_jsx("footer", { "data-slot": "entity-view-footer", className: "type-caption text-muted-foreground", children: footer }))] }) }));
 }

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-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 }));
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent palette:text-foreground 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/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-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" }) })] }));
+    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 palette:text-foreground 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/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-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 }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent palette:text-foreground 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/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.63.0",
+  "version": "4.63.2",
   "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": {