@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/testing-js/{chunk-4JQX6WWL.js → chunk-ZMZQZ33J.js}

@@ -1,51 +1,10 @@
-// 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",
+  "brand",
   "accent",
   "neutral",
   "alternate",
@@ -83,23 +42,23 @@ function colorPaints(v) {
 var badgeContract = {
   id: "badge",
   origin: "system",
-  view: { variant: "Primary" },
+  view: { variant: "Brand" },
   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: "Brand", state: "base", paints: basePaints("brand") },
+    { variant: "Brand", state: "colors", paints: colorPaints("brand") },
+    ...variants.filter((v) => v !== "brand").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-brand-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",
@@ -114,31 +73,35 @@ var badgeContract = {
     cases: [
       {
         shape: "token",
-        variant: "Primary",
+        variant: "Brand",
         state: "base",
-        variable: "--badge-primary-border-width",
+        variable: "--badge-brand-border-width",
         observe: { part: "root", css: "borderTopWidth" }
       }
     ],
-    resetVariable: "--badge-primary-border-width"
+    resetVariable: "--badge-brand-border-width"
   },
   theme: {
     theme: "halloween",
-    changed: ["--badge-primary-border-width", "--badge-primary-radius", "--badge-primary-padding"],
-    unchanged: ["--badge-primary-shadow", "--badge-primary-icon-size"],
+    changed: ["--badge-brand-border-width", "--badge-brand-radius", "--badge-brand-padding"],
+    unchanged: ["--badge-brand-shadow", "--badge-brand-icon-size"],
     aliasedTo: {
-      "--badge-primary-border-width": "--border-width-3",
-      "--badge-primary-radius": "--radius-none"
+      "--badge-brand-border-width": "--border-width-3",
+      "--badge-brand-radius": "--radius-none"
     },
-    observe: { part: "root", css: "borderTopWidth", variable: "--badge-primary-border-width" }
+    observe: { part: "root", css: "borderTopWidth", variable: "--badge-brand-border-width" }
   },
   interaction: {
     applicable: false,
     reason: "a badge is a static label with no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a badge declares no callback prop and answers no event: its props select paint, which the render obligation reads"
+  },
   sketch: {
     style: "pencil",
-    parts: [{ part: "root", fill: "--badge-primary-surface", stroke: "--badge-primary-border" }]
+    parts: [{ part: "root", fill: "--badge-brand-surface", stroke: "--badge-brand-border" }]
   }
 };
 
@@ -256,6 +219,21 @@ var buttonContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking a button hands the click on",
+        action: { kind: "click", part: "root" },
+        expect: { kind: "callback", prop: "onclick", args: [{ type: "click" }] }
+      },
+      {
+        name: "a disabled button stays silent",
+        props: { disabled: true },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "no-callback", prop: "onclick" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--button-primary-surface", stroke: "--button-primary-border" }]
@@ -270,7 +248,7 @@ function paintsFor(v) {
       backgroundColor: `--callout-${v}-surface`,
       borderTopColor: `--callout-${v}-border`,
       borderTopWidth: `--callout-${v}-border-width`,
-      borderLeftWidth: `--callout-${v}-accent-width`,
+      borderLeftWidth: `--callout-${v}-indicator-width`,
       borderRadius: `--callout-${v}-radius`,
       paddingTop: `--callout-${v}-padding`
     },
@@ -329,6 +307,10 @@ var calloutContract = {
     applicable: false,
     reason: "a callout is a static box with no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a callout declares no callback prop and answers no event"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--callout-info-surface", stroke: "--callout-info-border" }]
@@ -454,6 +436,10 @@ var cardContract = {
     applicable: false,
     reason: "a card is a static container with no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a card declares no callback prop; its header and body arrive as snippets, which a mounted fixture cannot express"
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -541,6 +527,10 @@ var codeSnippetContract = {
       }
     ]
   },
+  behavior: {
+    applicable: false,
+    reason: "the copy control reports through the system clipboard and a timed popover, neither of which is a callback prop"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--codesnippet-surface", stroke: "--codesnippet-border" }]
@@ -557,9 +547,9 @@ function headerPaints(v, s) {
     backgroundColor: `${p}-surface`,
     paddingTop: `${p}-padding`
   };
-  if (v === "divider") {
+  if (v === "hairline") {
     header.borderBottomColor = `${p}-hairline-color`;
-    header.borderBottomWidth = `${p}-hairline-thickness`;
+    header.borderBottomWidth = `${p}-hairline-width`;
   }
   return {
     header,
@@ -603,14 +593,14 @@ var collapsibleSectionContract = {
     {
       variant: "Container",
       state: "Body",
-      paints: { body: { backgroundColor: "--collapsiblesection-container-expanded-surface", paddingTop: "--collapsiblesection-container-expanded-padding" } }
+      paints: { body: { backgroundColor: "--collapsiblesection-container-open-surface", paddingTop: "--collapsiblesection-container-open-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" } } }
+    { variant: "Chromeless", state: "Body", paints: { body: { paddingTop: "--collapsiblesection-chromeless-open-padding" } } },
+    { variant: "With Hairline", state: "Header", paints: headerPaints("hairline", "default") },
+    { variant: "With Hairline", state: "Header", setup: clickHover(), paints: headerPaints("hairline", "hover") },
+    { variant: "With Hairline", state: "Body", paints: { body: { paddingTop: "--collapsiblesection-hairline-open-padding" } } }
   ],
   states: [{ state: "Container" }, { state: "Header" }, { state: "Body" }],
   persistence: {
@@ -638,7 +628,7 @@ var collapsibleSectionContract = {
   interaction: {
     part: "toggleButton",
     role: "button",
-    // No activation case: CollapsibleSectionEditor's preview drives `expanded`
+    // No activation case: CollapsibleSectionEditor's preview drives `open`
     // 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).
@@ -650,19 +640,40 @@ var collapsibleSectionContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking the chevron asks to toggle",
+        props: { label: "Details" },
+        action: { kind: "click", part: "toggleButton" },
+        expect: { kind: "callback", prop: "ontoggle", args: [] }
+      },
+      {
+        name: "open drives the chevron",
+        props: { label: "Details", open: true },
+        expect: { kind: "attribute", part: "toggleButton", name: "aria-expanded", value: "true" }
+      },
+      {
+        name: "clicking leaves the section where the prop put it",
+        props: { label: "Details" },
+        action: { kind: "click", part: "toggleButton" },
+        expect: { kind: "attribute", part: "toggleButton", name: "aria-expanded", value: "false" }
+      }
+    ]
+  },
   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" }
+      { part: "body", fill: "--collapsiblesection-container-open-surface" }
     ]
   }
 };
 
 // src/testing/contracts/cornerbadge.ts
 var variants4 = [
-  "primary",
+  "brand",
   "accent",
   "neutral",
   "alternate",
@@ -676,44 +687,44 @@ var variants4 = [
 function colorPaints2(v) {
   return {
     badge: {
-      backgroundColor: `--corner-badge-${v}-surface`,
-      borderTopColor: `--corner-badge-${v}-border`,
-      color: `--corner-badge-${v}-text`
+      backgroundColor: `--cornerbadge-${v}-surface`,
+      borderTopColor: `--cornerbadge-${v}-border`,
+      color: `--cornerbadge-${v}-text`
     }
   };
 }
 var basePaints3 = {
-  root: { bottom: "--corner-badge-margin" },
+  root: { bottom: "--cornerbadge-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"
+    borderTopLeftRadius: "--cornerbadge-inner-radius",
+    borderTopRightRadius: "--cornerbadge-v-axis-radius",
+    borderBottomRightRadius: "--cornerbadge-outer-radius",
+    borderBottomLeftRadius: "--cornerbadge-h-axis-radius",
+    paddingTop: "--cornerbadge-padding",
+    fontFamily: "--cornerbadge-text-font-family",
+    fontSize: "--cornerbadge-text-font-size",
+    fontWeight: "--cornerbadge-text-font-weight",
+    lineHeight: "--cornerbadge-text-line-height"
   }
 };
 var cornerBadgeContract = {
   id: "cornerbadge",
   origin: "system",
-  view: { variant: "Primary" },
+  view: { variant: "Brand" },
   root: "root",
   parts: {
-    root: ".corner-badge",
-    badge: ".corner-badge .badge"
+    root: ".cornerbadge",
+    badge: ".cornerbadge .badge"
   },
   properties: [
     {
-      variant: "Primary",
+      variant: "Brand",
       paints: {
         root: basePaints3.root,
-        badge: { ...basePaints3.badge, ...colorPaints2("primary").badge }
+        badge: { ...basePaints3.badge, ...colorPaints2("brand").badge }
       }
     },
-    ...variants4.filter((v) => v !== "primary").map((v) => ({
+    ...variants4.filter((v) => v !== "brand").map((v) => ({
       variant: v.charAt(0).toUpperCase() + v.slice(1),
       paints: colorPaints2(v)
     }))
@@ -723,29 +734,33 @@ var cornerBadgeContract = {
     cases: [
       {
         shape: "token",
-        variable: "--corner-badge-outer-radius",
+        variable: "--cornerbadge-outer-radius",
         observe: { part: "badge", css: "borderBottomRightRadius" }
       }
     ],
-    resetVariable: "--corner-badge-outer-radius"
+    resetVariable: "--cornerbadge-outer-radius"
   },
   theme: {
     theme: "ocean",
-    changed: ["--corner-badge-outer-radius", "--corner-badge-inner-radius", "--corner-badge-margin"],
-    unchanged: ["--corner-badge-text-font-size"],
+    changed: ["--cornerbadge-outer-radius", "--cornerbadge-inner-radius", "--cornerbadge-margin"],
+    unchanged: ["--cornerbadge-text-font-size"],
     aliasedTo: {
-      "--corner-badge-outer-radius": "--radius-md",
-      "--corner-badge-inner-radius": "--radius-md"
+      "--cornerbadge-outer-radius": "--radius-md",
+      "--cornerbadge-inner-radius": "--radius-md"
     },
-    observe: { part: "badge", css: "borderBottomRightRadius", variable: "--corner-badge-outer-radius" }
+    observe: { part: "badge", css: "borderBottomRightRadius", variable: "--cornerbadge-outer-radius" }
   },
   interaction: {
     applicable: false,
     reason: "a corner badge is a static marker with no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a corner badge declares no callback prop and answers no event"
+  },
   sketch: {
     style: "pencil",
-    parts: [{ part: "badge", fill: "--corner-badge-primary-surface", stroke: "--corner-badge-primary-border" }]
+    parts: [{ part: "badge", fill: "--cornerbadge-brand-surface", stroke: "--cornerbadge-brand-border" }]
   }
 };
 
@@ -778,8 +793,8 @@ var dialogContract = {
         },
         header: {
           backgroundColor: "--dialog-header-surface",
-          borderBottomColor: "--dialog-header-divider",
-          borderBottomWidth: "--dialog-header-divider-width",
+          borderBottomColor: "--dialog-header-hairline-color",
+          borderBottomWidth: "--dialog-header-hairline-width",
           paddingTop: "--dialog-header-padding"
         },
         title: {
@@ -802,8 +817,8 @@ var dialogContract = {
           lineHeight: "--dialog-body-line-height"
         },
         footer: {
-          borderTopColor: "--dialog-footer-divider",
-          borderTopWidth: "--dialog-footer-divider-width",
+          borderTopColor: "--dialog-footer-hairline-color",
+          borderTopWidth: "--dialog-footer-hairline-width",
           paddingTop: "--dialog-footer-padding"
         }
       }
@@ -865,6 +880,21 @@ var dialogContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking close asks to close",
+        props: { open: true, inline: true, title: "Confirm" },
+        action: { kind: "click", part: "closeButton" },
+        expect: { kind: "callback", prop: "onclose", args: [] }
+      },
+      {
+        name: "title drives the heading",
+        props: { open: true, inline: true, title: "Confirm" },
+        expect: { kind: "text", part: "title", value: "Confirm" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -969,6 +999,22 @@ var iconButtonContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking an icon button hands the click on",
+        props: { icon: "fas fa-check", ariaLabel: "Confirm" },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "callback", prop: "onclick", args: [{ type: "click" }] }
+      },
+      {
+        name: "a disabled icon button stays silent",
+        props: { icon: "fas fa-check", ariaLabel: "Confirm", disabled: true },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "no-callback", prop: "onclick" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--iconbutton-primary-surface", stroke: "--iconbutton-primary-border" }]
@@ -1033,6 +1079,10 @@ var imageContract = {
     applicable: false,
     reason: "a framed picture carries no interactive role; the zoom effect is a hover transform, not an action"
   },
+  behavior: {
+    applicable: false,
+    reason: "an image declares no callback prop; zoom is a hover transform the browser paints"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", stroke: "--image-default-border" }]
@@ -1164,6 +1214,10 @@ var imageLightboxContract = {
   // 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.
+  behavior: {
+    applicable: false,
+    reason: "the lightbox declares no callback prop; opening portals a modal sized from measured geometry, which happy-dom has no layout for"
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -1247,6 +1301,26 @@ var inlineEditActionsContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking save reports it",
+        action: { kind: "click", part: "saveBtn" },
+        expect: { kind: "callback", prop: "onsave", args: [{ type: "click" }] }
+      },
+      {
+        name: "clicking cancel reports it",
+        action: { kind: "click", part: "cancelBtn" },
+        expect: { kind: "callback", prop: "oncancel", args: [{ type: "click" }] }
+      },
+      {
+        name: "disabled actions stay silent",
+        props: { disabled: true },
+        action: { kind: "click", part: "saveBtn" },
+        expect: { kind: "no-callback", prop: "onsave" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -1430,6 +1504,21 @@ var inputContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "typing reports every keystroke",
+        props: { label: "Name" },
+        action: { kind: "input", part: "field", value: "probe" },
+        expect: { kind: "callback", prop: "oninput", args: ["probe"] }
+      },
+      {
+        name: "an error marks the field invalid",
+        props: { label: "Name", error: "Required" },
+        expect: { kind: "attribute", part: "field", name: "aria-invalid", value: "true" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "field", fill: "--input-default-surface", stroke: "--input-default-border" }]
@@ -1447,6 +1536,10 @@ function itemTextPaints(s, full) {
   if (full) paints.lineHeight = `--menuselect-${s}-text-line-height`;
   return paints;
 }
+var behaviorItems = [
+  { value: "daily", label: "Daily" },
+  { value: "weekly", label: "Weekly" }
+];
 var menuSelectContract = {
   id: "menuselect",
   origin: "system",
@@ -1556,6 +1649,27 @@ var menuSelectContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking an item asks for its value",
+        props: { items: behaviorItems, value: "weekly" },
+        action: { kind: "click", part: "item" },
+        expect: { kind: "callback", prop: "onchange", args: ["daily"] }
+      },
+      {
+        name: "value drives the selected item",
+        props: { items: behaviorItems, value: "daily" },
+        expect: { kind: "attribute", part: "item", name: "aria-selected", value: "true" }
+      },
+      {
+        name: "a disabled item stays silent",
+        props: { items: [{ ...behaviorItems[0], disabled: true }, behaviorItems[1]], value: "weekly" },
+        action: { kind: "click", part: "item" },
+        expect: { kind: "no-callback", prop: "onchange" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--menuselect-menu-surface", stroke: "--menuselect-menu-border" }]
@@ -1599,7 +1713,10 @@ var notificationContract = {
   origin: "system",
   view: {
     variant: "Info",
-    setup: [{ kind: "control", selector: '.toolbar-check:has-text("Header button") input', check: true }]
+    setup: [
+      { kind: "control", selector: '.toolbar-check:has-text("Header button") input', check: true },
+      { kind: "control", selector: '.toolbar-check:has-text("Dismissible") input', check: true }
+    ]
   },
   root: "root",
   parts: {
@@ -1608,7 +1725,8 @@ var notificationContract = {
     icon: ".notification-header i",
     title: ".notification-title",
     actionBackdrop: ".action-button-backdrop",
-    actionButton: ".action-button-backdrop button"
+    actionButton: ".action-button-backdrop button",
+    closeButton: ".notification-close"
   },
   properties: variants6.map((v) => ({ variant: v.charAt(0).toUpperCase() + v.slice(1), paints: paintsFor2(v) })),
   states: [{ state: "base" }, { state: "colors" }],
@@ -1643,6 +1761,21 @@ var notificationContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking dismiss reports it",
+        props: { title: "Saved", description: "Your changes are live.", dismissible: true },
+        action: { kind: "click", part: "closeButton" },
+        expect: { kind: "callback", prop: "ondismiss", args: [] }
+      },
+      {
+        name: "title drives the heading",
+        props: { title: "Saved", description: "Your changes are live." },
+        expect: { kind: "text", part: "title", value: "Saved" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -1708,6 +1841,10 @@ var panelContract = {
     applicable: false,
     reason: "a framed container carries no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a panel declares no callback prop; its content arrives as a snippet"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--panel-stage-surface", stroke: "--panel-frame-border" }]
@@ -1783,6 +1920,20 @@ var progressBarContract = {
     applicable: false,
     reason: "a progress readout carries no interactive role"
   },
+  behavior: {
+    cases: [
+      {
+        name: "value drives the readout",
+        props: { label: "Upload", value: 60 },
+        expect: { kind: "text", part: "value", value: "60%" }
+      },
+      {
+        name: "a value past the end clamps",
+        props: { label: "Upload", value: 140 },
+        expect: { kind: "text", part: "value", value: "100%" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "track", fill: "--progressbar-track-surface", stroke: "--progressbar-track-border" }]
@@ -1822,7 +1973,7 @@ var radioButtonContract = {
   properties: [
     { paints: statePaints4("default", true) },
     { state: "hover", paints: statePaints4("hover", true) },
-    { state: "active", paints: statePaints4("active", true) }
+    { state: "selected", paints: statePaints4("selected", true) }
   ],
   states: [
     { state: "default" },
@@ -1832,9 +1983,9 @@ var radioButtonContract = {
       paints: statePaints4("hover", false)
     },
     {
-      state: "active",
-      forceClass: "active",
-      paints: statePaints4("active", false)
+      state: "selected",
+      forceClass: "selected",
+      paints: statePaints4("selected", false)
     }
   ],
   persistence: {
@@ -1852,7 +2003,7 @@ var radioButtonContract = {
     changed: [
       "--radiobutton-default-dot-border-width",
       "--radiobutton-hover-dot-border-width",
-      "--radiobutton-active-dot-border-width"
+      "--radiobutton-selected-dot-border-width"
     ],
     unchanged: ["--radiobutton-default-label-font-size"],
     aliasedTo: {
@@ -1871,6 +2022,21 @@ var radioButtonContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking an option reports it",
+        props: { label: "Weekly" },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "callback", prop: "onclick", args: [] }
+      },
+      {
+        name: "label names the option",
+        props: { label: "Weekly" },
+        expect: { kind: "text", part: "label", value: "Weekly" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "dot", fill: "--radiobutton-default-dot-fill", stroke: "--radiobutton-default-dot-border-color" }]
@@ -1890,7 +2056,7 @@ function variantPaints(v) {
       borderTopWidth: `--sectiondivider-${v}-border-width`,
       borderTopColor: `--sectiondivider-${v}-border`,
       boxShadow: `--sectiondivider-${v}-shadow`,
-      backgroundImage: `--sectiondivider-${v}-background`
+      backgroundImage: `--sectiondivider-${v}-surface`
     },
     titleRow: { paddingTop: `--sectiondivider-${v}-title-padding` },
     title: {
@@ -1919,7 +2085,7 @@ function variantPaints(v) {
     },
     hairline: {
       backgroundColor: `--sectiondivider-${v}-hairline-color`,
-      height: `--sectiondivider-${v}-hairline-thickness`
+      height: `--sectiondivider-${v}-hairline-width`
     }
   };
 }
@@ -1955,7 +2121,7 @@ var sectionDividerContract = {
       },
       {
         shape: "gradient",
-        variable: "--sectiondivider-lg-background",
+        variable: "--sectiondivider-lg-surface",
         observe: { part: "root", css: "backgroundColor" }
       },
       {
@@ -1972,7 +2138,7 @@ var sectionDividerContract = {
     changed: [
       "--sectiondivider-lg-radius",
       "--sectiondivider-lg-border-width",
-      "--sectiondivider-lg-hairline-thickness",
+      "--sectiondivider-lg-hairline-width",
       "--sectiondivider-lg-hairline-color"
     ],
     unchanged: [
@@ -1985,7 +2151,7 @@ var sectionDividerContract = {
     aliasedTo: {
       "--sectiondivider-lg-radius": "--radius-none",
       "--sectiondivider-lg-border-width": "--border-width-3",
-      "--sectiondivider-lg-hairline-thickness": "--border-width-3"
+      "--sectiondivider-lg-hairline-width": "--border-width-3"
     },
     observe: { part: "root", css: "borderRadius", variable: "--sectiondivider-lg-radius" }
   },
@@ -1993,6 +2159,10 @@ var sectionDividerContract = {
     applicable: false,
     reason: "a divider is a static banner: no interactive role, nothing focusable, no pointer behaviour"
   },
+  behavior: {
+    applicable: false,
+    reason: "a divider declares no callback prop and answers no event"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "hairline", fill: "--sectiondivider-lg-hairline-color" }]
@@ -2000,6 +2170,10 @@ var sectionDividerContract = {
 };
 
 // src/testing/contracts/segmentedcontrol.ts
+var behaviorSegments = [
+  { value: "grid", label: "Grid" },
+  { value: "list", label: "List" }
+];
 var segmentedControlContract = {
   id: "segmentedcontrol",
   origin: "system",
@@ -2011,7 +2185,7 @@ var segmentedControlContract = {
     icon: ".segment i",
     selectedSegment: ".segment.selected",
     selectedIcon: ".segment.selected i",
-    divider: ".segment-divider"
+    hairline: ".segment-hairline"
   },
   properties: [
     {
@@ -2025,10 +2199,10 @@ var segmentedControlContract = {
           columnGap: "--segmentedcontrol-bar-gap",
           paddingTop: "--segmentedcontrol-bar-padding"
         },
-        divider: {
-          backgroundColor: "--segmentedcontrol-divider-color",
-          width: "--segmentedcontrol-divider-thickness",
-          marginTop: "--segmentedcontrol-divider-inset"
+        hairline: {
+          backgroundColor: "--segmentedcontrol-hairline-color",
+          width: "--segmentedcontrol-hairline-width",
+          marginTop: "--segmentedcontrol-hairline-inset"
         }
       }
     },
@@ -2075,7 +2249,7 @@ var segmentedControlContract = {
           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" }
+        hairline: { width: "--segmentedcontrol-small-hairline-width", marginTop: "--segmentedcontrol-small-hairline-inset" }
       }
     }
   ],
@@ -2179,6 +2353,27 @@ var segmentedControlContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking a segment asks for its value",
+        props: { segments: behaviorSegments, value: "list" },
+        action: { kind: "click", part: "segment" },
+        expect: { kind: "callback", prop: "onchange", args: ["grid"] }
+      },
+      {
+        name: "value drives the checked segment",
+        props: { segments: behaviorSegments, value: "grid" },
+        expect: { kind: "attribute", part: "segment", name: "aria-checked", value: "true" }
+      },
+      {
+        name: "a disabled control stays silent",
+        props: { segments: behaviorSegments, value: "list", disabled: true },
+        action: { kind: "click", part: "segment" },
+        expect: { kind: "no-callback", prop: "onchange" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -2198,11 +2393,11 @@ function titlePaints(s) {
       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`,
+      borderLeftColor: `--sidenavigation-title-${s}-indicator`,
+      borderLeftWidth: `--sidenavigation-title-${s}-indicator-width`,
       paddingTop: `--sidenavigation-title-${s}-padding`
     },
-    titleLabel: {
+    titleLinkBox: {
       color: `--sidenavigation-title-${s}-label`,
       fontFamily: `--sidenavigation-title-${s}-label-font-family`,
       fontSize: `--sidenavigation-title-${s}-label-font-size`,
@@ -2228,8 +2423,8 @@ function sectionPaints(part, labelPart, s) {
   return {
     [part]: {
       backgroundColor: `--sidenavigation-section-${s}-surface`,
-      borderLeftColor: `--sidenavigation-section-${s}-accent`,
-      borderLeftWidth: `--sidenavigation-section-${s}-accent-width`
+      borderLeftColor: `--sidenavigation-section-${s}-indicator`,
+      borderLeftWidth: `--sidenavigation-section-${s}-indicator-width`
     },
     [labelPart]: {
       color: `--sidenavigation-section-${s}-text`,
@@ -2244,8 +2439,8 @@ function itemPaints(part, s) {
   return {
     [part]: {
       backgroundColor: `--sidenavigation-item-${s}-surface`,
-      borderLeftColor: `--sidenavigation-item-${s}-accent`,
-      borderLeftWidth: `--sidenavigation-item-${s}-accent-width`,
+      borderLeftColor: `--sidenavigation-item-${s}-indicator`,
+      borderLeftWidth: `--sidenavigation-item-${s}-indicator-width`,
       paddingTop: `--sidenavigation-item-${s}-padding`,
       color: `--sidenavigation-item-${s}-text`,
       fontFamily: `--sidenavigation-item-${s}-text-font-family`,
@@ -2259,8 +2454,8 @@ function footerPaints(s) {
   return {
     footer: {
       backgroundColor: `--sidenavigation-footer-${s}-surface`,
-      borderLeftColor: `--sidenavigation-footer-${s}-accent`,
-      borderLeftWidth: `--sidenavigation-footer-${s}-accent-width`,
+      borderLeftColor: `--sidenavigation-footer-${s}-indicator`,
+      borderLeftWidth: `--sidenavigation-footer-${s}-indicator-width`,
       paddingTop: `--sidenavigation-footer-${s}-padding`,
       columnGap: `--sidenavigation-footer-${s}-gap`,
       color: `--sidenavigation-footer-${s}-text`,
@@ -2278,25 +2473,25 @@ function footerPaints(s) {
 var sideNavigationContract = {
   id: "sidenavigation",
   origin: "system",
-  // Section has no currentPath-driven active state (unlike Item, whose
+  // Section has no currentPath-driven selected 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") },
+  // mechanism behind the "Selected" sub-tab, so the inventory's one view has
+  // to land there for `sectionSelected` to resolve at all.
+  view: { state: "Section", setup: sub("Selected") },
   root: "root",
   parts: {
     root: ".sidenavigation",
     title: ".sn-title",
-    titleLabel: ".sn-title-label",
+    titleLinkBox: ".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",
+    section: ".sn-section-header:not(.selected)",
+    sectionLabel: ".sn-section-header:not(.selected) .section-label",
+    sectionSelected: ".sn-section-header.selected",
+    sectionLabelSelected: ".sn-section-header.selected .section-label",
+    item: ".sn-item:not(.selected)",
+    itemSelected: ".sn-item.selected",
     footer: ".sn-footer",
     footerIcon: ".sn-footer i"
   },
@@ -2321,7 +2516,7 @@ var sideNavigationContract = {
       setup: [],
       paints: {
         title: { columnGap: "--sidenavigation-title-gap", borderRadius: "--sidenavigation-title-radius" },
-        titleLabel: {
+        titleLinkBox: {
           backgroundColor: "--sidenavigation-title-label-surface",
           borderTopColor: "--sidenavigation-title-label-border",
           borderTopWidth: "--sidenavigation-title-label-border-width",
@@ -2332,18 +2527,18 @@ var sideNavigationContract = {
     },
     { state: "Title", setup: [], paints: titlePaints("default") },
     { state: "Title", setup: sub("Hover"), paints: titlePaints("hover") },
-    { state: "Title", setup: sub("Active"), paints: titlePaints("active") },
+    { state: "Title", setup: sub("Selected"), paints: titlePaints("selected") },
     { 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: "Section", setup: sub("Selected"), paints: sectionPaints("sectionSelected", "sectionLabelSelected", "selected") },
     { state: "Item", setup: [], paints: itemPaints("item", "default") },
     { state: "Item", setup: sub("Hover"), paints: itemPaints("item", "hover") },
-    { state: "Item", setup: [], paints: itemPaints("itemActive", "active") },
+    { state: "Item", setup: [], paints: itemPaints("itemSelected", "selected") },
     { state: "Footer", setup: [], paints: footerPaints("default") },
     { state: "Footer", setup: sub("Hover"), paints: footerPaints("hover") },
-    { state: "Footer", setup: sub("Active"), paints: footerPaints("active") }
+    { state: "Footer", setup: sub("Selected"), paints: footerPaints("selected") }
   ],
   states: [
     { state: "Panel", setup: [] },
@@ -2396,6 +2591,27 @@ var sideNavigationContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking the rail toggle reports it",
+        props: { title: "Docs" },
+        action: { kind: "click", part: "toggle" },
+        expect: { kind: "callback", prop: "ontoggle", args: [] }
+      },
+      {
+        name: "open drives the toggle",
+        props: { title: "Docs", open: false },
+        expect: { kind: "attribute", part: "toggle", name: "aria-expanded", value: "false" }
+      },
+      {
+        name: "clicking leaves the rail where the prop put it",
+        props: { title: "Docs", open: true },
+        action: { kind: "click", part: "toggle" },
+        expect: { kind: "attribute", part: "toggle", name: "aria-expanded", value: "true" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--sidenavigation-panel-surface", stroke: "--sidenavigation-panel-border" }]
@@ -2576,6 +2792,30 @@ var sliderContract = {
       }
     ]
   },
+  behavior: {
+    // No disabled case: a range reports through `input`, and a dispatched
+    // input event reaches a disabled control, so the case would assert the
+    // environment rather than the slider.
+    cases: [
+      {
+        name: "moving the thumb reports the value",
+        props: { label: "Level", value: 30 },
+        action: { kind: "input", part: "input", value: "70" },
+        expect: { kind: "callback", prop: "onchange", args: [70] }
+      },
+      {
+        name: "a range thumb reports both ends",
+        props: { variant: "range", low: 25, high: 75 },
+        action: { kind: "input", part: "input", value: "10" },
+        expect: { kind: "callback", prop: "onrangechange", args: [10, 75] }
+      },
+      {
+        name: "value drives the readout",
+        props: { label: "Level", value: 30 },
+        expect: { kind: "text", part: "value", value: "30" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
@@ -2611,20 +2851,24 @@ function tabPaints(part, iconPart, s, full) {
     [iconPart]: { fontSize: `--tabbar-${s}-icon-size` }
   };
 }
+var behaviorTabs = [
+  { id: "one", label: "One" },
+  { id: "two", label: "Two" }
+];
 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",
+    tab: ".tab:not(.selected):not(:disabled)",
+    icon: ".tab:not(.selected):not(:disabled) i",
+    tabSelected: ".tab.selected",
+    selectedIcon: ".tab.selected 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
+    // Position-stable: clicking `tab` (".tab:not(.selected)") makes that very
+    // tab selected, which would invalidate that selector out from under a
     // focus check re-resolved after the click.
     secondTab: ".tab:nth-of-type(2)"
   },
@@ -2633,8 +2877,8 @@ var tabBarContract = {
       state: "bar",
       paints: {
         root: {
-          borderBottomColor: "--tabbar-bar-divider",
-          borderBottomWidth: "--tabbar-bar-divider-thickness",
+          borderBottomColor: "--tabbar-bar-hairline-color",
+          borderBottomWidth: "--tabbar-bar-hairline-width",
           marginTop: "--tabbar-bar-top-margin",
           paddingBottom: "--tabbar-bar-bottom-padding",
           marginBottom: "--tabbar-bar-bottom-margin",
@@ -2644,14 +2888,14 @@ var tabBarContract = {
     },
     { 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: "selected tab", paints: tabPaints("tabSelected", "selectedIcon", "selected", 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: "selected tab", paints: tabPaints("tabSelected", "selectedIcon", "selected", false) },
     {
       state: "disabled tab",
       attributes: { disabledTab: { disabled: "" } },
@@ -2709,11 +2953,33 @@ var tabBarContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking a tab asks for it",
+        props: { tabs: behaviorTabs, value: "one" },
+        action: { kind: "click", part: "secondTab" },
+        expect: { kind: "callback", prop: "onchange", args: ["two"] }
+      },
+      {
+        name: "clicking leaves the selection where the prop put it",
+        props: { tabs: behaviorTabs, value: "one" },
+        action: { kind: "click", part: "secondTab" },
+        expect: { kind: "text", part: "tabSelected", value: "One" }
+      },
+      {
+        name: "a disabled tab stays silent",
+        props: { tabs: [behaviorTabs[0], { ...behaviorTabs[1], disabled: true }], value: "one" },
+        action: { kind: "click", part: "secondTab" },
+        expect: { kind: "no-callback", prop: "onchange" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [
       { part: "tab", fill: "--tabbar-default-surface", stroke: "--tabbar-default-border" },
-      { part: "activeTab", fill: "--tabbar-active-surface", stroke: "--tabbar-active-border" }
+      { part: "tabSelected", fill: "--tabbar-selected-surface", stroke: "--tabbar-selected-border" }
     ]
   }
 };
@@ -2745,11 +3011,11 @@ var tableContract = {
           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",
+          borderBottomColor: "--table-default-header-hairline-color",
+          borderBottomWidth: "--table-default-header-hairline-width",
           paddingTop: "--table-default-header-padding",
-          borderRightColor: "--table-default-column-divider",
-          borderRightWidth: "--table-default-column-divider-width"
+          borderRightColor: "--table-default-column-hairline-color",
+          borderRightWidth: "--table-default-column-hairline-width"
         },
         td: {
           backgroundColor: "--table-default-row-surface",
@@ -2759,8 +3025,8 @@ var tableContract = {
           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"
+          borderBottomColor: "--table-default-row-hairline-color",
+          borderBottomWidth: "--table-default-row-hairline-width"
         }
       }
     }
@@ -2790,7 +3056,7 @@ var tableContract = {
     changed: [
       "--table-default-border-width",
       "--table-default-radius",
-      "--table-default-header-divider-width",
+      "--table-default-header-hairline-width",
       "--table-default-header-padding"
     ],
     unchanged: ["--table-default-header-font-size"],
@@ -2804,6 +3070,10 @@ var tableContract = {
     applicable: false,
     reason: "a styled table wrapper carries no interactive role"
   },
+  behavior: {
+    applicable: false,
+    reason: "a table wrapper declares no callback prop; its rows arrive as a snippet"
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "wrapper", fill: "--table-default-surface", stroke: "--table-default-border" }]
@@ -2826,7 +3096,7 @@ var defaultPaints = {
     left: "--toggle-track-padding"
   },
   label: {
-    color: "--toggle-label-text",
+    color: "--toggle-label",
     fontFamily: "--toggle-label-font-family",
     fontSize: "--toggle-label-font-size",
     fontWeight: "--toggle-label-font-weight"
@@ -2879,7 +3149,7 @@ var toggleContract = {
       paints: {
         track: { backgroundColor: "--toggle-disabled-track-surface" },
         thumb: { backgroundColor: "--toggle-disabled-thumb-surface" },
-        label: { color: "--toggle-disabled-label-text" }
+        label: { color: "--toggle-disabled-label" }
       }
     }
   ],
@@ -2926,6 +3196,39 @@ var toggleContract = {
       }
     ]
   },
+  behavior: {
+    cases: [
+      {
+        name: "clicking an off toggle asks for on",
+        props: { checked: false },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "callback", prop: "onchange", args: [true] }
+      },
+      {
+        name: "clicking leaves the switch where the prop put it",
+        props: { checked: false },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "attribute", part: "root", name: "aria-checked", value: "false" }
+      },
+      {
+        name: "clicking an on toggle asks for off",
+        props: { checked: true },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "callback", prop: "onchange", args: [false] }
+      },
+      {
+        name: "checked drives aria-checked",
+        props: { checked: true },
+        expect: { kind: "attribute", part: "root", name: "aria-checked", value: "true" }
+      },
+      {
+        name: "a disabled toggle stays silent",
+        props: { checked: false, disabled: true },
+        action: { kind: "click", part: "root" },
+        expect: { kind: "no-callback", prop: "onchange" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "track", fill: "--toggle-track-surface", stroke: "--toggle-track-border" }]
@@ -2992,6 +3295,15 @@ var tooltipContract = {
     applicable: false,
     reason: "a hint carries no interactive role; visibility follows the trigger element's hover or focus, which this component does not own"
   },
+  behavior: {
+    cases: [
+      {
+        name: "text drives the hint",
+        props: { text: "Copy to clipboard" },
+        expect: { kind: "text", part: "root", value: "Copy to clipboard" }
+      }
+    ]
+  },
   sketch: {
     style: "pencil",
     parts: [{ part: "root", fill: "--tooltip-surface" }]
@@ -3051,13 +3363,9 @@ async function selectedContracts(contracts = shippedContracts) {
 }
 
 export {
-  ContractViolation,
-  isInapplicable,
-  requiresInteraction,
-  partLocator,
   shippedContracts,
   CONTRACTS_MODULE_ENV,
   allContracts,
   selectedContracts
 };
-//# sourceMappingURL=chunk-4JQX6WWL.js.map
+//# sourceMappingURL=chunk-ZMZQZ33J.js.map