@motion-proto/live-tokens 0.74.0 → 0.75.0

package/dist-plugin/setGeometry/index.js

@@ -1,10 +1,10 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-V3YF6CGT.js";
+} from "../chunk-SWXRVZKT.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-W6Y4BWFB.js";
+} from "../chunk-6WGFOJXO.js";
 
 // src/editor/core/components/aliasKinds.ts
 var KIND_RULES = [
@@ -32,7 +32,10 @@ var KIND_RULES = [
     prefix: ["--text-"]
   },
   { kind: "radius", suffix: ["-radius"], prefix: ["--radius-"] },
-  { kind: "divider-width", suffix: ["-divider-width", "-divider-thickness"] },
+  // Three stroke roles share the `--border-width-*` scale: a border encloses,
+  // a divider separates, an accent emphasises. `set-geometry` moves each role
+  // on its own, so a suffix has to say which line it names.
+  { kind: "divider-width", suffix: ["-divider-width", "-divider-thickness", "-hairline-thickness", "-thickness"] },
   { kind: "divider-height", suffix: ["-divider-height", "-track-height"] },
   { kind: "divider-inset", suffix: ["-divider-inset", "-inset"] },
   { kind: "dot-size", suffix: ["-dot-size"] },
@@ -43,11 +46,8 @@ var KIND_RULES = [
   { kind: "gap", suffix: ["-gap"] },
   { kind: "duration", suffix: ["-duration"], prefix: ["--duration-"] },
   { kind: "easing", suffix: ["-easing"], prefix: ["--ease-"] },
-  {
-    kind: "border-width",
-    suffix: ["-border-width", "-accent-width", "-hairline-thickness", "-thickness"],
-    prefix: ["--border-width-"]
-  },
+  { kind: "accent-width", suffix: ["-accent-width", "-indicator-width"] },
+  { kind: "border-width", suffix: ["-border-width"], prefix: ["--border-width-"] },
   { kind: "border", suffix: ["-border"], prefix: ["--border-"] },
   // A dimension with no more specific name behind it — a panel's width, an
   // avatar's size. Last of the geometry rules, so every `-border-width`,
@@ -90,7 +90,7 @@ function matchesKind(variable, kind) {
 
 // src/editor/core/components/adjustAliases.ts
 var RADIUS_FULL = "--radius-full";
-var RADIUS_RUNGS = [
+var RADIUS_STEPS = [
   "--radius-none",
   "--radius-sm",
   "--radius-md",
@@ -114,12 +114,13 @@ var SPACE_SETTABLE = [
   "--space-32",
   "--space-48"
 ];
-var SPACE_RUNGS = SPACE_SETTABLE;
-var INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-4"));
-var TEXT_INSET_RUNGS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-6"));
+var SPACE_STEPS = SPACE_SETTABLE;
+var INSET_STEPS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-4"));
+var TEXT_INSET_STEPS = SPACE_SETTABLE.slice(SPACE_SETTABLE.indexOf("--space-6"));
 var SPACE_FAMILY = [...SPACE_SETTABLE, "--space-40", "--space-64", "--space-96", "--space-128"];
-var BORDER_WIDTH_RUNGS = [
-  "--border-width-0",
+var BORDER_WIDTH_NONE = "--border-width-0";
+var BORDER_WIDTH_SETTABLE = [
+  BORDER_WIDTH_NONE,
   "--border-width-1",
   "--border-width-2",
   "--border-width-3",
@@ -133,70 +134,75 @@ var BORDER_WIDTH_RUNGS = [
   "--border-width-20",
   "--border-width-24"
 ];
-var LADDERS = {
+var STROKE_STEPS = BORDER_WIDTH_SETTABLE.slice(1);
+var STROKE_SCALE = {
+  steps: STROKE_STEPS,
+  settable: BORDER_WIDTH_SETTABLE,
+  family: BORDER_WIDTH_SETTABLE
+};
+var SCALES = {
   radius: {
-    rungs: RADIUS_RUNGS,
-    settable: [...RADIUS_RUNGS, RADIUS_FULL],
-    family: [...RADIUS_RUNGS, RADIUS_FULL]
+    steps: RADIUS_STEPS,
+    settable: [...RADIUS_STEPS, RADIUS_FULL],
+    family: [...RADIUS_STEPS, RADIUS_FULL]
   },
-  padding: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
-  gap: { rungs: SPACE_RUNGS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
-  "border-width": {
-    rungs: BORDER_WIDTH_RUNGS,
-    settable: BORDER_WIDTH_RUNGS,
-    family: BORDER_WIDTH_RUNGS
-  }
+  padding: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  gap: { steps: SPACE_STEPS, settable: SPACE_SETTABLE, family: SPACE_FAMILY },
+  "border-width": STROKE_SCALE,
+  "divider-width": STROKE_SCALE,
+  "accent-width": STROKE_SCALE
 };
 var TOKEN_NAME = /^--[a-z0-9-]+$/;
-function rungsFor(op, variable, aliases) {
-  if (op.kind === "radius") return op.full ? [...RADIUS_RUNGS, RADIUS_FULL] : RADIUS_RUNGS;
-  if (op.kind !== "padding") return LADDERS[op.kind].rungs;
+function stepsFor(op, variable, aliases) {
+  if (op.kind === "radius") return op.full ? [...RADIUS_STEPS, RADIUS_FULL] : RADIUS_STEPS;
+  if (op.kind !== "padding") return SCALES[op.kind].steps;
   const base = stripSide(variable);
-  if (!base.endsWith("-padding")) return LADDERS.padding.rungs;
+  if (!base.endsWith("-padding")) return SCALES.padding.steps;
   const variant = base.slice(0, -"-padding".length);
-  return `${variant}-text-font-size` in aliases ? TEXT_INSET_RUNGS : INSET_RUNGS;
+  return `${variant}-text-font-size` in aliases ? TEXT_INSET_STEPS : INSET_STEPS;
 }
 function spaceStep(token) {
   return Number(token.slice("--space-".length));
 }
-function snapRung(token, rungs, direction) {
+function snapStep(token, steps, direction) {
   const step = spaceStep(token);
-  if (direction > 0) return rungs.findIndex((rung) => spaceStep(rung) > step);
-  for (let index = rungs.length - 1; index >= 0; index--) {
-    if (spaceStep(rungs[index]) < step) return index;
+  if (direction > 0) return steps.findIndex((candidate) => spaceStep(candidate) > step);
+  for (let index = steps.length - 1; index >= 0; index--) {
+    if (spaceStep(steps[index]) < step) return index;
   }
   return -1;
 }
 function resolve(op, variable, value, aliases) {
   if (typeof value !== "string" || !TOKEN_NAME.test(value)) return { skip: "raw-value" };
-  if (!LADDERS[op.kind].family.includes(value)) return { skip: "off-ladder" };
+  if (!SCALES[op.kind].family.includes(value)) return { skip: "off-scale" };
   if (op.set !== void 0) return { from: value, to: op.set };
-  const rungs = rungsFor(op, variable, aliases);
-  let index = rungs.indexOf(value);
+  const steps = stepsFor(op, variable, aliases);
+  let index = steps.indexOf(value);
   let shift = op.shift;
   if (index < 0) {
     if (value === RADIUS_FULL) return { skip: "pill-preserved" };
-    index = snapRung(value, rungs, shift);
+    if (value === BORDER_WIDTH_NONE) return { skip: "none-preserved" };
+    index = snapStep(value, steps, shift);
     if (index < 0) return { skip: "clamped" };
     shift -= Math.sign(shift);
   }
   const wanted = index + shift;
-  const landed = Math.min(Math.max(wanted, 0), rungs.length - 1);
-  if (landed !== wanted && rungs[landed] === value) return { skip: "clamped" };
-  return { from: value, to: rungs[landed] };
+  const landed = Math.min(Math.max(wanted, 0), steps.length - 1);
+  if (landed !== wanted && steps[landed] === value) return { skip: "clamped" };
+  return { from: value, to: steps[landed] };
 }
 function validateOp(op, configs) {
-  const ladder = LADDERS[op.kind];
-  if (!ladder) throw new Error(`Unknown kind "${op.kind}" (expected ${Object.keys(LADDERS).join(", ")})`);
+  const scale = SCALES[op.kind];
+  if (!scale) throw new Error(`Unknown kind "${op.kind}" (expected ${Object.keys(SCALES).join(", ")})`);
   if (op.target !== void 0 && !(op.target in configs)) {
     throw new Error(`Unknown target component "${op.target}"`);
   }
   const hasSet = op.set !== void 0;
   const hasShift = op.shift !== void 0;
   if (hasSet === hasShift) throw new Error(`A ${op.kind} op needs exactly one of "set" or "shift"`);
-  const settable = ladder.settable;
+  const settable = scale.settable;
   if (hasSet && !settable.includes(op.set)) {
-    throw new Error(`"${op.set}" is not on the ${op.kind} ladder`);
+    throw new Error(`"${op.set}" is not on the ${op.kind} scale`);
   }
   if (hasShift && !Number.isInteger(op.shift)) {
     throw new Error(`"shift" must be a whole number of steps, got ${op.shift}`);

package/dist-plugin/setType/index.cjs

@@ -376,6 +376,11 @@ function weightCoverage(requirements, faces) {
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
 var DEFAULT_DATA_DIR = "src/live-tokens/data";
+var TEST_DATA_DIR_ENV = "LIVE_TOKENS_TEST_DATA_DIR";
+function testDataDir() {
+  const raw = process.env[TEST_DATA_DIR_ENV];
+  return raw && raw.trim() !== "" ? import_path.default.resolve(raw.trim()) : void 0;
+}
 var KNOWN_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "dataDir",
   "colorsAndTypeDir",
@@ -409,6 +414,16 @@ function readLiveTokensConfig() {
   }
 }
 function resolveDataDirs(opts = {}) {
+  const isolated = testDataDir();
+  if (isolated) {
+    return {
+      dataDir: isolated,
+      colorsAndTypeDir: import_path.default.join(isolated, "colors-and-type"),
+      componentConfigsDir: import_path.default.join(isolated, "component-configs"),
+      themesDir: import_path.default.join(isolated, "themes"),
+      sketchStylesDir: import_path.default.join(isolated, "sketch-styles")
+    };
+  }
   const fileConfig = readLiveTokensConfig();
   const dataDirRaw = opts.dataDir ?? fileConfig.dataDir ?? DEFAULT_DATA_DIR;
   const dataDir = import_path.default.resolve(dataDirRaw);

package/dist-plugin/setType/index.d.cts

@@ -1,5 +1,5 @@
 import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-BxRtuN5V.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.cjs';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {

package/dist-plugin/setType/index.d.ts

@@ -1,5 +1,5 @@
 import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-BxRtuN5V.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BhWzd5cL.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-BpIK_Obx.js';
 
 type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {

package/dist-plugin/setType/index.js

@@ -1,7 +1,7 @@
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-W6Y4BWFB.js";
+} from "../chunk-6WGFOJXO.js";
 
 // src/editor/core/fonts/fontParse.ts
 function parseGoogleFontsUrl(url2) {

package/dist-plugin/tokensCssMigrations/index.d.cts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-BhWzd5cL.cjs';
+export { r as readLiveTokensConfig } from '../dataPaths-BpIK_Obx.cjs';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.d.ts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-BhWzd5cL.js';
+export { r as readLiveTokensConfig } from '../dataPaths-BpIK_Obx.js';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.js

@@ -17,7 +17,7 @@ import {
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
-} from "../chunk-W6Y4BWFB.js";
+} from "../chunk-6WGFOJXO.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -49,6 +49,7 @@
     "src/live-tokens/data/sketch-styles/napkin.json",
     "src/live-tokens/data/sketch-styles/dry.json",
     "dist-plugin",
+    "src/testing-js",
     ".claude/skills",
     "!.claude/skills/**/skill-alt.md",
     "bin",
@@ -117,6 +118,14 @@
       "types": "./src/editor/core/sketch/index.ts",
       "default": "./src/editor/core/sketch/index.ts"
     },
+    "./testing": {
+      "types": "./src/testing-js/index.d.ts",
+      "default": "./src/testing-js/index.js"
+    },
+    "./testing/vitest": {
+      "types": "./src/testing-js/vitest.d.ts",
+      "default": "./src/testing-js/vitest.js"
+    },
     "./components/*": {
       "svelte": "./src/system/components/*",
       "default": "./src/system/components/*"
@@ -139,14 +148,16 @@
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "npm run test:e2e:contract && npm run test:e2e:stateful",
-    "test:e2e:contract": "playwright test tests/e2e/component-render-contract.spec.ts tests/e2e/component-alias-contract.spec.ts --workers=${PLAYWRIGHT_WORKERS:-4}",
+    "test:e2e": "npm run test:e2e:contract && npm run test:e2e:contract-defects && npm run test:e2e:stateful",
+    "test:e2e:contract": "playwright test --project=contract --workers=${PLAYWRIGHT_WORKERS:-4}",
     "test:e2e:stateful": "playwright test tests/e2e/live-editing.spec.ts tests/e2e/theme-workflow.spec.ts --workers=1",
-    "test:e2e:components": "playwright test tests/e2e/component-render-contract.spec.ts",
+    "test:e2e:contract-defects": "playwright test --project=contract-defects --workers=${PLAYWRIGHT_WORKERS:-4}",
+    "test:e2e:components": "playwright test --project=contract src/testing/component-render.contract.ts",
     "test:e2e:ui": "playwright test --ui",
-    "prepare:e2e": "node scripts/prepare-playwright-data.mjs",
+    "test:registry-contract": "vitest run --config vitest.contract.config.ts",
     "build:plugin": "tsup",
-    "build:lib": "npm run build:plugin",
+    "build:testing": "tsup --config tsup.testing.config.ts",
+    "build:lib": "npm run build:plugin && npm run build:testing",
     "deploy:local": "bash scripts/deploy-local.sh",
     "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
     "check:no-tooling-imports": "node scripts/check-no-tooling-imports.mjs",
@@ -160,6 +171,7 @@
     "check:token-contract": "node scripts/check-token-contract.mjs",
     "check:preset-themes": "node scripts/check-preset-themes.mjs",
     "check:skills": "node scripts/check-skills.mjs",
+    "check:cli-strings": "node scripts/check-cli-strings.mjs",
     "check:skill-sources": "node scripts/sync-skill-sources.mjs --check",
     "check:skill-atlas": "node scripts/sync-skill-atlas.mjs",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
@@ -170,13 +182,28 @@
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:pages && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:skill-sources && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create"
+    "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:pages && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:cli-strings && npm run check:skill-sources && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create && npm run check:smoke-component-tests"
   },
   "peerDependencies": {
+    "@playwright/test": "^1.55",
     "@sveltejs/vite-plugin-svelte": "^7.0",
+    "happy-dom": "^20.0",
     "sass": "^1.0",
     "svelte": "^5",
-    "vite": "^8"
+    "vite": "^8",
+    "vitest": "^4.0"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    },
+    "happy-dom": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@playwright/test": "^1.62.1",

package/src/app/site.css

@@ -1,11 +1,11 @@
 /*
- * Site Styles — global typography for the themed pages
+ * Site Styles: global typography for the themed pages
  *
  * Unscoped element selectors (h1, h2, p, a, ul li, …) consume the design
  * tokens in tokens.css and recolor with the user's theme. Loaded globally
  * from main.ts.
  *
- * Pair with: ui-editor.css (--ui-* chrome, opposite scope — neutral and
+ * Pair with: ui-editor.css (--ui-* chrome, opposite scope: neutral and
  * theme-immune; only loaded on editor pages).
  */
 
@@ -69,8 +69,10 @@ h4 {
 p {
   font-family: var(--body-md-font-family);
   font-size: var(--body-md-font-size);
-  color: var(--text-secondary);
+  font-weight: var(--body-md-font-weight);
   line-height: var(--body-md-line-height);
+  letter-spacing: var(--body-md-letter-spacing);
+  color: var(--text-secondary);
   margin: 0 0 var(--space-16);
 }
 
@@ -81,12 +83,16 @@ p:last-child {
 code {
   font-family: var(--code-font-family);
   font-size: var(--code-font-size);
+  font-weight: var(--code-font-weight);
+  letter-spacing: var(--code-letter-spacing);
 }
 
 pre {
   font-family: var(--code-font-family);
   font-size: var(--code-font-size);
+  font-weight: var(--code-font-weight);
   line-height: var(--code-line-height);
+  letter-spacing: var(--code-letter-spacing);
 }
 
 a {
@@ -111,10 +117,12 @@ ul {
 }
 
 ul li {
-  font-family: var(--font-serif);
-  font-size: var(--font-size-md);
+  font-family: var(--body-md-font-family);
+  font-size: var(--body-md-font-size);
+  font-weight: var(--body-md-font-weight);
+  line-height: var(--body-md-line-height);
+  letter-spacing: var(--body-md-letter-spacing);
   color: var(--text-secondary);
-  line-height: var(--line-height-relaxed);
   margin-bottom: var(--space-4);
 }
 
@@ -128,10 +136,12 @@ ol {
 }
 
 ol li {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
+  font-family: var(--body-md-font-family);
+  font-size: var(--body-md-font-size);
+  font-weight: var(--body-md-font-weight);
+  line-height: var(--body-md-line-height);
+  letter-spacing: var(--body-md-letter-spacing);
   color: var(--text-secondary);
-  line-height: 1.6;
   margin-bottom: var(--space-4);
 }
 

package/src/editor/bootstrap.ts

@@ -20,6 +20,7 @@ import * as router from './core/routing/router';
 import * as columnsOverlay from './overlay/columnsOverlay';
 import * as editorStore from './core/store/editorStore';
 import * as themeDocumentSync from './core/themes/themeDocumentSync';
+import * as liveStateStream from './core/themes/liveStateStream';
 import { initializeTheme } from './core/themes/themeInit';
 import { registerComponent, type RegisterComponentEntry } from './component-editor/registry';
 import { registerSketchStyle, type RegisterSketchStyleInput } from './core/sketch/sketchRegistry';
@@ -52,6 +53,7 @@ export async function bootLiveTokens(
 
   if (import.meta.env.DEV) {
     themeDocumentSync.init();
+    liveStateStream.init();
     if (opts.components) {
       for (const entry of opts.components) {
         registerComponent(entry);

package/src/editor/component-editor/CollapsibleSectionEditor.svelte

@@ -20,7 +20,7 @@
   };
 
   // Header tokens per variant. Chromeless has no chrome; divider exposes the
-  // bottom-border (the divider line) per state; container's outer chrome lives
+  // hairline under the header per state; container's outer chrome lives
   // in the Container part so the header strip just owns surface + padding + text.
   function headerStateTokens(v: Variant, s: HeaderState): Token[] {
     const p = `--collapsiblesection-${v}-${s}`;
@@ -32,8 +32,8 @@
     ];
     if (v === 'divider') {
       base.splice(1, 0,
-        { label: 'divider color', groupKey: 'border', variable: `${p}-border` },
-        { label: 'divider width', canBeLinked: true, groupKey: 'border-width', variable: `${p}-border-width` },
+        { label: 'divider color', groupKey: 'hairline-color', variable: `${p}-hairline-color` },
+        { label: 'divider thickness', canBeLinked: true, groupKey: 'hairline-thickness', variable: `${p}-hairline-thickness` },
       );
     }
     return base;
@@ -107,7 +107,7 @@
         [`--collapsiblesection-${v}-${s}-label-font-weight`, `${v} ${s}`],
         [`--collapsiblesection-${v}-${s}-label-line-height`, `${v} ${s}`],
       ];
-      if (v === 'divider') base.push([`--collapsiblesection-divider-${s}-border-width`, `divider ${s}`]);
+      if (v === 'divider') base.push([`--collapsiblesection-divider-${s}-hairline-thickness`, `divider ${s}`]);
       return base;
     })),
     ['--collapsiblesection-container-frame-border-width', 'container frame'],

package/src/editor/component-editor/DialogEditor.svelte

@@ -28,8 +28,8 @@
     ],
     header: [
       { label: 'surface color', groupKey: 'surface', variable: '--dialog-header-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--dialog-header-border' },
-      { label: 'border width', groupKey: 'width', variable: '--dialog-header-border-width' },
+      { label: 'divider color', groupKey: 'border', variable: '--dialog-header-divider' },
+      { label: 'divider width', groupKey: 'width', variable: '--dialog-header-divider-width' },
       { label: 'padding', groupKey: 'padding', variable: '--dialog-header-padding' },
       { label: 'close icon color', groupKey: 'icon', variable: '--dialog-close-icon' },
       { label: 'close icon size', groupKey: 'size', variable: '--dialog-close-icon-size' },
@@ -38,8 +38,8 @@
       { label: 'padding', groupKey: 'padding', variable: '--dialog-body-padding' },
     ],
     footer: [
-      { label: 'border color', groupKey: 'border', variable: '--dialog-footer-border' },
-      { label: 'border width', groupKey: 'width', variable: '--dialog-footer-border-width' },
+      { label: 'divider color', groupKey: 'border', variable: '--dialog-footer-divider' },
+      { label: 'divider width', groupKey: 'width', variable: '--dialog-footer-divider-width' },
       { label: 'padding', groupKey: 'padding', variable: '--dialog-footer-padding' },
     ],
   };

package/src/editor/component-editor/MenuSelectEditor.svelte

@@ -81,7 +81,10 @@
     }],
   };
 
-  const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups);
+  const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups, {
+    component,
+    variants: ['default', 'hover', 'selected', 'disabled'],
+  });
   export const allTokens: Token[] = [...Object.values(states).flat(), ...typeGroupTokens];
 
   const linkableContexts = new Map<string, string>([

package/src/editor/component-editor/SegmentedControlEditor.svelte

@@ -110,7 +110,12 @@
 
   // allTokens unions BOTH sizes so the store registers every editable variable.
   // The visibleStates filter is purely UI (which subset to render now).
-  const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups);
+  // option-hover precedes option: the stripper removes the first match and
+  // would otherwise leave hover-text behind.
+  const typeGroupTokens: Token[] = buildTypeGroupTokens(typeGroups, {
+    component,
+    variants: ['option-hover', 'option', 'selected', 'disabled'],
+  });
   export const allTokens: Token[] = [
     ...Object.values(defaultStates).flat(),
     ...Object.values(smallStates).flat(),

package/src/editor/component-editor/TabBarEditor.svelte

@@ -20,7 +20,7 @@
       { label: 'padding', element: 'frame', canBeLinked: true, groupKey: 'padding', variable: `--tabbar-${s}-padding` },
       { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: `--tabbar-${s}-icon-size` },
       { label: 'color', element: 'indicator', groupKey: 'indicator-color', variable: `--tabbar-${s}-border` },
-      { label: 'width', element: 'indicator', canBeLinked: true, groupKey: 'indicator-border-width', variable: `--tabbar-${s}-indicator-border-width` },
+      { label: 'width', element: 'indicator', canBeLinked: true, groupKey: 'indicator-width', variable: `--tabbar-${s}-indicator-width` },
     ];
   }
   function tabStateTypeGroups(s: TabState): TypeGroupConfig[] {

package/src/editor/component-editor/TableEditor.svelte

@@ -15,8 +15,8 @@
     ],
     header: [
       { label: 'surface color', groupKey: 'header-surface', variable: '--table-default-header-surface' },
-      { label: 'border color', canBeLinked: true, groupKey: 'border', variable: '--table-default-header-border' },
-      { label: 'border width', canBeLinked: true, groupKey: 'width', variable: '--table-default-header-border-width' },
+      { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-header-divider' },
+      { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-header-divider-width' },
       { label: 'padding', groupKey: 'header-padding', variable: '--table-default-header-padding' },
     ],
     cell: [

package/src/editor/component-editor/scaffolding/TokenLayout.svelte

@@ -68,7 +68,6 @@
     'font-size',
     'line-height',
     'letter-spacing',
-    'divider-width',
     'divider-height',
     'divider-inset',
     'dot-size',
@@ -85,6 +84,8 @@
     'text-color',
     'surface',
     'border-width',
+    'divider-width',
+    'accent-width',
     'border',
   ];
   const orderRank: Record<Kind, number> = Object.fromEntries(
@@ -135,6 +136,7 @@
     'letter-spacing': { component: UILetterSpacingSelector },
     'border-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
+    'accent-width': { component: UIVariantSelector, extra: () => ({ ...BORDER_WIDTH }) },
     'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
     'divider-inset': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_INSET }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
@@ -165,7 +167,7 @@
   };
 
   /** Multi-col rank: same as `orderRank` but with `text-color` hoisted between
-      `line-height` and `divider-width` so typography reads as one logical block
+      `line-height` and `divider-height` so typography reads as one logical block
       in column flow. Single-col mode keeps `orderRank` (linked-first sort
       already segregates text-color to the bottom). */
   const multiColRank: Record<Kind, number> = (() => {
@@ -176,7 +178,6 @@
       'line-height',
       'letter-spacing',
       'text-color',
-      'divider-width',
       'divider-height',
       'divider-inset',
       'dot-size',
@@ -192,6 +193,8 @@
       'shadow',
       'surface',
       'border-width',
+      'divider-width',
+      'accent-width',
       'border',
     ];
     return Object.fromEntries(reordered.map((k, i) => [k, i])) as Record<Kind, number>;