@motion-proto/live-tokens 0.74.0 → 0.76.0

package/src/editor/skill-atlas/trees/set-type.ts

@@ -0,0 +1,142 @@
+import type { SkillTree } from '../types';
+
+export const setType: SkillTree = {
+  "id": "live-tokens-set-type",
+  "digest": "sha256:0c8d26a16313f9ee",
+  "title": "set-type",
+  "tagline": "Set Typefaces from Google Fonts",
+  "nodes": [
+    {
+      "id": "st-trig",
+      "row": 0,
+      "kind": "trigger",
+      "title": "Choose or pair font families",
+      "desc": "Sets a theme's fonts: a Google Fonts pairing for the display and body stacks, verified for the weights the text styles need.",
+      "lines": [3, 3],
+      "anchor": "description: Set a live-tokens theme's type: a Google Fonts "
+    },
+    {
+      "id": "st-anchor",
+      "row": 1,
+      "kind": "ref",
+      "title": "Read the type anchor",
+      "desc": "An anchor's entry overrides the Voice table.",
+      "lines": [14, 14],
+      "anchor": "Read the type intent and any anchor live-tokens-create-theme",
+      "reference": "references/type-anchors.md"
+    },
+    {
+      "id": "st-input",
+      "row": 2,
+      "kind": "step",
+      "title": "Write the font pairing",
+      "desc": "A display family and a body family in one file. The body face comes first, and the display face contrasts with it and matches the voice.",
+      "lines": [15, 15],
+      "anchor": "Choose the pairing and write it to `scratch/font-pairing.jso",
+      "chips": [
+        {
+          "label": "Choose the body face first",
+          "lines": [30, 34],
+          "anchor": "## Choose the body face first",
+          "anchorEnd": "The shipped text styles ask the display face for 600 and the"
+        },
+        {
+          "label": "The font matrix",
+          "lines": [36, 50],
+          "anchor": "## The font matrix",
+          "anchorEnd": "Many faces sit between columns. When one straddles, say so a"
+        },
+        {
+          "label": "Voice",
+          "lines": [52, 66],
+          "anchor": "## Voice",
+          "anchorEnd": "Match the type to the design direction the color came from. "
+        },
+        {
+          "label": "Shortcuts",
+          "lines": [68, 75],
+          "anchor": "## Shortcuts",
+          "anchorEnd": "**Serif display over sans body** when nothing else decides i"
+        },
+        {
+          "label": "Watch for",
+          "lines": [77, 82],
+          "anchor": "## Watch for",
+          "anchorEnd": "**Sets of themes.** No two share a display face or a body fa"
+        }
+      ]
+    },
+    {
+      "id": "st-cli",
+      "row": 3,
+      "kind": "cli",
+      "title": "Run set-type",
+      "desc": "The command verifies each family on Google Fonts and reports missing weights.",
+      "lines": [16, 16],
+      "anchor": "Run `npx live-tokens set-type scratch/font-pairing.json`. It"
+    },
+    {
+      "id": "st-fail",
+      "row": 4,
+      "kind": "gate",
+      "title": "Correct the font pairing",
+      "desc": "A family not on Google Fonts fails the run. Fix the file and run again.",
+      "lines": [17, 17],
+      "anchor": "Read the report. Name a missing weight and offer an alternat"
+    },
+    {
+      "id": "st-reply",
+      "row": 5,
+      "kind": "step",
+      "title": "Reply with the result",
+      "desc": "Report the two families, their construction, and any missing weight.",
+      "lines": [17, 18],
+      "anchor": "Read the report. Name a missing weight and offer an alternat",
+      "anchorEnd": "Reply with the two families, the form model behind each, the"
+    },
+    {
+      "id": "st-verify",
+      "row": 6,
+      "kind": "done",
+      "title": "Verify the type",
+      "desc": "The CLI passes, each URL matches the family's weights, and the app shows the new type.",
+      "lines": [88, 93],
+      "anchor": "## Verify",
+      "anchorEnd": "To revert, run the previous pairing file, or load the open t"
+    }
+  ],
+  "edges": [
+    {
+      "to": "st-anchor",
+      "from": "st-trig"
+    },
+    {
+      "to": "st-fail",
+      "from": "st-cli",
+      "label": "exit 1"
+    },
+    {
+      "to": "st-cli",
+      "from": "st-fail",
+      "label": "rerun",
+      "back": true
+    },
+    {
+      "to": "st-input",
+      "from": "st-anchor"
+    },
+    {
+      "to": "st-cli",
+      "from": "st-input"
+    },
+    {
+      "to": "st-reply",
+      "from": "st-cli",
+      "label": "exit 0"
+    },
+    {
+      "to": "st-verify",
+      "from": "st-reply"
+    }
+  ]
+};

package/src/editor/skill-atlas/types.ts

@@ -1,6 +1,6 @@
 export type NodeKind =
   | 'trigger' | 'step' | 'decide' | 'cli' | 'hand'
-  | 'gate' | 'ok' | 'ref' | 'ask' | 'chipset' | 'done';
+  | 'gate' | 'ok' | 'ref' | 'chipset' | 'done';
 
 /** Inclusive 1-based line range into the skill's SKILL.md. */
 export type LineRange = [number, number];
@@ -27,14 +27,11 @@ export interface TreeNode extends Anchored {
   title: string;
   /** Overrides the kind's default eyebrow. */
   tag?: string;
-  /** The skill's own step number, where the skill numbers its workflow. */
-  n?: string;
   desc?: string;
   /** A `references/*.md` the node stands for, opened as a tab in the source pane. */
   reference?: string;
   lines?: LineRange;
   chips?: Chip[];
-  command?: string;
 }
 
 export interface Edge {
@@ -42,6 +39,8 @@ export interface Edge {
   to: string;
   /** The answer that selects this branch, drawn on the wire. */
   label?: string;
+  /** Answers the card already shows as badges. They light the wire when a badge is selected and are not drawn. */
+  answers?: string[];
   /** A re-run loop, routed up the gutter lane. */
   back?: boolean;
 }

package/src/editor/skill-atlas/wireLayout.ts

@@ -0,0 +1,287 @@
+import type { Edge } from './types';
+
+/** A card's laid-out rectangle, relative to the canvas. */
+export interface Box {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+  midX: number;
+  midY: number;
+}
+
+export interface Wire {
+  d: string;
+  back: boolean;
+  lit: boolean;
+  /** Trunks and buses carry no arrowhead; only the segment that arrives does. */
+  arrow: boolean;
+}
+
+export interface Label {
+  x: number;
+  y: number;
+  /** One entry per answer sharing the wire. */
+  lines: string[];
+  lit: boolean;
+  /** Lane labels run along the lane; branch labels sit across the drop. */
+  rotate: boolean;
+}
+
+export interface Drawing {
+  wires: Wire[];
+  labels: Label[];
+}
+
+/** Clearance between a card border and the wire, so the arrowhead reads as
+ *  an arrival rather than as part of the card outline. */
+const STANDOFF = 6;
+const CORNER = 12;
+/** How far outside the cards a lane sits, and how far one lane nests
+ *  inside the next when two share a stretch of gutter. */
+const LANE_INSET = 40;
+const LANE_STEP = 16;
+
+/** Cards laid out in one row share a top to within a pixel; cards pushed onto
+ *  a second wrapped line do not, and a single bus cannot serve both. */
+function aligned(values: number[]): boolean {
+  return Math.max(...values) - Math.min(...values) < 4;
+}
+
+function push<T>(map: Map<string, T[]>, key: string, value: T) {
+  const list = map.get(key);
+  if (list) list.push(value);
+  else map.set(key, [value]);
+}
+
+function label(out: Drawing, text: string | undefined, x: number, y: number, lit: boolean, rotate = false) {
+  if (text) out.labels.push({ x, y, lines: text.split('\n'), lit, rotate });
+}
+
+/** One trunk down from the parent, one bus across, one drop into each child —
+ *  so a split reads as a single decision rather than as N crossing curves.
+ *  Each answer sits on its own drop. */
+function fanOut(out: Drawing, a: Box, kids: Box[], edges: Edge[], lit: (i: number) => boolean) {
+  const top = kids[0].top;
+  const busY = (a.bottom + top) / 2;
+  const xs = kids.map((k) => k.midX);
+  const r = Math.max(
+    0,
+    Math.min(CORNER, (Math.max(...xs) - Math.min(...xs)) / 2, (busY - a.bottom) / 2, (top - busY) / 2),
+  );
+  const turns = xs.map((x) => (x < a.midX ? x + r : x > a.midX ? x - r : x));
+  const busLeft = Math.min(...turns, a.midX);
+  const busRight = Math.max(...turns, a.midX);
+  const anyLit = kids.some((_, i) => lit(i));
+
+  out.wires.push({
+    back: false,
+    arrow: false,
+    lit: anyLit,
+    d: `M ${a.midX} ${a.bottom + STANDOFF} L ${a.midX} ${busY} M ${busLeft} ${busY} L ${busRight} ${busY}`,
+  });
+  kids.forEach((k, i) => {
+    const x = k.midX;
+    const turn = turns[i];
+    out.wires.push({
+      back: false,
+      arrow: true,
+      lit: lit(i),
+      d:
+        turn === x
+          ? `M ${x} ${busY} L ${x} ${top - STANDOFF}`
+          : `M ${turn} ${busY} Q ${x} ${busY}, ${x} ${busY + r} L ${x} ${top - STANDOFF}`,
+    });
+    label(out, edges[i].label, x, (busY + r + top - STANDOFF) / 2, lit(i));
+  });
+}
+
+/** The mirror of `fanOut`: risers up to a shared bus, one trunk into the child,
+ *  so several outcomes converging land as one arrow instead of a pile. */
+function fanIn(out: Drawing, parents: Box[], b: Box, edges: Edge[], lit: (i: number) => boolean) {
+  const bottom = parents[0].bottom;
+  const busY = (bottom + b.top) / 2;
+  const xs = parents.map((p) => p.midX);
+  const r = Math.max(
+    0,
+    Math.min(CORNER, (Math.max(...xs) - Math.min(...xs)) / 2, (busY - bottom) / 2, (b.top - busY) / 2),
+  );
+  const turns = xs.map((x) => (x < b.midX ? x + r : x > b.midX ? x - r : x));
+  const anyLit = parents.some((_, i) => lit(i));
+
+  parents.forEach((p, i) => {
+    const x = p.midX;
+    const turn = turns[i];
+    out.wires.push({
+      back: false,
+      arrow: false,
+      lit: lit(i),
+      d:
+        turn === x
+          ? `M ${x} ${bottom + STANDOFF} L ${x} ${busY}`
+          : `M ${x} ${bottom + STANDOFF} L ${x} ${busY - r} Q ${x} ${busY}, ${turn} ${busY}`,
+    });
+    label(out, edges[i].label, x, (bottom + STANDOFF + busY - r) / 2, lit(i));
+  });
+  out.wires.push({
+    back: false,
+    arrow: true,
+    lit: anyLit,
+    d:
+      `M ${Math.min(...turns, b.midX)} ${busY} L ${Math.max(...turns, b.midX)} ${busY}` +
+      ` M ${b.midX} ${busY} L ${b.midX} ${b.top - STANDOFF}`,
+  });
+}
+
+/** A plain parent-to-child curve, and the fallback wherever a bus would have
+ *  to cross a card: children wrapped onto a second line, or parents staggered
+ *  across rows. */
+function curve(out: Drawing, a: Box, b: Box, edge: Edge, lit: boolean) {
+  const y1 = a.bottom + STANDOFF;
+  const y2 = b.top - STANDOFF;
+  const bend = Math.max(16, (y2 - y1) * 0.55);
+  out.wires.push({
+    back: false,
+    arrow: true,
+    lit,
+    d: `M ${a.midX} ${y1} C ${a.midX} ${y1 + bend}, ${b.midX} ${y2 - bend}, ${b.midX} ${y2}`,
+  });
+  label(out, edge.label, (a.midX + b.midX) / 2, (y1 + y2) / 2, lit);
+}
+
+/** Every card the span passes between, not just the two it joins. */
+function crossed(a: Box, b: Box, all: Box[]): Box[] {
+  const top = Math.min(a.midY, b.midY);
+  const bottom = Math.max(a.midY, b.midY);
+  return all.filter((x) => x !== a && x !== b && x.bottom > top && x.top < bottom);
+}
+
+/** On the spine: no other card shares its row. A wrapped branch row also
+ *  "crosses" cards on its way down, and those stay curves. */
+function alone(box: Box, all: Box[]): boolean {
+  return all.every((x) => x === box || !aligned([x.top, box.top]));
+}
+
+/** Re-run loops ride a lane in the left gutter the centred spine opens up,
+ *  rather than bulging around the card they leave. A card with siblings to
+ *  its left leaves from its bottom and runs under the row, so the wire never
+ *  passes through the cards beside it. */
+function backEdge(out: Drawing, a: Box, b: Box, lane: number, edge: Edge, lit: boolean, under?: number) {
+  const dir = Math.sign(b.midY - a.midY) || -1;
+  const r = Math.max(0, Math.min(CORNER, (a.left - STANDOFF - lane) / 2, Math.abs(a.midY - b.midY) / 2));
+  const d =
+    under === undefined
+      ? `M ${a.left - STANDOFF} ${a.midY} L ${lane + r} ${a.midY}` +
+        ` Q ${lane} ${a.midY}, ${lane} ${a.midY + dir * r}`
+      : `M ${a.midX} ${a.bottom + STANDOFF} L ${a.midX} ${under - r}` +
+        ` Q ${a.midX} ${under}, ${a.midX - r} ${under} L ${lane + r} ${under}` +
+        ` Q ${lane} ${under}, ${lane} ${under - r}`;
+  out.wires.push({
+    back: true,
+    arrow: true,
+    lit,
+    d:
+      d +
+      ` L ${lane} ${b.midY - dir * r} Q ${lane} ${b.midY}, ${lane + r} ${b.midY}` +
+      ` L ${b.left - STANDOFF} ${b.midY}`,
+  });
+  label(out, edge.label, lane, (a.midY + b.midY) / 2, lit, true);
+}
+
+/** A branch that skips a row rides the right gutter, the mirror of a loop,
+ *  so a "no" never has to be drawn through the card the "yes" leads to. */
+function skipEdge(out: Drawing, a: Box, b: Box, lane: number, edge: Edge, lit: boolean) {
+  const r = Math.max(0, Math.min(CORNER, (lane - a.right - STANDOFF) / 2, Math.abs(a.midY - b.midY) / 2));
+  out.wires.push({
+    back: false,
+    arrow: true,
+    lit,
+    d:
+      `M ${a.right + STANDOFF} ${a.midY} L ${lane - r} ${a.midY}` +
+      ` Q ${lane} ${a.midY}, ${lane} ${a.midY + r}` +
+      ` L ${lane} ${b.midY - r} Q ${lane} ${b.midY}, ${lane - r} ${b.midY}` +
+      ` L ${b.right + STANDOFF} ${b.midY}`,
+  });
+  label(out, edge.label, lane, (a.midY + b.midY) / 2, lit, true);
+}
+
+/**
+ * Routes every edge between the measured cards. `lit` answers whether a wire
+ * joining the given node ids belongs to the current selection.
+ */
+export function routeWires(boxes: Map<string, Box>, edges: Edge[], lit: (edge: Edge) => boolean): Drawing {
+  const all = [...boxes.values()];
+  const children = new Map<string, Edge[]>();
+  const parents = new Map<string, Edge[]>();
+  for (const edge of edges) {
+    if (edge.back) continue;
+    push(children, edge.from, edge);
+    push(parents, edge.to, edge);
+  }
+
+  const out: Drawing = { wires: [], labels: [] };
+  const claimed = new Set<Edge>();
+
+  for (const [from, kidEdges] of children) {
+    const a = boxes.get(from);
+    const kids = kidEdges.map((e) => boxes.get(e.to));
+    if (!a || kidEdges.length < 2 || kids.some((k) => !k)) continue;
+    const kept = kids as Box[];
+    if (!aligned(kept.map((k) => k.top))) continue;
+    kidEdges.forEach((e) => claimed.add(e));
+    fanOut(out, a, kept, kidEdges, (i) => lit(kidEdges[i]));
+  }
+
+  for (const [to, parentEdges] of parents) {
+    const open = parentEdges.filter((e) => !claimed.has(e));
+    const b = boxes.get(to);
+    const ups = open.map((e) => boxes.get(e.from));
+    if (!b || open.length < 2 || ups.some((u) => !u)) continue;
+    const kept = ups as Box[];
+    if (!aligned(kept.map((u) => u.bottom))) continue;
+    open.forEach((e) => claimed.add(e));
+    fanIn(out, kept, b, open, (i) => lit(open[i]));
+  }
+
+  // Longest skip first, so a long one always rides outside the skips it spans.
+  const skips: { edge: Edge; a: Box; b: Box; over: Box[] }[] = [];
+  for (const edge of edges) {
+    if (edge.back || claimed.has(edge)) continue;
+    const a = boxes.get(edge.from);
+    const b = boxes.get(edge.to);
+    if (!a || !b) continue;
+    const over = alone(a, all) && alone(b, all) ? crossed(a, b, all) : [];
+    if (over.length > 0) skips.push({ edge, a, b, over });
+    else curve(out, a, b, edge, lit(edge));
+  }
+  skips.sort((x, y) => Math.abs(y.a.midY - y.b.midY) - Math.abs(x.a.midY - x.b.midY));
+  let outer = -Infinity;
+  for (const { edge, a, b, over } of skips) {
+    const lane = Math.max(...over.map((x) => x.right), a.right, b.right) + LANE_INSET;
+    const placed = Math.max(lane, outer + LANE_STEP);
+    outer = placed;
+    skipEdge(out, a, b, placed, edge, lit(edge));
+  }
+
+  // Shortest loop first, so a long one always nests outside the loops it spans.
+  const loops = edges
+    .filter((e) => e.back)
+    .map((edge) => ({ edge, a: boxes.get(edge.from), b: boxes.get(edge.to) }))
+    .filter((e): e is { edge: Edge; a: Box; b: Box } => !!e.a && !!e.b)
+    .sort((x, y) => Math.abs(x.a.midY - x.b.midY) - Math.abs(y.a.midY - y.b.midY));
+
+  let inner = Infinity;
+  let unders = 0;
+  for (const { edge, a, b } of loops) {
+    const beside = all.filter((x) => x !== a && x.right <= a.left && x.bottom > a.midY && x.top < a.midY);
+    const clear = Math.min(...crossed(a, b, all).map((x) => x.left), ...beside.map((x) => x.left), a.left, b.left) - LANE_INSET;
+    const lane = Math.max(4, Math.min(clear, inner - LANE_STEP));
+    inner = lane;
+    // Each wire under the row takes its own height, in step with its lane, so
+    // the loops nest instead of sharing one line.
+    const under = beside.length ? a.bottom + STANDOFF + CORNER + LANE_STEP * unders++ : undefined;
+    backEdge(out, a, b, lane, edge, lit(edge), under);
+  }
+
+  return out;
+}

package/src/live-tokens/data/themes/autumn.json

@@ -2895,8 +2895,8 @@
         "--collapsiblesection-chromeless-hover-icon-size": "--icon-size-xs",
         "--collapsiblesection-chromeless-expanded-padding": "--space-8",
         "--collapsiblesection-divider-default-surface": "--color-transparent",
-        "--collapsiblesection-divider-default-border": "--border-brand",
-        "--collapsiblesection-divider-default-border-width": "--border-width-1",
+        "--collapsiblesection-divider-default-hairline-color": "--border-brand",
+        "--collapsiblesection-divider-default-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-default-padding": "--space-8",
         "--collapsiblesection-divider-default-label": "--text-primary",
         "--collapsiblesection-divider-default-label-font-family": "--font-sans",
@@ -2906,8 +2906,8 @@
         "--collapsiblesection-divider-default-icon": "--text-primary",
         "--collapsiblesection-divider-default-icon-size": "--icon-size-xs",
         "--collapsiblesection-divider-hover-surface": "--color-transparent",
-        "--collapsiblesection-divider-hover-border": "--border-neutral",
-        "--collapsiblesection-divider-hover-border-width": "--border-width-1",
+        "--collapsiblesection-divider-hover-hairline-color": "--border-neutral",
+        "--collapsiblesection-divider-hover-hairline-thickness": "--border-width-1",
         "--collapsiblesection-divider-hover-padding": "--space-8",
         "--collapsiblesection-divider-hover-label": "--text-primary",
         "--collapsiblesection-divider-hover-label-font-family": "--font-sans",
@@ -3004,8 +3004,8 @@
         "--dialog-shadow": "--shadow-2xl",
         "--dialog-blur": "--blur-none",
         "--dialog-header-surface": "--surface-neutral-lower",
-        "--dialog-header-border": "--border-neutral-subtle",
-        "--dialog-header-border-width": "--border-width-1",
+        "--dialog-header-divider": "--border-neutral-subtle",
+        "--dialog-header-divider-width": "--border-width-1",
         "--dialog-header-padding": "--space-12",
         "--dialog-title": "--text-primary",
         "--dialog-title-font-family": "--font-sans",
@@ -3020,8 +3020,8 @@
         "--dialog-body-font-size": "--font-size-md",
         "--dialog-body-font-weight": "--font-weight-normal",
         "--dialog-body-line-height": "--line-height-normal",
-        "--dialog-footer-border": "--border-neutral-subtle",
-        "--dialog-footer-border-width": "--border-width-1",
+        "--dialog-footer-divider": "--border-neutral-subtle",
+        "--dialog-footer-divider-width": "--border-width-1",
         "--dialog-footer-padding": "--space-24"
       }
     },
@@ -3808,7 +3808,7 @@
         "--tabbar-default-tab-border-width": "--border-width-0",
         "--tabbar-default-tab-top-radius": "--radius-md",
         "--tabbar-default-tab-bottom-radius": "--radius-md",
-        "--tabbar-default-indicator-border-width": "--border-width-2",
+        "--tabbar-default-indicator-width": "--border-width-2",
         "--tabbar-hover-text": "--text-secondary",
         "--tabbar-hover-surface": "--surface-neutral-lower",
         "--tabbar-hover-text-font-family": "--font-sans",
@@ -3822,7 +3822,7 @@
         "--tabbar-hover-tab-border-width": "--border-width-0",
         "--tabbar-hover-tab-top-radius": "--radius-md",
         "--tabbar-hover-tab-bottom-radius": "--radius-md",
-        "--tabbar-hover-indicator-border-width": "--border-width-2",
+        "--tabbar-hover-indicator-width": "--border-width-2",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
         "--tabbar-active-surface": "--tint-low",
@@ -3836,7 +3836,7 @@
         "--tabbar-active-tab-border-width": "--border-width-0",
         "--tabbar-active-tab-top-radius": "--radius-md",
         "--tabbar-active-tab-bottom-radius": "--radius-md",
-        "--tabbar-active-indicator-border-width": "--border-width-2",
+        "--tabbar-active-indicator-width": "--border-width-2",
         "--tabbar-disabled-text": "--text-disabled",
         "--tabbar-disabled-text-font-family": "--font-sans",
         "--tabbar-disabled-text-font-size": "--font-size-md",
@@ -3850,7 +3850,7 @@
         "--tabbar-disabled-tab-border-width": "--border-width-0",
         "--tabbar-disabled-tab-top-radius": "--radius-md",
         "--tabbar-disabled-tab-bottom-radius": "--radius-md",
-        "--tabbar-disabled-indicator-border-width": "--border-width-2"
+        "--tabbar-disabled-indicator-width": "--border-width-2"
       }
     },
     "table": {
@@ -3871,8 +3871,8 @@
         "--table-default-header-font-weight": "--font-weight-semibold",
         "--table-default-header-line-height": "--line-height-none",
         "--table-default-header-padding": "--space-20",
-        "--table-default-header-border": "--border-neutral",
-        "--table-default-header-border-width": "--border-width-1",
+        "--table-default-header-divider": "--border-neutral",
+        "--table-default-header-divider-width": "--border-width-1",
         "--table-default-cell-text": "--text-secondary",
         "--table-default-cell-font-family": "--font-sans",
         "--table-default-cell-font-size": "--font-size-md",
@@ -3994,5 +3994,5 @@
       }
     }
   },
-  "componentSchemaVersion": 26
+  "componentSchemaVersion": 27
 }

package/src/live-tokens/data/themes/halloween.json

@@ -2934,8 +2934,8 @@
         "--collapsiblesection-chromeless-hover-icon-size": "--icon-size-xs",
         "--collapsiblesection-chromeless-expanded-padding": "--space-4",
         "--collapsiblesection-divider-default-surface": "--color-transparent",
-        "--collapsiblesection-divider-default-border": "--border-brand",
-        "--collapsiblesection-divider-default-border-width": "--border-width-3",
+        "--collapsiblesection-divider-default-hairline-color": "--border-brand",
+        "--collapsiblesection-divider-default-hairline-thickness": "--border-width-3",
         "--collapsiblesection-divider-default-padding": "--space-4",
         "--collapsiblesection-divider-default-label": "--text-primary",
         "--collapsiblesection-divider-default-label-font-family": "--font-sans",
@@ -2945,8 +2945,8 @@
         "--collapsiblesection-divider-default-icon": "--text-primary",
         "--collapsiblesection-divider-default-icon-size": "--icon-size-xs",
         "--collapsiblesection-divider-hover-surface": "--color-transparent",
-        "--collapsiblesection-divider-hover-border": "--border-neutral",
-        "--collapsiblesection-divider-hover-border-width": "--border-width-3",
+        "--collapsiblesection-divider-hover-hairline-color": "--border-neutral",
+        "--collapsiblesection-divider-hover-hairline-thickness": "--border-width-3",
         "--collapsiblesection-divider-hover-padding": "--space-4",
         "--collapsiblesection-divider-hover-label": "--text-primary",
         "--collapsiblesection-divider-hover-label-font-family": "--font-sans",
@@ -3043,8 +3043,8 @@
         "--dialog-shadow": "--shadow-2xl",
         "--dialog-blur": "--blur-none",
         "--dialog-header-surface": "--surface-neutral-lower",
-        "--dialog-header-border": "--border-neutral-subtle",
-        "--dialog-header-border-width": "--border-width-3",
+        "--dialog-header-divider": "--border-neutral-subtle",
+        "--dialog-header-divider-width": "--border-width-3",
         "--dialog-header-padding": "--space-6",
         "--dialog-title": "--text-primary",
         "--dialog-title-font-family": "--font-sans",
@@ -3059,8 +3059,8 @@
         "--dialog-body-font-size": "--font-size-md",
         "--dialog-body-font-weight": "--font-weight-normal",
         "--dialog-body-line-height": "--line-height-normal",
-        "--dialog-footer-border": "--border-neutral-subtle",
-        "--dialog-footer-border-width": "--border-width-3",
+        "--dialog-footer-divider": "--border-neutral-subtle",
+        "--dialog-footer-divider-width": "--border-width-3",
         "--dialog-footer-padding": "--space-12"
       }
     },
@@ -3847,7 +3847,7 @@
         "--tabbar-default-tab-border-width": "--border-width-2",
         "--tabbar-default-tab-top-radius": "--radius-none",
         "--tabbar-default-tab-bottom-radius": "--radius-none",
-        "--tabbar-default-indicator-border-width": "--border-width-4",
+        "--tabbar-default-indicator-width": "--border-width-4",
         "--tabbar-hover-text": "--text-secondary",
         "--tabbar-hover-surface": "--surface-neutral-lower",
         "--tabbar-hover-text-font-family": "--font-sans",
@@ -3861,7 +3861,7 @@
         "--tabbar-hover-tab-border-width": "--border-width-2",
         "--tabbar-hover-tab-top-radius": "--radius-none",
         "--tabbar-hover-tab-bottom-radius": "--radius-none",
-        "--tabbar-hover-indicator-border-width": "--border-width-4",
+        "--tabbar-hover-indicator-width": "--border-width-4",
         "--tabbar-active-text": "--text-primary",
         "--tabbar-active-border": "--color-brand-500",
         "--tabbar-active-surface": "--tint-low",
@@ -3875,7 +3875,7 @@
         "--tabbar-active-tab-border-width": "--border-width-2",
         "--tabbar-active-tab-top-radius": "--radius-none",
         "--tabbar-active-tab-bottom-radius": "--radius-none",
-        "--tabbar-active-indicator-border-width": "--border-width-4",
+        "--tabbar-active-indicator-width": "--border-width-4",
         "--tabbar-disabled-text": "--text-disabled",
         "--tabbar-disabled-text-font-family": "--font-sans",
         "--tabbar-disabled-text-font-size": "--font-size-md",
@@ -3889,7 +3889,7 @@
         "--tabbar-disabled-tab-border-width": "--border-width-2",
         "--tabbar-disabled-tab-top-radius": "--radius-none",
         "--tabbar-disabled-tab-bottom-radius": "--radius-none",
-        "--tabbar-disabled-indicator-border-width": "--border-width-4"
+        "--tabbar-disabled-indicator-width": "--border-width-4"
       }
     },
     "table": {
@@ -3910,8 +3910,8 @@
         "--table-default-header-font-weight": "--font-weight-semibold",
         "--table-default-header-line-height": "--line-height-none",
         "--table-default-header-padding": "--space-10",
-        "--table-default-header-border": "--border-neutral",
-        "--table-default-header-border-width": "--border-width-3",
+        "--table-default-header-divider": "--border-neutral",
+        "--table-default-header-divider-width": "--border-width-3",
         "--table-default-cell-text": "--text-secondary",
         "--table-default-cell-font-family": "--font-sans",
         "--table-default-cell-font-size": "--font-size-md",
@@ -4033,5 +4033,5 @@
       }
     }
   },
-  "componentSchemaVersion": 26
+  "componentSchemaVersion": 27
 }