@eifi1/ui-kit 0.34.0 → 0.35.0

package/dist/shell/topbar-controls.d.ts

@@ -7,29 +7,23 @@ export declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center
  *  wraps aligns to the reading edge in RTL too. */
 export declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover";
 /** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */
-export declare function ThemeToggle({ mode, onToggle, "aria-label": ariaLabelAttr, ariaLabel, title, className, }: {
+export declare function ThemeToggle({ mode, onToggle, "aria-label": ariaLabel, title, className, }: {
     mode: ThemeMode;
     onToggle: () => void;
     /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */
     "aria-label"?: string;
-    /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-     *  Names the control only when `aria-label` is absent. */
-    ariaLabel?: string;
     title?: string;
     className?: string;
 }): import("react").JSX.Element;
 /** Appearance-preset switcher: a hover menu of palette presets with per-theme
  *  colour swatches. Controlled — the app owns the active id and applies it. */
-export declare function PaletteMenu({ palettes, activeId, mode, onSelect, "aria-label": ariaLabelAttr, ariaLabel, heading, }: {
+export declare function PaletteMenu({ palettes, activeId, mode, onSelect, "aria-label": ariaLabel, heading, }: {
     palettes: PalettePreset[];
     activeId: string;
     mode: ThemeMode;
     onSelect: (id: string) => void;
     /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */
     "aria-label"?: string;
-    /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-     *  Names the control only when `aria-label` is absent. */
-    ariaLabel?: string;
     /** Optional small heading row above the list. */
     heading?: string;
 }): import("react").JSX.Element;
@@ -48,15 +42,12 @@ export interface LanguageOption {
  *  (Keksdose feedback #121). The flag also shows which language is currently on,
  *  which no icon can, and costs the same width on a crowded mobile bar. A globe
  *  covers the case where `current` matches nothing in `options`. */
-export declare function LanguageMenu({ options, current, onChange, "aria-label": ariaLabelAttr, ariaLabel, heading, }: {
+export declare function LanguageMenu({ options, current, onChange, "aria-label": ariaLabel, heading, }: {
     options: LanguageOption[];
     current: string | undefined;
     onChange: (code: string) => void;
     /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */
     "aria-label"?: string;
-    /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-     *  Names the control only when `aria-label` is absent. */
-    ariaLabel?: string;
     /** Optional small heading row above the list — as on `TopBarActionMenu`,
      *  `OptionSwitcherMenu` and `PaletteMenu`. */
     heading?: string;

package/dist/shell/topbar-controls.js

@@ -13,12 +13,11 @@ function MenuHeading({ children }) {
 function ThemeToggle({
   mode,
   onToggle,
-  "aria-label": ariaLabelAttr,
-  ariaLabel,
+  "aria-label": ariaLabel,
   title,
   className
 }) {
-  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabelAttr ?? ariaLabel });
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });
   const Icon = mode === "dark" ? Moon : Sun;
   return /* @__PURE__ */ jsx(Tooltip, { label: title, portal: true, children: /* @__PURE__ */ jsx(
     "button",
@@ -36,11 +35,10 @@ function PaletteMenu({
   activeId,
   mode,
   onSelect,
-  "aria-label": ariaLabelAttr,
-  ariaLabel,
+  "aria-label": ariaLabel,
   heading
 }) {
-  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabelAttr ?? ariaLabel });
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });
   const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;
   return /* @__PURE__ */ jsx(
     HoverMenu,
@@ -98,11 +96,10 @@ function LanguageMenu({
   options,
   current,
   onChange,
-  "aria-label": ariaLabelAttr,
-  ariaLabel,
+  "aria-label": ariaLabel,
   heading
 }) {
-  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { language: ariaLabelAttr ?? ariaLabel });
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });
   const active = options.find((o) => o.code === current);
   return /* @__PURE__ */ jsx(
     HoverMenu,

package/dist/shell/topbar-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n      {children}\n    </li>\n  );\n}\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  \"aria-label\": ariaLabelAttr,\n  ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the control only when `aria-label` is absent. */\n  ariaLabel?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `aria-label` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabelAttr ?? ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={labels.theme}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  \"aria-label\": ariaLabelAttr,\n  ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the control only when `aria-label` is absent. */\n  ariaLabel?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabelAttr ?? ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      aria-label={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-placeholder\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-secondary\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). The flag also shows which language is currently on,\n *  which no icon can, and costs the same width on a crowded mobile bar. A globe\n *  covers the case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  \"aria-label\": ariaLabelAttr,\n  ariaLabel,\n  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the control only when `aria-label` is absent. */\n  ariaLabel?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabelAttr ?? ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      aria-label={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.language}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n              />\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n                    />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-secondary\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n      {children}\n    </li>\n  );\n}\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  \"aria-label\": ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `aria-label` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={labels.theme}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      aria-label={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-placeholder\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-secondary\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). The flag also shows which language is currently on,\n *  which no icon can, and costs the same width on a crowded mobile bar. A globe\n *  covers the case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      aria-label={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.language}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n              />\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n                    />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-secondary\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/testing/index.d.ts

@@ -1,2 +1,2 @@
 export { KIT_CSS_VARIABLES, declaredCustomProperties, undeclaredCssVariables, type UndeclaredCssVariablesOptions, } from "./css-variables.js";
-export { stubResizeObserver, stubViewportWidth, viewportMatchMedia, type ResizeObserverStub, type StubbedBoxSize, type ViewportOptions, } from "./viewport.js";
+export { setViewportWidth, stubResizeObserver, stubViewportWidth, viewportMatchMedia, type ResizeObserverStub, type StubbedBoxSize, type ViewportOptions, } from "./viewport.js";

package/dist/testing/index.js

@@ -5,6 +5,7 @@ import {
   undeclaredCssVariables
 } from "./css-variables.js";
 import {
+  setViewportWidth,
   stubResizeObserver,
   stubViewportWidth,
   viewportMatchMedia
@@ -12,6 +13,7 @@ import {
 export {
   KIT_CSS_VARIABLES,
   declaredCustomProperties,
+  setViewportWidth,
   stubResizeObserver,
   stubViewportWidth,
   undeclaredCssVariables,

package/dist/testing/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/index.ts"],"sourcesContent":["// `@eifi1/ui-kit/testing` — helpers an app runs from its OWN test suite (0.33).\n//\n// Not part of the main barrel: nothing here renders, and an app's production bundle has\n// no business carrying it. Browser-safe like the rest of the kit (no `node:fs`): each\n// helper takes texts, so an app collects them with `import.meta.glob` or `node:fs`, as\n// its setup allows. The first content is the guard against undeclared CSS custom\n// properties (docs/colour-roles-harmonization.md §8).\nexport {\n  KIT_CSS_VARIABLES,\n  declaredCustomProperties,\n  undeclaredCssVariables,\n  type UndeclaredCssVariablesOptions,\n} from \"./css-variables\";\n// 0.34 (refactor audit 2026-10, TST-10): the environment jsdom lacks — a `matchMedia`\n// that answers from a viewport width (right at every text size) and a `ResizeObserver`\n// the test drives. Framework-free: each returns its own undo.\nexport {\n  stubResizeObserver,\n  stubViewportWidth,\n  viewportMatchMedia,\n  type ResizeObserverStub,\n  type StubbedBoxSize,\n  type ViewportOptions,\n} from \"./viewport\";\n"],"mappings":";AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAIK;","names":[]}
+{"version":3,"sources":["../../src/testing/index.ts"],"sourcesContent":["// `@eifi1/ui-kit/testing` — helpers an app runs from its OWN test suite (0.33).\n//\n// Not part of the main barrel: nothing here renders, and an app's production bundle has\n// no business carrying it. Browser-safe like the rest of the kit (no `node:fs`): each\n// helper takes texts, so an app collects them with `import.meta.glob` or `node:fs`, as\n// its setup allows. The first content is the guard against undeclared CSS custom\n// properties (docs/colour-roles-harmonization.md §8).\nexport {\n  KIT_CSS_VARIABLES,\n  declaredCustomProperties,\n  undeclaredCssVariables,\n  type UndeclaredCssVariablesOptions,\n} from \"./css-variables\";\n// 0.34 (refactor audit 2026-10, TST-10): the environment jsdom lacks — a `matchMedia`\n// that answers from a viewport width (right at every text size) and a `ResizeObserver`\n// the test drives. Framework-free: each returns its own undo. 0.35: `setViewportWidth`,\n// a live resize of the stub in force — its lists flip and fire `change` (keksdose).\nexport {\n  setViewportWidth,\n  stubResizeObserver,\n  stubViewportWidth,\n  viewportMatchMedia,\n  type ResizeObserverStub,\n  type StubbedBoxSize,\n  type ViewportOptions,\n} from \"./viewport\";\n"],"mappings":";AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAKP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;","names":[]}

package/dist/testing/viewport.d.ts

@@ -34,14 +34,37 @@ export interface ViewportOptions {
  * Width queries answer from `width`: the range syntax the kit writes for `max-*`
  * (`(width < 768px)`) and every other comparison, `(min-width: …)` and `(max-width: …)`,
  * in px or rem; `and` and comma lists combine as in CSS. The features in `options` answer
- * as set there; every other query is false. The lists it returns never change, so
- * nothing fires `change`: a test that changes the width stubs again and renders again.
+ * as set there; every other query is false. The lists keep their listeners, and
+ * {@link setViewportWidth} resizes the viewport under them the way a browser window
+ * does: each list whose answer flips fires `change`.
  *
  * Hand it to the runner's own global stub where the suite undoes stubs that way —
  * `vi.stubGlobal("matchMedia", viewportMatchMedia(375))` — or use
  * {@link stubViewportWidth}.
  */
 export declare function viewportMatchMedia(width: number, options?: ViewportOptions): (query: string) => MediaQueryList;
+/**
+ * Resize the stubbed viewport to `width` CSS px, live — the window being dragged narrower,
+ * a phone turned (0.35, keksdose's 0.34 report). Every list the stub in force has handed
+ * out answers from the new width, and each one whose answer flipped fires `change` to its
+ * `addEventListener` listeners, its legacy `addListener` ones and its `onchange`, as in a
+ * browser; a list whose answer stayed the same tells nobody. So a mounted component that
+ * listens to a breakpoint (`usePhoneLayout()`, `useBreakpoint()`) switches without being
+ * rendered again.
+ *
+ * The stub in force is whatever `window.matchMedia` is now — one {@link stubViewportWidth}
+ * or `vi.stubGlobal("matchMedia", viewportMatchMedia(…))` put in; its features
+ * (`options`) stay as they were. Throws when `matchMedia` is not one of these stubs, rather
+ * than resize nothing. Synchronous: wrap it in `act()` when a listener sets state.
+ *
+ * ```ts
+ * undo = stubViewportWidth(1280);
+ * render(<Page />);
+ * act(() => setViewportWidth(375));
+ * expect(screen.getByRole("list")).toBeInTheDocument(); // the cards
+ * ```
+ */
+export declare function setViewportWidth(width: number): void;
 /**
  * Make `window.matchMedia` answer as a viewport `width` CSS px wide (see
  * {@link viewportMatchMedia}), and return the undo: it puts back what was there, which

package/dist/testing/viewport.js

@@ -48,24 +48,74 @@ function condition(part, width, options) {
       return false;
   }
 }
-function viewportMatchMedia(width, options = {}) {
-  const answer = (query) => query.split(",").some(
+function answer(query, width, options) {
+  return query.split(",").some(
     (alternative) => alternative.split(/\s+and\s+/).every((part) => condition(part, width, options))
   );
-  return (query) => ({
-    matches: answer(query),
+}
+const VIEWPORTS = /* @__PURE__ */ new WeakMap();
+function mediaQueryList(query, viewport) {
+  const listeners = /* @__PURE__ */ new Set();
+  const list = {
+    matches: answer(query, viewport.width, viewport.options),
     media: query,
     onchange: null,
-    addEventListener: () => {
+    addEventListener(type, listener) {
+      if (type === "change" && listener) listeners.add(listener);
     },
-    removeEventListener: () => {
+    removeEventListener(type, listener) {
+      if (type === "change" && listener) listeners.delete(listener);
     },
-    addListener: () => {
+    addListener(listener) {
+      if (listener) listeners.add(listener);
     },
-    removeListener: () => {
+    removeListener(listener) {
+      if (listener) listeners.delete(listener);
     },
-    dispatchEvent: () => false
-  });
+    dispatchEvent(event) {
+      if (event.type !== "change") return true;
+      const self = list;
+      list.onchange?.call(self, event);
+      for (const listener of [...listeners]) {
+        if (typeof listener === "function") listener.call(self, event);
+        else listener.handleEvent(event);
+      }
+      return !event.defaultPrevented;
+    }
+  };
+  return list;
+}
+function changeEvent(list) {
+  const event = new Event("change");
+  for (const [key, value] of Object.entries({ matches: list.matches, media: list.media, target: list, currentTarget: list })) {
+    Object.defineProperty(event, key, { value, enumerable: true });
+  }
+  return event;
+}
+function viewportMatchMedia(width, options = {}) {
+  const viewport = { width, options, lists: /* @__PURE__ */ new Set() };
+  const matchMedia = (query) => {
+    const list = mediaQueryList(query, viewport);
+    viewport.lists.add(list);
+    return list;
+  };
+  VIEWPORTS.set(matchMedia, viewport);
+  return matchMedia;
+}
+function setViewportWidth(width) {
+  const viewport = typeof window === "undefined" ? void 0 : VIEWPORTS.get(window.matchMedia);
+  if (!viewport) {
+    throw new Error(
+      'setViewportWidth: no viewport stub is in force \u2014 put one in first with stubViewportWidth(width), or vi.stubGlobal("matchMedia", viewportMatchMedia(width)).'
+    );
+  }
+  viewport.width = width;
+  for (const list of [...viewport.lists]) {
+    const matches = answer(list.media, width, viewport.options);
+    if (matches === list.matches) continue;
+    list.matches = matches;
+    list.dispatchEvent(changeEvent(list));
+  }
 }
 function stubViewportWidth(width, options = {}) {
   const before = Object.getOwnPropertyDescriptor(window, "matchMedia");
@@ -145,6 +195,7 @@ function stubResizeObserver() {
   };
 }
 export {
+  setViewportWidth,
   stubResizeObserver,
   stubViewportWidth,
   viewportMatchMedia

package/dist/testing/viewport.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/viewport.ts"],"sourcesContent":["/**\n * Environment stubs for an app's own tests (0.34, refactor audit 2026-10, TST-10): the\n * two browser APIs jsdom does not have and the kit's layout reads — `matchMedia` and\n * `ResizeObserver`.\n *\n * Every suite rebuilt them by hand: the kit stubbed `matchMedia` in 25 files and defined\n * the same `stubPhone()` eight times, keksdose stubs it in 41, and most copies answer\n * one literal string. That breaks quietly at Large text, where `md` is 960 px and the\n * phone query the kit writes is `(width < 960px)`, not `(width < 768px)`. These answer\n * every width query from a WIDTH, as a browser does, so they stay right at every text\n * size (docs/text-size-harmonization.md §3.3). The reference is keksdose's\n * `frontend/src/test/viewport.ts`, which this generalises.\n *\n * Framework-free, like the rest of `@eifi1/ui-kit/testing`: nothing here imports vitest\n * or jest. Each stub returns its own undo, so it works under either runner, and a suite\n * that prefers `vi.stubGlobal` passes it {@link viewportMatchMedia} instead.\n */\n\n/** The media features a test may want besides the width. Each is off by default. */\nexport interface ViewportOptions {\n  /** The primary pointer is a finger: `(pointer: coarse)`, `(any-pointer: coarse)` and\n   *  `(hover: none)` match; `(pointer: fine)` and `(hover: hover)` do not. */\n  coarse?: boolean;\n  /** The person asked for less motion: `(prefers-reduced-motion: reduce)` matches, and\n   *  the kit's overlays skip their exit animations. */\n  reducedMotion?: boolean;\n  /** `(prefers-color-scheme: dark)` matches (`light` does not). */\n  dark?: boolean;\n  /** `(prefers-contrast: more)` matches. */\n  moreContrast?: boolean;\n}\n\n/** One length in CSS px. A media query's `rem`/`em` is the browser's default font size,\n *  16 px, never `<html>`'s — the kit's own `breakpointQuery` writes px. */\nfunction lengthPx(value: string, unit: string): number {\n  return unit === \"px\" ? Number(value) : Number(value) * 16;\n}\n\nconst RANGE = /^\\(\\s*width\\s*(<=|>=|<|>)\\s*([\\d.]+)(px|r?em)\\s*\\)$/;\nconst MIN_MAX = /^\\(\\s*(min|max)-width\\s*:\\s*([\\d.]+)(px|r?em)\\s*\\)$/;\nconst FEATURE = /^\\(\\s*([a-z-]+)\\s*:\\s*([a-z-]+)\\s*\\)$/;\n\n/** One `(…)` condition, or a media type. */\nfunction condition(part: string, width: number, options: ViewportOptions): boolean {\n  const q = part.trim();\n  if (q === \"all\" || q === \"screen\") return true;\n  const range = RANGE.exec(q);\n  if (range) {\n    const px = lengthPx(range[2], range[3]);\n    switch (range[1]) {\n      case \"<\":\n        return width < px;\n      case \"<=\":\n        return width <= px;\n      case \">\":\n        return width > px;\n      default:\n        return width >= px;\n    }\n  }\n  const minMax = MIN_MAX.exec(q);\n  if (minMax) {\n    const px = lengthPx(minMax[2], minMax[3]);\n    return minMax[1] === \"min\" ? width >= px : width <= px;\n  }\n  const feature = FEATURE.exec(q);\n  if (!feature) return false;\n  const [, name, value] = feature;\n  const coarse = Boolean(options.coarse);\n  switch (name) {\n    case \"pointer\":\n    case \"any-pointer\":\n      return value === (coarse ? \"coarse\" : \"fine\");\n    case \"hover\":\n    case \"any-hover\":\n      return value === (coarse ? \"none\" : \"hover\");\n    case \"prefers-reduced-motion\":\n      return value === (options.reducedMotion ? \"reduce\" : \"no-preference\");\n    case \"prefers-color-scheme\":\n      return value === (options.dark ? \"dark\" : \"light\");\n    case \"prefers-contrast\":\n      return value === (options.moreContrast ? \"more\" : \"no-preference\");\n    default:\n      return false;\n  }\n}\n\n/**\n * A `window.matchMedia` for a viewport `width` CSS px wide.\n *\n * Width queries answer from `width`: the range syntax the kit writes for `max-*`\n * (`(width < 768px)`) and every other comparison, `(min-width: …)` and `(max-width: …)`,\n * in px or rem; `and` and comma lists combine as in CSS. The features in `options` answer\n * as set there; every other query is false. The lists it returns never change, so\n * nothing fires `change`: a test that changes the width stubs again and renders again.\n *\n * Hand it to the runner's own global stub where the suite undoes stubs that way —\n * `vi.stubGlobal(\"matchMedia\", viewportMatchMedia(375))` — or use\n * {@link stubViewportWidth}.\n */\nexport function viewportMatchMedia(\n  width: number,\n  options: ViewportOptions = {},\n): (query: string) => MediaQueryList {\n  const answer = (query: string) =>\n    query\n      .split(\",\")\n      .some((alternative) =>\n        alternative.split(/\\s+and\\s+/).every((part) => condition(part, width, options)),\n      );\n  return (query: string) =>\n    ({\n      matches: answer(query),\n      media: query,\n      onchange: null,\n      addEventListener: () => {},\n      removeEventListener: () => {},\n      addListener: () => {},\n      removeListener: () => {},\n      dispatchEvent: () => false,\n    }) as unknown as MediaQueryList;\n}\n\n/**\n * Make `window.matchMedia` answer as a viewport `width` CSS px wide (see\n * {@link viewportMatchMedia}), and return the undo: it puts back what was there, which\n * in jsdom is nothing — no `matchMedia` at all, the desktop fallback of every kit hook.\n *\n * ```ts\n * let undo = () => {};\n * afterEach(() => undo());\n * it(\"shows cards on a phone\", () => {\n *   undo = stubViewportWidth(375);\n *   …\n * });\n * ```\n *\n * Right at every text size: at Large the kit's phone query is `(width < 960px)`, which a\n * 375 px viewport matches and a 1280 px one does not, as in a browser.\n */\nexport function stubViewportWidth(width: number, options: ViewportOptions = {}): () => void {\n  const before = Object.getOwnPropertyDescriptor(window, \"matchMedia\");\n  Object.defineProperty(window, \"matchMedia\", {\n    configurable: true,\n    writable: true,\n    value: viewportMatchMedia(width, options),\n  });\n  return () => {\n    if (before) Object.defineProperty(window, \"matchMedia\", before);\n    else Reflect.deleteProperty(window, \"matchMedia\");\n  };\n}\n\n/** A box size for {@link ResizeObserverStub.resize}, in CSS px. */\nexport interface StubbedBoxSize {\n  width: number;\n  height: number;\n}\n\n/** What {@link stubResizeObserver} returns: the test drives the observers. */\nexport interface ResizeObserverStub {\n  /**\n   * Report `target` at `size` to every live observer watching it, as a browser does once\n   * layout settles: one entry, with `contentRect` and the three box sizes all `size`.\n   * Synchronous; wrap it in `act()` when the callback sets state.\n   */\n  resize(target: Element, size: StubbedBoxSize): void;\n  /** The elements some live observer watches now, each once. */\n  observed(): Element[];\n  /** Put back the `ResizeObserver` that was there before — in jsdom, none. */\n  restore(): void;\n}\n\n/**\n * Install a `ResizeObserver` the test drives. jsdom has none, and lays nothing out, so a\n * component that measures itself (a windowed list, a fitted chart, a measured grid)\n * either crashes on the missing global or never learns a size. Observers here record\n * what they watch and are called only by {@link ResizeObserverStub.resize}.\n *\n * ```ts\n * const ro = stubResizeObserver();\n * afterEach(() => ro.restore());\n * act(() => ro.resize(screen.getByRole(\"list\"), { width: 400, height: 320 }));\n * ```\n */\nexport function stubResizeObserver(): ResizeObserverStub {\n  const live = new Set<StubResizeObserver>();\n\n  class StubResizeObserver {\n    readonly targets = new Set<Element>();\n    constructor(readonly callback: ResizeObserverCallback) {\n      live.add(this);\n    }\n    observe(target: Element) {\n      this.targets.add(target);\n    }\n    unobserve(target: Element) {\n      this.targets.delete(target);\n    }\n    disconnect() {\n      this.targets.clear();\n      live.delete(this);\n    }\n  }\n\n  const before = Object.getOwnPropertyDescriptor(globalThis, \"ResizeObserver\");\n  Object.defineProperty(globalThis, \"ResizeObserver\", {\n    configurable: true,\n    writable: true,\n    value: StubResizeObserver,\n  });\n\n  return {\n    resize(target, { width, height }) {\n      const box = [{ inlineSize: width, blockSize: height }];\n      const contentRect = {\n        x: 0,\n        y: 0,\n        top: 0,\n        left: 0,\n        width,\n        height,\n        right: width,\n        bottom: height,\n        toJSON: () => ({ x: 0, y: 0, width, height }),\n      };\n      const entry = {\n        target,\n        contentRect,\n        borderBoxSize: box,\n        contentBoxSize: box,\n        devicePixelContentBoxSize: box,\n      } as unknown as ResizeObserverEntry;\n      for (const observer of [...live]) {\n        if (observer.targets.has(target)) {\n          observer.callback([entry], observer as unknown as ResizeObserver);\n        }\n      }\n    },\n    observed() {\n      const all: Element[] = [];\n      for (const observer of live) for (const target of observer.targets) if (!all.includes(target)) all.push(target);\n      return all;\n    },\n    restore() {\n      live.clear();\n      if (before) Object.defineProperty(globalThis, \"ResizeObserver\", before);\n      else Reflect.deleteProperty(globalThis, \"ResizeObserver\");\n    },\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/testing/viewport.ts"],"sourcesContent":["/**\n * Environment stubs for an app's own tests (0.34, refactor audit 2026-10, TST-10): the\n * two browser APIs jsdom does not have and the kit's layout reads — `matchMedia` and\n * `ResizeObserver`.\n *\n * Every suite rebuilt them by hand: the kit stubbed `matchMedia` in 25 files and defined\n * the same `stubPhone()` eight times, keksdose stubs it in 41, and most copies answer\n * one literal string. That breaks quietly at Large text, where `md` is 960 px and the\n * phone query the kit writes is `(width < 960px)`, not `(width < 768px)`. These answer\n * every width query from a WIDTH, as a browser does, so they stay right at every text\n * size (docs/text-size-harmonization.md §3.3). The reference is keksdose's\n * `frontend/src/test/viewport.ts`, which this generalises.\n *\n * Framework-free, like the rest of `@eifi1/ui-kit/testing`: nothing here imports vitest\n * or jest. Each stub returns its own undo, so it works under either runner, and a suite\n * that prefers `vi.stubGlobal` passes it {@link viewportMatchMedia} instead.\n */\n\n/** The media features a test may want besides the width. Each is off by default. */\nexport interface ViewportOptions {\n  /** The primary pointer is a finger: `(pointer: coarse)`, `(any-pointer: coarse)` and\n   *  `(hover: none)` match; `(pointer: fine)` and `(hover: hover)` do not. */\n  coarse?: boolean;\n  /** The person asked for less motion: `(prefers-reduced-motion: reduce)` matches, and\n   *  the kit's overlays skip their exit animations. */\n  reducedMotion?: boolean;\n  /** `(prefers-color-scheme: dark)` matches (`light` does not). */\n  dark?: boolean;\n  /** `(prefers-contrast: more)` matches. */\n  moreContrast?: boolean;\n}\n\n/** One length in CSS px. A media query's `rem`/`em` is the browser's default font size,\n *  16 px, never `<html>`'s — the kit's own `breakpointQuery` writes px. */\nfunction lengthPx(value: string, unit: string): number {\n  return unit === \"px\" ? Number(value) : Number(value) * 16;\n}\n\nconst RANGE = /^\\(\\s*width\\s*(<=|>=|<|>)\\s*([\\d.]+)(px|r?em)\\s*\\)$/;\nconst MIN_MAX = /^\\(\\s*(min|max)-width\\s*:\\s*([\\d.]+)(px|r?em)\\s*\\)$/;\nconst FEATURE = /^\\(\\s*([a-z-]+)\\s*:\\s*([a-z-]+)\\s*\\)$/;\n\n/** One `(…)` condition, or a media type. */\nfunction condition(part: string, width: number, options: ViewportOptions): boolean {\n  const q = part.trim();\n  if (q === \"all\" || q === \"screen\") return true;\n  const range = RANGE.exec(q);\n  if (range) {\n    const px = lengthPx(range[2], range[3]);\n    switch (range[1]) {\n      case \"<\":\n        return width < px;\n      case \"<=\":\n        return width <= px;\n      case \">\":\n        return width > px;\n      default:\n        return width >= px;\n    }\n  }\n  const minMax = MIN_MAX.exec(q);\n  if (minMax) {\n    const px = lengthPx(minMax[2], minMax[3]);\n    return minMax[1] === \"min\" ? width >= px : width <= px;\n  }\n  const feature = FEATURE.exec(q);\n  if (!feature) return false;\n  const [, name, value] = feature;\n  const coarse = Boolean(options.coarse);\n  switch (name) {\n    case \"pointer\":\n    case \"any-pointer\":\n      return value === (coarse ? \"coarse\" : \"fine\");\n    case \"hover\":\n    case \"any-hover\":\n      return value === (coarse ? \"none\" : \"hover\");\n    case \"prefers-reduced-motion\":\n      return value === (options.reducedMotion ? \"reduce\" : \"no-preference\");\n    case \"prefers-color-scheme\":\n      return value === (options.dark ? \"dark\" : \"light\");\n    case \"prefers-contrast\":\n      return value === (options.moreContrast ? \"more\" : \"no-preference\");\n    default:\n      return false;\n  }\n}\n\n/** A whole query: comma lists are alternatives, `and` joins conditions, as in CSS. */\nfunction answer(query: string, width: number, options: ViewportOptions): boolean {\n  return query\n    .split(\",\")\n    .some((alternative) =>\n      alternative.split(/\\s+and\\s+/).every((part) => condition(part, width, options)),\n    );\n}\n\n/** A list {@link viewportMatchMedia} handed out: what {@link setViewportWidth} flips. */\ninterface StubMediaQueryList {\n  matches: boolean;\n  readonly media: string;\n  onchange: ((this: MediaQueryList, event: MediaQueryListEvent) => unknown) | null;\n  addEventListener(type: string, listener: EventListenerOrEventListenerObject | null): void;\n  removeEventListener(type: string, listener: EventListenerOrEventListenerObject | null): void;\n  addListener(listener: EventListenerOrEventListenerObject | null): void;\n  removeListener(listener: EventListenerOrEventListenerObject | null): void;\n  dispatchEvent(event: Event): boolean;\n}\n\n/** One stub's viewport: its width now, and every list it has handed out. */\ninterface StubViewport {\n  width: number;\n  readonly options: ViewportOptions;\n  readonly lists: Set<StubMediaQueryList>;\n}\n\n/** Each `matchMedia` {@link viewportMatchMedia} made → its viewport. Keyed by the function,\n *  so {@link setViewportWidth} finds whichever stub is in force however it was put in. */\nconst VIEWPORTS = new WeakMap<object, StubViewport>();\n\nfunction mediaQueryList(query: string, viewport: StubViewport): StubMediaQueryList {\n  // One set for both APIs: in a browser `addListener(fn)` IS `addEventListener(\"change\",\n  // fn)`, so adding the same function through both registers it once.\n  const listeners = new Set<EventListenerOrEventListenerObject>();\n  const list: StubMediaQueryList = {\n    matches: answer(query, viewport.width, viewport.options),\n    media: query,\n    onchange: null,\n    addEventListener(type, listener) {\n      if (type === \"change\" && listener) listeners.add(listener);\n    },\n    removeEventListener(type, listener) {\n      if (type === \"change\" && listener) listeners.delete(listener);\n    },\n    addListener(listener) {\n      if (listener) listeners.add(listener);\n    },\n    removeListener(listener) {\n      if (listener) listeners.delete(listener);\n    },\n    dispatchEvent(event) {\n      if (event.type !== \"change\") return true;\n      const self = list as unknown as MediaQueryList;\n      list.onchange?.call(self, event as MediaQueryListEvent);\n      for (const listener of [...listeners]) {\n        if (typeof listener === \"function\") listener.call(self, event);\n        else listener.handleEvent(event);\n      }\n      return !event.defaultPrevented;\n    },\n  };\n  return list;\n}\n\n/** The `change` a browser fires at a list whose answer flipped: a `MediaQueryListEvent`'s\n *  `matches` and `media`, on an `Event` (jsdom has no `MediaQueryListEvent`). */\nfunction changeEvent(list: StubMediaQueryList): Event {\n  const event = new Event(\"change\");\n  for (const [key, value] of Object.entries({ matches: list.matches, media: list.media, target: list, currentTarget: list })) {\n    Object.defineProperty(event, key, { value, enumerable: true });\n  }\n  return event;\n}\n\n/**\n * A `window.matchMedia` for a viewport `width` CSS px wide.\n *\n * Width queries answer from `width`: the range syntax the kit writes for `max-*`\n * (`(width < 768px)`) and every other comparison, `(min-width: …)` and `(max-width: …)`,\n * in px or rem; `and` and comma lists combine as in CSS. The features in `options` answer\n * as set there; every other query is false. The lists keep their listeners, and\n * {@link setViewportWidth} resizes the viewport under them the way a browser window\n * does: each list whose answer flips fires `change`.\n *\n * Hand it to the runner's own global stub where the suite undoes stubs that way —\n * `vi.stubGlobal(\"matchMedia\", viewportMatchMedia(375))` — or use\n * {@link stubViewportWidth}.\n */\nexport function viewportMatchMedia(\n  width: number,\n  options: ViewportOptions = {},\n): (query: string) => MediaQueryList {\n  const viewport: StubViewport = { width, options, lists: new Set() };\n  const matchMedia = (query: string) => {\n    const list = mediaQueryList(query, viewport);\n    viewport.lists.add(list);\n    return list as unknown as MediaQueryList;\n  };\n  VIEWPORTS.set(matchMedia, viewport);\n  return matchMedia;\n}\n\n/**\n * Resize the stubbed viewport to `width` CSS px, live — the window being dragged narrower,\n * a phone turned (0.35, keksdose's 0.34 report). Every list the stub in force has handed\n * out answers from the new width, and each one whose answer flipped fires `change` to its\n * `addEventListener` listeners, its legacy `addListener` ones and its `onchange`, as in a\n * browser; a list whose answer stayed the same tells nobody. So a mounted component that\n * listens to a breakpoint (`usePhoneLayout()`, `useBreakpoint()`) switches without being\n * rendered again.\n *\n * The stub in force is whatever `window.matchMedia` is now — one {@link stubViewportWidth}\n * or `vi.stubGlobal(\"matchMedia\", viewportMatchMedia(…))` put in; its features\n * (`options`) stay as they were. Throws when `matchMedia` is not one of these stubs, rather\n * than resize nothing. Synchronous: wrap it in `act()` when a listener sets state.\n *\n * ```ts\n * undo = stubViewportWidth(1280);\n * render(<Page />);\n * act(() => setViewportWidth(375));\n * expect(screen.getByRole(\"list\")).toBeInTheDocument(); // the cards\n * ```\n */\nexport function setViewportWidth(width: number): void {\n  const viewport = typeof window === \"undefined\" ? undefined : VIEWPORTS.get(window.matchMedia);\n  if (!viewport) {\n    throw new Error(\n      \"setViewportWidth: no viewport stub is in force — put one in first with \" +\n        \"stubViewportWidth(width), or vi.stubGlobal(\\\"matchMedia\\\", viewportMatchMedia(width)).\",\n    );\n  }\n  viewport.width = width;\n  for (const list of [...viewport.lists]) {\n    const matches = answer(list.media, width, viewport.options);\n    if (matches === list.matches) continue;\n    list.matches = matches;\n    list.dispatchEvent(changeEvent(list));\n  }\n}\n\n/**\n * Make `window.matchMedia` answer as a viewport `width` CSS px wide (see\n * {@link viewportMatchMedia}), and return the undo: it puts back what was there, which\n * in jsdom is nothing — no `matchMedia` at all, the desktop fallback of every kit hook.\n *\n * ```ts\n * let undo = () => {};\n * afterEach(() => undo());\n * it(\"shows cards on a phone\", () => {\n *   undo = stubViewportWidth(375);\n *   …\n * });\n * ```\n *\n * Right at every text size: at Large the kit's phone query is `(width < 960px)`, which a\n * 375 px viewport matches and a 1280 px one does not, as in a browser.\n */\nexport function stubViewportWidth(width: number, options: ViewportOptions = {}): () => void {\n  const before = Object.getOwnPropertyDescriptor(window, \"matchMedia\");\n  Object.defineProperty(window, \"matchMedia\", {\n    configurable: true,\n    writable: true,\n    value: viewportMatchMedia(width, options),\n  });\n  return () => {\n    if (before) Object.defineProperty(window, \"matchMedia\", before);\n    else Reflect.deleteProperty(window, \"matchMedia\");\n  };\n}\n\n/** A box size for {@link ResizeObserverStub.resize}, in CSS px. */\nexport interface StubbedBoxSize {\n  width: number;\n  height: number;\n}\n\n/** What {@link stubResizeObserver} returns: the test drives the observers. */\nexport interface ResizeObserverStub {\n  /**\n   * Report `target` at `size` to every live observer watching it, as a browser does once\n   * layout settles: one entry, with `contentRect` and the three box sizes all `size`.\n   * Synchronous; wrap it in `act()` when the callback sets state.\n   */\n  resize(target: Element, size: StubbedBoxSize): void;\n  /** The elements some live observer watches now, each once. */\n  observed(): Element[];\n  /** Put back the `ResizeObserver` that was there before — in jsdom, none. */\n  restore(): void;\n}\n\n/**\n * Install a `ResizeObserver` the test drives. jsdom has none, and lays nothing out, so a\n * component that measures itself (a windowed list, a fitted chart, a measured grid)\n * either crashes on the missing global or never learns a size. Observers here record\n * what they watch and are called only by {@link ResizeObserverStub.resize}.\n *\n * ```ts\n * const ro = stubResizeObserver();\n * afterEach(() => ro.restore());\n * act(() => ro.resize(screen.getByRole(\"list\"), { width: 400, height: 320 }));\n * ```\n */\nexport function stubResizeObserver(): ResizeObserverStub {\n  const live = new Set<StubResizeObserver>();\n\n  class StubResizeObserver {\n    readonly targets = new Set<Element>();\n    constructor(readonly callback: ResizeObserverCallback) {\n      live.add(this);\n    }\n    observe(target: Element) {\n      this.targets.add(target);\n    }\n    unobserve(target: Element) {\n      this.targets.delete(target);\n    }\n    disconnect() {\n      this.targets.clear();\n      live.delete(this);\n    }\n  }\n\n  const before = Object.getOwnPropertyDescriptor(globalThis, \"ResizeObserver\");\n  Object.defineProperty(globalThis, \"ResizeObserver\", {\n    configurable: true,\n    writable: true,\n    value: StubResizeObserver,\n  });\n\n  return {\n    resize(target, { width, height }) {\n      const box = [{ inlineSize: width, blockSize: height }];\n      const contentRect = {\n        x: 0,\n        y: 0,\n        top: 0,\n        left: 0,\n        width,\n        height,\n        right: width,\n        bottom: height,\n        toJSON: () => ({ x: 0, y: 0, width, height }),\n      };\n      const entry = {\n        target,\n        contentRect,\n        borderBoxSize: box,\n        contentBoxSize: box,\n        devicePixelContentBoxSize: box,\n      } as unknown as ResizeObserverEntry;\n      for (const observer of [...live]) {\n        if (observer.targets.has(target)) {\n          observer.callback([entry], observer as unknown as ResizeObserver);\n        }\n      }\n    },\n    observed() {\n      const all: Element[] = [];\n      for (const observer of live) for (const target of observer.targets) if (!all.includes(target)) all.push(target);\n      return all;\n    },\n    restore() {\n      live.clear();\n      if (before) Object.defineProperty(globalThis, \"ResizeObserver\", before);\n      else Reflect.deleteProperty(globalThis, \"ResizeObserver\");\n    },\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/theme/palette-presets.d.ts

@@ -25,13 +25,6 @@ export interface PalettePreset {
     dark: TokenSet;
 }
 export declare const DEFAULT_PRESET: PalettePreset;
-/**
- * @deprecated 0.34 — `PALETTES`, the presets `presetById` and the palette store know, or
- * `derivePalette` for a palette of the app's own; removed in 0.35 (refactor audit 2026-10,
- * API-6c). A reference bank only: `presetById` resolves none of these ids, and no app
- * imports it (deferred since the 2026-09-22 audit).
- */
-export declare const ALTERNATIVE_PRESETS: PalettePreset[];
 export declare const IMPRINT_PRESET: PalettePreset;
 /**
  * Presets DERIVED rather than picked, by `derivePalette` from one brand colour each.