@motion-proto/live-tokens 0.78.0 → 0.80.0

package/src/system/components/Slider.svelte

@@ -1,11 +1,15 @@
-<!--
-  Slider.svelte. A number the reader picks by position on a track.
-  Use for: a volume, a price band, or a percentage, where the position carries
-  the meaning.
-  Not for: an exact number the reader would rather type (Input); an on/off
-  setting (Toggle).
--->
 <script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A number the reader picks by position on a track.',
+    useFor: 'a volume, a price range, or a percentage, where the position carries the meaning.',
+    notFor: 'an exact number the reader would rather type (Input); an on/off setting (Toggle).',
+    props: {
+      variant: '`single` picks one number; `range` picks a low and a high.',
+    },
+  } satisfies CatalogueEntry;
+
   export const sliderVariants = ['single', 'range'] as const;
   export type SliderVariant = typeof sliderVariants[number];
 </script>

package/src/system/components/TabBar.svelte

@@ -1,9 +1,13 @@
-<!--
-  TabBar.svelte. Tabs that swap the content below them.
-  Use for: two to seven panels the reader moves between inside one page.
-  Not for: one switch among others in a row (SegmentedControl); navigation
-  that changes the URL (SideNavigation).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'Tabs that swap the content below them.',
+    useFor: 'two to seven views the reader moves between inside one page.',
+    notFor: 'one switch among others in a row (SegmentedControl); navigation that changes the URL (SideNavigation).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
@@ -19,20 +23,20 @@
         global default; `true`/`false` force this instance on/off. */
     hoverTint?: boolean | undefined;
     tabs?: Tab[];
-    selectedTab?: string;
+    value?: string;
     iconOnly?: boolean;
     class?: string;
-    /** Tab-change callback. Preferred over `on:tabChange` from 0.5.0 onward. */
-    ontabChange?: (id: string) => void;
+    /** Fires with the id of the tab the reader picked. */
+    onchange?: (id: string) => void;
   }
 
   let {
     hoverTint = undefined,
     tabs = [],
-    selectedTab = '',
+    value = '',
     iconOnly = false,
     class: className = '',
-    ontabChange
+    onchange
   }: Props = $props();
 
   // Per-instance override of the global hover-tint intrinsic; undefined leaves :root in charge.
@@ -47,7 +51,7 @@
 
   function selectTab(tab: Tab) {
     if (!tab.disabled) {
-      ontabChange?.(tab.id);
+      onchange?.(tab.id);
       dispatch('tabChange', tab.id);
     }
   }
@@ -60,7 +64,7 @@
   {#each tabs as tab}
     <button
       class="tab"
-      class:active={selectedTab === tab.id}
+      class:selected={value === tab.id}
       class:icon-only={iconOnly}
       disabled={tab.disabled}
       onclick={() => selectTab(tab)}
@@ -85,8 +89,8 @@
     --tabbar-hover-tint-enabled: var(--color-transparent);
 
     /* Bar */
-    --tabbar-bar-divider: var(--border-neutral-subtle);
-    --tabbar-bar-divider-thickness: var(--border-width-1);
+    --tabbar-bar-hairline-color: var(--border-neutral-subtle);
+    --tabbar-bar-hairline-width: var(--border-width-1);
     --tabbar-bar-top-margin: var(--space-0);
     --tabbar-bar-bottom-padding: var(--space-0);
     --tabbar-bar-bottom-margin: var(--space-0);
@@ -124,21 +128,21 @@
     --tabbar-hover-tab-bottom-radius: var(--radius-none);
     --tabbar-hover-indicator-width: var(--border-width-2);
 
-    /* Active tab */
-    --tabbar-active-text: var(--text-primary);
-    --tabbar-active-border: var(--color-brand-500);
-    --tabbar-active-surface: var(--tint-low);
-    --tabbar-active-text-font-family: var(--font-sans);
-    --tabbar-active-text-font-size: var(--font-size-md);
-    --tabbar-active-text-font-weight: var(--font-weight-light);
-    --tabbar-active-text-line-height: var(--line-height-normal);
-    --tabbar-active-icon-size: var(--icon-size-md);
-    --tabbar-active-padding: var(--space-8);
-    --tabbar-active-tab-border-color: var(--color-transparent);
-    --tabbar-active-tab-border-width: var(--border-width-0);
-    --tabbar-active-tab-top-radius: var(--radius-none);
-    --tabbar-active-tab-bottom-radius: var(--radius-none);
-    --tabbar-active-indicator-width: var(--border-width-2);
+    /* Selected tab */
+    --tabbar-selected-text: var(--text-primary);
+    --tabbar-selected-border: var(--color-brand-500);
+    --tabbar-selected-surface: var(--tint-low);
+    --tabbar-selected-text-font-family: var(--font-sans);
+    --tabbar-selected-text-font-size: var(--font-size-md);
+    --tabbar-selected-text-font-weight: var(--font-weight-light);
+    --tabbar-selected-text-line-height: var(--line-height-normal);
+    --tabbar-selected-icon-size: var(--icon-size-md);
+    --tabbar-selected-padding: var(--space-8);
+    --tabbar-selected-tab-border-color: var(--color-transparent);
+    --tabbar-selected-tab-border-width: var(--border-width-0);
+    --tabbar-selected-tab-top-radius: var(--radius-none);
+    --tabbar-selected-tab-bottom-radius: var(--radius-none);
+    --tabbar-selected-indicator-width: var(--border-width-2);
 
     /* Disabled tab */
     --tabbar-disabled-text: var(--text-disabled);
@@ -160,7 +164,7 @@
   .tab-bar {
     display: flex;
     gap: var(--tabbar-tab-gap);
-    border-bottom: var(--tabbar-bar-divider-thickness) solid var(--tabbar-bar-divider);
+    border-bottom: var(--tabbar-bar-hairline-width) solid var(--tabbar-bar-hairline-color);
     margin-top: var(--tabbar-bar-top-margin);
     padding-bottom: var(--tabbar-bar-bottom-padding);
     margin-bottom: var(--tabbar-bar-bottom-margin);
@@ -168,7 +172,7 @@
 
   /* Per-state tokens are bound to `--_*` custom properties below. The actual
      layout-affecting declarations (padding, border, border-radius, font-*)
-     are written exactly once on `.tab`, so a hover/active state change can
+     are written exactly once on `.tab`, so a hover or selected state change can
      only repaint, not relayout. When two states resolve to the same value,
      the computed property is identical and no reshape is triggered. The
      `transition: all` of the old rule has also been narrowed to paint-only
@@ -218,8 +222,8 @@
     font-size: var(--_icon-size);
   }
 
-  .tab:hover:not(:disabled):not(.active),
-  .tab-bar.force-hover .tab:not(:disabled):not(.active) {
+  .tab:hover:not(:disabled):not(.selected),
+  .tab-bar.force-hover .tab:not(:disabled):not(.selected) {
     background-image: linear-gradient(var(--tabbar-hover-tint-enabled), var(--tabbar-hover-tint-enabled));
     --_text-color: var(--tabbar-hover-text);
     --_text-family: var(--tabbar-hover-text-font-family);
@@ -237,21 +241,21 @@
     --_bottom-radius: var(--tabbar-hover-tab-bottom-radius);
   }
 
-  .tab.active {
-    --_text-color: var(--tabbar-active-text);
-    --_text-family: var(--tabbar-active-text-font-family);
-    --_text-size: var(--tabbar-active-text-font-size);
-    --_text-weight: var(--tabbar-active-text-font-weight);
-    --_text-line-height: var(--tabbar-active-text-line-height);
-    --_icon-size: var(--tabbar-active-icon-size);
-    --_surface: var(--tabbar-active-surface);
-    --_indicator-color: var(--tabbar-active-border);
-    --_indicator-width: var(--tabbar-active-indicator-width);
-    --_padding: var(--tabbar-active-padding);
-    --_border-color: var(--tabbar-active-tab-border-color);
-    --_border-width: var(--tabbar-active-tab-border-width);
-    --_top-radius: var(--tabbar-active-tab-top-radius);
-    --_bottom-radius: var(--tabbar-active-tab-bottom-radius);
+  .tab.selected {
+    --_text-color: var(--tabbar-selected-text);
+    --_text-family: var(--tabbar-selected-text-font-family);
+    --_text-size: var(--tabbar-selected-text-font-size);
+    --_text-weight: var(--tabbar-selected-text-font-weight);
+    --_text-line-height: var(--tabbar-selected-text-line-height);
+    --_icon-size: var(--tabbar-selected-icon-size);
+    --_surface: var(--tabbar-selected-surface);
+    --_indicator-color: var(--tabbar-selected-border);
+    --_indicator-width: var(--tabbar-selected-indicator-width);
+    --_padding: var(--tabbar-selected-padding);
+    --_border-color: var(--tabbar-selected-tab-border-color);
+    --_border-width: var(--tabbar-selected-tab-border-width);
+    --_top-radius: var(--tabbar-selected-tab-top-radius);
+    --_bottom-radius: var(--tabbar-selected-tab-bottom-radius);
   }
 
   .tab:disabled {

package/src/system/components/Table.svelte

@@ -1,8 +1,13 @@
-<!--
-  Table.svelte. A themed frame around the rows and cells the page writes.
-  Use for: records the reader scans and compares.
-  Not for: a set of things the reader acts on (Card).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A themed frame around the rows and cells the page writes.',
+    useFor: 'records the reader scans and compares.',
+    notFor: 'a set of things the reader acts on (Card).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   interface Props {
     children?: import('svelte').Snippet;
@@ -34,8 +39,8 @@
     --table-default-header-font-weight: var(--font-weight-semibold);
     --table-default-header-line-height: var(--line-height-none);
     --table-default-header-padding: var(--space-12);
-    --table-default-header-divider: var(--border-neutral);
-    --table-default-header-divider-width: var(--border-width-1);
+    --table-default-header-hairline-color: var(--border-neutral);
+    --table-default-header-hairline-width: var(--border-width-1);
 
     /* Cell */
     --table-default-cell-text: var(--text-secondary);
@@ -47,13 +52,13 @@
 
     /* Row */
     --table-default-row-surface: var(--color-transparent);
-    --table-default-row-divider: var(--border-neutral-subtle);
-    --table-default-row-divider-width: var(--border-width-1);
+    --table-default-row-hairline-color: var(--border-neutral-subtle);
+    --table-default-row-hairline-width: var(--border-width-1);
     --table-default-row-stripe-surface: var(--color-transparent);
 
     /* Column */
-    --table-default-column-divider: var(--border-neutral-faint);
-    --table-default-column-divider-width: var(--border-width-1);
+    --table-default-column-hairline-color: var(--border-neutral-faint);
+    --table-default-column-hairline-width: var(--border-width-1);
   }
 
   .table-wrapper {
@@ -82,8 +87,8 @@
     line-height: var(--table-default-header-line-height);
     @include themed-padding(--table-default-header-padding);
     text-align: left;
-    border-bottom: var(--table-default-header-divider-width) solid var(--table-default-header-divider);
-    border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
+    border-bottom: var(--table-default-header-hairline-width) solid var(--table-default-header-hairline-color);
+    border-right: var(--table-default-column-hairline-width) solid var(--table-default-column-hairline-color);
     white-space: nowrap;
   }
 
@@ -99,8 +104,8 @@
       var(--table-default-cell-padding-right, calc(var(--table-default-cell-padding) * 1.5))
       var(--table-default-cell-padding-bottom, var(--table-default-cell-padding))
       var(--table-default-cell-padding-left, calc(var(--table-default-cell-padding) * 1.5));
-    border-bottom: var(--table-default-row-divider-width) solid var(--table-default-row-divider);
-    border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
+    border-bottom: var(--table-default-row-hairline-width) solid var(--table-default-row-hairline-color);
+    border-right: var(--table-default-column-hairline-width) solid var(--table-default-column-hairline-color);
   }
 
   .table-wrapper :global(th:last-child),

package/src/system/components/Toggle.svelte

@@ -1,9 +1,13 @@
-<!--
-  Toggle.svelte. An on/off switch that names the setting it controls.
-  Use for: a setting that takes effect the moment it flips.
-  Not for: a choice between two named alternatives (SegmentedControl); a
-  yes/no answer inside a form (RadioButton).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'An on/off switch that names the setting it controls.',
+    useFor: 'a setting that takes effect the moment it flips.',
+    notFor: 'a choice between two named alternatives (SegmentedControl); a yes/no answer inside a form (RadioButton).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   interface Props {
     checked?: boolean;
@@ -59,7 +63,7 @@
     --toggle-thumb-surface: var(--surface-neutral-highest);
     --toggle-thumb-border: var(--border-neutral-strong);
     --toggle-thumb-size: var(--font-size-md);
-    --toggle-label-text: var(--text-primary);
+    --toggle-label: var(--text-primary);
     --toggle-label-font-family: var(--font-sans);
     --toggle-label-font-size: var(--font-size-sm);
     --toggle-label-font-weight: var(--font-weight-normal);
@@ -82,7 +86,7 @@
     /* Disabled (terminal — applies regardless of on/off). */
     --toggle-disabled-track-surface: var(--surface-neutral-lower);
     --toggle-disabled-thumb-surface: var(--surface-neutral);
-    --toggle-disabled-label-text: var(--text-disabled);
+    --toggle-disabled-label: var(--text-disabled);
   }
 
   .toggle {
@@ -126,7 +130,7 @@
   }
 
   .label {
-    color: var(--toggle-label-text);
+    color: var(--toggle-label);
     font-family: var(--toggle-label-font-family);
     font-size: var(--toggle-label-font-size);
     font-weight: var(--toggle-label-font-weight);
@@ -174,6 +178,6 @@
     border-color: var(--toggle-disabled-thumb-surface);
   }
   .toggle:disabled .label {
-    color: var(--toggle-disabled-label-text);
+    color: var(--toggle-disabled-label);
   }
 </style>

package/src/system/components/Tooltip.svelte

@@ -1,9 +1,13 @@
-<!--
-  Tooltip.svelte. A hint that appears on an element on hover or focus.
-  Use for: a definition or a shortcut the reader can do without.
-  Not for: content the reader must not miss (Callout); feedback after an
-  action (Notification).
--->
+<script module lang="ts">
+  import type { CatalogueEntry } from '../../editor/component-editor/scaffolding/types';
+
+  export const catalogue = {
+    description: 'A short note that appears on an element on hover or focus.',
+    useFor: 'a definition or a shortcut the reader can do without.',
+    notFor: 'content the reader must not miss (Callout); feedback after an action (Notification).',
+  } satisfies CatalogueEntry;
+</script>
+
 <script lang="ts">
   interface Props {
     text?: string;

package/src/system/styles/CONVENTIONS.md

@@ -87,7 +87,7 @@ Component tokens *reference* theme tokens. They're how a component names its own
 ```
 
 - **`componentId`.** The literal component ID. No abbreviations. The ID itself has no dashes (it's the file-system-safe form: `segmentedcontrol`, not `segmented-control`).
-- **`part`.** Which part of the component this slot belongs to: `bar`, `divider`, `option`, `selected`, `track`, `save`, `cancel`, etc.
+- **`part`.** Which part of the component this slot belongs to: `bar`, `hairline`, `option`, `selected`, `track`, `save`, `cancel`, etc.
 - **`state`.** Optional. The interaction state if more than default: `hover`, `disabled`, `active`, `focus`. States come **before** the property, never after.
 - **`element`.** Optional. A sub-element within the part: `dot`, `icon`, `label`, `text`.
 - **`property`.** Always last. Either a **theme role** (`surface`, `border`, `text`, `icon`, `label`, `fill`) or a **CSS property name** (`radius`, `border-width`, `font-weight`, `font-family`, `font-size`).
@@ -113,11 +113,10 @@ Component tokens *reference* theme tokens. They're how a component names its own
 | `-font-family` | Font family reference                                        |
 | `-font-weight` | Font weight reference                                        |
 | `-font-size`   | Font size reference                                          |
-| `-thickness`   | Alternative stroke dimension (used where `-width` would alias another token under name-based fallback grouping) |
 | `-height`      | Explicit height when `-width`'s sibling would collide under name-based fallback grouping |
 | `-color`       | Generic color when none of the role words fits (rare)        |
 
-**Why `thickness` and `height` sometimes stand in for `width`:** when an editor declares no explicit `groupKey` for a token, sibling grouping falls back to matching the final `-<property>` segment. If two unrelated slots both end in `-width` and neither has a `groupKey`, they get auto-linked. Either declare a `groupKey` per token in the editor (preferred) or use an alternative property word. The divider in SegmentedControl uses `--segmentedcontrol-divider-thickness` for legacy parity with the fallback rule, but it now also has `groupKey: 'divider-thickness'` declared in the editor. The `groupKey` is the source of truth.
+**Why `height` sometimes stands in for `width`:** when an editor declares no explicit `groupKey` for a token, sibling grouping falls back to matching the final `-<property>` segment. If two unrelated slots both end in `-width` and neither has a `groupKey`, they get auto-linked. Declare a `groupKey` per token in the editor. The `groupKey` is the source of truth.
 
 ### State order matters
 
@@ -163,7 +162,7 @@ buildTypeGroupColorTokens(typeGroups, { component, variants: ['default', 'hover'
 buildTypeGroupTokens(typeGroups, { component, variants })
 ```
 
-The helper strips the `--<component>-` prefix and the variant/state segments, keeping the rest: `--sidenavigation-section-default-text` → `section-text`, `--card-default-title-font-family` → `title-font-family`. Two parts ending in the same word (`section-text`, `item-text`) stay distinct; the same slot across variants (`--badge-primary-text`, `--badge-accent-text`) collapses to one key. This is correct by construction — it cannot phantom-link independent slots.
+The helper strips the `--<component>-` prefix and the variant/state segments, keeping the rest: `--sidenavigation-section-default-text` → `section-text`, `--card-default-title-font-family` → `title-font-family`. Two parts ending in the same word (`section-text`, `item-text`) stay distinct; the same slot across variants (`--badge-brand-text`, `--badge-accent-text`) collapses to one key. This is correct by construction — it cannot phantom-link independent slots.
 
 Precedence, most specific first: a per-group `colorGroupKey` (the durable one-line fix; never recomputed) > a `groupKeyFor` callback > the structural derivation (`{ component, variants }`). There is **no name-based fallback**: call `buildTypeGroupColorTokens` with none of these and its color tokens are emitted solo (no `groupKey`), never inferred from the last dash. The font helpers (`buildTypeGroupTokens`, `buildTypeGroupFontTokens`) still default to the bare `font-family`/`font-size`/… keys, which is correct for a single slot but merges fonts across multiple slots — `check-component` warns when a font helper is called bare across more than one slot.
 

package/src/testing-js/chunk-3UKGXCDL.js

@@ -0,0 +1,48 @@
+// 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;
+}
+
+export {
+  ContractViolation,
+  isInapplicable,
+  requiresInteraction,
+  partLocator
+};
+//# sourceMappingURL=chunk-3UKGXCDL.js.map

package/src/testing-js/chunk-3UKGXCDL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../testing/componentContract.ts"],"sourcesContent":["export type ContractRule =\n  | 'contract-listed'\n  | 'contract-render'\n  | 'contract-alias'\n  | 'contract-persist'\n  | 'contract-theme'\n  | 'contract-states'\n  | 'contract-interaction'\n  | 'contract-behavior'\n  | 'contract-sketch'\n  | 'contract-missing';\n\n/**\n * A failed obligation, carrying the rule id the CLI reports it under. A defect\n * fixture names the rule it expects, and `check-component --tests` maps a\n * reporter error onto a finding.\n */\nexport class ContractViolation extends Error {\n  constructor(\n    readonly rule: ContractRule,\n    readonly component: string,\n    message: string,\n  ) {\n    super(`[${rule}] ${component}: ${message}`);\n    this.name = 'ContractViolation';\n  }\n}\n\nexport interface Inapplicable {\n  applicable: false;\n  reason: string;\n}\n\nexport function isInapplicable(value: unknown): value is Inapplicable {\n  return typeof value === 'object' && value !== null && (value as Inapplicable).applicable === false;\n}\n\nexport interface PartLocator {\n  /** Resolved inside the preview stage unless `portal` is set. */\n  selector: string;\n  /** Read computed style from this pseudo-element of the part, e.g.\n   *  `'::after'`. Chromium's `getComputedStyle` only tolerates the bare form\n   *  (`'after'`) for `::before`/`::after`; use the full `::` syntax so a\n   *  future pseudo-element (`::placeholder`, `::marker`, ...) works the same\n   *  way without a silent fallback to the host element's own style. */\n  pseudo?: string;\n  /** Rendered outside the preview stage. Resolved against the document. */\n  portal?: boolean;\n}\n\nexport type PartDeclaration = string | PartLocator;\n\n/**\n * An editor control the preview is gated behind: a canvas-toolbar checkbox, an\n * optional-content switch. `check` sets a checkbox to a state and is safe to\n * repeat; `value` picks a select option; neither clicks once.\n */\nexport interface ControlStep {\n  kind: 'control';\n  /** Selector inside the visible variant group. */\n  selector: string;\n  check?: boolean;\n  value?: string;\n}\n\nexport type SetupStep = InteractionAction | ControlStep;\n\n/** Which VariantGroup, which state tab, and what has to happen first. */\nexport interface View {\n  /** Variant tab label. Omitted when the editor renders one variant. */\n  variant?: string;\n  /** State tab label. Omitted when the editor renders no state strip. */\n  state?: string;\n  /** Run after the tabs are selected. Portaled and toolbar-gated parts exist\n   *  only once these have run. */\n  setup?: SetupStep[];\n}\n\n/** Part key -> CSS property -> the design token that must drive it. */\nexport type PaintMap = Record<string, Record<string, string>>;\n\nexport interface PropertyExpectation extends View {\n  paints: PaintMap;\n}\n\nexport interface StateExpectation extends View {\n  state: string;\n  /** Class the root part carries while the editor previews this state. */\n  forceClass?: string;\n  /** Part key -> attributes it must carry. A null value requires the absence. */\n  attributes?: Record<string, Record<string, string | null>>;\n  /** What the state repaints, as computed-value equality against its token. */\n  paints?: PaintMap;\n}\n\n/**\n * `token` and `opacity` drive the token selector for `variable`. `gradient`\n * drives the gradient editor for `variable`. `literal` drives `control` and\n * reads `variable` back off the root, which is where an intrinsic lands: the\n * editors write those into the alias bucket. `config` drives `control` and\n * reads `configKey` out of the config bucket, which holds editor metadata that\n * never reaches `:root`.\n */\nexport type PersistenceShape = 'token' | 'literal' | 'opacity' | 'gradient' | 'config';\n\nexport interface PersistenceCase extends View {\n  shape: PersistenceShape;\n  /** The alias the value is read back from. Omitted for `config`. */\n  variable?: string;\n  /** Selector inside the visible variant group, for `literal` and `config`. */\n  control?: string;\n  /** The config-bucket key, for `config`. */\n  configKey?: string;\n  /** Where the persisted value must land once the page has reloaded. */\n  observe: { part: string; css: string };\n}\n\nexport interface PersistenceExpectation {\n  cases: PersistenceCase[];\n  /** The alias Reset must return to the value the server holds for it. It has\n   *  to be one a case above moves, so the saved value and the value the\n   *  component booted with are different and Reset can be seen to choose. */\n  resetVariable: string;\n}\n\nexport interface ThemeExpectation extends View {\n  /** Theme slug shown in the Theme Picker, e.g. `ocean`. */\n  theme: string;\n  /** Variables whose root value the theme must move. */\n  changed: string[];\n  /**\n   * Variables the theme must leave exactly as they were. Two theme JSON files\n   * can name the identical design token (e.g. both `--border-neutral`) and\n   * still resolve to different rendered colors, because many color primitives\n   * are computed per theme from a palette/seed even when the alias string is\n   * unchanged — comparing the two files' alias *names* does not establish\n   * invariance. Pick `unchanged` candidates from token families a theme never\n   * recolors: `--shadow-*`, `--icon-size-*`, `--font-size-*`,\n   * `--line-height-*`, `--font-family`/`--font-mono`, and the spacing/radius/\n   * border-width scale steps (`--space-*`, `--radius-*`, `--border-width-*`)\n   * are all fixed constants, not palette-derived — verify a candidate's\n   * *resolved* value is identical between the two theme files before trusting\n   * it, not just that the alias name matches.\n   */\n  unchanged: string[];\n  /** Variables the theme's own component config aliases, and the design token\n   *  each must resolve to under it. */\n  aliasedTo: Record<string, string>;\n  /** Where the theme's value must land in the rendered preview. */\n  observe: { part: string; css: string; variable: string };\n}\n\nexport type InteractionAction =\n  | { kind: 'press'; part: string; key: string }\n  | { kind: 'click'; part: string }\n  | { kind: 'type'; part: string; text: string }\n  | { kind: 'dragTo'; part: string; along: string; fraction: number };\n\nexport type InteractionOutcome =\n  | { kind: 'attribute'; part: string; name: string; value: string }\n  | { kind: 'valueMoves'; part: string; direction: 'up' | 'down' }\n  | { kind: 'valueBecomes'; part: string; value: string }\n  | { kind: 'valueChanges'; part: string }\n  | { kind: 'valueHolds'; part: string }\n  /** Whether the part takes focus. The only outcome a button with no state\n   *  attribute has: a disabled one refuses it and an enabled one takes it. */\n  | { kind: 'focused'; part: string; value: boolean };\n\nexport interface InteractionCase extends View {\n  name: string;\n  action: InteractionAction;\n  expect: InteractionOutcome;\n}\n\nexport interface InteractionExpectation {\n  /** The part carrying the interactive role. */\n  part: string;\n  role: string;\n  cases: InteractionCase[];\n}\n\n/**\n * One mounted case under happy-dom: props in, a DOM event, one assertion. It\n * carries what a browser cannot reach, the callback a controlled component\n * calls instead of moving its own state.\n */\nexport interface BehaviorCase {\n  name: string;\n  /** Props the fixture mounts with. A snippet-valued prop is not\n   *  expressible; a component whose behavior needs one records that case\n   *  as inapplicable with the reason. */\n  props?: Record<string, unknown>;\n  action?: { kind: 'click' | 'keydown' | 'input'; part: string; key?: string; value?: string };\n  expect:\n    | { kind: 'callback'; prop: string; args: unknown[] }\n    | { kind: 'no-callback'; prop: string }\n    | { kind: 'attribute'; part: string; name: string; value: string | null }\n    | { kind: 'text'; part: string; value: string };\n}\n\nexport interface BehaviorExpectation {\n  cases: BehaviorCase[];\n}\n\nexport interface SketchPartExpectation {\n  part: string;\n  /** The design token `--sketch-fill` must resolve to on this part. */\n  fill?: string;\n  /** The design token `--sketch-stroke` must resolve to on this part. */\n  stroke?: string;\n}\n\nexport interface SketchExpectation extends View {\n  /** Sketchstyle id the paint is asserted under. */\n  style: string;\n  parts: SketchPartExpectation[];\n}\n\nexport interface ComponentContract {\n  id: string;\n  origin: 'system' | 'custom';\n  parts: Record<string, PartDeclaration>;\n  /** Part key of the component's own root element in the preview. */\n  root: string;\n  /** The view every obligation opens with. */\n  view?: View;\n  states: StateExpectation[] | Inapplicable;\n  properties: PropertyExpectation[];\n  /**\n   * Aliases no paint map can pin, each with the reason. A token consumed\n   * inside `calc()` or handed to a gradient function never appears verbatim in\n   * a computed style, so the probe cannot read it back — that is the only\n   * class this belongs to. A token a sibling alias merely happens to carry\n   * the same rendered value through (a base padding token behind four\n   * per-side overrides, say) is not in this class: the per-side entries pin\n   * their own aliases, not the base one, and a paint map that drives the base\n   * token directly and observes the per-side CSS property can pin it too. Put\n   * that here and Wave 4's coverage JSON records the base token as covered\n   * when nothing asserts the link between it and what actually painted.\n   */\n  uncovered?: Record<string, string>;\n  persistence: PersistenceExpectation;\n  theme: ThemeExpectation;\n  interaction: InteractionExpectation | Inapplicable;\n  /** What the component does when it is driven, proven under happy-dom. */\n  behavior: BehaviorExpectation | Inapplicable;\n  sketch: SketchExpectation | Inapplicable;\n}\n\n/** Roles whose components must declare interaction cases. */\nconst INTERACTIVE_ROLES = new Set([\n  'button', 'switch', 'checkbox', 'radio', 'slider', 'spinbutton', 'textbox',\n  'combobox', 'listbox', 'menuitem', 'tab', 'link', 'searchbox', 'option',\n]);\n\nexport function requiresInteraction(role: string | null): boolean {\n  return role !== null && INTERACTIVE_ROLES.has(role);\n}\n\nexport function partLocator(contract: ComponentContract, key: string): PartLocator {\n  const declared = contract.parts[key];\n  if (declared === undefined) {\n    throw new ContractViolation('contract-render', contract.id, `no part named \"${key}\" is declared`);\n  }\n  return typeof declared === 'string' ? { selector: declared } : declared;\n}\n"],"mappings":";AAiBO,IAAM,oBAAN,cAAgC,MAAM;AAAA,EAC3C,YACW,MACA,WACT,SACA;AACA,UAAM,IAAI,IAAI,KAAK,SAAS,KAAK,OAAO,EAAE;AAJjC;AACA;AAIT,SAAK,OAAO;AAAA,EACd;AAAA,EANW;AAAA,EACA;AAMb;AAOO,SAAS,eAAe,OAAuC;AACpE,SAAO,OAAO,UAAU,YAAY,UAAU,QAAS,MAAuB,eAAe;AAC/F;AAuNA,IAAM,oBAAoB,oBAAI,IAAI;AAAA,EAChC;AAAA,EAAU;AAAA,EAAU;AAAA,EAAY;AAAA,EAAS;AAAA,EAAU;AAAA,EAAc;AAAA,EACjE;AAAA,EAAY;AAAA,EAAW;AAAA,EAAY;AAAA,EAAO;AAAA,EAAQ;AAAA,EAAa;AACjE,CAAC;AAEM,SAAS,oBAAoB,MAA8B;AAChE,SAAO,SAAS,QAAQ,kBAAkB,IAAI,IAAI;AACpD;AAEO,SAAS,YAAY,UAA6B,KAA0B;AACjF,QAAM,WAAW,SAAS,MAAM,GAAG;AACnC,MAAI,aAAa,QAAW;AAC1B,UAAM,IAAI,kBAAkB,mBAAmB,SAAS,IAAI,kBAAkB,GAAG,eAAe;AAAA,EAClG;AACA,SAAO,OAAO,aAAa,WAAW,EAAE,UAAU,SAAS,IAAI;AACjE;","names":[]}

package/src/testing-js/{chunk-FAFOAWYL.js → chunk-Q3YIAAG3.js}

@@ -1,9 +1,18 @@
+import {
+  CONTRACTS_MODULE_ENV
+} from "./chunk-ZMZQZ33J.js";
+
 // src/testing/vitest.ts
 import { mergeConfig } from "vite";
-var CONTRACT_INCLUDE = [import.meta.url.endsWith(".ts") ? "**/src/testing/registry.contract.ts" : "**/src/testing-js/registry.contract.js"];
+var CONTRACT_INCLUDE = import.meta.url.endsWith(".ts") ? ["**/src/testing/registry.contract.ts", "**/src/testing/component-behavior.contract.ts"] : ["**/src/testing-js/registry.contract.js", "**/src/testing-js/component-behavior.contract.js"];
 var CONTRACT_EXCLUDE = ["**/dist/**", "**/dist-plugin/**", "**/.git/**"];
 function createVitestConfig(viteConfig, options = {}) {
   return mergeConfig(viteConfig, {
+    // `svelte`'s package exports resolve to `index-server.js` without it, whose
+    // `mount` throws `lifecycle_function_unavailable`, and whose
+    // `createEventDispatcher` is a silent no-op. A project's own vite config
+    // states the condition for its build, not for a test run under happy-dom.
+    resolve: { conditions: ["browser"] },
     test: {
       include: options.include ?? CONTRACT_INCLUDE,
       exclude: options.exclude ?? CONTRACT_EXCLUDE,
@@ -28,7 +37,12 @@ function createVitestConfig(viteConfig, options = {}) {
       // reporter's `failureMessages` to attribute a finding, so nothing here
       // can afford to be summarized away.
       chaiConfig: { truncateThreshold: 0 },
-      ...options.registrySetup ? { env: { LIVE_TOKENS_REGISTRY_SETUP: options.registrySetup } } : {}
+      ...options.registrySetup || options.contractsModule ? {
+        env: {
+          ...options.registrySetup ? { LIVE_TOKENS_REGISTRY_SETUP: options.registrySetup } : {},
+          ...options.contractsModule ? { [CONTRACTS_MODULE_ENV]: options.contractsModule } : {}
+        }
+      } : {}
     }
   });
 }
@@ -36,4 +50,4 @@ function createVitestConfig(viteConfig, options = {}) {
 export {
   createVitestConfig
 };
-//# sourceMappingURL=chunk-FAFOAWYL.js.map
+//# sourceMappingURL=chunk-Q3YIAAG3.js.map

package/src/testing-js/chunk-Q3YIAAG3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../testing/vitest.ts"],"sourcesContent":["import { mergeConfig, type UserConfig } from 'vite';\nimport type { TestUserConfig } from 'vitest/config';\nimport { CONTRACTS_MODULE_ENV } from './contracts';\n\n// The barrel (`./index`) re-exports this from `./playwright`, which imports\n// `@playwright/test` at module top. A Vitest-only consumer authoring\n// `live-tokens.testing.ts` needs `defineTestingConfig` without that import\n// ever resolving, so it is reachable from here too.\nexport { defineTestingConfig, resolveTestingConfig } from './config';\nexport type { LiveTokensTestingConfig, ResolvedTestingConfig } from './config';\n\nexport interface VitestConfigOptions {\n  /** Files the run collects. Default: the shipped registry and behavior\n   *  contracts, matched both in this package and in an installed copy. */\n  include?: string[];\n  exclude?: string[];\n  setupFiles?: string[];\n  /** Default `happy-dom`, which the registry contract needs to mount a store. */\n  environment?: TestUserConfig['environment'];\n  /** Module the registry contract imports to register the project's\n   *  components. Reaches the run as an environment variable because the\n   *  contract file resolves the path itself. */\n  registrySetup?: string;\n  /** Module `selectedContracts()` imports a project's own `ComponentContract[]`\n   *  from, same env-var seam as `registrySetup` and mirroring\n   *  `createPlaywrightConfig`'s own use of it: the behavior contract's\n   *  `describe.each` runs at module top, before a test can resolve anything\n   *  for it. */\n  contractsModule?: string;\n}\n\n// Matching both extensions would double-collect each contract when a developer\n// runs build:lib without cleaning: this module's own URL is `.ts` running from\n// source and `.js` once tsup compiles it, so one set of globs follows it.\nconst CONTRACT_INCLUDE = import.meta.url.endsWith('.ts')\n  ? ['**/src/testing/registry.contract.ts', '**/src/testing/component-behavior.contract.ts']\n  : ['**/src/testing-js/registry.contract.js', '**/src/testing-js/component-behavior.contract.js'];\n\n/** Vitest's own default drops everything under `node_modules`, which is where\n *  an installed package's contract file lives. */\nconst CONTRACT_EXCLUDE = ['**/dist/**', '**/dist-plugin/**', '**/.git/**'];\n\n/**\n * The project's Vite config plus what the registry contract needs on top.\n *\n * The package ships Svelte and TypeScript source and imports a FontAwesome\n * stylesheet. Left external, Node meets that `.css` and stops with\n * `Unknown file extension \".css\"` before a single test runs, so both are\n * inlined for Vite to transform.\n */\nexport function createVitestConfig(\n  viteConfig: UserConfig,\n  options: VitestConfigOptions = {},\n): UserConfig {\n  return mergeConfig(viteConfig, {\n    // `svelte`'s package exports resolve to `index-server.js` without it, whose\n    // `mount` throws `lifecycle_function_unavailable`, and whose\n    // `createEventDispatcher` is a silent no-op. A project's own vite config\n    // states the condition for its build, not for a test run under happy-dom.\n    resolve: { conditions: ['browser'] },\n    test: {\n      include: options.include ?? CONTRACT_INCLUDE,\n      exclude: options.exclude ?? CONTRACT_EXCLUDE,\n      ...(options.setupFiles ? { setupFiles: options.setupFiles } : {}),\n      environment: options.environment ?? 'happy-dom',\n      environmentOptions: {\n        happyDOM: {\n          settings: {\n            // fontLoader injects <link rel=stylesheet> for the theme's font\n            // sources, which happy-dom would fetch from Google and Typekit for\n            // real. That puts the public internet on the release gate's\n            // critical path; treat the load as satisfied instead.\n            disableCSSFileLoading: true,\n            handleDisabledFileLoadingAsSuccess: true,\n          },\n        },\n      },\n      server: { deps: { inline: [/@motion-proto\\/live-tokens/, /@fortawesome/] } },\n      // Vitest's default preview truncates a failed array-equality assertion\n      // to `[ Array(1) ]`, which drops `checkRegistryEntry`'s actual violation\n      // text. `check-component --tests` reads that text out of the JSON\n      // reporter's `failureMessages` to attribute a finding, so nothing here\n      // can afford to be summarized away.\n      chaiConfig: { truncateThreshold: 0 },\n      ...(options.registrySetup || options.contractsModule\n        ? {\n            env: {\n              ...(options.registrySetup ? { LIVE_TOKENS_REGISTRY_SETUP: options.registrySetup } : {}),\n              ...(options.contractsModule ? { [CONTRACTS_MODULE_ENV]: options.contractsModule } : {}),\n            },\n          }\n        : {}),\n    },\n  } satisfies UserConfig);\n}\n"],"mappings":";;;;;AAAA,SAAS,mBAAoC;AAkC7C,IAAM,mBAAmB,YAAY,IAAI,SAAS,KAAK,IACnD,CAAC,uCAAuC,+CAA+C,IACvF,CAAC,0CAA0C,kDAAkD;AAIjG,IAAM,mBAAmB,CAAC,cAAc,qBAAqB,YAAY;AAUlE,SAAS,mBACd,YACA,UAA+B,CAAC,GACpB;AACZ,SAAO,YAAY,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,IAK7B,SAAS,EAAE,YAAY,CAAC,SAAS,EAAE;AAAA,IACnC,MAAM;AAAA,MACJ,SAAS,QAAQ,WAAW;AAAA,MAC5B,SAAS,QAAQ,WAAW;AAAA,MAC5B,GAAI,QAAQ,aAAa,EAAE,YAAY,QAAQ,WAAW,IAAI,CAAC;AAAA,MAC/D,aAAa,QAAQ,eAAe;AAAA,MACpC,oBAAoB;AAAA,QAClB,UAAU;AAAA,UACR,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKR,uBAAuB;AAAA,YACvB,oCAAoC;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAAA,MACA,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,8BAA8B,cAAc,EAAE,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAM3E,YAAY,EAAE,mBAAmB,EAAE;AAAA,MACnC,GAAI,QAAQ,iBAAiB,QAAQ,kBACjC;AAAA,QACE,KAAK;AAAA,UACH,GAAI,QAAQ,gBAAgB,EAAE,4BAA4B,QAAQ,cAAc,IAAI,CAAC;AAAA,UACrF,GAAI,QAAQ,kBAAkB,EAAE,CAAC,oBAAoB,GAAG,QAAQ,gBAAgB,IAAI,CAAC;AAAA,QACvF;AAAA,MACF,IACA,CAAC;AAAA,IACP;AAAA,EACF,CAAsB;AACxB;","names":[]}