@eifi1/ui-kit 0.34.0 → 0.36.0

package/src/components/wizard-stepper.tsx

@@ -5,16 +5,12 @@ import { cn } from "../lib/cn";
 export function WizardStepper({
   steps,
   current,
-  "aria-label": ariaLabelAttr,
-  ariaLabel,
+  "aria-label": ariaLabel,
 }: {
   steps: { key: string; label: string }[];
   current: string;
   /** Names the list of steps ("Import steps"). */
   "aria-label"?: string;
-  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
-   *  Names the steps only when `aria-label` is absent. */
-  ariaLabel?: string;
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
   return (
@@ -22,7 +18,7 @@ export function WizardStepper({
     // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
     // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
     // Where the steps fit, they stay one row.
-    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabelAttr ?? ariaLabel}>
+    <ol className="flex flex-wrap items-center gap-1 text-xs" aria-label={ariaLabel}>
       {steps.map((step, i) => (
         <li key={step.key} className="flex items-center gap-1">
           {i > 0 && <span className="w-4 border-t border-subtle" />}

package/src/currencies.ts

@@ -0,0 +1,70 @@
+// `@eifi1/ui-kit/currencies` — the currencies the kit's pickers offer, as plain data
+// (0.35, keksdose's 0.34 report).
+//
+// This module imports NOTHING: no React, no stylesheet, no other kit module. That is the
+// entry's whole promise, because an app's BUILD reads it in Node — keksdose's Vite plugin
+// builds its flag-icons subset from these country codes while Vite loads its config. Until
+// 0.35 that plugin parsed the `country` literals out of dist/components/currency-select.js;
+// 0.34 moved the list into the picker's option list and 91 of its test files failed at
+// load. A file inside dist/ is not something the kit promises; an entry is.
+// packaging-contract.test.ts pins the purity, scripts/verify-package.mjs the load in Node.
+//
+// CurrencySelect, AmountInput's currency chip and NumberInput's code detection read this
+// same array (components/currency-option-list re-exports it, and currency-select as it
+// always has), so the list the pickers show and the flags an app ships cannot drift.
+
+export interface CurrencyOption {
+  code: string;
+  name: string;
+  symbol: string;
+  /** ISO 3166-1 alpha-2 country code (lowercase) used by flag-icons. */
+  country: string;
+}
+
+export const CURRENCIES: CurrencyOption[] = [
+  { code: "EUR", name: "Euro", symbol: "€", country: "eu" },
+  { code: "USD", name: "US Dollar", symbol: "$", country: "us" },
+  { code: "GBP", name: "British Pound", symbol: "£", country: "gb" },
+  { code: "CHF", name: "Swiss Franc", symbol: "CHF", country: "ch" },
+  { code: "JPY", name: "Japanese Yen", symbol: "¥", country: "jp" },
+  { code: "CAD", name: "Canadian Dollar", symbol: "CA$", country: "ca" },
+  { code: "AUD", name: "Australian Dollar", symbol: "A$", country: "au" },
+  { code: "NZD", name: "New Zealand Dollar", symbol: "NZ$", country: "nz" },
+  { code: "SEK", name: "Swedish Krona", symbol: "kr", country: "se" },
+  { code: "NOK", name: "Norwegian Krone", symbol: "kr", country: "no" },
+  { code: "DKK", name: "Danish Krone", symbol: "kr", country: "dk" },
+  { code: "PLN", name: "Polish Zloty", symbol: "zł", country: "pl" },
+  { code: "CZK", name: "Czech Koruna", symbol: "Kč", country: "cz" },
+  { code: "HUF", name: "Hungarian Forint", symbol: "Ft", country: "hu" },
+  { code: "RON", name: "Romanian Leu", symbol: "lei", country: "ro" },
+  { code: "BGN", name: "Bulgarian Lev", symbol: "лв", country: "bg" },
+  { code: "TRY", name: "Turkish Lira", symbol: "₺", country: "tr" },
+  { code: "RUB", name: "Russian Ruble", symbol: "₽", country: "ru" },
+  { code: "CNY", name: "Chinese Yuan", symbol: "¥", country: "cn" },
+  { code: "HKD", name: "Hong Kong Dollar", symbol: "HK$", country: "hk" },
+  { code: "SGD", name: "Singapore Dollar", symbol: "S$", country: "sg" },
+  { code: "INR", name: "Indian Rupee", symbol: "₹", country: "in" },
+  { code: "BRL", name: "Brazilian Real", symbol: "R$", country: "br" },
+  { code: "MXN", name: "Mexican Peso", symbol: "MX$", country: "mx" },
+  { code: "ZAR", name: "South African Rand", symbol: "R", country: "za" },
+  { code: "ILS", name: "Israeli Shekel", symbol: "₪", country: "il" },
+  { code: "AED", name: "UAE Dirham", symbol: "د.إ", country: "ae" },
+];
+
+/**
+ * Each currency code → the flag the kit paints for it: the lowercase ISO 3166-1 alpha-2
+ * code flag-icons names it by (`fi-ch`, `flags/4x3/ch.svg`). `CHF` → `"ch"`, `EUR` →
+ * `"eu"` (flag-icons has the EU's flag under that code).
+ *
+ * Derived from {@link CURRENCIES}, so a currency the pickers gain is a flag here too. An
+ * app that ships only the flags it renders builds its subset from these values:
+ *
+ * ```ts
+ * // vite.config.ts — plain Node, no DOM
+ * import { CURRENCY_COUNTRIES } from "@eifi1/ui-kit/currencies";
+ * const flags = new Set(Object.values(CURRENCY_COUNTRIES));
+ * ```
+ */
+export const CURRENCY_COUNTRIES: Record<string, string> = Object.fromEntries(
+  CURRENCIES.map((c) => [c.code, c.country]),
+);

package/src/demo/demo-banner.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithRef } from "react";
 import { ChevronDown, ChevronUp, Timer } from "lucide-react";
 
 import { cn } from "../lib/cn";
@@ -30,7 +30,12 @@ function timeText(countdown: DemoCountdown, labels: DemoLabels): string {
     : labels.hoursLeft(countdown.hours, countdown.minutes);
 }
 
-export interface DemoBannerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+/**
+ * A `div`'s props, `ref` included since 0.35 (round 0.35 R4, the follow-up to API-2). They
+ * go on to the {@link AlertBanner} strip, so the ref is the strip's own `<div>` — never a
+ * link or a button: the banner takes no `href` or `onClick` of its own.
+ */
+export interface DemoBannerProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onClick"> {
   /** The demo's end: `expires_at` from the `TokenResponse`, or `demo_expires_at` from
    *  `/auth/me` (§5.3). */
   expiresAt: DemoExpiry | null | undefined;

package/src/eslint/index.ts

@@ -0,0 +1,161 @@
+// `@eifi1/ui-kit/eslint` — the kit's role-utility rule for an app's own markup (round 0.35
+// R5, Kurvenschmiede's Q6).
+//
+// The kit holds its markup to "write `text-muted`, not `text-[var(--text-muted)]`" with
+// `npm run check:tokens`, at zero since 0.34. The apps are asked to follow the same rule
+// (README "How to write a colour"), but nothing in their builds objected when a
+// `[var(--role)]` class came back. This is that check as an ESLint plugin, so an app's
+// `eslint.config.js` turns it on with one line:
+//
+//   import uiKit from "@eifi1/ui-kit/eslint";
+//   export default [..., uiKit.configs.recommended];
+//
+// It reads every string literal and template-literal quasi — a JSX `className`, a `cn()` or
+// `clsx()` argument, a class constant — and reports a `[var(--x)]` class where the property
+// has a role utility for that token, naming it. One utility is an autofix that keeps the
+// variants and the opacity: `hover:text-[var(--text-muted)]/70` → `hover:text-muted/70`.
+//
+// Plain Node, like the rest of an ESLint config: no React, no stylesheet, and no import of
+// `eslint` itself, which is the app's (packaging-contract.test.ts refuses an undeclared
+// package in src/), so the few types it needs are written out below.
+import { findRoleClasses } from "./role-utilities";
+import { ROLE_UTILITIES } from "./role-utilities.generated";
+
+interface Position {
+  line: number;
+  column: number;
+}
+
+/** The part of an ESTree string node the rule reads. */
+interface StringNode {
+  type: string;
+  value?: unknown;
+  range?: [number, number];
+  loc?: { start: Position; end: Position } | null;
+}
+
+interface Fix {
+  range: [number, number];
+  text: string;
+}
+
+/**
+ * The part of ESLint's rule context the rule uses — `sourceCode.text` and `report`, which
+ * every ESLint since flat config has — so that ESLint's own RuleContext, and @eslint/core's
+ * that `defineConfig` checks a plugin against, are assignable to it. The source is only an
+ * `object` here because a language's source may be binary, with no `text` at all.
+ */
+interface RoleUtilitiesContext {
+  sourceCode: object;
+  report(descriptor: {
+    loc: { start: Position; end: Position };
+    messageId: string;
+    data: Record<string, string>;
+    fix: ((fixer: { replaceTextRange(range: [number, number], text: string): Fix }) => Fix) | null;
+  }): void;
+}
+
+interface RoleUtilitiesRule {
+  meta: {
+    type: "suggestion";
+    docs: { description: string; url: string };
+    fixable: "code";
+    schema: [];
+    messages: { useRoleUtility: string };
+  };
+  create(context: RoleUtilitiesContext): {
+    Literal(node: StringNode): void;
+    TemplateElement(node: StringNode): void;
+  };
+}
+
+const roleUtilities: RoleUtilitiesRule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Write a colour role's utility (text-muted) rather than its [var(--…)] class",
+      url: "https://github.com/Eifi1/ui-kit#lint-the-role-utilities-in-an-app",
+    },
+    fixable: "code",
+    schema: [],
+    messages: {
+      useRoleUtility:
+        "Write the role utility `{{utilities}}`, not `{{found}}`: variants and an opacity work on it the same (tokens.css, @theme inline).",
+    },
+  },
+  create(context) {
+    const source = context.sourceCode as { text?: unknown };
+    const text = typeof source.text === "string" ? source.text : "";
+    const check = (node: StringNode) => {
+      if (!node.range || !node.loc) return;
+      const [start] = node.range;
+      const { line, column } = node.loc.start;
+      // An offset in the node's source text — quotes included, so it is an offset in the
+      // file — as a position. A template literal may span lines.
+      const at = (offset: number): Position => {
+        const lines = text.slice(start, start + offset).split("\n");
+        const last = lines.length - 1;
+        return { line: line + last, column: last ? lines[last].length : column + offset };
+      };
+      for (const hit of findRoleClasses(text.slice(start, node.range[1]), ROLE_UTILITIES)) {
+        const end = hit.index + hit.found.length;
+        const range: [number, number] = [start + hit.index, start + end];
+        const [only] = hit.utilities;
+        context.report({
+          loc: { start: at(hit.index), end: at(end) },
+          messageId: "useRoleUtility",
+          data: { found: hit.found, utilities: hit.utilities.join("` or `") },
+          // Several names for one token are a choice, not a fix.
+          fix: hit.utilities.length === 1 ? (fixer) => fixer.replaceTextRange(range, only) : null,
+        });
+      }
+    };
+    return {
+      Literal(node) {
+        if (typeof node.value === "string") check(node);
+      },
+      TemplateElement: check,
+    };
+  },
+};
+
+// The kit's version, baked in by tsup's `define` (tsup.config.ts). ESLint's cache keys a
+// file's result on each plugin's name@version, so without it an app's `eslint --cache`
+// would keep a file's old verdict after a kit release that gave a role a utility. Unset
+// when the source runs (the tests), where nothing is cached.
+declare const __UI_KIT_VERSION__: string | undefined;
+const VERSION = typeof __UI_KIT_VERSION__ === "string" ? __UI_KIT_VERSION__ : "0.0.0-source";
+
+/** Spelled out, self-reference included, so a typed config (`defineConfig`, `tseslint.config`) takes it. */
+interface UiKitEslintPlugin {
+  meta: { name: string; version: string; namespace: string };
+  rules: { "role-utilities": RoleUtilitiesRule };
+  configs: {
+    /** The rule as an error, on every file the app's other config objects lint but its tests. */
+    recommended: {
+      name: string;
+      ignores: string[];
+      plugins: { "@eifi1/ui-kit": UiKitEslintPlugin };
+      rules: { "@eifi1/ui-kit/role-utilities": "error" };
+    };
+  };
+}
+
+const recommended: UiKitEslintPlugin["configs"]["recommended"] = {
+  name: "@eifi1/ui-kit/recommended",
+  // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it
+  // is gone (keksdose's cleared-status-toggle.test.tsx does, three times).
+  ignores: ["**/__tests__/**", "**/*.test.*", "**/*.spec.*"],
+  plugins: {} as UiKitEslintPlugin["configs"]["recommended"]["plugins"],
+  rules: { "@eifi1/ui-kit/role-utilities": "error" },
+};
+
+/** The flat-config plugin: add `configs.recommended`, or register it under `@eifi1/ui-kit`. */
+const plugin: UiKitEslintPlugin = {
+  meta: { name: "@eifi1/ui-kit", version: VERSION, namespace: "@eifi1/ui-kit" },
+  rules: { "role-utilities": roleUtilities },
+  configs: { recommended },
+};
+recommended.plugins["@eifi1/ui-kit"] = plugin;
+
+export default plugin;

package/src/eslint/role-utilities.generated.ts

@@ -0,0 +1,146 @@
+// GENERATED by scripts/gen-role-utilities.mjs from tokens.css's `@theme inline` block — do
+// not edit. `npm run check:tokens` fails while it is stale; re-run the script.
+//
+// Per property, each token that has a role utility → the utility's name after the
+// property's prefix (`border`: `--border` → `subtle`, i.e. `border-subtle`). Read by
+// `@eifi1/ui-kit/eslint` and scripts/check-token-discipline.mjs (round 0.35 R5).
+import type { RoleUtilityTable } from "./role-utilities";
+
+export const ROLE_UTILITIES: RoleUtilityTable = {
+  "text": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--text-placeholder": ["placeholder"],
+    "--text-inverse": ["inverse"],
+    "--brand": ["brand"],
+    "--brand-muted": ["brand-muted"],
+    "--danger": ["danger"],
+    "--warning": ["warning"],
+    "--success": ["success"],
+    "--info": ["info"],
+    "--money-income": ["money-income"],
+    "--money-expense": ["money-expense"],
+    "--money-net": ["money-net"],
+    "--money-neutral": ["money-neutral"],
+    "--hue-blue": ["hue-blue"],
+    "--hue-indigo": ["hue-indigo"],
+    "--hue-purple": ["hue-purple"],
+    "--hue-teal": ["hue-teal"],
+    "--hue-orange": ["hue-orange"],
+    "--brand-contrast": ["brand-contrast"],
+    "--danger-contrast": ["danger-contrast"],
+    "--warning-contrast": ["warning-contrast"],
+    "--success-contrast": ["success-contrast"],
+    "--info-contrast": ["info-contrast"],
+    "--neutral-contrast": ["neutral-contrast"],
+    "--money-income-contrast": ["money-income-contrast"],
+    "--money-expense-contrast": ["money-expense-contrast"],
+    "--money-net-contrast": ["money-net-contrast"],
+    "--money-neutral-contrast": ["money-neutral-contrast"],
+    "--hue-blue-contrast": ["hue-blue-contrast"],
+    "--hue-indigo-contrast": ["hue-indigo-contrast"],
+    "--hue-purple-contrast": ["hue-purple-contrast"],
+    "--hue-teal-contrast": ["hue-teal-contrast"],
+    "--hue-orange-contrast": ["hue-orange-contrast"],
+    "--media-ink": ["media-ink"],
+  },
+  "bg": {
+    "--bg-page": ["page"],
+    "--bg-surface": ["surface"],
+    "--bg-surface-2": ["surface-2"],
+    "--bg-hover": ["hover"],
+    "--bg-active": ["active"],
+    "--bg-inverse": ["inverse"],
+    "--brand": ["brand"],
+    "--brand-hover": ["brand-hover"],
+    "--brand-bg": ["brand-soft"],
+    "--brand-bg-hover": ["brand-soft-hover"],
+    "--danger": ["danger"],
+    "--danger-hover": ["danger-hover"],
+    "--warning": ["warning"],
+    "--success": ["success"],
+    "--info": ["info"],
+    "--neutral": ["neutral"],
+    "--money-income": ["money-income"],
+    "--money-expense": ["money-expense"],
+    "--money-net": ["money-net"],
+    "--money-neutral": ["money-neutral"],
+    "--danger-bg": ["danger-soft"],
+    "--warning-bg": ["warning-soft"],
+    "--success-bg": ["success-soft"],
+    "--info-bg": ["info-soft"],
+    "--hue-blue": ["hue-blue"],
+    "--hue-indigo": ["hue-indigo"],
+    "--hue-purple": ["hue-purple"],
+    "--hue-teal": ["hue-teal"],
+    "--hue-orange": ["hue-orange"],
+    "--hue-blue-bg": ["hue-blue-soft"],
+    "--hue-indigo-bg": ["hue-indigo-soft"],
+    "--hue-purple-bg": ["hue-purple-soft"],
+    "--hue-teal-bg": ["hue-teal-soft"],
+    "--hue-orange-bg": ["hue-orange-soft"],
+    "--media-scrim": ["media-scrim"],
+    "--media-scrim-hover": ["media-scrim-hover"],
+  },
+  "border": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--danger-border": ["danger"],
+    "--warning-border": ["warning"],
+    "--success-border": ["success"],
+    "--info-border": ["info"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+    "--hue-blue-border": ["hue-blue"],
+    "--hue-indigo-border": ["hue-indigo"],
+    "--hue-purple-border": ["hue-purple"],
+    "--hue-teal-border": ["hue-teal"],
+    "--hue-orange-border": ["hue-orange"],
+    "--media-ink": ["media-ink"],
+  },
+  "ring": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--brand-contrast": ["brand-contrast"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+    "--media-ink": ["media-ink"],
+  },
+  "ring-offset": {
+    "--bg-page": ["page"],
+    "--bg-surface": ["surface"],
+    "--media-scrim-hover": ["media-scrim-hover"],
+  },
+  "outline": {
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+    "--brand": ["brand"],
+    "--danger-border-strong": ["danger-strong"],
+    "--warning-border-strong": ["warning-strong"],
+  },
+  "fill": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--bg-surface": ["surface"],
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+  },
+  "stroke": {
+    "--text-primary": ["primary"],
+    "--text-secondary": ["secondary"],
+    "--text-muted": ["muted"],
+    "--bg-surface": ["surface"],
+    "--border": ["subtle"],
+    "--border-strong": ["strong"],
+  },
+  "ring-width": {
+    "--focus-ring-width": ["focus"],
+  },
+  "outline-width": {
+    "--focus-ring-width": ["focus"],
+  },
+};

package/src/eslint/role-utilities.ts

@@ -0,0 +1,99 @@
+// Which `[var(--token)]` classes have a role utility, and what it is called — the one
+// definition `@eifi1/ui-kit/eslint`'s `role-utilities` rule and `npm run check:tokens`
+// (scripts/check-token-discipline.mjs) both read (round 0.35 R5, Kurvenschmiede's Q6).
+//
+// The table itself is role-utilities.generated.ts, re-rendered from tokens.css's
+// `@theme inline` block by scripts/gen-role-utilities.mjs with the parser below; the
+// check fails while it is stale. So tokens.css stays the source: a role that gains a
+// utility there is flagged in the kit and in the apps from the next release on.
+//
+// This module imports NOTHING, and its TypeScript is erasable only (no enum, no
+// namespace, no parameter property): the check imports it from source under Node's type
+// stripping, before any build, and the plugin ships it to an app's ESLint, which is
+// plain Node with no React and no stylesheet.
+
+/**
+ * The properties a role utility exists for, each with the Tailwind theme namespace it is
+ * declared in. `ring-width` and `outline-width` are a width typed `length:` —
+ * `ring-[length:var(--focus-ring-width)]` is `ring-focus`. `divide-*` and the side borders
+ * (`border-t-*`, `border-x-*` …) read `border`'s, as Tailwind does.
+ */
+export const ROLE_NAMESPACES = {
+  text: "text-color",
+  bg: "background-color",
+  border: "border-color",
+  ring: "ring-color",
+  "ring-offset": "ring-offset-color",
+  outline: "outline-color",
+  fill: "fill",
+  stroke: "stroke",
+  "ring-width": "ring-width",
+  "outline-width": "outline-width",
+} as const;
+
+export type RoleProperty = keyof typeof ROLE_NAMESPACES;
+
+/**
+ * Per property, each token that has a role utility → the utility's name after the
+ * property's prefix: `border: { "--border": ["subtle"] }` is `border-subtle`. A list,
+ * because nothing stops two names from reading one token; one name is a fix, several a
+ * choice.
+ */
+export type RoleUtilityTable = {
+  readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;
+};
+
+/**
+ * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its
+ * `@theme inline` block, in block order. `null` when there is no such block — the role
+ * utilities are gone, or this parser is.
+ */
+export function roleUtilitiesFromCss(css: string): RoleUtilityTable | null {
+  const theme = /@theme inline\s*\{([^}]*)\}/.exec(css.replace(/\/\*[\s\S]*?\*\//g, ""))?.[1];
+  if (theme === undefined) return null;
+  const table = {} as Record<RoleProperty, Record<string, string[]>>;
+  for (const prop of Object.keys(ROLE_NAMESPACES) as RoleProperty[]) {
+    const names: Record<string, string[]> = {};
+    const declared = new RegExp(`--${ROLE_NAMESPACES[prop]}-([a-z0-9-]+)\\s*:\\s*var\\((--[a-z0-9-]+)\\)`, "g");
+    for (const [, name, token] of theme.matchAll(declared)) (names[token] ??= []).push(name);
+    table[prop] = names;
+  }
+  return table;
+}
+
+/**
+ * `text-[var(--text-muted)]`, `hover:bg-[var(--bg-hover)]`, `border-t-[var(--border)]`,
+ * `focus-visible:ring-[var(--brand)]/40`, `ring-offset-[var(--bg-surface)]`,
+ * `ring-[length:var(--focus-ring-width)]`. Preceded by a start, a space, a quote or a
+ * variant's colon, which the match does not include — nor the variants before it or an
+ * opacity or `!` after it — so replacing the match keeps all of them.
+ */
+const ROLE_CLASS =
+  /(?<=^|[\s"'`:])(text|bg|border(?:-[xytrblse])?|divide|ring-offset|ring|outline|fill|stroke)-\[(length:)?var\((--[a-zA-Z0-9-]+)\)\]/g;
+
+export interface RoleClassHit {
+  /** Where the class starts in the scanned text, after its variants. */
+  index: number;
+  /** The class as written, without variants or opacity: `border-t-[var(--border)]`. */
+  found: string;
+  /** The role utilities that paint the same: `["border-t-subtle"]`. */
+  utilities: string[];
+}
+
+/**
+ * Every `[var(--token)]` class in `text` whose token has a role utility on that property.
+ * A token with no utility there (`text-[var(--chart-1)]`, `--status-*`,
+ * `bg-[var(--border)]` as a divider's fill) is not a hit: `[var(--…)]` is right for it.
+ */
+export function findRoleClasses(text: string, table: RoleUtilityTable): RoleClassHit[] {
+  if (!text.includes("var(--")) return [];
+  const hits: RoleClassHit[] = [];
+  for (const m of text.matchAll(ROLE_CLASS)) {
+    const [found, prop, length, token] = m;
+    // `border-t` and `divide` read `border`'s names; a `length:` hint reads the widths.
+    const key = length ? `${prop}-width` : prop.startsWith("border-") || prop === "divide" ? "border" : prop;
+    const names = (table as Partial<Record<string, Readonly<Record<string, readonly string[]>>>>)[key]?.[token];
+    if (names?.length) hits.push({ index: m.index, found, utilities: names.map((name) => `${prop}-${name}`) });
+  }
+  return hits;
+}

package/src/feedback/feedback-menu.tsx

@@ -56,8 +56,8 @@ export interface FeedbackMenuProps {
   iconBadge?: UserAvatarBadge | null;
   /** Prop > `<UiKitProvider labels={{ feedbackMenu }}>` > English. */
   labels?: LabelOverride<FeedbackMenuLabels>;
-  /** Which edge of the trigger the panel lines up with (see `HoverMenu`, whose type this
-   *  is: `left`/`right` are deprecated 0.34). Default `end`. */
+  /** Which edge of the trigger the panel lines up with, `start` or `end` in the reading
+   *  direction (see `HoverMenu`, whose type this is). Default `end`. */
   align?: HoverMenuProps["align"];
 }
 

package/src/feedback/feedback-thread.tsx

@@ -646,7 +646,7 @@ export interface FeedbackComposerProps {
 }
 
 /**
- * What a {@link FeedbackComposer} `ref` holds.
+ * What a {@link ChatComposer} `ref` holds.
  *
  * keksdose F9: the support admin answers the same five questions all day and wants
  * chips above the box ("Thanks, fixed in the next release") that drop their text in
@@ -679,7 +679,8 @@ const isApple = () =>
  * Named for what it is since 0.22 (keksdose K17): the component was never
  * feedback-specific — a textarea, an optional picture or a host's upload slot, Send,
  * `sendOn="enter"` for the chat way — and keksdose's assistant and support chat are
- * chats, not reports. `FeedbackComposer` is its old name, deprecated in 0.34.
+ * chats, not reports. `FeedbackComposer`, its old name, was removed in 0.35 (refactor
+ * audit 2026-10, API-6d; deprecated in 0.34); its types keep theirs.
  */
 export function ChatComposer({
   onSend,
@@ -892,12 +893,6 @@ function dataAttributes(props: object): Record<string, unknown> {
   return out;
 }
 
-/**
- * @deprecated 0.34 — `ChatComposer`, the same function under the name that is not about
- * feedback; removed in 0.35 (refactor audit 2026-10, API-6d). keksdose's support thread
- * is the one app site.
- */
-export const FeedbackComposer = ChatComposer;
 /** {@link FeedbackComposerProps}, for {@link ChatComposer}. */
 export type ChatComposerProps = FeedbackComposerProps;
 /** {@link FeedbackComposerHandle}, for {@link ChatComposer}. */

package/src/hooks/use-dismiss.ts

@@ -47,6 +47,12 @@ import { isComposing } from "../lib/ime";
  * anywhere else claims nothing: a search box keeping Chromium from clearing itself
  * must not hold a dialog open (FullBleedDialog's 0.8.0 fix, which Modal never had).
  *
+ * The owner's handler hears Escape only while its own layer is on top (0.35, KS). It
+ * runs before the stack is asked, so with a tooltip, a hover menu or a list open over
+ * the dialog and focus on the panel, the gear wizard asked "Discard this gear?" and the
+ * tooltip stayed. Now the layer above takes that press, and the next one is the
+ * owner's. Every other key reaches the handler as before.
+ *
  * A handler that STOPS the key before it reaches a layer element has taken it too —
  * that is the DOM, and it is what the kit's cell editors and confirm buttons do.
  */
@@ -56,6 +62,10 @@ interface Layer {
   escape: (e: KeyboardEvent) => void;
 }
 
+/** What {@link useDismissLayer} hands back: its layer while open, for
+ *  {@link runOwnKeyDown} to tell whether that layer is the one on top. */
+export type DismissLayer = RefObject<Layer | null>;
+
 /** Open layers, oldest first. Module-level, because the order is ACROSS instances. */
 const layers: Layer[] = [];
 
@@ -123,10 +133,11 @@ function pop(layer: Layer): void {
  * Where focus can be INSIDE the layer, its element's `onKeyDown` calls
  * {@link takeEscape} too, so the key stops there — see the module note. `onEscape` is
  * read live, so it need not be memoised; the layer is pushed and popped only when
- * `open` flips.
+ * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.
  */
-export function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): void {
+export function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer {
   const handlerRef = useRef(onEscape);
+  const layerRef = useRef<Layer | null>(null);
   // Written in an effect, not during render, so it satisfies react-hooks/refs: a
   // render that React starts and then discards — a transition, a Suspense retry —
   // would otherwise leave this holding a handler from a tree that never committed,
@@ -138,9 +149,14 @@ export function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => v
   useEffect(() => {
     if (!open || typeof document === "undefined") return;
     const layer: Layer = { escape: (e) => handlerRef.current(e) };
+    layerRef.current = layer;
     push(layer);
-    return () => pop(layer);
+    return () => {
+      pop(layer);
+      layerRef.current = null;
+    };
   }, [open]);
+  return layerRef;
 }
 
 /**
@@ -167,14 +183,33 @@ export function claimEscape(e: KeyboardEvent | ReactKeyboardEvent): void {
  * Runs a layer owner's own key handler — a dialog's `onKeyDown` prop — and turns a
  * `preventDefault()` it makes on Escape into a claim: the one way, beside
  * {@link claimEscape}, to keep a layer open.
+ *
+ * Given the owner's `layer` (what {@link useDismissLayer} returned), an Escape that went
+ * down while another layer was above that one skips the handler: the press is the
+ * layer's on top, and the owner hears the next (0.35, KS). Without it, or while the
+ * owner's layer is not open, the handler sees every key, as before.
  */
-export function runOwnKeyDown<E extends ReactKeyboardEvent>(e: E, handler: ((e: E) => void) | undefined): void {
+export function runOwnKeyDown<E extends ReactKeyboardEvent>(
+  e: E,
+  handler: ((e: E) => void) | undefined,
+  layer?: DismissLayer,
+): void {
   if (!handler) return;
+  if (layer && aboveOwner(e, layer.current)) return;
   const before = e.defaultPrevented;
   handler(e);
   if (e.key === "Escape" && !before && e.defaultPrevented) claimed.add(nativeOf(e));
 }
 
+/** Whether this Escape went down with a layer above `owner` — the topmost one then was
+ *  another, and `owner` is on the stack. An Escape the stack did not note (one inside an
+ *  IME composition) is nobody else's. */
+function aboveOwner(e: ReactKeyboardEvent, owner: Layer | null): boolean {
+  const flight = inFlight;
+  if (e.key !== "Escape" || !owner || !flight || flight.event !== nativeOf(e)) return false;
+  return flight.layer !== owner && layers.includes(owner);
+}
+
 /**
  * Calls `handler` on an Escape while `enabled` — as an Escape layer. Since 0.34 this is
  * {@link useDismissLayer} with its arguments the other way round: it hears the key only