@tailor-platform/app-shell 1.18.0 → 1.20.0

package/skills/app-shell-patterns/references/pages/document-detail.md

@@ -209,7 +209,7 @@ saying so, and it is never a substitute for scrolling or paging.
 
 Columns, left to right:
 
-1. **Identity** — the item name, with the SKU beneath it in muted mono `text-xs`. Two facts, one column.
+1. **Identity** — the item name, with the SKU beneath it in muted `code-sm`. Two facts, one column.
 2. **The record's own numbers** — quantity, unit of measure, unit price. Every document has these.
 3. **Numbers from related records**, where they exist and the reader needs them (see below).
 4. **Subtotal**, derived, last.
@@ -535,7 +535,7 @@ says "clickable" without a hover, and the resting underline is noise. Add
 - **Internal** (another route in the app) → the `Link` exported by app-shell, with `to`. Never a bare `<a href>` for an in-app route.
 - **External** (another system) → `<a target="_blank" rel="noopener noreferrer">` with a lucide `ExternalLink` at `size-3` after the label, so the new tab is signposted. There is no dedicated external-link component; this is the whole recipe.
 - **Identifiers** keep their `font-mono` on top of the link style.
-- **A `render` field owns its typography.** `DescriptionCard` applies none of its value styling to custom output, so a bare string from `render` reads a size larger than the values around it. Wrap it in `text-sm font-medium text-foreground` — the reference implementation's `Value` helper.
+- **A `render` field owns its typography.** `DescriptionCard` applies none of its value styling to custom output, so a bare string from `render` does not match the values around it. Wrap it in `Text` with `variant="body-md"` and `text-foreground`, the same role the built-in values use — the reference implementation's `Value` helper.
 
 ## Patterns for the parts
 
@@ -571,6 +571,7 @@ import {
   Link,
   Table,
   Tabs,
+  Text,
 } from "@tailor-platform/app-shell";
 import type { ActionPanelProps } from "@tailor-platform/app-shell";
 import {
@@ -614,15 +615,17 @@ const formatDay = (value: string) =>
 
 /**
  * A `render` field owns its own presentation — DescriptionCard applies none of
- * the built-in value typography to it — so match that style here or the two
- * dates read a size larger than every other value on the card.
+ * the built-in value typography to it — so use the same role here (`body-md`)
+ * or the two dates do not match every other value on the card.
  */
 const Value = ({ children }: { children: React.ReactNode }) => (
-  <span className="text-sm font-medium text-foreground">{children}</span>
+  <Text.span variant="body-md" className="text-foreground">
+    {children}
+  </Text.span>
 );
 
 /** House link: primary colour at rest, underline only on hover. */
-const DOC_LINK = "font-mono text-xs text-primary underline-offset-4 hover:underline";
+const DOC_LINK = "font-mono text-code-sm text-primary underline-offset-4 hover:underline";
 
 export default function PurchaseOrderDetailPage({
   order,
@@ -676,16 +679,18 @@ export default function PurchaseOrderDetailPage({
           destructive: it's a problem to clear, not information to read.
           Each hold is released on its own, beside its own reason. */}
       {order.holds.length > 0 && (
-        <Card.Root className="border-destructive">
+        <Card.Root className="border-danger-solid">
           <Card.Header title="On hold" />
           <Card.Content className="flex flex-col gap-3">
             {order.holds.map((hold) => (
               <div key={hold.id} className="flex items-start justify-between gap-4">
                 <div>
-                  <p className="text-sm font-medium text-foreground">{hold.reason}</p>
-                  <p className="text-xs text-muted-foreground">
+                  <Text.p variant="label-md" className="text-foreground">
+                    {hold.reason}
+                  </Text.p>
+                  <Text variant="body-sm" className="text-muted-foreground">
                     Placed by {hold.placedBy} on {formatDay(hold.placedAt)}
-                  </p>
+                  </Text>
                 </div>
                 <Button
                   size="sm"
@@ -810,7 +815,9 @@ export default function PurchaseOrderDetailPage({
         <Card.Header title="Line items" />
         <Card.Content padding="none">
           {order.lineItems.length === 0 ? (
-            <p className="px-6 text-sm text-muted-foreground">No line items on this order.</p>
+            <Text variant="body-md" className="px-6 text-muted-foreground">
+              No line items on this order.
+            </Text>
           ) : (
             <Table.Root>
               <Table.Header>
@@ -829,9 +836,9 @@ export default function PurchaseOrderDetailPage({
                     {/* Two facts, one column. */}
                     <Table.Cell>
                       <span className="block">{line.itemName}</span>
-                      <span className="block font-mono text-xs text-muted-foreground">
+                      <Text variant="code-sm" className="block text-muted-foreground">
                         {line.sku}
-                      </span>
+                      </Text>
                     </Table.Cell>
                     <Table.Cell align="right" className="tabular-nums">
                       {line.qty}
@@ -844,9 +851,9 @@ export default function PurchaseOrderDetailPage({
                     <Table.Cell align="right" className="tabular-nums">
                       {line.received}
                       {line.received !== line.qty && (
-                        <span className="ml-1 text-xs text-muted-foreground">
+                        <Text.span variant="body-sm" className="ml-1 text-muted-foreground">
                           ({line.qty - line.received})
-                        </span>
+                        </Text.span>
                       )}
                     </Table.Cell>
                     <Table.Cell align="right" className="tabular-nums">
@@ -877,9 +884,9 @@ export default function PurchaseOrderDetailPage({
         <Card.Header title="Goods receipts" />
         <Card.Content padding="none">
           {order.goodsReceipts.length === 0 ? (
-            <p className="px-6 text-sm text-muted-foreground">
+            <Text variant="body-md" className="px-6 text-muted-foreground">
               No goods receipts linked to this order.
-            </p>
+            </Text>
           ) : (
             <Table.Root>
               <Table.Header>
@@ -922,15 +929,15 @@ export default function PurchaseOrderDetailPage({
                 href={file.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 text-sm text-primary underline-offset-4 hover:underline"
+                className="inline-flex items-center gap-2 text-body-md text-primary underline-offset-4 hover:underline"
               >
                 <FileText className="size-4 shrink-0" />
                 {file.name}
                 <ExternalLink className="size-3 shrink-0" />
               </a>
-              <span className="shrink-0 text-xs text-muted-foreground">
+              <Text.span variant="body-sm" className="shrink-0 text-muted-foreground">
                 {file.sizeLabel} · {formatDay(file.uploadedAt)}
-              </span>
+              </Text.span>
             </div>
           ))}
         </Card.Content>
@@ -1011,9 +1018,9 @@ export default function PurchaseOrderDetailPage({
                         <Table.Row key={line.id}>
                           <Table.Cell>
                             <span className="block">{line.account}</span>
-                            <span className="block font-mono text-xs text-muted-foreground">
+                            <Text variant="code-sm" className="block text-muted-foreground">
                               {line.accountCode}
-                            </span>
+                            </Text>
                           </Table.Cell>
                           <Table.Cell align="right" className="tabular-nums">
                             {line.debit === null ? "—" : `${line.debit.toLocaleString()}`}
@@ -1047,14 +1054,14 @@ export default function PurchaseOrderDetailPage({
                 href={externalSource.href}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 text-sm text-primary underline-offset-4 hover:underline"
+                className="inline-flex items-center gap-1 text-body-md text-primary underline-offset-4 hover:underline"
               >
                 {externalSource.recordLabel}
                 <ExternalLink className="size-3" />
               </a>
-              <p className="mt-1 text-xs text-muted-foreground">
+              <Text variant="body-sm" className="mt-1 text-muted-foreground">
                 Synced {externalSource.syncedAt.toLocaleDateString()}
-              </p>
+              </Text>
             </Card.Content>
           </Card.Root>
         )}

package/skills/app-shell-patterns/references/patterns/form-modal.md

@@ -147,7 +147,9 @@ placeholder.
   render_ — a submit gate, a dependent placeholder, a live character count. That state is
   load-bearing, not mirrored; see `form/composer`.
 - **`Field.Control` is already a styled input.** Write `<Field.Control />`, not
-  `<Field.Control render={<Input />} />`.
+  `<Field.Control render={<Input />} />`. Every other control — `Select`, `Combobox`,
+  `Autocomplete`, `Checkbox`, `Textarea`, `DateField`, `DatePicker` — goes directly under
+  `Field.Root`. Passing one to `Field.Control`'s `render` draws a second frame around it.
 - **Object items need `itemToStringValue`.** Items shaped `{ value, label }` submit `value`
   automatically; any other object submits as a JSON string unless you supply it.
 - **Server errors go through `Form`'s `errors` prop**, keyed by field `name` — not a toast or a
@@ -165,4 +167,5 @@ placeholder.
 - Registering the create path as a separate top-level route — that unmounts the parent list
 - Reaching for React Hook Form on a form this size — `onFormSubmit` already covers it
 - Holding a `Select`/`Combobox` value in `useState` just to submit it — `Field.Root` already does
+- Wrapping a `Select`/`Combobox` in `Field.Control` (`render={<Select />}`) — a double frame
 - Surfacing API validation failures in a toast or banner instead of routing them via `errors`

package/skills/app-shell-patterns/references/patterns/interaction-multi-select.md

@@ -112,7 +112,7 @@ function InteractionMultiSelect() {
               cancelled; shipped orders are excluded. Cancelled orders can't be reopened.
             </Dialog.Description>
           </Dialog.Header>
-          {cancelError && <p role="alert">{cancelError}</p>}
+          {cancelError && <Text.p role="alert">{cancelError}</Text.p>}
           <Dialog.Footer>
             <Dialog.Close render={<Button variant="outline" disabled={cancelling} />}>
               Keep orders

package/dist/semantic-contrast.test.ts

@@ -1,227 +0,0 @@
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { describe, expect, it } from "vitest";
-
-/**
- * WCAG 1.4.3 contrast checks for the semantic colour roles, computed from
- * `themes/default.css` itself. Nothing is copied into the test, so a change to
- * a hue step or an alias that breaks a pair fails here.
- *
- * Scope of the guarantee: the default state of each pair, on the default
- * palette's `--card` and `--background`. Not covered on purpose:
- * - hover states (`surface-hover`) against 4.5:1: subtle-badge hover text is
- *   below 4.5:1 for some roles (danger and success in light mode). They are held
- *   at a documented floor (MIN_HOVER_TEXT) so they cannot get worse unnoticed,
- *   see decisions/semantic-color-roles.md;
- * - branded palettes (cream, bloom) and their tinted shell backgrounds;
- * - the neutral intent, whose values are the pre-existing system tokens;
- * - the warning `solid` fill against the card (a fill, not a text pair).
- */
-const here = dirname(fileURLToPath(import.meta.url));
-const css = readFileSync(join(here, "themes/default.css"), "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
-
-type Rgba = { r: number; g: number; b: number; a: number };
-type Mode = "light" | "dark";
-
-/** Custom properties in effect on <html> for a mode, applying rules in source order. */
-function variablesFor(mode: Mode): Map<string, string> {
-  const vars = new Map<string, string>();
-  for (const rule of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
-    const selectors = rule[1].split(",").map((s) => s.trim());
-    // <html class="dark"> matches both `:root` and `.dark`; light matches `:root` only.
-    const applies = selectors.some((s) => s === ":root" || (mode === "dark" && s === ".dark"));
-    if (!applies) continue;
-    for (const decl of rule[2].matchAll(/(--[a-z0-9-]+)\s*:\s*([^;]+);/g)) {
-      vars.set(decl[1], decl[2].replace(/\s+/g, " ").trim());
-    }
-  }
-  return vars;
-}
-
-function parseColor(value: string, vars: Map<string, string>): Rgba {
-  const v = value.trim();
-  const ref = /^var\((--[a-z0-9-]+)\)$/.exec(v);
-  if (ref) {
-    const target = vars.get(ref[1]);
-    if (target === undefined) throw new Error(`Undefined variable ${ref[1]}`);
-    return parseColor(target, vars);
-  }
-  const hex = /^#([0-9a-f]{3,8})$/i.exec(v);
-  if (hex) {
-    let h = hex[1];
-    if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("");
-    if (h.length !== 6 && h.length !== 8) throw new Error(`Bad hex colour ${v}`);
-    return {
-      r: parseInt(h.slice(0, 2), 16),
-      g: parseInt(h.slice(2, 4), 16),
-      b: parseInt(h.slice(4, 6), 16),
-      a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1,
-    };
-  }
-  const fn = /^rgba?\(([^)]+)\)$/.exec(v);
-  if (fn) {
-    const [r, g, b, a = "1"] = fn[1].split(",").map((p) => p.trim());
-    return { r: Number(r), g: Number(g), b: Number(b), a: Number(a) };
-  }
-  throw new Error(`Unsupported colour syntax: ${v}`);
-}
-
-function over(top: Rgba, base: Rgba): Rgba {
-  const a = top.a + base.a * (1 - top.a);
-  const mix = (t: number, b: number) => (t * top.a + b * base.a * (1 - top.a)) / a;
-  return { r: mix(top.r, base.r), g: mix(top.g, base.g), b: mix(top.b, base.b), a };
-}
-
-function linearize(channel: number): number {
-  const s = channel / 255;
-  return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-}
-
-function luminance({ r, g, b }: Rgba): number {
-  return 0.2126 * linearize(r) + 0.7152 * linearize(g) + 0.0722 * linearize(b);
-}
-
-function contrast(a: Rgba, b: Rgba): number {
-  const [hi, lo] = [luminance(a), luminance(b)].toSorted((x, y) => y - x);
-  return (hi + 0.05) / (lo + 0.05);
-}
-
-const MIN_TEXT = 4.5;
-/** WCAG 1.4.11 non-text contrast, for the invalid-input border. */
-const MIN_NON_TEXT = 3;
-/** Known and accepted: subtle hover text is below AA for some roles. A floor, not a pass. */
-const MIN_HOVER_TEXT = 4.2;
-const modes: Mode[] = ["light", "dark"];
-const intents = ["info", "success", "warning", "danger"] as const;
-const alertVariantFor = { info: "info", success: "success", warning: "warning", danger: "error" };
-const pages = ["--card", "--background"] as const;
-
-describe.each(modes)("semantic colour contrast (%s)", (mode) => {
-  const vars = variablesFor(mode);
-  const color = (name: string) => parseColor(`var(${name})`, vars);
-  /** Foreground drawn on a translucent surface that sits on a page colour. */
-  const pair = (fg: string, surface: string, page: string) => {
-    const base = color(page);
-    const bg = over(color(surface), base);
-    return contrast(over(color(fg), bg), bg);
-  };
-
-  it("resolves the page colours to opaque values", () => {
-    for (const page of pages) expect(color(page).a).toBe(1);
-  });
-
-  describe.each(intents)("%s", (intent) => {
-    const role = (name: string) => `--${intent}-${name}`;
-
-    it("the contrast role meets 4.5:1 on solid", () => {
-      expect(contrast(color(role("contrast")), color(role("solid")))).toBeGreaterThanOrEqual(
-        MIN_TEXT,
-      );
-    });
-
-    it("the contrast role meets 4.5:1 on solid-hover", () => {
-      expect(contrast(color(role("contrast")), color(role("solid-hover")))).toBeGreaterThanOrEqual(
-        MIN_TEXT,
-      );
-    });
-
-    it.each(pages)("text meets 4.5:1 on surface over %s", (page) => {
-      expect(pair(role("text"), role("surface"), page)).toBeGreaterThanOrEqual(MIN_TEXT);
-    });
-
-    it.each(pages)(
-      "text stays above the documented hover floor on surface-hover over %s",
-      (page) => {
-        expect(pair(role("text"), role("surface-hover"), page)).toBeGreaterThanOrEqual(
-          MIN_HOVER_TEXT,
-        );
-      },
-    );
-
-    const variant = alertVariantFor[intent];
-
-    it.each(pages)("alert foreground meets 4.5:1 on alert background over %s", (page) => {
-      expect(
-        pair(`--alert-${variant}-foreground`, `--alert-${variant}-background`, page),
-      ).toBeGreaterThanOrEqual(MIN_TEXT);
-    });
-
-    it.each(pages)("alert description meets 4.5:1 on alert background over %s", (page) => {
-      expect(
-        pair(`--alert-${variant}-foreground-muted`, `--alert-${variant}-background`, page),
-      ).toBeGreaterThanOrEqual(MIN_TEXT);
-    });
-  });
-
-  describe("destructive aliases", () => {
-    it.each([
-      ["--destructive", "--danger-solid"],
-      ["--destructive-foreground", "--danger-contrast"],
-    ])("%s resolves to %s", (alias, role) => {
-      expect(vars.get(alias)).toBe(`var(${role})`);
-      expect(color(alias)).toEqual(color(role));
-    });
-
-    it.each(pages)("danger solid meets 3:1 against %s (invalid-input border)", (page) => {
-      expect(contrast(color("--danger-solid"), color(page))).toBeGreaterThanOrEqual(MIN_NON_TEXT);
-    });
-  });
-});
-
-describe("default palette neutral tokens", () => {
-  // Pinned when the BRAND and SYSTEM tokens moved from literals onto the gray,
-  // white and alpha scales. That move was meant to keep every value, so a step
-  // change that alters one of these colours fails here.
-  const expected: Record<Mode, Record<string, string>> = {
-    light: {
-      "--foreground": "#0a0a0a",
-      "--muted-foreground": "#737373",
-      "--primary": "#171717",
-      "--primary-foreground": "#fafafa",
-      "--secondary": "#f5f5f5",
-      "--secondary-foreground": "#171717",
-      "--accent-foreground": "#0a0a0a",
-      "--background": "#fafafa",
-      "--card": "#ffffff",
-      "--card-foreground": "#0a0a0a",
-      "--popover": "#ffffff",
-      "--popover-foreground": "#0a0a0a",
-      "--muted": "#f5f5f5",
-      "--border": "#e5e5e5",
-      "--input": "#e5e5e5",
-      "--sidebar": "#fafafa",
-      "--sidebar-foreground": "#0a0a0a",
-      "--sidebar-border": "#e5e5e5",
-      "--backdrop": "rgba(0, 0, 0, 0.5)",
-    },
-    dark: {
-      "--foreground": "#fafafa",
-      "--muted-foreground": "#a3a3a3",
-      "--primary": "#e5e5e5",
-      "--primary-foreground": "#171717",
-      "--secondary": "#262626",
-      "--secondary-foreground": "#fafafa",
-      "--accent-foreground": "#fafafa",
-      "--background": "#0a0a0a",
-      "--card": "#171717",
-      "--card-foreground": "#fafafa",
-      "--popover": "#262626",
-      "--popover-foreground": "#fafafa",
-      "--muted": "#262626",
-      "--border": "rgba(255, 255, 255, 0.1)",
-      "--input": "rgba(255, 255, 255, 0.15)",
-      "--sidebar": "#0a0a0a",
-      "--sidebar-foreground": "#fafafa",
-      "--sidebar-border": "rgba(255, 255, 255, 0.1)",
-      "--backdrop": "rgba(0, 0, 0, 0.5)",
-    },
-  };
-
-  describe.each(["light", "dark"] as const)("%s mode", (mode) => {
-    const vars = variablesFor(mode);
-    it.each(Object.entries(expected[mode]))("%s resolves to %s", (token, value) => {
-      expect(parseColor(`var(${token})`, vars)).toEqual(parseColor(value, vars));
-    });
-  });
-});

package/dist/theme-bridge.test.ts

@@ -1,182 +0,0 @@
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-import { describe, expect, it } from "vitest";
-
-/**
- * The bridge is what makes semantic tokens reachable as Tailwind utilities in
- * consumer apps (`bg-alert-info-background`). Nothing else in the suite covers
- * it: component snapshots record *class names*, not resolved CSS, so dropping a
- * bridge entry would leave every other test green while the utility silently
- * stops producing colour.
- */
-const here = dirname(fileURLToPath(import.meta.url));
-const bridge = readFileSync(join(here, "theme.bridge.css"), "utf8");
-const defaultTheme = readFileSync(join(here, "themes/default.css"), "utf8");
-
-/** Semantic colour roles: 5 intents x 8 roles, named `--{intent}-{role}`. */
-const SEMANTIC_PREFIX = "(?:info|success|warning|danger|neutral)";
-
-/** Token names defined in the default palette for a given prefix, e.g. `alert`. */
-function definedTokens(prefix: string): string[] {
-  const matches = defaultTheme.matchAll(new RegExp(`^\\s*--(${prefix}-[a-z-]+):`, "gm"));
-  return [...new Set([...matches].map((m) => m[1]))].toSorted();
-}
-
-/** Token names bridged as `--color-<name>`, mapped to the var() they resolve to. */
-function bridgedTokens(prefix: string): Map<string, string> {
-  const matches = bridge.matchAll(
-    new RegExp(`^\\s*--color-(${prefix}-[a-z-]+):\\s*var\\(--([a-z-]+)\\);`, "gm"),
-  );
-  return new Map([...matches].map((m) => [m[1], m[2]]));
-}
-
-describe("theme bridge", () => {
-  describe.each([
-    ["alert", "alert"],
-    ["status", "status"],
-    ["semantic colour role", SEMANTIC_PREFIX],
-  ])("--%s-* tokens", (_label, prefix) => {
-    const defined = definedTokens(prefix);
-    const bridged = bridgedTokens(prefix);
-
-    it("defines at least one token in the default palette", () => {
-      expect(defined.length).toBeGreaterThan(0);
-    });
-
-    it("bridges every token defined in the default palette", () => {
-      expect([...bridged.keys()].toSorted()).toEqual(defined);
-    });
-
-    it("maps each bridged token to its own source variable", () => {
-      // Guards against cross-wiring, e.g. --color-alert-info-foreground
-      // accidentally resolving to var(--alert-info-foreground-muted).
-      for (const [name, target] of bridged) {
-        expect(target).toBe(name);
-      }
-    });
-  });
-
-  it("bridges all 20 alert slots", () => {
-    // 5 variants x 4 slots. Pinned so that dropping a whole variant — which
-    // would still satisfy the symmetry checks above if it were removed from
-    // both files — fails loudly.
-    expect(bridgedTokens("alert").size).toBe(20);
-  });
-
-  it("bridges all 40 semantic colour roles", () => {
-    // 5 intents x 8 roles, pinned for the same reason as the alert count.
-    expect(bridgedTokens(SEMANTIC_PREFIX).size).toBe(40);
-  });
-
-  describe("typography roles", () => {
-    const slots = ["size", "line-height", "weight", "letter-spacing"] as const;
-    /** `--type-<role>-<slot>` variables in the default palette, grouped by role. */
-    const defined = new Map<string, Map<string, string>>();
-    for (const m of defaultTheme.matchAll(
-      /^\s*--type-([a-z-]+)-(size|line-height|weight|letter-spacing):\s*([^;]+);/gm,
-    )) {
-      const role = m[1];
-      defined.set(role, (defined.get(role) ?? new Map()).set(m[2], m[3].trim()));
-    }
-    /**
-     * Bridge entries `--text-<role>[--<suffix>]: var(--app-shell-type-X, var(--type-X))`,
-     * keyed by property name. The value is the `--type-*` name, or a marker when the
-     * entry does not read the same deprecated `--app-shell-type-*` name first.
-     */
-    const bridgedText = new Map(
-      [
-        ...bridge.matchAll(
-          /^\s*(--text-[a-z-]+):\s*var\(\s*--app-shell-type-([a-z-]+),\s*var\(\s*--type-([a-z-]+)\s*\)\s*\);/gm,
-        ),
-      ].map((m) => [m[1], m[2] === m[3] ? `--type-${m[3]}` : `mismatched old name ${m[2]}`]),
-    );
-
-    it("pins the role count at 10", () => {
-      // Dropping a whole role from both files would still pass the symmetry checks.
-      expect(defined.size).toBe(10);
-    });
-
-    it("defines exactly four variables per role", () => {
-      for (const [role, values] of defined) {
-        expect([...values.keys()].toSorted(), role).toEqual([...slots].toSorted());
-      }
-    });
-
-    it("bridges every role slot to its own variable", () => {
-      const suffix = {
-        size: "",
-        "line-height": "--line-height",
-        weight: "--font-weight",
-        "letter-spacing": "--letter-spacing",
-      } as const;
-      const expected = new Map<string, string>();
-      for (const role of defined.keys()) {
-        for (const slot of slots) {
-          expected.set(`--text-${role}${suffix[slot]}`, `--type-${role}-${slot}`);
-        }
-      }
-      expect(bridgedText).toEqual(expected);
-    });
-
-    it("reads the deprecated --app-shell-type-* name first in every bridge entry", () => {
-      // 1.17.0 shipped the roles under --app-shell-type-*. The bridge resolves the
-      // fallback on the element, so an old-name override keeps working at any scope.
-      const typeEntries = [...bridge.matchAll(/^\s*(--text-[a-z-]+):\s*([^;]+);/gm)].filter((m) =>
-        m[2].includes("--type-"),
-      );
-      expect(typeEntries.length).toBe(defined.size * slots.length);
-      expect(typeEntries.filter((m) => !bridgedText.has(m[1])).map((m) => m[1])).toEqual([]);
-    });
-
-    it("does not collide with a --color-* token that Tailwind resolves first", () => {
-      // `text-<name>` resolves against --color-<name> before --text-<name>.
-      const colors = [...bridge.matchAll(/^\s*--color-([a-z0-9-]+):/gm)].map((m) => m[1]);
-      for (const role of defined.keys()) {
-        expect(colors, role).not.toContain(role);
-      }
-      for (const name of colors) {
-        expect(name).not.toMatch(/^(heading|body|label|code)(-|$)/);
-      }
-    });
-
-    it("keeps the line boxes on the spec values", () => {
-      // size (px) x line-height ratio = line box (px); weight and letter spacing are pinned too. Values from decisions/typography-roles.md.
-      const spec: Record<
-        string,
-        [size: number, lineBox: number, weight: number, letterSpacing: string]
-      > = {
-        "heading-lg": [24, 32, 700, "-0.025em"],
-        "heading-md": [18, 28, 600, "0em"],
-        "heading-sm": [14, 20, 600, "0em"],
-        "body-md": [14, 20, 400, "0em"],
-        "body-sm": [12, 16, 400, "0em"],
-        "label-md": [14, 20, 500, "0em"],
-        "label-sm": [12, 16, 500, "0em"],
-        "code-sm": [12, 18, 400, "0em"],
-        "body-md-relaxed": [14, 24, 400, "0em"],
-        "body-sm-relaxed": [12, 20, 400, "0em"],
-      };
-      expect([...defined.keys()].toSorted()).toEqual(Object.keys(spec).toSorted());
-      for (const [role, [size, lineBox, weight, letterSpacing]] of Object.entries(spec)) {
-        const values = defined.get(role)!;
-        const rem = /^([0-9.]+)rem$/.exec(values.get("size") ?? "");
-        expect(rem, `${role} size`).not.toBeNull();
-        expect(Number(rem![1]) * 16, `${role} size`).toBe(size);
-        const ratio = /^calc\((\d+) \/ (\d+)\)$/.exec(values.get("line-height") ?? "");
-        expect(ratio, `${role} line-height`).not.toBeNull();
-        expect(Number(ratio![2]), `${role} ratio base`).toBe(size);
-        expect(Number(ratio![1]), `${role} line box`).toBe(lineBox);
-        expect(Number(values.get("weight")), `${role} weight`).toBe(weight);
-        expect(values.get("letter-spacing"), `${role} letter-spacing`).toBe(letterSpacing);
-      }
-    });
-  });
-
-  it("defines --backdrop in the default palette and bridges it as bg-backdrop", () => {
-    // Dialog, Sheet and the CsvImporter drawer use `bg-backdrop`; without both
-    // lines the backdrop compiles to an undefined variable and turns transparent.
-    expect(defaultTheme).toMatch(/^\s*--backdrop:\s*var\(--primitive-black-a7\);/m);
-    expect(bridge).toMatch(/^\s*--color-backdrop:\s*var\(--backdrop\);/m);
-  });
-});