@motion-proto/live-tokens 0.74.0 → 0.76.0

package/src/testing-js/chunk-LXR3MN6N.js

@@ -0,0 +1,3063 @@
+// src/testing/componentContract.ts
+var ContractViolation = class extends Error {
+  constructor(rule, component, message) {
+    super(`[${rule}] ${component}: ${message}`);
+    this.rule = rule;
+    this.component = component;
+    this.name = "ContractViolation";
+  }
+  rule;
+  component;
+};
+function isInapplicable(value) {
+  return typeof value === "object" && value !== null && value.applicable === false;
+}
+var INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+  "button",
+  "switch",
+  "checkbox",
+  "radio",
+  "slider",
+  "spinbutton",
+  "textbox",
+  "combobox",
+  "listbox",
+  "menuitem",
+  "tab",
+  "link",
+  "searchbox",
+  "option"
+]);
+function requiresInteraction(role) {
+  return role !== null && INTERACTIVE_ROLES.has(role);
+}
+function partLocator(contract, key) {
+  const declared = contract.parts[key];
+  if (declared === void 0) {
+    throw new ContractViolation("contract-render", contract.id, `no part named "${key}" is declared`);
+  }
+  return typeof declared === "string" ? { selector: declared } : declared;
+}
+
+// src/testing/contracts/index.ts
+import path from "path";
+import { pathToFileURL } from "url";
+
+// src/testing/contracts/badge.ts
+var variants = [
+  "primary",
+  "accent",
+  "neutral",
+  "alternate",
+  "canvas",
+  "special",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+function basePaints(v) {
+  return {
+    root: {
+      paddingTop: `--badge-${v}-padding`,
+      borderRadius: `--badge-${v}-radius`,
+      borderTopWidth: `--badge-${v}-border-width`,
+      boxShadow: `--badge-${v}-shadow`,
+      fontFamily: `--badge-${v}-text-font-family`,
+      fontSize: `--badge-${v}-text-font-size`,
+      fontWeight: `--badge-${v}-text-font-weight`,
+      lineHeight: `--badge-${v}-text-line-height`
+    },
+    icon: { fontSize: `--badge-${v}-icon-size` }
+  };
+}
+function colorPaints(v) {
+  return {
+    root: {
+      backgroundColor: `--badge-${v}-surface`,
+      borderTopColor: `--badge-${v}-border`,
+      color: `--badge-${v}-text`
+    }
+  };
+}
+var badgeContract = {
+  id: "badge",
+  origin: "system",
+  view: { variant: "Primary" },
+  root: "root",
+  parts: {
+    root: ".badge",
+    icon: ".icon"
+  },
+  properties: [
+    { variant: "Primary", state: "base", paints: basePaints("primary") },
+    { variant: "Primary", state: "colors", paints: colorPaints("primary") },
+    ...variants.filter((v) => v !== "primary").flatMap((v) => [
+      { variant: v.charAt(0).toUpperCase() + v.slice(1), state: "base", paints: basePaints(v) },
+      { variant: v.charAt(0).toUpperCase() + v.slice(1), state: "colors", paints: colorPaints(v) }
+    ])
+  ],
+  states: [{ state: "base" }, { state: "colors" }],
+  uncovered: {
+    "--badge-primary-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-accent-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-neutral-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-alternate-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-canvas-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-special-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-success-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-warning-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-danger-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    "--badge-info-blur": "consumed via backdrop-filter: blur(), which no probe covers"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variant: "Primary",
+        state: "base",
+        variable: "--badge-primary-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--badge-primary-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--badge-primary-border-width", "--badge-primary-radius", "--badge-primary-padding"],
+    unchanged: ["--badge-primary-shadow", "--badge-primary-icon-size"],
+    aliasedTo: {
+      "--badge-primary-border-width": "--border-width-3",
+      "--badge-primary-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--badge-primary-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a badge is a static label with no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--badge-primary-surface", stroke: "--badge-primary-border" }]
+  }
+};
+
+// src/testing/contracts/button.ts
+var variants2 = ["primary", "secondary", "outline", "success", "danger", "warning"];
+var cap = (v) => v.charAt(0).toUpperCase() + v.slice(1);
+function basePaints2(v) {
+  return {
+    root: {
+      paddingTop: `--button-${v}-padding`,
+      borderRadius: `--button-${v}-radius`,
+      borderTopWidth: `--button-${v}-border-width`,
+      fontFamily: `--button-${v}-text-font-family`,
+      fontSize: `--button-${v}-text-font-size`,
+      fontWeight: `--button-${v}-text-font-weight`,
+      lineHeight: `--button-${v}-text-line-height`
+    },
+    icon: { fontSize: `--button-${v}-icon-size` }
+  };
+}
+function statePaints(v, s) {
+  const prefix = s === "default" ? `--button-${v}` : `--button-${v}-${s}`;
+  const textVar = s === "default" ? `--button-${v}-text` : `--button-${v}-${s}-text`;
+  return {
+    root: {
+      backgroundColor: `${prefix}-surface`,
+      borderTopColor: `${prefix}-border`,
+      color: textVar
+    }
+  };
+}
+var otherVariantProperties = variants2.filter((v) => v !== "primary").flatMap((v) => [
+  { variant: cap(v), state: "base", paints: basePaints2(v) },
+  { variant: cap(v), state: "default", paints: statePaints(v, "default") },
+  { variant: cap(v), state: "hover", paints: statePaints(v, "hover") },
+  { variant: cap(v), state: "disabled", paints: statePaints(v, "disabled") }
+]);
+var buttonContract = {
+  id: "button",
+  origin: "system",
+  view: { variant: "Primary" },
+  root: "root",
+  parts: {
+    root: ".button",
+    icon: ".button i"
+  },
+  properties: [
+    { variant: "Primary", state: "base", paints: basePaints2("primary") },
+    ...otherVariantProperties,
+    { variant: "Outline", state: "active", paints: { root: { backgroundColor: "--button-outline-active-surface" } } },
+    {
+      setup: [{ kind: "control", selector: ".preview-actions select", value: "small" }],
+      paints: {
+        root: {
+          paddingTop: "--button-small-padding",
+          fontSize: "--button-small-text-font-size",
+          fontWeight: "--button-small-text-font-weight",
+          lineHeight: "--button-small-text-line-height"
+        },
+        icon: { fontSize: "--button-small-icon-size" }
+      }
+    }
+  ],
+  states: [
+    { state: "base" },
+    { state: "default", paints: statePaints("primary", "default") },
+    { state: "hover", forceClass: "force-hover", paints: statePaints("primary", "hover") },
+    {
+      state: "disabled",
+      attributes: { root: { disabled: "" } },
+      paints: statePaints("primary", "disabled")
+    }
+  ],
+  uncovered: {
+    "--button-shimmer": "gates the ::before sweep with a display toggle, which no probe covers",
+    "--button-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--button-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variant: "Primary",
+        state: "base",
+        variable: "--button-primary-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--button-primary-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--button-primary-border-width", "--button-primary-radius", "--button-primary-padding"],
+    unchanged: ["--button-primary-icon-size"],
+    aliasedTo: {
+      "--button-primary-border-width": "--border-width-3",
+      "--button-primary-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--button-primary-border-width" }
+  },
+  interaction: {
+    part: "root",
+    role: "button",
+    cases: [
+      {
+        name: "clicking a button focuses it",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: true }
+      },
+      {
+        name: "a disabled button refuses focus",
+        state: "disabled",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--button-primary-surface", stroke: "--button-primary-border" }]
+  }
+};
+
+// src/testing/contracts/callout.ts
+var variants3 = ["info", "success", "warning", "danger"];
+function paintsFor(v) {
+  return {
+    root: {
+      backgroundColor: `--callout-${v}-surface`,
+      borderTopColor: `--callout-${v}-border`,
+      borderTopWidth: `--callout-${v}-border-width`,
+      borderLeftWidth: `--callout-${v}-accent-width`,
+      borderRadius: `--callout-${v}-radius`,
+      paddingTop: `--callout-${v}-padding`
+    },
+    label: {
+      color: `--callout-${v}-label`,
+      fontFamily: `--callout-${v}-label-font-family`,
+      fontSize: `--callout-${v}-label-font-size`,
+      fontWeight: `--callout-${v}-label-font-weight`,
+      lineHeight: `--callout-${v}-label-line-height`
+    },
+    message: {
+      color: `--callout-${v}-text`,
+      fontFamily: `--callout-${v}-text-font-family`,
+      fontSize: `--callout-${v}-text-font-size`,
+      fontWeight: `--callout-${v}-text-font-weight`,
+      lineHeight: `--callout-${v}-text-line-height`
+    }
+  };
+}
+var calloutContract = {
+  id: "callout",
+  origin: "system",
+  view: { variant: "Info" },
+  root: "root",
+  parts: {
+    root: ".callout",
+    label: ".callout-label",
+    message: ".callout-message"
+  },
+  properties: variants3.map((v) => ({ variant: v.charAt(0).toUpperCase() + v.slice(1), paints: paintsFor(v) })),
+  states: {
+    applicable: false,
+    reason: "each variant is one full preset with one state, so the editor renders no state strip"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--callout-info-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--callout-info-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--callout-info-border-width", "--callout-info-radius", "--callout-info-padding"],
+    unchanged: ["--callout-info-label-font-size", "--callout-info-text-font-size"],
+    aliasedTo: {
+      "--callout-info-border-width": "--border-width-3",
+      "--callout-info-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--callout-info-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a callout is a static box with no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--callout-info-surface", stroke: "--callout-info-border" }]
+  }
+};
+
+// src/testing/contracts/card.ts
+var cardContract = {
+  id: "card",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".card",
+    header: ".card-header",
+    icon: ".card-icon",
+    title: ".card-title",
+    body: ".card-body"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          backgroundColor: "--card-default-surface",
+          borderTopColor: "--card-default-border",
+          borderTopWidth: "--card-default-border-width",
+          borderRadius: "--card-default-radius",
+          boxShadow: "--card-default-shadow"
+        },
+        header: {
+          backgroundColor: "--card-default-header-surface",
+          columnGap: "--card-default-header-gap",
+          paddingTop: "--card-default-header-padding-top",
+          paddingRight: "--card-default-header-padding-right",
+          paddingBottom: "--card-default-header-padding-bottom",
+          paddingLeft: "--card-default-header-padding-left"
+        },
+        icon: { fontSize: "--card-default-icon-size" },
+        title: {
+          color: "--card-default-title",
+          fontFamily: "--card-default-title-font-family",
+          fontSize: "--card-default-title-font-size",
+          fontWeight: "--card-default-title-font-weight",
+          lineHeight: "--card-default-title-line-height"
+        },
+        body: {
+          color: "--card-default-body",
+          fontFamily: "--card-default-body-font-family",
+          fontSize: "--card-default-body-font-size",
+          fontWeight: "--card-default-body-font-weight",
+          lineHeight: "--card-default-body-line-height",
+          paddingTop: "--card-default-body-padding-top",
+          paddingRight: "--card-default-body-padding-right",
+          paddingBottom: "--card-default-body-padding-bottom",
+          paddingLeft: "--card-default-body-padding-left"
+        }
+      }
+    },
+    // `click({force:true})` leaves the pointer resting on `root`, so the
+    // browser's real `.card:hover` rule applies afterward, no InteractionCase
+    // needed. The editor's `.force-hover` reads these same gated tokens, so
+    // the state entry below and this one have to agree.
+    {
+      setup: [{ kind: "click", part: "root" }],
+      paints: {
+        root: { borderTopColor: "--card-hover-border-enabled", boxShadow: "--card-hover-shadow-enabled" }
+      }
+    },
+    // The per-side entry above drives `-padding-top` directly, which passes
+    // regardless of what it's aliased to. This drives the base token instead,
+    // proving the `-padding-top: var(--card-default-*-padding)` link itself.
+    {
+      paints: {
+        header: { paddingTop: "--card-default-header-padding" },
+        body: { paddingTop: "--card-default-body-padding" }
+      }
+    }
+  ],
+  states: [
+    { state: "default" },
+    // The gate is off by default, so the hover tab has to show the resting
+    // card. Naming the gated tokens is what pins that: `--card-hover-border`
+    // resolves to `--border-neutral-strong` and would not match.
+    {
+      state: "hover",
+      forceClass: "force-hover",
+      paints: {
+        root: { borderTopColor: "--card-hover-border-enabled", boxShadow: "--card-hover-shadow-enabled" }
+      }
+    }
+  ],
+  uncovered: {
+    "--card-default-blur": "consumed via backdrop-filter: blur(), which no probe covers",
+    // `--card-hover-border-enabled` is an alias the editor repoints, so the
+    // chain is not live and driving these two moves nothing. The runtime reads
+    // them only through the per-instance `hover` prop (Card.svelte:47), which
+    // the standardized preview never sets. Before force-hover honoured the
+    // gate it read `--card-hover-border` directly and the hover state pinned
+    // it; that path was the bug.
+    "--card-hover-border": "reachable only through the per-instance hover prop, which the preview does not set",
+    "--card-hover-shadow": "reachable only through the per-instance hover prop, which the preview does not set"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--card-default-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--card-default-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--card-default-border-width", "--card-default-radius"],
+    unchanged: ["--card-default-icon-size"],
+    aliasedTo: {
+      "--card-default-border-width": "--border-width-3",
+      "--card-default-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--card-default-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a card is a static container with no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", fill: "--card-default-surface", stroke: "--card-default-border" },
+      { part: "header", fill: "--card-default-header-surface" }
+    ]
+  }
+};
+
+// src/testing/contracts/codesnippet.ts
+var codeSnippetContract = {
+  id: "codesnippet",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".codesnippet",
+    code: ".code",
+    copy: ".copy"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          columnGap: "--codesnippet-gap",
+          paddingTop: "--codesnippet-padding",
+          backgroundColor: "--codesnippet-surface",
+          borderTopColor: "--codesnippet-border",
+          borderTopWidth: "--codesnippet-border-width",
+          borderRadius: "--codesnippet-radius"
+        },
+        code: {
+          color: "--codesnippet-code-text",
+          fontFamily: "--codesnippet-code-font-family",
+          fontSize: "--codesnippet-code-font-size",
+          fontWeight: "--codesnippet-code-font-weight",
+          lineHeight: "--codesnippet-code-line-height"
+        },
+        copy: {
+          color: "--codesnippet-icon",
+          fontSize: "--codesnippet-icon-size"
+        }
+      }
+    }
+  ],
+  states: [
+    { state: "default" },
+    {
+      state: "hover",
+      forceClass: "force-hover",
+      paints: { copy: { color: "--codesnippet-hover-icon" } }
+    }
+  ],
+  uncovered: {
+    "--codesnippet-scrollbar-thumb": "drawn via the ::-webkit-scrollbar-thumb pseudo-element and the scrollbar-color property, neither of which a probe can pin to one part",
+    "--codesnippet-scrollbar-border-width": "drives ::-webkit-scrollbar height, which a probe cannot read back verbatim"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--codesnippet-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--codesnippet-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--codesnippet-border-width", "--codesnippet-radius", "--codesnippet-padding", "--codesnippet-scrollbar-border-width"],
+    unchanged: ["--codesnippet-icon-size"],
+    aliasedTo: {
+      "--codesnippet-border-width": "--border-width-3",
+      "--codesnippet-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--codesnippet-border-width" }
+  },
+  interaction: {
+    part: "copy",
+    role: "button",
+    cases: [
+      {
+        name: "clicking copy focuses the button",
+        action: { kind: "click", part: "copy" },
+        expect: { kind: "focused", part: "copy", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--codesnippet-surface", stroke: "--codesnippet-border" }]
+  }
+};
+
+// src/testing/contracts/collapsiblesection.ts
+function clickHover() {
+  return [{ kind: "control", selector: '.tabs-selectors.substrip .state-tab-btn:has-text("Hover")' }];
+}
+function headerPaints(v, s) {
+  const p = `--collapsiblesection-${v}-${s}`;
+  const header = {
+    backgroundColor: `${p}-surface`,
+    paddingTop: `${p}-padding`
+  };
+  if (v === "divider") {
+    header.borderBottomColor = `${p}-hairline-color`;
+    header.borderBottomWidth = `${p}-hairline-thickness`;
+  }
+  return {
+    header,
+    label: {
+      color: `${p}-label`,
+      fontFamily: `${p}-label-font-family`,
+      fontSize: `${p}-label-font-size`,
+      fontWeight: `${p}-label-font-weight`,
+      lineHeight: `${p}-label-line-height`
+    },
+    icon: { color: `${p}-icon`, fontSize: `${p}-icon-size` }
+  };
+}
+var collapsibleSectionContract = {
+  id: "collapsiblesection",
+  origin: "system",
+  view: { variant: "Container", state: "Body" },
+  root: "root",
+  parts: {
+    root: ".es-root",
+    header: ".section-header",
+    label: ".section-label",
+    icon: ".toggle-icon",
+    body: ".section-content",
+    toggleButton: ".section-toggle-button"
+  },
+  properties: [
+    {
+      variant: "Container",
+      state: "Container",
+      paints: {
+        root: {
+          borderTopColor: "--collapsiblesection-container-frame-border",
+          borderTopWidth: "--collapsiblesection-container-frame-border-width",
+          borderRadius: "--collapsiblesection-container-frame-radius"
+        }
+      }
+    },
+    { variant: "Container", state: "Header", paints: headerPaints("container", "default") },
+    { variant: "Container", state: "Header", setup: clickHover(), paints: headerPaints("container", "hover") },
+    {
+      variant: "Container",
+      state: "Body",
+      paints: { body: { backgroundColor: "--collapsiblesection-container-expanded-surface", paddingTop: "--collapsiblesection-container-expanded-padding" } }
+    },
+    { variant: "Chromeless", state: "Header", paints: headerPaints("chromeless", "default") },
+    { variant: "Chromeless", state: "Header", setup: clickHover(), paints: headerPaints("chromeless", "hover") },
+    { variant: "Chromeless", state: "Body", paints: { body: { paddingTop: "--collapsiblesection-chromeless-expanded-padding" } } },
+    { variant: "With Divider", state: "Header", paints: headerPaints("divider", "default") },
+    { variant: "With Divider", state: "Header", setup: clickHover(), paints: headerPaints("divider", "hover") },
+    { variant: "With Divider", state: "Body", paints: { body: { paddingTop: "--collapsiblesection-divider-expanded-padding" } } }
+  ],
+  states: [{ state: "Container" }, { state: "Header" }, { state: "Body" }],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variant: "Container",
+        state: "Container",
+        variable: "--collapsiblesection-container-frame-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--collapsiblesection-container-frame-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--collapsiblesection-container-frame-border-width", "--collapsiblesection-container-frame-radius"],
+    unchanged: ["--collapsiblesection-container-default-icon-size"],
+    aliasedTo: {
+      "--collapsiblesection-container-frame-border-width": "--border-width-3",
+      "--collapsiblesection-container-frame-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--collapsiblesection-container-frame-border-width" }
+  },
+  interaction: {
+    part: "toggleButton",
+    role: "button",
+    // No activation case: CollapsibleSectionEditor's preview drives `expanded`
+    // off the active state tab and never wires `ontoggle` back to it, so
+    // clicking the real button here can't move `aria-expanded` (same
+    // constraint documented on ToggleEditor in toggle.ts).
+    cases: [
+      {
+        name: "clicking the toggle button focuses it",
+        action: { kind: "click", part: "toggleButton" },
+        expect: { kind: "focused", part: "toggleButton", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", stroke: "--collapsiblesection-container-frame-border" },
+      { part: "header", fill: "--collapsiblesection-container-default-surface" },
+      { part: "body", fill: "--collapsiblesection-container-expanded-surface" }
+    ]
+  }
+};
+
+// src/testing/contracts/cornerbadge.ts
+var variants4 = [
+  "primary",
+  "accent",
+  "neutral",
+  "alternate",
+  "canvas",
+  "special",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+function colorPaints2(v) {
+  return {
+    badge: {
+      backgroundColor: `--corner-badge-${v}-surface`,
+      borderTopColor: `--corner-badge-${v}-border`,
+      color: `--corner-badge-${v}-text`
+    }
+  };
+}
+var basePaints3 = {
+  root: { bottom: "--corner-badge-margin" },
+  badge: {
+    borderTopLeftRadius: "--corner-badge-inner-radius",
+    borderTopRightRadius: "--corner-badge-v-axis-radius",
+    borderBottomRightRadius: "--corner-badge-outer-radius",
+    borderBottomLeftRadius: "--corner-badge-h-axis-radius",
+    paddingTop: "--corner-badge-padding",
+    fontFamily: "--corner-badge-text-font-family",
+    fontSize: "--corner-badge-text-font-size",
+    fontWeight: "--corner-badge-text-font-weight",
+    lineHeight: "--corner-badge-text-line-height"
+  }
+};
+var cornerBadgeContract = {
+  id: "cornerbadge",
+  origin: "system",
+  view: { variant: "Primary" },
+  root: "root",
+  parts: {
+    root: ".corner-badge",
+    badge: ".corner-badge .badge"
+  },
+  properties: [
+    {
+      variant: "Primary",
+      paints: {
+        root: basePaints3.root,
+        badge: { ...basePaints3.badge, ...colorPaints2("primary").badge }
+      }
+    },
+    ...variants4.filter((v) => v !== "primary").map((v) => ({
+      variant: v.charAt(0).toUpperCase() + v.slice(1),
+      paints: colorPaints2(v)
+    }))
+  ],
+  states: [{ state: "base" }, { state: "colors" }],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--corner-badge-outer-radius",
+        observe: { part: "badge", css: "borderBottomRightRadius" }
+      }
+    ],
+    resetVariable: "--corner-badge-outer-radius"
+  },
+  theme: {
+    theme: "ocean",
+    changed: ["--corner-badge-outer-radius", "--corner-badge-inner-radius", "--corner-badge-margin"],
+    unchanged: ["--corner-badge-text-font-size"],
+    aliasedTo: {
+      "--corner-badge-outer-radius": "--radius-md",
+      "--corner-badge-inner-radius": "--radius-md"
+    },
+    observe: { part: "badge", css: "borderBottomRightRadius", variable: "--corner-badge-outer-radius" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a corner badge is a static marker with no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "badge", fill: "--corner-badge-primary-surface", stroke: "--corner-badge-primary-border" }]
+  }
+};
+
+// src/testing/contracts/dialog.ts
+var dialogContract = {
+  id: "dialog",
+  origin: "system",
+  root: "root",
+  parts: {
+    backdrop: ".dialog-backdrop",
+    root: ".dialog",
+    header: ".dialog-header",
+    title: ".dialog-title",
+    closeButton: ".dialog-close",
+    body: ".dialog-body",
+    footer: ".dialog-footer",
+    confirmButton: ".dialog-footer-buttons button:last-of-type",
+    cancelButton: ".dialog-footer-buttons button:first-of-type"
+  },
+  properties: [
+    {
+      paints: {
+        backdrop: { backgroundColor: "--dialog-scrim-surface" },
+        root: {
+          backgroundColor: "--dialog-surface",
+          borderTopColor: "--dialog-border",
+          borderTopWidth: "--dialog-border-width",
+          borderRadius: "--dialog-radius",
+          boxShadow: "--dialog-shadow"
+        },
+        header: {
+          backgroundColor: "--dialog-header-surface",
+          borderBottomColor: "--dialog-header-divider",
+          borderBottomWidth: "--dialog-header-divider-width",
+          paddingTop: "--dialog-header-padding"
+        },
+        title: {
+          color: "--dialog-title",
+          fontFamily: "--dialog-title-font-family",
+          fontSize: "--dialog-title-font-size",
+          fontWeight: "--dialog-title-font-weight",
+          lineHeight: "--dialog-title-line-height"
+        },
+        closeButton: {
+          color: "--dialog-close-icon",
+          fontSize: "--dialog-close-icon-size"
+        },
+        body: {
+          paddingTop: "--dialog-body-padding",
+          color: "--dialog-body",
+          fontFamily: "--dialog-body-font-family",
+          fontSize: "--dialog-body-font-size",
+          fontWeight: "--dialog-body-font-weight",
+          lineHeight: "--dialog-body-line-height"
+        },
+        footer: {
+          borderTopColor: "--dialog-footer-divider",
+          borderTopWidth: "--dialog-footer-divider-width",
+          paddingTop: "--dialog-footer-padding"
+        }
+      }
+    }
+  ],
+  states: [
+    { state: "scrim" },
+    { state: "dialog" },
+    { state: "header" },
+    { state: "body" },
+    { state: "footer" }
+  ],
+  uncovered: {
+    "--dialog-blur": "consumed via backdrop-filter: blur(), which no probe covers"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        state: "dialog",
+        variable: "--dialog-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      },
+      {
+        shape: "config",
+        state: "footer",
+        control: '.button-variant-row:has(.property-label:text-is("right button")) select',
+        configKey: "--dialog-confirm-variant",
+        observe: { part: "confirmButton", css: "backgroundColor" }
+      },
+      {
+        shape: "config",
+        state: "footer",
+        control: '.button-variant-row:has(.property-label:text-is("left button")) select',
+        configKey: "--dialog-cancel-variant",
+        observe: { part: "cancelButton", css: "backgroundColor" }
+      }
+    ],
+    resetVariable: "--dialog-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--dialog-border-width", "--dialog-radius", "--dialog-header-padding", "--dialog-footer-padding"],
+    unchanged: ["--dialog-close-icon-size", "--dialog-title-font-size"],
+    aliasedTo: {
+      "--dialog-border-width": "--border-width-4",
+      "--dialog-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--dialog-border-width" }
+  },
+  interaction: {
+    part: "closeButton",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the close icon focuses it",
+        action: { kind: "click", part: "closeButton" },
+        expect: { kind: "focused", part: "closeButton", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", fill: "--dialog-surface", stroke: "--dialog-border" },
+      { part: "header", fill: "--dialog-header-surface" }
+    ]
+  }
+};
+
+// src/testing/contracts/iconbutton.ts
+var variants5 = ["primary", "secondary", "outline", "success", "danger", "warning"];
+var cap2 = (v) => v.charAt(0).toUpperCase() + v.slice(1);
+function basePaints4(v) {
+  return {
+    root: {
+      paddingTop: `--iconbutton-${v}-padding`,
+      borderRadius: `--iconbutton-${v}-radius`,
+      borderTopWidth: `--iconbutton-${v}-border-width`
+    },
+    icon: { fontSize: `--iconbutton-${v}-icon-size` }
+  };
+}
+function statePaints2(v, s) {
+  const prefix = s === "default" ? `--iconbutton-${v}` : `--iconbutton-${v}-${s}`;
+  const iconVar = s === "default" ? `--iconbutton-${v}-icon` : `--iconbutton-${v}-${s}-icon`;
+  return {
+    root: { backgroundColor: `${prefix}-surface`, borderTopColor: `${prefix}-border` },
+    icon: { color: iconVar }
+  };
+}
+var otherVariantProperties2 = variants5.filter((v) => v !== "primary").flatMap((v) => [
+  { variant: cap2(v), state: "base", paints: basePaints4(v) },
+  { variant: cap2(v), state: "default", paints: statePaints2(v, "default") },
+  { variant: cap2(v), state: "hover", paints: statePaints2(v, "hover") },
+  { variant: cap2(v), state: "disabled", paints: statePaints2(v, "disabled") }
+]);
+var iconButtonContract = {
+  id: "iconbutton",
+  origin: "system",
+  view: { variant: "Primary" },
+  root: "root",
+  parts: {
+    root: ".icon-button",
+    icon: ".icon-button i"
+  },
+  properties: [
+    { variant: "Primary", state: "base", paints: basePaints4("primary") },
+    ...otherVariantProperties2,
+    { variant: "Outline", state: "active", paints: { root: { backgroundColor: "--iconbutton-outline-active-surface" } } },
+    {
+      setup: [{ kind: "control", selector: ".preview-actions select", value: "small" }],
+      paints: {
+        root: { paddingTop: "--iconbutton-small-padding" },
+        icon: { fontSize: "--iconbutton-small-icon-size" }
+      }
+    }
+  ],
+  states: [
+    { state: "base" },
+    { state: "default", paints: statePaints2("primary", "default") },
+    { state: "hover", forceClass: "force-hover", paints: statePaints2("primary", "hover") },
+    {
+      state: "disabled",
+      attributes: { root: { disabled: "" } },
+      paints: statePaints2("primary", "disabled")
+    }
+  ],
+  uncovered: {
+    "--iconbutton-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--iconbutton-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variant: "Primary",
+        state: "base",
+        variable: "--iconbutton-primary-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--iconbutton-primary-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--iconbutton-primary-border-width", "--iconbutton-primary-radius", "--iconbutton-primary-padding"],
+    unchanged: ["--iconbutton-primary-icon-size"],
+    aliasedTo: {
+      "--iconbutton-primary-border-width": "--border-width-3",
+      "--iconbutton-primary-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--iconbutton-primary-border-width" }
+  },
+  interaction: {
+    part: "root",
+    role: "button",
+    cases: [
+      {
+        name: "clicking an icon button focuses it",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--iconbutton-primary-surface", stroke: "--iconbutton-primary-border" }]
+  }
+};
+
+// src/testing/contracts/image.ts
+var imageContract = {
+  id: "image",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".image",
+    img: ".image img"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          borderTopColor: "--image-default-border",
+          borderTopWidth: "--image-default-border-width",
+          borderRadius: "--image-default-radius",
+          boxShadow: "--image-default-shadow"
+        }
+      }
+    }
+  ],
+  states: {
+    applicable: false,
+    reason: "the editor renders one token group (image) with no state strip"
+  },
+  uncovered: {
+    "--image-zoom-scale": "consumed inside transform: scale(), never appears verbatim in a computed style"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--image-default-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      },
+      {
+        shape: "literal",
+        control: 'label.zoom-enable:has-text("Use zoom on hover") input',
+        variable: "--image-zoom-enabled",
+        observe: { part: "img", css: "transform" }
+      }
+    ],
+    resetVariable: "--image-default-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--image-default-border-width", "--image-default-radius"],
+    unchanged: ["--image-default-shadow", "--image-zoom-scale"],
+    aliasedTo: {
+      "--image-default-border-width": "--border-width-3",
+      "--image-default-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--image-default-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a framed picture carries no interactive role; the zoom effect is a hover transform, not an action"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", stroke: "--image-default-border" }]
+  }
+};
+
+// src/testing/contracts/imagelightbox.ts
+var imageLightboxContract = {
+  id: "imagelightbox",
+  origin: "system",
+  view: { setup: [{ kind: "click", part: "thumb" }] },
+  root: "root",
+  parts: {
+    root: ".image-lightbox-wrapper",
+    thumb: ".image-lightbox-thumb",
+    overlay: { selector: ".image-lightbox-overlay", portal: true },
+    stage: { selector: ".image-lightbox-stage", portal: true },
+    closeButton: { selector: ".image-lightbox-close", portal: true },
+    closeIcon: { selector: ".image-lightbox-close svg", portal: true },
+    prevButton: { selector: ".image-lightbox-nav-prev", portal: true },
+    nextButton: { selector: ".image-lightbox-nav-next", portal: true },
+    counter: { selector: ".image-lightbox-counter", portal: true },
+    toolbar: { selector: ".image-lightbox-toolbar", portal: true }
+  },
+  properties: [
+    {
+      paints: {
+        thumb: {
+          backgroundColor: "--imagelightbox-tile-surface",
+          borderTopColor: "--imagelightbox-tile-border",
+          borderTopWidth: "--imagelightbox-tile-border-width",
+          borderRadius: "--imagelightbox-tile-radius",
+          boxShadow: "--imagelightbox-tile-shadow"
+        },
+        overlay: { backgroundColor: "--imagelightbox-overlay-surface" },
+        closeButton: {
+          backgroundColor: "--imagelightbox-chrome-surface",
+          borderTopColor: "--imagelightbox-chrome-border",
+          borderTopWidth: "--imagelightbox-chrome-border-width",
+          borderRadius: "--imagelightbox-chrome-radius",
+          color: "--imagelightbox-chrome-icon"
+        },
+        closeIcon: { stroke: "--imagelightbox-chrome-icon" }
+      }
+    },
+    // `click({force:true})` leaves the pointer resting on `nextButton`, so the
+    // browser's real `.image-lightbox-nav:hover` rule applies afterward.
+    // Unlike `closeButton`, clicking it does not close the modal.
+    {
+      setup: [{ kind: "click", part: "nextButton" }],
+      paints: { nextButton: { backgroundColor: "--imagelightbox-chrome-hover-surface" } }
+    }
+  ],
+  states: [{ state: "tile" }, { state: "overlay" }, { state: "chrome" }],
+  persistence: {
+    cases: [
+      {
+        // No `state` here: "tile" is the panel's own default tab, and every
+        // `selectView` re-clicks whatever `state` names even when it is
+        // already active. While the modal is open, that click's target sits
+        // under the overlay's full-viewport hit area, so skipping it avoids
+        // an avoidable trip through the same close-on-click behavior `setup`
+        // is about to use on purpose. `setup` closes the modal the
+        // contract-level view opened so the "tile" token control (behind the
+        // still-open overlay otherwise) is reachable, by pressing Escape on
+        // `root` rather than clicking `closeButton`. `assertPersistence`
+        // replays `setup` twice back to back (once directly, once inside
+        // `driveControl`). Measured against a live page: `closeLightbox`'s
+        // `open = false` write happens inside an animation `onfinish`
+        // callback that a `settle()` cycle doesn't durably wait out, so
+        // `closeButton` — a portaled element that unmounts once that callback
+        // fires — can still be gone, still be there, or about to vanish
+        // mid-click, depending on exactly when it lands relative to the
+        // harness's round trips. A second `closeButton` click inherits that
+        // uncertainty. Leading with a `thumb` click to guarantee a target for
+        // the `closeButton` click that follows inherits it from the other
+        // side instead: `openLightbox`'s own `if (open) return` reads the
+        // same not-yet-written flag, so it can no-op rather than reopen, and
+        // nothing then re-drives it — reproduced empirically, a deterministic
+        // dead end. Escape on `root` avoids both: `root` is never portaled,
+        // so the action always has a target, and replaying it before the
+        // first press has finished closing re-enters `closeLightbox` rather
+        // than skipping it, so every replay drives the component strictly
+        // further toward closed. (Escape also collapses the components
+        // editor's own drawer, but nothing else this obligation reads lives
+        // there, and `reopen()` between obligations restores it.)
+        shape: "token",
+        setup: [{ kind: "press", part: "root", key: "Escape" }],
+        variable: "--imagelightbox-tile-border-width",
+        observe: { part: "thumb", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--imagelightbox-tile-border-width"
+  },
+  theme: {
+    // Closes the modal the contract-level setup opened: the Theme Picker
+    // trigger lives in the chrome behind it, and the still-open overlay
+    // blocks clicks the same way it does for the persistence case above.
+    // Unlike that case, `assertThemeProjection` runs `setup` only once, so
+    // the double-replay hazard doesn't apply and a plain `closeButton` click
+    // is enough — and it has to be a click, not the Escape this contract's
+    // persistence case uses, because Escape also collapses the drawer this
+    // obligation's own `.theme-name-trigger` lives in.
+    setup: [{ kind: "click", part: "closeButton" }],
+    theme: "halloween",
+    changed: ["--imagelightbox-tile-border-width", "--imagelightbox-tile-radius", "--imagelightbox-chrome-border-width", "--imagelightbox-chrome-radius"],
+    unchanged: ["--imagelightbox-tile-shadow"],
+    aliasedTo: {
+      "--imagelightbox-tile-border-width": "--border-width-2",
+      "--imagelightbox-tile-radius": "--radius-none"
+    },
+    observe: { part: "thumb", css: "borderTopWidth", variable: "--imagelightbox-tile-border-width" }
+  },
+  interaction: {
+    part: "nextButton",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the next chevron focuses it",
+        action: { kind: "click", part: "nextButton" },
+        expect: { kind: "focused", part: "nextButton", value: true }
+      }
+    ]
+  },
+  // `overlay` and `closeButton` are inside `.image-lightbox-modal`, which
+  // `use:portal` moves to `document.body`. The standardized preview scopes
+  // `data-sketch` to its own `.sketch-scope` wrapper rather than the document
+  // root, so a portaled part sits outside the CSS ancestor match this contract
+  // can observe, even though PART_SPECS draws it on a real host page (where
+  // Sketch mode's scope is the page root). `thumb` never portals, so it is the
+  // part this contract can pin.
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "thumb", fill: "--imagelightbox-tile-surface", stroke: "--imagelightbox-tile-border" }
+    ]
+  }
+};
+
+// src/testing/contracts/inlineeditactions.ts
+function statePaints3(btn, s) {
+  const p = `--inlineeditactions-${btn}-${s}`;
+  const button = btn === "save" ? "saveBtn" : "cancelBtn";
+  return {
+    // `-icon-size` lands as `font-size` on the button itself (the icon glyph
+    // inherits it), not on a separate icon element — and a declared "icon"
+    // part here would be the button's own `<i class="fas ...">`, whose native
+    // ::before glyph content is never 'none', which reads as "drawn" to
+    // `assertNoSketchPaint` regardless of sketch mode.
+    [button]: {
+      backgroundColor: `${p}-surface`,
+      borderTopColor: `${p}-border`,
+      borderTopWidth: `${p}-border-width`,
+      borderRadius: `${p}-radius`,
+      paddingTop: `${p}-padding`,
+      color: `${p}-text`,
+      fontSize: `${p}-icon-size`
+    }
+  };
+}
+var inlineEditActionsContract = {
+  id: "inlineeditactions",
+  origin: "system",
+  view: { variant: "Save button" },
+  root: "saveBtn",
+  parts: {
+    saveBtn: ".save-btn",
+    cancelBtn: ".cancel-btn"
+  },
+  // Every entry names its own `state` explicitly. VariantGroup mirrors the
+  // last-clicked state tab across sibling variants (for the linked-block
+  // chart), so switching variants without repeating `state` would silently
+  // carry the previous entry's tab forward.
+  properties: [
+    { variant: "Save button", state: "default", paints: statePaints3("save", "default") },
+    { variant: "Save button", state: "hover", paints: statePaints3("save", "hover") },
+    { variant: "Cancel button", state: "default", paints: statePaints3("cancel", "default") },
+    { variant: "Cancel button", state: "hover", paints: statePaints3("cancel", "hover") }
+  ],
+  states: [
+    { state: "default" },
+    { state: "hover" }
+  ],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--inlineeditactions-save-default-border-width",
+        observe: { part: "saveBtn", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--inlineeditactions-save-default-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--inlineeditactions-save-default-border-width", "--inlineeditactions-save-default-radius"],
+    unchanged: ["--inlineeditactions-save-default-icon-size"],
+    aliasedTo: {
+      "--inlineeditactions-save-default-border-width": "--border-width-2",
+      "--inlineeditactions-save-default-radius": "--radius-none"
+    },
+    observe: { part: "saveBtn", css: "borderTopWidth", variable: "--inlineeditactions-save-default-border-width" }
+  },
+  interaction: {
+    part: "saveBtn",
+    role: "button",
+    cases: [
+      {
+        name: "clicking save focuses the button",
+        action: { kind: "click", part: "saveBtn" },
+        expect: { kind: "focused", part: "saveBtn", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "saveBtn", fill: "--inlineeditactions-save-default-surface", stroke: "--inlineeditactions-save-default-border" },
+      { part: "cancelBtn", fill: "--inlineeditactions-cancel-default-surface", stroke: "--inlineeditactions-cancel-default-border" }
+    ]
+  }
+};
+
+// src/testing/contracts/input.ts
+var noError = [
+  { kind: "control", selector: ".canvas-toolbar-select", value: "password" },
+  { kind: "control", selector: '.toolbar-check:has-text("Error") input', check: false }
+];
+var inputContract = {
+  id: "input",
+  origin: "system",
+  view: {
+    setup: [
+      { kind: "control", selector: ".canvas-toolbar-select", value: "password" },
+      { kind: "control", selector: '.toolbar-check:has-text("Error") input', check: true }
+    ]
+  },
+  root: "root",
+  parts: {
+    root: ".input-field",
+    field: ".input-control",
+    label: ".input-label",
+    icon: ".input-icon",
+    toggleButton: ".input-icon-button",
+    hint: ".input-hint",
+    errorMsg: ".input-error",
+    placeholder: { selector: ".input-control", pseudo: "::placeholder" }
+  },
+  properties: [
+    {
+      paints: {
+        root: { rowGap: "--input-gap" },
+        field: {
+          borderRadius: "--input-radius",
+          borderTopWidth: "--input-border-width",
+          paddingTop: "--input-padding",
+          backgroundColor: "--input-default-surface",
+          borderTopColor: "--input-default-border",
+          color: "--input-default-text",
+          fontFamily: "--input-default-text-font-family",
+          fontSize: "--input-default-text-font-size",
+          fontWeight: "--input-default-text-font-weight",
+          lineHeight: "--input-default-text-line-height"
+        },
+        icon: {
+          color: "--input-default-icon",
+          fontSize: "--input-default-icon-size"
+        },
+        label: {
+          color: "--input-label",
+          fontFamily: "--input-label-font-family",
+          fontSize: "--input-label-font-size",
+          fontWeight: "--input-label-font-weight",
+          lineHeight: "--input-label-line-height"
+        },
+        hint: {
+          color: "--input-hint",
+          fontFamily: "--input-hint-font-family",
+          fontSize: "--input-hint-font-size",
+          fontWeight: "--input-hint-font-weight",
+          lineHeight: "--input-hint-line-height"
+        },
+        placeholder: { color: "--input-default-placeholder" }
+      }
+    },
+    // `assertPaintsFromToken` (here) drives a controlled pixel probe, so a
+    // unitless line-height round-trips fine. `assertPaintMap` (states, below)
+    // reads the real, already-resolved value through `normalize()`, which
+    // cannot recompute a unitless multiplier outside the field's own
+    // font-size context, so these three stay out of `states`.
+    {
+      state: "focused",
+      setup: noError,
+      paints: { field: { lineHeight: "--input-focused-text-line-height" } }
+    },
+    {
+      state: "disabled",
+      setup: noError,
+      paints: { field: { lineHeight: "--input-disabled-text-line-height" } }
+    },
+    {
+      state: "error",
+      paints: { errorMsg: { lineHeight: "--input-error-line-height" } }
+    }
+  ],
+  states: [
+    { state: "field" },
+    { state: "default" },
+    {
+      state: "focused",
+      forceClass: "force-focus",
+      setup: noError,
+      paints: {
+        field: {
+          backgroundColor: "--input-focused-surface",
+          outlineColor: "--input-focused-border",
+          outlineWidth: "--input-focused-border-width",
+          color: "--input-focused-text",
+          fontFamily: "--input-focused-text-font-family",
+          fontSize: "--input-focused-text-font-size",
+          fontWeight: "--input-focused-text-font-weight"
+        },
+        icon: { color: "--input-focused-icon", fontSize: "--input-focused-icon-size" }
+      }
+    },
+    {
+      state: "disabled",
+      attributes: { field: { disabled: "" } },
+      paints: {
+        field: {
+          backgroundColor: "--input-disabled-surface",
+          borderTopColor: "--input-disabled-border",
+          color: "--input-disabled-text",
+          fontFamily: "--input-disabled-text-font-family",
+          fontSize: "--input-disabled-text-font-size",
+          fontWeight: "--input-disabled-text-font-weight"
+        },
+        icon: { color: "--input-disabled-icon", fontSize: "--input-disabled-icon-size" }
+      }
+    },
+    { state: "label" },
+    { state: "hint" },
+    {
+      state: "error",
+      paints: {
+        field: { outlineColor: "--input-error-border", outlineWidth: "--input-error-border-width" },
+        errorMsg: {
+          color: "--input-error",
+          fontFamily: "--input-error-font-family",
+          fontSize: "--input-error-font-size",
+          fontWeight: "--input-error-font-weight"
+        }
+      }
+    }
+  ],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--input-border-width",
+        observe: { part: "field", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--input-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--input-border-width", "--input-radius", "--input-padding"],
+    unchanged: ["--input-label-font-size", "--input-default-icon-size"],
+    aliasedTo: {
+      "--input-border-width": "--border-width-3",
+      "--input-radius": "--radius-none"
+    },
+    observe: { part: "field", css: "borderTopWidth", variable: "--input-border-width" }
+  },
+  interaction: {
+    part: "field",
+    role: "textbox",
+    cases: [
+      {
+        name: "typing writes into the field",
+        action: { kind: "type", part: "field", text: "probe" },
+        expect: { kind: "valueChanges", part: "field" }
+      },
+      {
+        name: "clicking the reveal toggle presses it",
+        action: { kind: "click", part: "toggleButton" },
+        expect: { kind: "attribute", part: "toggleButton", name: "aria-pressed", value: "true" }
+      },
+      {
+        name: "a disabled field refuses focus",
+        state: "disabled",
+        action: { kind: "click", part: "field" },
+        expect: { kind: "focused", part: "field", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "field", fill: "--input-default-surface", stroke: "--input-default-border" }]
+  }
+};
+
+// src/testing/contracts/menuselect.ts
+function itemTextPaints(s, full) {
+  const paints = {
+    color: `--menuselect-${s}-text`,
+    fontFamily: `--menuselect-${s}-text-font-family`,
+    fontSize: `--menuselect-${s}-text-font-size`,
+    fontWeight: `--menuselect-${s}-text-font-weight`
+  };
+  if (full) paints.lineHeight = `--menuselect-${s}-text-line-height`;
+  return paints;
+}
+var menuSelectContract = {
+  id: "menuselect",
+  origin: "system",
+  view: { state: "selected item" },
+  root: "root",
+  parts: {
+    root: ".menuselect",
+    item: ".menuselect-item",
+    icon: ".menuselect-item .menuselect-icon",
+    label: ".menuselect-item .menuselect-label",
+    selectedItem: ".menuselect-item.selected",
+    selectedIcon: ".menuselect-item.selected .menuselect-icon",
+    indicator: ".menuselect-indicator",
+    disabledItem: ".menuselect-item:disabled",
+    disabledIcon: ".menuselect-item:disabled .menuselect-icon"
+  },
+  properties: [
+    {
+      state: "menu",
+      paints: {
+        root: {
+          backgroundColor: "--menuselect-menu-surface",
+          borderTopColor: "--menuselect-menu-border",
+          borderTopWidth: "--menuselect-menu-border-width",
+          borderRadius: "--menuselect-menu-radius",
+          boxShadow: "--menuselect-menu-shadow",
+          rowGap: "--menuselect-menu-gap",
+          paddingTop: "--menuselect-menu-padding"
+        },
+        item: {
+          borderRadius: "--menuselect-item-radius",
+          paddingTop: "--menuselect-item-padding"
+        }
+      }
+    },
+    { state: "default item", paints: { item: itemTextPaints("default", true) } },
+    { state: "hover item", paints: { item: itemTextPaints("hover", true) } },
+    { state: "selected item", paints: { selectedItem: itemTextPaints("selected", true) } },
+    { state: "disabled item", paints: { disabledItem: itemTextPaints("disabled", true) } }
+  ],
+  states: [
+    { state: "menu" },
+    {
+      state: "default item",
+      paints: {
+        item: { backgroundColor: "--menuselect-default-surface", ...itemTextPaints("default", false) },
+        icon: { color: "--menuselect-default-icon", fontSize: "--menuselect-default-icon-size" }
+      }
+    },
+    {
+      state: "hover item",
+      paints: {
+        item: { backgroundColor: "--menuselect-hover-surface", ...itemTextPaints("hover", false) },
+        icon: { color: "--menuselect-hover-icon", fontSize: "--menuselect-hover-icon-size" }
+      }
+    },
+    {
+      state: "selected item",
+      paints: {
+        selectedItem: { backgroundColor: "--menuselect-selected-surface", ...itemTextPaints("selected", false) },
+        selectedIcon: { color: "--menuselect-selected-icon", fontSize: "--menuselect-selected-icon-size" },
+        indicator: { color: "--menuselect-selected-indicator" }
+      }
+    },
+    {
+      state: "disabled item",
+      attributes: { disabledItem: { disabled: "" } },
+      paints: {
+        disabledItem: { backgroundColor: "--menuselect-disabled-surface", ...itemTextPaints("disabled", false) },
+        disabledIcon: { color: "--menuselect-disabled-icon", fontSize: "--menuselect-disabled-icon-size" }
+      }
+    }
+  ],
+  uncovered: {
+    "--menuselect-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--menuselect-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        state: "menu",
+        variable: "--menuselect-menu-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--menuselect-menu-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--menuselect-menu-border-width", "--menuselect-menu-radius", "--menuselect-item-padding"],
+    unchanged: ["--menuselect-default-icon-size", "--menuselect-default-text-font-size"],
+    aliasedTo: {
+      "--menuselect-menu-border-width": "--border-width-3",
+      "--menuselect-menu-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--menuselect-menu-border-width" }
+  },
+  interaction: {
+    part: "item",
+    role: "option",
+    cases: [
+      {
+        name: "clicking an item selects it",
+        action: { kind: "click", part: "item" },
+        expect: { kind: "attribute", part: "item", name: "aria-selected", value: "true" }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--menuselect-menu-surface", stroke: "--menuselect-menu-border" }]
+  }
+};
+
+// src/testing/contracts/notification.ts
+var variants6 = ["info", "success", "warning", "danger"];
+function paintsFor2(v) {
+  return {
+    root: {
+      borderTopColor: `--notification-${v}-border`,
+      borderTopWidth: `--notification-${v}-border-width`,
+      borderRadius: `--notification-${v}-radius`,
+      color: `--notification-${v}-text`,
+      fontFamily: `--notification-${v}-text-font-family`,
+      fontSize: `--notification-${v}-text-font-size`,
+      fontWeight: `--notification-${v}-text-font-weight`,
+      lineHeight: `--notification-${v}-text-line-height`
+    },
+    header: {
+      backgroundColor: `--notification-${v}-surface`,
+      paddingTop: `--notification-${v}-padding`
+    },
+    icon: {
+      color: `--notification-${v}-icon`,
+      fontSize: `--notification-${v}-icon-size`
+    },
+    title: {
+      color: `--notification-${v}-title`,
+      fontFamily: `--notification-${v}-title-font-family`,
+      fontSize: `--notification-${v}-title-font-size`,
+      fontWeight: `--notification-${v}-title-font-weight`,
+      lineHeight: `--notification-${v}-title-line-height`
+    },
+    actionBackdrop: { backgroundColor: `--notification-${v}-action-surface` }
+  };
+}
+var notificationContract = {
+  id: "notification",
+  origin: "system",
+  view: {
+    variant: "Info",
+    setup: [{ kind: "control", selector: '.toolbar-check:has-text("Header button") input', check: true }]
+  },
+  root: "root",
+  parts: {
+    root: ".notification",
+    header: ".notification-header",
+    icon: ".notification-header i",
+    title: ".notification-title",
+    actionBackdrop: ".action-button-backdrop",
+    actionButton: ".action-button-backdrop button"
+  },
+  properties: variants6.map((v) => ({ variant: v.charAt(0).toUpperCase() + v.slice(1), paints: paintsFor2(v) })),
+  states: [{ state: "base" }, { state: "colors" }],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--notification-info-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--notification-info-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--notification-info-border-width", "--notification-info-radius", "--notification-info-padding"],
+    unchanged: ["--notification-info-icon-size"],
+    aliasedTo: {
+      "--notification-info-border-width": "--border-width-3",
+      "--notification-info-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--notification-info-border-width" }
+  },
+  interaction: {
+    part: "actionButton",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the header action focuses it",
+        action: { kind: "click", part: "actionButton" },
+        expect: { kind: "focused", part: "actionButton", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", stroke: "--notification-info-border" },
+      { part: "header", fill: "--notification-info-surface" }
+    ]
+  }
+};
+
+// src/testing/contracts/panel.ts
+var panelContract = {
+  id: "panel",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".panel"
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          borderTopColor: "--panel-frame-border",
+          borderTopWidth: "--panel-frame-border-width",
+          borderRadius: "--panel-frame-radius",
+          backgroundImage: "--panel-stage-surface",
+          paddingTop: "--panel-stage-padding",
+          paddingLeft: "--panel-stage-inline-padding",
+          columnGap: "--panel-stage-gap"
+        }
+      }
+    }
+  ],
+  states: {
+    applicable: false,
+    reason: "the editor renders one token group (default) with no state strip"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--panel-frame-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      },
+      {
+        shape: "gradient",
+        variable: "--panel-stage-surface",
+        observe: { part: "root", css: "backgroundColor" }
+      }
+    ],
+    resetVariable: "--panel-frame-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--panel-frame-border-width", "--panel-frame-radius", "--panel-stage-inline-padding", "--panel-stage-padding"],
+    unchanged: ["--panel-stage-gap"],
+    aliasedTo: {
+      "--panel-frame-border-width": "--border-width-3",
+      "--panel-frame-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--panel-frame-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a framed container carries no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--panel-stage-surface", stroke: "--panel-frame-border" }]
+  }
+};
+
+// src/testing/contracts/progressbar.ts
+var progressBarContract = {
+  id: "progressbar",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".progress",
+    track: ".progress-track",
+    fill: ".progress-fill",
+    label: ".progress-label > span:not(.progress-value)",
+    value: ".progress-value"
+  },
+  properties: [
+    {
+      paints: {
+        root: { rowGap: "--progressbar-label-gap" },
+        track: {
+          backgroundColor: "--progressbar-track-surface",
+          borderTopColor: "--progressbar-track-border",
+          borderTopWidth: "--progressbar-track-border-width",
+          borderRadius: "--progressbar-radius",
+          height: "--progressbar-track-height"
+        },
+        fill: { backgroundColor: "--progressbar-fill" },
+        label: {
+          color: "--progressbar-label",
+          fontFamily: "--progressbar-label-font-family",
+          fontSize: "--progressbar-label-font-size",
+          fontWeight: "--progressbar-label-font-weight",
+          lineHeight: "--progressbar-label-line-height"
+        },
+        value: {
+          color: "--progressbar-value",
+          fontFamily: "--progressbar-value-font-family",
+          fontSize: "--progressbar-value-font-size",
+          fontWeight: "--progressbar-value-font-weight",
+          lineHeight: "--progressbar-value-line-height"
+        }
+      }
+    }
+  ],
+  states: {
+    applicable: false,
+    reason: "the editor renders one token group (default) with no state strip"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--progressbar-track-border-width",
+        observe: { part: "track", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--progressbar-track-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--progressbar-radius", "--progressbar-track-border-width"],
+    unchanged: ["--progressbar-track-height"],
+    aliasedTo: {
+      "--progressbar-radius": "--radius-none",
+      "--progressbar-track-border-width": "--border-width-3"
+    },
+    observe: { part: "track", css: "borderTopWidth", variable: "--progressbar-track-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a progress readout carries no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "track", fill: "--progressbar-track-surface", stroke: "--progressbar-track-border" }]
+  }
+};
+
+// src/testing/contracts/radiobutton.ts
+function statePaints4(s, full) {
+  const dotFill = { backgroundColor: `--radiobutton-${s}-dot-fill` };
+  if (full) dotFill.width = `--radiobutton-${s}-dot-size`;
+  const label = {
+    color: `--radiobutton-${s}-label`,
+    fontFamily: `--radiobutton-${s}-label-font-family`,
+    fontSize: `--radiobutton-${s}-label-font-size`,
+    fontWeight: `--radiobutton-${s}-label-font-weight`
+  };
+  if (full) label.lineHeight = `--radiobutton-${s}-label-line-height`;
+  return {
+    dot: {
+      borderTopColor: `--radiobutton-${s}-dot-border-color`,
+      borderTopWidth: `--radiobutton-${s}-dot-border-width`
+    },
+    dotFill,
+    label
+  };
+}
+var radioButtonContract = {
+  id: "radiobutton",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".radio-button",
+    dot: ".radio-dot",
+    dotFill: { selector: ".radio-dot-fill" },
+    label: ".radio-label"
+  },
+  properties: [
+    { paints: statePaints4("default", true) },
+    { state: "hover", paints: statePaints4("hover", true) },
+    { state: "active", paints: statePaints4("active", true) }
+  ],
+  states: [
+    { state: "default" },
+    {
+      state: "hover",
+      forceClass: "force-hover",
+      paints: statePaints4("hover", false)
+    },
+    {
+      state: "active",
+      forceClass: "active",
+      paints: statePaints4("active", false)
+    }
+  ],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--radiobutton-default-dot-border-width",
+        observe: { part: "dot", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--radiobutton-default-dot-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: [
+      "--radiobutton-default-dot-border-width",
+      "--radiobutton-hover-dot-border-width",
+      "--radiobutton-active-dot-border-width"
+    ],
+    unchanged: ["--radiobutton-default-label-font-size"],
+    aliasedTo: {
+      "--radiobutton-default-dot-border-width": "--border-width-4"
+    },
+    observe: { part: "dot", css: "borderTopWidth", variable: "--radiobutton-default-dot-border-width" }
+  },
+  interaction: {
+    part: "root",
+    role: "button",
+    cases: [
+      {
+        name: "clicking a radio option focuses it",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: true }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "dot", fill: "--radiobutton-default-dot-fill", stroke: "--radiobutton-default-dot-border-color" }]
+  }
+};
+
+// src/testing/contracts/sectiondivider.ts
+var showOptionalContent = [
+  { kind: "control", selector: 'label.element-show-toggle:has-text("Show description") input', check: true },
+  { kind: "control", selector: 'label.element-show-toggle:has-text("Show eyebrow") input', check: true }
+];
+function variantPaints(v) {
+  return {
+    root: {
+      paddingTop: `--sectiondivider-${v}-padding`,
+      borderRadius: `--sectiondivider-${v}-radius`,
+      borderTopWidth: `--sectiondivider-${v}-border-width`,
+      borderTopColor: `--sectiondivider-${v}-border`,
+      boxShadow: `--sectiondivider-${v}-shadow`,
+      backgroundImage: `--sectiondivider-${v}-background`
+    },
+    titleRow: { paddingTop: `--sectiondivider-${v}-title-padding` },
+    title: {
+      color: `--sectiondivider-${v}-title`,
+      fontFamily: `--sectiondivider-${v}-title-font-family`,
+      fontSize: `--sectiondivider-${v}-title-font-size`,
+      fontWeight: `--sectiondivider-${v}-title-font-weight`,
+      lineHeight: `--sectiondivider-${v}-title-line-height`,
+      letterSpacing: `--sectiondivider-${v}-title-letter-spacing`
+    },
+    descriptionRow: { paddingTop: `--sectiondivider-${v}-description-padding` },
+    description: {
+      color: `--sectiondivider-${v}-description`,
+      fontFamily: `--sectiondivider-${v}-description-font-family`,
+      fontSize: `--sectiondivider-${v}-description-font-size`,
+      fontWeight: `--sectiondivider-${v}-description-font-weight`,
+      lineHeight: `--sectiondivider-${v}-description-line-height`
+    },
+    eyebrow: {
+      paddingTop: `--sectiondivider-${v}-eyebrow-padding`,
+      color: `--sectiondivider-${v}-eyebrow`,
+      fontFamily: `--sectiondivider-${v}-eyebrow-font-family`,
+      fontSize: `--sectiondivider-${v}-eyebrow-font-size`,
+      fontWeight: `--sectiondivider-${v}-eyebrow-font-weight`,
+      letterSpacing: `--sectiondivider-${v}-eyebrow-letter-spacing`
+    },
+    hairline: {
+      backgroundColor: `--sectiondivider-${v}-hairline-color`,
+      height: `--sectiondivider-${v}-hairline-thickness`
+    }
+  };
+}
+var sectionDividerContract = {
+  id: "sectiondivider",
+  origin: "system",
+  view: { variant: "Large", setup: showOptionalContent },
+  root: "root",
+  parts: {
+    root: ".section-divider",
+    titleRow: ".title-row",
+    title: ".divider-label",
+    descriptionRow: ".description-row",
+    description: ".divider-description",
+    eyebrow: ".divider-eyebrow",
+    hairline: ".sd-hairline"
+  },
+  properties: [
+    { variant: "Large", setup: showOptionalContent, paints: variantPaints("lg") },
+    { variant: "Medium", setup: showOptionalContent, paints: variantPaints("md") },
+    { variant: "Small", setup: showOptionalContent, paints: variantPaints("sm") }
+  ],
+  states: {
+    applicable: false,
+    reason: "each variant is one full preset with one state, so the editor renders no state strip"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--sectiondivider-lg-hairline-color",
+        observe: { part: "hairline", css: "backgroundColor" }
+      },
+      {
+        shape: "gradient",
+        variable: "--sectiondivider-lg-background",
+        observe: { part: "root", css: "backgroundColor" }
+      },
+      {
+        shape: "literal",
+        control: '.sd-intrinsic-row:has(.property-label:text-is("alignment")) select',
+        variable: "--sectiondivider-lg-align",
+        observe: { part: "root", css: "textAlign" }
+      }
+    ],
+    resetVariable: "--sectiondivider-lg-hairline-color"
+  },
+  theme: {
+    theme: "halloween",
+    changed: [
+      "--sectiondivider-lg-radius",
+      "--sectiondivider-lg-border-width",
+      "--sectiondivider-lg-hairline-thickness",
+      "--sectiondivider-lg-hairline-color"
+    ],
+    unchanged: [
+      "--sectiondivider-lg-padding",
+      "--sectiondivider-lg-shadow",
+      "--sectiondivider-lg-title",
+      "--sectiondivider-lg-border",
+      "--sectiondivider-lg-title-font-size"
+    ],
+    aliasedTo: {
+      "--sectiondivider-lg-radius": "--radius-none",
+      "--sectiondivider-lg-border-width": "--border-width-3",
+      "--sectiondivider-lg-hairline-thickness": "--border-width-3"
+    },
+    observe: { part: "root", css: "borderRadius", variable: "--sectiondivider-lg-radius" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a divider is a static banner: no interactive role, nothing focusable, no pointer behaviour"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "hairline", fill: "--sectiondivider-lg-hairline-color" }]
+  }
+};
+
+// src/testing/contracts/segmentedcontrol.ts
+var segmentedControlContract = {
+  id: "segmentedcontrol",
+  origin: "system",
+  view: { state: "selected option" },
+  root: "root",
+  parts: {
+    root: ".segmented-control",
+    segment: ".segment",
+    icon: ".segment i",
+    selectedSegment: ".segment.selected",
+    selectedIcon: ".segment.selected i",
+    divider: ".segment-divider"
+  },
+  properties: [
+    {
+      state: "control bar",
+      paints: {
+        root: {
+          backgroundColor: "--segmentedcontrol-bar-surface",
+          borderTopColor: "--segmentedcontrol-bar-border",
+          borderTopWidth: "--segmentedcontrol-bar-border-width",
+          borderRadius: "--segmentedcontrol-bar-radius",
+          columnGap: "--segmentedcontrol-bar-gap",
+          paddingTop: "--segmentedcontrol-bar-padding"
+        },
+        divider: {
+          backgroundColor: "--segmentedcontrol-divider-color",
+          width: "--segmentedcontrol-divider-thickness",
+          marginTop: "--segmentedcontrol-divider-inset"
+        }
+      }
+    },
+    {
+      state: "option base",
+      paints: {
+        segment: {
+          paddingTop: "--segmentedcontrol-option-padding",
+          columnGap: "--segmentedcontrol-option-gap",
+          borderRadius: "--segmentedcontrol-selected-radius"
+        },
+        icon: { fontSize: "--segmentedcontrol-option-icon-size" }
+      }
+    },
+    {
+      state: "default option",
+      paints: {
+        segment: {
+          lineHeight: "--segmentedcontrol-option-text-line-height"
+        }
+      }
+    },
+    {
+      state: "selected option",
+      paints: { selectedSegment: { lineHeight: "--segmentedcontrol-selected-text-line-height" } }
+    },
+    {
+      state: "disabled option",
+      paints: { segment: { lineHeight: "--segmentedcontrol-disabled-text-line-height" } }
+    },
+    {
+      state: "hover option",
+      paints: { segment: { lineHeight: "--segmentedcontrol-option-hover-text-line-height" } }
+    },
+    {
+      setup: [{ kind: "control", selector: ".preview-actions select", value: "small" }],
+      paints: {
+        root: { borderRadius: "--segmentedcontrol-bar-small-radius", paddingTop: "--segmentedcontrol-bar-small-padding" },
+        segment: {
+          borderRadius: "--segmentedcontrol-selected-small-radius",
+          paddingTop: "--segmentedcontrol-option-small-padding",
+          columnGap: "--segmentedcontrol-option-small-gap",
+          fontSize: "--segmentedcontrol-option-small-text-font-size",
+          lineHeight: "--segmentedcontrol-option-small-text-line-height"
+        },
+        icon: { fontSize: "--segmentedcontrol-option-small-icon-size" },
+        divider: { width: "--segmentedcontrol-small-divider-thickness", marginTop: "--segmentedcontrol-small-divider-inset" }
+      }
+    }
+  ],
+  states: [
+    { state: "control bar" },
+    { state: "option base" },
+    {
+      state: "default option",
+      paints: {
+        icon: { color: "--segmentedcontrol-option-icon" },
+        segment: {
+          color: "--segmentedcontrol-option-text",
+          fontFamily: "--segmentedcontrol-option-text-font-family",
+          fontSize: "--segmentedcontrol-option-text-font-size",
+          fontWeight: "--segmentedcontrol-option-text-font-weight"
+        }
+      }
+    },
+    {
+      state: "selected option",
+      paints: {
+        selectedSegment: {
+          backgroundColor: "--segmentedcontrol-selected-surface",
+          outlineColor: "--segmentedcontrol-selected-border",
+          outlineWidth: "--segmentedcontrol-selected-border-width",
+          color: "--segmentedcontrol-selected-text",
+          fontFamily: "--segmentedcontrol-selected-text-font-family",
+          fontSize: "--segmentedcontrol-selected-text-font-size",
+          fontWeight: "--segmentedcontrol-selected-text-font-weight"
+        },
+        selectedIcon: { color: "--segmentedcontrol-selected-icon" }
+      }
+    },
+    {
+      state: "hover option",
+      paints: {
+        segment: {
+          backgroundColor: "--segmentedcontrol-option-hover-surface",
+          color: "--segmentedcontrol-option-hover-text",
+          fontFamily: "--segmentedcontrol-option-hover-text-font-family",
+          fontSize: "--segmentedcontrol-option-hover-text-font-size",
+          fontWeight: "--segmentedcontrol-option-hover-text-font-weight"
+        },
+        icon: { color: "--segmentedcontrol-option-hover-icon" }
+      }
+    },
+    {
+      state: "disabled option",
+      attributes: { segment: { disabled: "" } },
+      paints: {
+        segment: {
+          backgroundColor: "--segmentedcontrol-disabled-surface",
+          color: "--segmentedcontrol-disabled-text",
+          fontFamily: "--segmentedcontrol-disabled-text-font-family",
+          fontSize: "--segmentedcontrol-disabled-text-font-size",
+          fontWeight: "--segmentedcontrol-disabled-text-font-weight"
+        },
+        icon: { color: "--segmentedcontrol-disabled-icon" }
+      }
+    }
+  ],
+  uncovered: {
+    "--segmentedcontrol-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--segmentedcontrol-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        state: "control bar",
+        variable: "--segmentedcontrol-bar-border-width",
+        observe: { part: "root", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--segmentedcontrol-bar-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--segmentedcontrol-bar-border-width", "--segmentedcontrol-bar-radius", "--segmentedcontrol-option-padding"],
+    unchanged: ["--segmentedcontrol-option-icon-size"],
+    aliasedTo: {
+      "--segmentedcontrol-bar-border-width": "--border-width-3",
+      "--segmentedcontrol-bar-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--segmentedcontrol-bar-border-width" }
+  },
+  interaction: {
+    part: "segment",
+    role: "radio",
+    cases: [
+      {
+        name: "clicking a segment checks it",
+        action: { kind: "click", part: "segment" },
+        expect: { kind: "attribute", part: "segment", name: "aria-checked", value: "true" }
+      },
+      {
+        name: "a disabled control refuses focus",
+        state: "disabled option",
+        action: { kind: "click", part: "segment" },
+        expect: { kind: "focused", part: "segment", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "root", fill: "--segmentedcontrol-bar-surface", stroke: "--segmentedcontrol-bar-border" },
+      { part: "selectedSegment", fill: "--segmentedcontrol-selected-surface", stroke: "--segmentedcontrol-selected-border" }
+    ]
+  }
+};
+
+// src/testing/contracts/sidenavigation.ts
+function sub(label) {
+  return [{ kind: "control", selector: `.tabs-selectors.substrip .state-tab-btn:has-text("${label}")` }];
+}
+function titlePaints(s) {
+  return {
+    title: {
+      backgroundColor: `--sidenavigation-title-${s}-surface`,
+      borderTopColor: `--sidenavigation-title-${s}-border`,
+      borderTopWidth: `--sidenavigation-title-${s}-border-width`,
+      borderLeftColor: `--sidenavigation-title-${s}-accent`,
+      borderLeftWidth: `--sidenavigation-title-${s}-accent-width`,
+      paddingTop: `--sidenavigation-title-${s}-padding`
+    },
+    titleLabel: {
+      color: `--sidenavigation-title-${s}-label`,
+      fontFamily: `--sidenavigation-title-${s}-label-font-family`,
+      fontSize: `--sidenavigation-title-${s}-label-font-size`,
+      fontWeight: `--sidenavigation-title-${s}-label-font-weight`,
+      lineHeight: `--sidenavigation-title-${s}-label-line-height`
+    }
+  };
+}
+function togglePaints(s) {
+  return {
+    toggle: {
+      backgroundColor: `--sidenavigation-toggle-${s}-surface`,
+      borderTopColor: `--sidenavigation-toggle-${s}-border`,
+      borderTopWidth: `--sidenavigation-toggle-${s}-border-width`,
+      borderRadius: `--sidenavigation-toggle-${s}-radius`,
+      paddingTop: `--sidenavigation-toggle-${s}-padding`,
+      color: `--sidenavigation-toggle-${s}-icon`
+    },
+    toggleIcon: { fontSize: `--sidenavigation-toggle-${s}-icon-size` }
+  };
+}
+function sectionPaints(part, labelPart, s) {
+  return {
+    [part]: {
+      backgroundColor: `--sidenavigation-section-${s}-surface`,
+      borderLeftColor: `--sidenavigation-section-${s}-accent`,
+      borderLeftWidth: `--sidenavigation-section-${s}-accent-width`
+    },
+    [labelPart]: {
+      color: `--sidenavigation-section-${s}-text`,
+      fontFamily: `--sidenavigation-section-${s}-text-font-family`,
+      fontSize: `--sidenavigation-section-${s}-text-font-size`,
+      fontWeight: `--sidenavigation-section-${s}-text-font-weight`,
+      lineHeight: `--sidenavigation-section-${s}-text-line-height`
+    }
+  };
+}
+function itemPaints(part, s) {
+  return {
+    [part]: {
+      backgroundColor: `--sidenavigation-item-${s}-surface`,
+      borderLeftColor: `--sidenavigation-item-${s}-accent`,
+      borderLeftWidth: `--sidenavigation-item-${s}-accent-width`,
+      paddingTop: `--sidenavigation-item-${s}-padding`,
+      color: `--sidenavigation-item-${s}-text`,
+      fontFamily: `--sidenavigation-item-${s}-text-font-family`,
+      fontSize: `--sidenavigation-item-${s}-text-font-size`,
+      fontWeight: `--sidenavigation-item-${s}-text-font-weight`,
+      lineHeight: `--sidenavigation-item-${s}-text-line-height`
+    }
+  };
+}
+function footerPaints(s) {
+  return {
+    footer: {
+      backgroundColor: `--sidenavigation-footer-${s}-surface`,
+      borderLeftColor: `--sidenavigation-footer-${s}-accent`,
+      borderLeftWidth: `--sidenavigation-footer-${s}-accent-width`,
+      paddingTop: `--sidenavigation-footer-${s}-padding`,
+      columnGap: `--sidenavigation-footer-${s}-gap`,
+      color: `--sidenavigation-footer-${s}-text`,
+      fontFamily: `--sidenavigation-footer-${s}-text-font-family`,
+      fontSize: `--sidenavigation-footer-${s}-text-font-size`,
+      fontWeight: `--sidenavigation-footer-${s}-text-font-weight`,
+      lineHeight: `--sidenavigation-footer-${s}-text-line-height`
+    },
+    footerIcon: {
+      color: `--sidenavigation-footer-${s}-icon`,
+      fontSize: `--sidenavigation-footer-${s}-icon-size`
+    }
+  };
+}
+var sideNavigationContract = {
+  id: "sidenavigation",
+  origin: "system",
+  // Section has no currentPath-driven active state (unlike Item, whose
+  // demo path lands inside section-1): it lights up only through the force
+  // mechanism behind the "Active" sub-tab, so the inventory's one view has
+  // to land there for `sectionActive` to resolve at all.
+  view: { state: "Section", setup: sub("Active") },
+  root: "root",
+  parts: {
+    root: ".sidenavigation",
+    title: ".sn-title",
+    titleLabel: ".sn-title-label",
+    toggle: ".sn-toggle",
+    toggleIcon: ".sn-toggle i",
+    sectionWrap: ".sn-section",
+    section: ".sn-section-header:not(.active)",
+    sectionLabel: ".sn-section-header:not(.active) .section-label",
+    sectionActive: ".sn-section-header.active",
+    sectionLabelActive: ".sn-section-header.active .section-label",
+    item: ".sn-item:not(.active)",
+    itemActive: ".sn-item.active",
+    footer: ".sn-footer",
+    footerIcon: ".sn-footer i"
+  },
+  properties: [
+    {
+      state: "Panel",
+      setup: [],
+      paints: {
+        root: {
+          backgroundColor: "--sidenavigation-panel-surface",
+          borderRightColor: "--sidenavigation-panel-border",
+          borderRightWidth: "--sidenavigation-panel-border-width",
+          paddingTop: "--sidenavigation-panel-padding"
+        },
+        item: { paddingLeft: "--sidenavigation-panel-item-padding" },
+        footer: { marginTop: "--sidenavigation-panel-footer-gap" },
+        sectionWrap: { marginTop: "--sidenavigation-panel-section-gap" }
+      }
+    },
+    {
+      state: "Title Block",
+      setup: [],
+      paints: {
+        title: { columnGap: "--sidenavigation-title-gap", borderRadius: "--sidenavigation-title-radius" },
+        titleLabel: {
+          backgroundColor: "--sidenavigation-title-label-surface",
+          borderTopColor: "--sidenavigation-title-label-border",
+          borderTopWidth: "--sidenavigation-title-label-border-width",
+          borderRadius: "--sidenavigation-title-label-radius",
+          paddingTop: "--sidenavigation-title-label-padding"
+        }
+      }
+    },
+    { state: "Title", setup: [], paints: titlePaints("default") },
+    { state: "Title", setup: sub("Hover"), paints: titlePaints("hover") },
+    { state: "Title", setup: sub("Active"), paints: titlePaints("active") },
+    { state: "Toggle", setup: [], paints: togglePaints("default") },
+    { state: "Toggle", setup: sub("Hover"), paints: togglePaints("hover") },
+    { state: "Section", setup: [], paints: sectionPaints("section", "sectionLabel", "default") },
+    { state: "Section", setup: sub("Hover"), paints: sectionPaints("section", "sectionLabel", "hover") },
+    { state: "Section", setup: sub("Active"), paints: sectionPaints("sectionActive", "sectionLabelActive", "active") },
+    { state: "Item", setup: [], paints: itemPaints("item", "default") },
+    { state: "Item", setup: sub("Hover"), paints: itemPaints("item", "hover") },
+    { state: "Item", setup: [], paints: itemPaints("itemActive", "active") },
+    { state: "Footer", setup: [], paints: footerPaints("default") },
+    { state: "Footer", setup: sub("Hover"), paints: footerPaints("hover") },
+    { state: "Footer", setup: sub("Active"), paints: footerPaints("active") }
+  ],
+  states: [
+    { state: "Panel", setup: [] },
+    { state: "Title", setup: [] },
+    { state: "Title Block", setup: [] },
+    { state: "Toggle", setup: [] },
+    { state: "Section", setup: [] },
+    { state: "Item", setup: [] },
+    { state: "Footer", setup: [] },
+    { state: "Animation", setup: [] }
+  ],
+  uncovered: {
+    "--sidenavigation-open-duration": "consumed by a width transition, no probe covers duration",
+    "--sidenavigation-open-easing": "consumed by a width transition, no probe covers an easing curve",
+    "--sidenavigation-close-duration": "consumed by a width transition, no probe covers duration",
+    "--sidenavigation-close-easing": "consumed by a width transition, no probe covers an easing curve",
+    "--sidenavigation-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--sidenavigation-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        state: "Panel",
+        setup: [],
+        variable: "--sidenavigation-panel-border-width",
+        observe: { part: "root", css: "borderRightWidth" }
+      }
+    ],
+    resetVariable: "--sidenavigation-panel-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--sidenavigation-panel-border-width", "--sidenavigation-title-default-border-width"],
+    unchanged: ["--sidenavigation-toggle-default-icon-size"],
+    aliasedTo: {
+      "--sidenavigation-panel-border-width": "--border-width-3",
+      "--sidenavigation-title-default-border-width": "--border-width-3"
+    },
+    observe: { part: "root", css: "borderRightWidth", variable: "--sidenavigation-panel-border-width" }
+  },
+  interaction: {
+    part: "toggle",
+    role: "button",
+    cases: [
+      {
+        name: "clicking the toggle collapses the rail",
+        action: { kind: "click", part: "toggle" },
+        expect: { kind: "attribute", part: "toggle", name: "aria-expanded", value: "false" }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--sidenavigation-panel-surface", stroke: "--sidenavigation-panel-border" }]
+  }
+};
+
+// src/testing/contracts/slider.ts
+function variantPaints2(v) {
+  return {
+    track: {
+      backgroundColor: `--slider-${v}-track-surface`,
+      borderTopColor: `--slider-${v}-track-border`,
+      borderTopWidth: `--slider-${v}-track-border-width`,
+      borderRadius: `--slider-${v}-track-radius`,
+      height: `--slider-${v}-track-height`
+    },
+    fill: { backgroundColor: `--slider-${v}-fill` },
+    thumb: {
+      backgroundColor: `--slider-${v}-thumb-surface`,
+      borderTopColor: `--slider-${v}-thumb-border`,
+      borderTopWidth: `--slider-${v}-thumb-border-width`,
+      borderRadius: `--slider-${v}-thumb-radius`,
+      width: `--slider-${v}-thumb-size`,
+      boxShadow: `--slider-${v}-thumb-shadow`
+    }
+  };
+}
+function variantStates(v, variant) {
+  return [
+    {
+      variant,
+      state: "default",
+      attributes: { input: { disabled: null } },
+      paints: { thumb: { backgroundColor: `--slider-${v}-thumb-surface` } }
+    },
+    {
+      variant,
+      state: "hover",
+      forceClass: "force-hover",
+      paints: {
+        thumb: {
+          backgroundColor: `--slider-${v}-hover-thumb-surface`,
+          borderTopColor: `--slider-${v}-hover-thumb-border`
+        }
+      }
+    },
+    {
+      variant,
+      state: "disabled",
+      attributes: { input: { disabled: "" } },
+      paints: {
+        track: { backgroundColor: `--slider-${v}-disabled-track-surface` },
+        fill: { backgroundColor: `--slider-${v}-disabled-fill` },
+        thumb: {
+          backgroundColor: `--slider-${v}-disabled-thumb-surface`,
+          borderTopColor: `--slider-${v}-disabled-thumb-border`
+        }
+      }
+    }
+  ];
+}
+var sliderContract = {
+  id: "slider",
+  origin: "system",
+  view: { variant: "Single" },
+  root: "root",
+  parts: {
+    root: ".slider",
+    track: ".slider-track",
+    fill: ".slider-fill",
+    thumb: ".cap",
+    input: "input.thumb",
+    label: ".slider-label > span:not(.slider-value)",
+    value: ".slider-value"
+  },
+  properties: [
+    {
+      variant: "Single",
+      paints: {
+        ...variantPaints2("single"),
+        root: { rowGap: "--slider-label-gap" },
+        label: {
+          color: "--slider-label",
+          fontFamily: "--slider-label-font-family",
+          fontSize: "--slider-label-font-size",
+          fontWeight: "--slider-label-font-weight",
+          lineHeight: "--slider-label-line-height"
+        },
+        value: {
+          color: "--slider-value",
+          fontFamily: "--slider-value-font-family",
+          fontSize: "--slider-value-font-size",
+          fontWeight: "--slider-value-font-weight",
+          lineHeight: "--slider-value-line-height"
+        }
+      }
+    },
+    { variant: "Range", paints: variantPaints2("range") }
+  ],
+  states: [
+    ...variantStates("single", "Single"),
+    ...variantStates("range", "Range")
+  ],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--slider-single-track-surface",
+        observe: { part: "track", css: "backgroundColor" }
+      },
+      {
+        shape: "opacity",
+        variable: "--slider-single-fill",
+        observe: { part: "fill", css: "backgroundColor" }
+      }
+    ],
+    resetVariable: "--slider-single-track-surface"
+  },
+  theme: {
+    theme: "ocean",
+    changed: [
+      "--slider-single-track-surface",
+      "--slider-single-fill",
+      "--slider-single-thumb-surface"
+    ],
+    unchanged: [
+      "--slider-single-track-height",
+      "--slider-single-track-radius",
+      "--slider-single-thumb-size",
+      "--slider-single-track-border-width"
+    ],
+    aliasedTo: {
+      "--slider-single-track-surface": "--surface-neutral-lowest",
+      "--slider-single-fill": "--surface-brand-high"
+    },
+    observe: { part: "track", css: "backgroundColor", variable: "--slider-single-track-surface" }
+  },
+  interaction: {
+    part: "input",
+    role: "slider",
+    cases: [
+      {
+        name: "arrow right raises the value",
+        action: { kind: "press", part: "input", key: "ArrowRight" },
+        expect: { kind: "valueMoves", part: "input", direction: "up" }
+      },
+      {
+        name: "arrow left lowers the value",
+        action: { kind: "press", part: "input", key: "ArrowLeft" },
+        expect: { kind: "valueMoves", part: "input", direction: "down" }
+      },
+      {
+        name: "Home takes the value to the floor",
+        action: { kind: "press", part: "input", key: "Home" },
+        expect: { kind: "valueBecomes", part: "input", value: "0" }
+      },
+      {
+        name: "dragging the thumb along the track raises the value",
+        action: { kind: "dragTo", part: "thumb", along: "track", fraction: 0.85 },
+        expect: { kind: "valueMoves", part: "input", direction: "up" }
+      },
+      {
+        name: "taking hold of the thumb focuses the slider",
+        action: { kind: "dragTo", part: "thumb", along: "track", fraction: 0.5 },
+        expect: { kind: "focused", part: "input", value: true }
+      },
+      {
+        name: "a disabled slider ignores the arrow keys",
+        state: "disabled",
+        action: { kind: "press", part: "input", key: "ArrowRight" },
+        expect: { kind: "valueHolds", part: "input" }
+      },
+      {
+        name: "a disabled slider refuses focus",
+        state: "disabled",
+        action: { kind: "dragTo", part: "thumb", along: "track", fraction: 0.5 },
+        expect: { kind: "focused", part: "input", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      {
+        part: "track",
+        fill: "--slider-single-track-surface",
+        stroke: "--slider-single-track-border"
+      },
+      { part: "fill", fill: "--slider-single-fill" }
+    ]
+  }
+};
+
+// src/testing/contracts/tabbar.ts
+function tabPaints(part, iconPart, s, full) {
+  const tab = {
+    backgroundColor: `--tabbar-${s}-surface`,
+    borderTopColor: `--tabbar-${s}-tab-border-color`,
+    borderTopWidth: `--tabbar-${s}-tab-border-width`,
+    borderBottomColor: `--tabbar-${s}-border`,
+    borderBottomWidth: `--tabbar-${s}-indicator-width`,
+    borderTopLeftRadius: `--tabbar-${s}-tab-top-radius`,
+    borderBottomLeftRadius: `--tabbar-${s}-tab-bottom-radius`,
+    paddingTop: `--tabbar-${s}-padding`,
+    color: `--tabbar-${s}-text`,
+    fontFamily: `--tabbar-${s}-text-font-family`,
+    fontSize: `--tabbar-${s}-text-font-size`,
+    fontWeight: `--tabbar-${s}-text-font-weight`
+  };
+  if (full) tab.lineHeight = `--tabbar-${s}-text-line-height`;
+  return {
+    [part]: tab,
+    [iconPart]: { fontSize: `--tabbar-${s}-icon-size` }
+  };
+}
+var tabBarContract = {
+  id: "tabbar",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".tab-bar",
+    tab: ".tab:not(.active):not(:disabled)",
+    icon: ".tab:not(.active):not(:disabled) i",
+    activeTab: ".tab.active",
+    activeIcon: ".tab.active i",
+    disabledTab: ".tab:disabled",
+    disabledIcon: ".tab:disabled i",
+    // Position-stable: clicking `tab` (".tab:not(.active)") makes that very
+    // tab active, which would invalidate that selector out from under a
+    // focus check re-resolved after the click.
+    secondTab: ".tab:nth-of-type(2)"
+  },
+  properties: [
+    {
+      state: "bar",
+      paints: {
+        root: {
+          borderBottomColor: "--tabbar-bar-divider",
+          borderBottomWidth: "--tabbar-bar-divider-thickness",
+          marginTop: "--tabbar-bar-top-margin",
+          paddingBottom: "--tabbar-bar-bottom-padding",
+          marginBottom: "--tabbar-bar-bottom-margin",
+          columnGap: "--tabbar-tab-gap"
+        }
+      }
+    },
+    { state: "default tab", paints: tabPaints("tab", "icon", "default", true) },
+    { state: "hover tab", paints: tabPaints("tab", "icon", "hover", true) },
+    { state: "active tab", paints: tabPaints("activeTab", "activeIcon", "active", true) },
+    { state: "disabled tab", paints: tabPaints("disabledTab", "disabledIcon", "disabled", true) }
+  ],
+  states: [
+    { state: "bar" },
+    { state: "default tab", paints: tabPaints("tab", "icon", "default", false) },
+    { state: "hover tab", paints: tabPaints("tab", "icon", "hover", false) },
+    { state: "active tab", paints: tabPaints("activeTab", "activeIcon", "active", false) },
+    {
+      state: "disabled tab",
+      attributes: { disabledTab: { disabled: "" } },
+      paints: tabPaints("disabledTab", "disabledIcon", "disabled", false)
+    }
+  ],
+  uncovered: {
+    "--tabbar-hover-tint": "consumed inside a background-image tint wash, never appearing verbatim in a computed style",
+    "--tabbar-hover-tint-enabled": "the gate for the tint wash above, same limitation"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        state: "default tab",
+        variable: "--tabbar-default-tab-border-width",
+        observe: { part: "tab", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--tabbar-default-tab-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    // The indicator width is the canary for re-migration replay: the tabbar
+    // pair (2026-05-29-tabbar-indicator-thickness-to-per-state-width,
+    // 2026-09-07-stroke-role-renames) rewrites it to --border-width-2 if a
+    // reader migrates a theme-embedded config off a stamp of 0 instead of the
+    // theme's componentSchemaVersion.
+    changed: [
+      "--tabbar-default-tab-border-width",
+      "--tabbar-default-padding",
+      "--tabbar-default-indicator-width"
+    ],
+    unchanged: ["--tabbar-default-icon-size"],
+    aliasedTo: {
+      "--tabbar-default-tab-border-width": "--border-width-2",
+      "--tabbar-default-indicator-width": "--border-width-4"
+    },
+    observe: { part: "tab", css: "borderTopWidth", variable: "--tabbar-default-tab-border-width" }
+  },
+  interaction: {
+    part: "secondTab",
+    role: "button",
+    cases: [
+      {
+        name: "clicking a tab focuses it",
+        action: { kind: "click", part: "secondTab" },
+        expect: { kind: "focused", part: "secondTab", value: true }
+      },
+      {
+        name: "a disabled tab refuses focus",
+        state: "disabled tab",
+        action: { kind: "click", part: "disabledTab" },
+        expect: { kind: "focused", part: "disabledTab", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [
+      { part: "tab", fill: "--tabbar-default-surface", stroke: "--tabbar-default-border" },
+      { part: "activeTab", fill: "--tabbar-active-surface", stroke: "--tabbar-active-border" }
+    ]
+  }
+};
+
+// src/testing/contracts/table.ts
+var tableContract = {
+  id: "table",
+  origin: "system",
+  root: "wrapper",
+  parts: {
+    wrapper: ".table-wrapper",
+    th: ".table-wrapper th",
+    td: ".table-wrapper td"
+  },
+  properties: [
+    {
+      paints: {
+        wrapper: {
+          backgroundColor: "--table-default-surface",
+          borderTopColor: "--table-default-border",
+          borderTopWidth: "--table-default-border-width",
+          borderRadius: "--table-default-radius",
+          boxShadow: "--table-default-shadow"
+        },
+        th: {
+          backgroundColor: "--table-default-header-surface",
+          color: "--table-default-header-text",
+          fontFamily: "--table-default-header-font-family",
+          fontSize: "--table-default-header-font-size",
+          fontWeight: "--table-default-header-font-weight",
+          lineHeight: "--table-default-header-line-height",
+          borderBottomColor: "--table-default-header-divider",
+          borderBottomWidth: "--table-default-header-divider-width",
+          paddingTop: "--table-default-header-padding",
+          borderRightColor: "--table-default-column-divider",
+          borderRightWidth: "--table-default-column-divider-width"
+        },
+        td: {
+          backgroundColor: "--table-default-row-surface",
+          color: "--table-default-cell-text",
+          fontFamily: "--table-default-cell-font-family",
+          fontSize: "--table-default-cell-font-size",
+          fontWeight: "--table-default-cell-font-weight",
+          lineHeight: "--table-default-cell-line-height",
+          paddingTop: "--table-default-cell-padding",
+          borderBottomColor: "--table-default-row-divider",
+          borderBottomWidth: "--table-default-row-divider-width"
+        }
+      }
+    }
+  ],
+  states: [
+    { state: "wrapper" },
+    { state: "header" },
+    { state: "cell" },
+    { state: "row" },
+    { state: "column" }
+  ],
+  uncovered: {
+    "--table-default-row-stripe-surface": "layered as a background-image on every even row; a probe cannot pin a single verbatim computed value to that selector"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--table-default-border-width",
+        observe: { part: "wrapper", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--table-default-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: [
+      "--table-default-border-width",
+      "--table-default-radius",
+      "--table-default-header-divider-width",
+      "--table-default-header-padding"
+    ],
+    unchanged: ["--table-default-header-font-size"],
+    aliasedTo: {
+      "--table-default-border-width": "--border-width-4",
+      "--table-default-radius": "--radius-none"
+    },
+    observe: { part: "wrapper", css: "borderTopWidth", variable: "--table-default-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a styled table wrapper carries no interactive role"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "wrapper", fill: "--table-default-surface", stroke: "--table-default-border" }]
+  }
+};
+
+// src/testing/contracts/toggle.ts
+var defaultPaints = {
+  root: { columnGap: "--toggle-gap" },
+  track: {
+    backgroundColor: "--toggle-track-surface",
+    borderTopColor: "--toggle-track-border",
+    borderTopWidth: "--toggle-track-border-width",
+    borderRadius: "--toggle-track-radius"
+  },
+  thumb: {
+    backgroundColor: "--toggle-thumb-surface",
+    borderTopColor: "--toggle-thumb-border",
+    width: "--toggle-thumb-size",
+    left: "--toggle-track-padding"
+  },
+  label: {
+    color: "--toggle-label-text",
+    fontFamily: "--toggle-label-font-family",
+    fontSize: "--toggle-label-font-size",
+    fontWeight: "--toggle-label-font-weight"
+  }
+};
+var toggleContract = {
+  id: "toggle",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".toggle",
+    track: ".track",
+    thumb: ".thumb",
+    label: ".label"
+  },
+  properties: [{ paints: defaultPaints }],
+  states: [
+    {
+      state: "default",
+      attributes: { root: { "aria-checked": "false" } }
+    },
+    {
+      state: "hover",
+      forceClass: "force-hover",
+      paints: {
+        track: { backgroundColor: "--toggle-hover-track-surface" },
+        thumb: { backgroundColor: "--toggle-hover-thumb-surface" }
+      }
+    },
+    {
+      state: "on",
+      attributes: { root: { "aria-checked": "true" } },
+      paints: {
+        track: { backgroundColor: "--toggle-on-track-surface", borderTopColor: "--toggle-on-track-border" },
+        thumb: { backgroundColor: "--toggle-on-thumb-surface", borderTopColor: "--toggle-on-thumb-border" }
+      }
+    },
+    {
+      state: "on hover",
+      forceClass: "force-hover",
+      attributes: { root: { "aria-checked": "true" } },
+      paints: {
+        track: { backgroundColor: "--toggle-on-hover-track-surface" },
+        thumb: { backgroundColor: "--toggle-on-hover-thumb-surface" }
+      }
+    },
+    {
+      state: "disabled",
+      attributes: { root: { disabled: "" } },
+      paints: {
+        track: { backgroundColor: "--toggle-disabled-track-surface" },
+        thumb: { backgroundColor: "--toggle-disabled-thumb-surface" },
+        label: { color: "--toggle-disabled-label-text" }
+      }
+    }
+  ],
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--toggle-track-border-width",
+        observe: { part: "track", css: "borderTopWidth" }
+      }
+    ],
+    resetVariable: "--toggle-track-border-width"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--toggle-track-border-width", "--toggle-track-radius"],
+    unchanged: ["--toggle-thumb-size", "--toggle-gap"],
+    aliasedTo: {
+      "--toggle-track-border-width": "--border-width-3",
+      "--toggle-track-radius": "--radius-none"
+    },
+    observe: { part: "track", css: "borderTopWidth", variable: "--toggle-track-border-width" }
+  },
+  interaction: {
+    part: "root",
+    role: "switch",
+    // No activation case: Toggle.svelte is controlled (`onclick` only calls
+    // `onchange?.(!checked)`, it never flips `checked` itself), and
+    // ToggleEditor.svelte's preview drives `checked` off the state tab
+    // without wiring `onchange` back to it. Clicking the real control in this
+    // demo has no observable effect on `aria-checked`, so an activation case
+    // would assert a no-op rather than the switch's behavior.
+    cases: [
+      {
+        name: "clicking a toggle focuses it",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: true }
+      },
+      {
+        name: "a disabled toggle refuses focus",
+        state: "disabled",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "focused", part: "root", value: false }
+      }
+    ]
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "track", fill: "--toggle-track-surface", stroke: "--toggle-track-border" }]
+  }
+};
+
+// src/testing/contracts/tooltip.ts
+var tooltipContract = {
+  id: "tooltip",
+  origin: "system",
+  root: "root",
+  parts: {
+    root: ".tooltip",
+    arrow: { selector: ".tooltip", pseudo: "::after" }
+  },
+  properties: [
+    {
+      paints: {
+        root: {
+          backgroundColor: "--tooltip-surface",
+          color: "--tooltip-text",
+          borderTopColor: "--tooltip-border",
+          borderTopWidth: "--tooltip-border-width",
+          borderRadius: "--tooltip-radius",
+          paddingTop: "--tooltip-padding",
+          boxShadow: "--tooltip-shadow",
+          fontFamily: "--tooltip-text-font-family",
+          fontSize: "--tooltip-text-font-size",
+          fontWeight: "--tooltip-text-font-weight",
+          lineHeight: "--tooltip-text-line-height"
+        },
+        arrow: {
+          borderRightColor: "--tooltip-border",
+          borderRightWidth: "--tooltip-border-width"
+        }
+      }
+    }
+  ],
+  states: {
+    applicable: false,
+    reason: "the editor renders one token group (tooltip) with no state strip"
+  },
+  persistence: {
+    cases: [
+      {
+        shape: "token",
+        variable: "--tooltip-border",
+        observe: { part: "root", css: "borderTopColor" }
+      }
+    ],
+    resetVariable: "--tooltip-border"
+  },
+  theme: {
+    theme: "halloween",
+    changed: ["--tooltip-border-width", "--tooltip-padding", "--tooltip-radius"],
+    unchanged: ["--tooltip-text-font-size"],
+    aliasedTo: {
+      "--tooltip-border-width": "--border-width-3",
+      "--tooltip-radius": "--radius-none"
+    },
+    observe: { part: "root", css: "borderTopWidth", variable: "--tooltip-border-width" }
+  },
+  interaction: {
+    applicable: false,
+    reason: "a hint carries no interactive role; visibility follows the trigger element's hover or focus, which this component does not own"
+  },
+  sketch: {
+    style: "pencil",
+    parts: [{ part: "root", fill: "--tooltip-surface" }]
+  }
+};
+
+// src/testing/contracts/index.ts
+var shippedContracts = [
+  badgeContract,
+  buttonContract,
+  calloutContract,
+  cardContract,
+  codeSnippetContract,
+  collapsibleSectionContract,
+  cornerBadgeContract,
+  dialogContract,
+  iconButtonContract,
+  imageContract,
+  imageLightboxContract,
+  inlineEditActionsContract,
+  inputContract,
+  menuSelectContract,
+  notificationContract,
+  panelContract,
+  progressBarContract,
+  radioButtonContract,
+  sectionDividerContract,
+  segmentedControlContract,
+  sideNavigationContract,
+  sliderContract,
+  tabBarContract,
+  tableContract,
+  toggleContract,
+  tooltipContract
+];
+var CONTRACTS_MODULE_ENV = "LIVE_TOKENS_CONTRACTS_MODULE";
+async function loadCustomContracts() {
+  const modulePath = process.env[CONTRACTS_MODULE_ENV];
+  if (!modulePath) return [];
+  const mod = await import(pathToFileURL(path.resolve(modulePath)).href);
+  const value = mod.default ?? mod.contracts;
+  if (!Array.isArray(value)) {
+    throw new Error(
+      `${CONTRACTS_MODULE_ENV}=${modulePath} does not export a contracts array (default export or a named "contracts" export)`
+    );
+  }
+  return value;
+}
+async function allContracts(contracts = shippedContracts) {
+  const custom = await loadCustomContracts();
+  return custom.length > 0 ? [...contracts, ...custom] : contracts;
+}
+async function selectedContracts(contracts = shippedContracts) {
+  const all = await allContracts(contracts);
+  const requested = process.env.LIVE_TOKENS_COMPONENT;
+  return requested ? all.filter((contract) => contract.id === requested) : all;
+}
+
+export {
+  ContractViolation,
+  isInapplicable,
+  requiresInteraction,
+  partLocator,
+  shippedContracts,
+  CONTRACTS_MODULE_ENV,
+  allContracts,
+  selectedContracts
+};
+//# sourceMappingURL=chunk-LXR3MN6N.js.map