@motion-proto/live-tokens 0.78.0 → 0.80.0

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

@@ -4,7 +4,7 @@
 
   export const component = 'collapsiblesection';
 
-  const VARIANTS = ['chromeless', 'divider', 'container'] as const;
+  const VARIANTS = ['chromeless', 'hairline', 'container'] as const;
   type Variant = typeof VARIANTS[number];
   const HEADER_STATES = ['default', 'hover'] as const;
   type HeaderState = typeof HEADER_STATES[number];
@@ -15,12 +15,12 @@
 
   const VARIANT_LABELS: Record<Variant, string> = {
     chromeless: 'Chromeless',
-    divider: 'With Divider',
+    hairline: 'With Hairline',
     container: 'Container',
   };
 
-  // Header tokens per variant. Chromeless has no chrome; divider exposes the
-  // hairline under the header per state; container's outer chrome lives
+  // Header tokens per variant. Chromeless has no chrome; hairline exposes the
+  // line under the header per state; container's outer chrome lives
   // in the Container part so the header strip just owns surface + padding + text.
   function headerStateTokens(v: Variant, s: HeaderState): Token[] {
     const p = `--collapsiblesection-${v}-${s}`;
@@ -30,10 +30,10 @@
       { label: 'icon color', groupKey: 'icon', variable: `${p}-icon` },
       { label: 'icon size', canBeLinked: true, groupKey: 'font-size', variable: `${p}-icon-size` },
     ];
-    if (v === 'divider') {
+    if (v === 'hairline') {
       base.splice(1, 0,
-        { label: 'divider color', groupKey: 'hairline-color', variable: `${p}-hairline-color` },
-        { label: 'divider thickness', canBeLinked: true, groupKey: 'hairline-thickness', variable: `${p}-hairline-thickness` },
+        { label: 'hairline color', groupKey: 'hairline-color', variable: `${p}-hairline-color` },
+        { label: 'hairline width', canBeLinked: true, groupKey: 'hairline-width', variable: `${p}-hairline-width` },
       );
     }
     return base;
@@ -46,11 +46,10 @@
     { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--collapsiblesection-container-frame-radius' },
   ];
 
-  // Body: revealed content area. Chromeless/divider only own padding; container
+  // Body: revealed content area. Chromeless/hairline only own padding; container
   // also paints its own surface so the body can read distinct from the header.
-  // (CSS var name keeps the `expanded` slug for backward compatibility.)
   function bodyTokens(v: Variant): Token[] {
-    const p = `--collapsiblesection-${v}-expanded`;
+    const p = `--collapsiblesection-${v}-open`;
     const tokens: Token[] = [];
     if (v === 'container') tokens.push({ label: 'surface color', groupKey: 'surface', variable: `${p}-surface` });
     tokens.push({ label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `${p}-padding` });
@@ -107,13 +106,13 @@
         [`--collapsiblesection-${v}-${s}-label-font-weight`, `${v} ${s}`],
         [`--collapsiblesection-${v}-${s}-label-line-height`, `${v} ${s}`],
       ];
-      if (v === 'divider') base.push([`--collapsiblesection-divider-${s}-hairline-thickness`, `divider ${s}`]);
+      if (v === 'hairline') base.push([`--collapsiblesection-hairline-${s}-hairline-width`, `hairline ${s}`]);
       return base;
     })),
     ['--collapsiblesection-container-frame-border-width', 'container frame'],
     ['--collapsiblesection-container-frame-radius', 'container frame'],
     ...VARIANTS.flatMap((v) => [
-      [`--collapsiblesection-${v}-expanded-padding`, `${v} expanded`] as [string, string],
+      [`--collapsiblesection-${v}-open-padding`, `${v} open`] as [string, string],
     ]),
   ]);
 
@@ -135,7 +134,7 @@
   ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, divider, container." tokens={allTokens} {linked} variants={variantOptions}>
+<ComponentEditorBase {component} title="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, hairline, container." tokens={allTokens} {linked} variants={variantOptions}>
   {#each VARIANTS as v}
     <VariantGroup
       name={v}
@@ -153,14 +152,14 @@
         <CollapsibleSection
           variant={v}
           label="Click to expand"
-          expanded={isBody}
+          open={isBody}
           class={forceClass}
         >
           <p style="margin: 0; color: var(--text-secondary);">
             {#if isContainerPart}
               (Container) — outer chrome only; switch to Body to see the content area.
             {:else}
-              This content is revealed when the section is expanded. Any content can go here.
+              This content is revealed when the section is open. Any content can go here.
             {/if}
           </p>
         </CollapsibleSection>

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

@@ -8,25 +8,25 @@
   // Shape, spacing, type — uniform across variants, one flat token set.
   // Authored from any variant's panel; edits write the same flat keys.
   const baseTokens: Token[] = [
-    { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: '--corner-badge-margin', element: 'frame' },
-    { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: '--corner-badge-padding', element: 'frame' },
-    { label: 'outer corner radius', canBeLinked: true, groupKey: 'outer-radius', variable: '--corner-badge-outer-radius', element: 'frame' },
-    { label: 'inner corner radius', canBeLinked: true, groupKey: 'inner-radius', variable: '--corner-badge-inner-radius', element: 'frame' },
-    { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: '--corner-badge-h-axis-radius', element: 'frame' },
-    { label: 'vertical-axis radius', canBeLinked: true, groupKey: 'v-axis-radius', variable: '--corner-badge-v-axis-radius', element: 'frame' },
-    { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: '--corner-badge-text-font-family', element: 'text' },
-    { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: '--corner-badge-text-font-size', element: 'text' },
-    { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: '--corner-badge-text-font-weight', element: 'text' },
-    { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: '--corner-badge-text-line-height', element: 'text' },
+    { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: '--cornerbadge-margin', element: 'frame' },
+    { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: '--cornerbadge-padding', element: 'frame' },
+    { label: 'outer corner radius', canBeLinked: true, groupKey: 'outer-radius', variable: '--cornerbadge-outer-radius', element: 'frame' },
+    { label: 'inner corner radius', canBeLinked: true, groupKey: 'inner-radius', variable: '--cornerbadge-inner-radius', element: 'frame' },
+    { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: '--cornerbadge-h-axis-radius', element: 'frame' },
+    { label: 'vertical-axis radius', canBeLinked: true, groupKey: 'v-axis-radius', variable: '--cornerbadge-v-axis-radius', element: 'frame' },
+    { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: '--cornerbadge-text-font-family', element: 'text' },
+    { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: '--cornerbadge-text-font-size', element: 'text' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: '--cornerbadge-text-font-weight', element: 'text' },
+    { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: '--cornerbadge-text-line-height', element: 'text' },
   ];
 
   // Per-variant color slots — surface, border, text — rebind the inner Badge's
-  // colors inside .corner-badge-{v} scope.
+  // colors inside .cornerbadge-{v} scope.
   function variantColorTokens(v: Variant): Token[] {
     return [
-      { label: 'surface color', groupKey: 'surface', variable: `--corner-badge-${v}-surface` },
-      { label: 'border color', groupKey: 'border', variable: `--corner-badge-${v}-border` },
-      { label: 'text color', groupKey: 'text', variable: `--corner-badge-${v}-text` },
+      { label: 'surface color', groupKey: 'surface', variable: `--cornerbadge-${v}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--cornerbadge-${v}-border` },
+      { label: 'text color', groupKey: 'text', variable: `--cornerbadge-${v}-text` },
     ];
   }
 

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

@@ -28,8 +28,8 @@
     ],
     header: [
       { label: 'surface color', groupKey: 'surface', variable: '--dialog-header-surface' },
-      { label: 'divider color', groupKey: 'border', variable: '--dialog-header-divider' },
-      { label: 'divider width', groupKey: 'width', variable: '--dialog-header-divider-width' },
+      { label: 'hairline color', groupKey: 'border', variable: '--dialog-header-hairline-color' },
+      { label: 'hairline width', groupKey: 'width', variable: '--dialog-header-hairline-width' },
       { label: 'padding', groupKey: 'padding', variable: '--dialog-header-padding' },
       { label: 'close icon color', groupKey: 'icon', variable: '--dialog-close-icon' },
       { label: 'close icon size', groupKey: 'size', variable: '--dialog-close-icon-size' },
@@ -38,8 +38,8 @@
       { label: 'padding', groupKey: 'padding', variable: '--dialog-body-padding' },
     ],
     footer: [
-      { label: 'divider color', groupKey: 'border', variable: '--dialog-footer-divider' },
-      { label: 'divider width', groupKey: 'width', variable: '--dialog-footer-divider-width' },
+      { label: 'hairline color', groupKey: 'border', variable: '--dialog-footer-hairline-color' },
+      { label: 'hairline width', groupKey: 'width', variable: '--dialog-footer-hairline-width' },
       { label: 'padding', groupKey: 'padding', variable: '--dialog-footer-padding' },
     ],
   };
@@ -131,7 +131,7 @@
       {/if}
     {/snippet}
     <Dialog
-      show
+      open
       inline
       title="Sample Dialog"
       confirm={{ label: 'Save', onClick: () => {} }}

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

@@ -68,8 +68,8 @@
         <div class="inline-edit-demo-row">
           <span style="color: var(--text-secondary);">Editing value...</span>
           <InlineEditActions
-            onSave={() => {}}
-            onCancel={() => {}}
+            onsave={() => {}}
+            oncancel={() => {}}
             class={forceClass}
           />
         </div>

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

@@ -17,11 +17,11 @@
       { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-hover-dot-fill' },
       { label: 'dot size', groupKey: 'size', variable: '--radiobutton-hover-dot-size' },
     ],
-    active: [
-      { label: 'border color', groupKey: 'color', variable: '--radiobutton-active-dot-border-color' },
-      { label: 'border thickness', canBeLinked: true, groupKey: 'border-width', variable: '--radiobutton-active-dot-border-width' },
-      { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-active-dot-fill' },
-      { label: 'dot size', groupKey: 'size', variable: '--radiobutton-active-dot-size' },
+    selected: [
+      { label: 'border color', groupKey: 'color', variable: '--radiobutton-selected-dot-border-color' },
+      { label: 'border thickness', canBeLinked: true, groupKey: 'border-width', variable: '--radiobutton-selected-dot-border-width' },
+      { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-selected-dot-fill' },
+      { label: 'dot size', groupKey: 'size', variable: '--radiobutton-selected-dot-size' },
     ],
   };
 
@@ -42,16 +42,16 @@
       weightVariable: '--radiobutton-hover-label-font-weight',
       lineHeightVariable: '--radiobutton-hover-label-line-height',
     }],
-    active: [{
+    selected: [{
       legend: 'label',
-      colorVariable: '--radiobutton-active-label',
-      familyVariable: '--radiobutton-active-label-font-family',
-      sizeVariable: '--radiobutton-active-label-font-size',
-      weightVariable: '--radiobutton-active-label-font-weight',
-      lineHeightVariable: '--radiobutton-active-label-line-height',
+      colorVariable: '--radiobutton-selected-label',
+      familyVariable: '--radiobutton-selected-label-font-family',
+      sizeVariable: '--radiobutton-selected-label-font-size',
+      weightVariable: '--radiobutton-selected-label-font-weight',
+      lineHeightVariable: '--radiobutton-selected-label-line-height',
     }],
   };
-  const typeGroupTokens: Token[] = (['default', 'hover', 'active'] as const).flatMap((s) => [
+  const typeGroupTokens: Token[] = (['default', 'hover', 'selected'] as const).flatMap((s) => [
     { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--radiobutton-${s}-label-font-family` },
     { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--radiobutton-${s}-label-font-size` },
     { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--radiobutton-${s}-label-font-weight` },
@@ -60,19 +60,19 @@
   const linkableContexts = new Map<string, string>([
     ['--radiobutton-default-dot-border-width', 'default'],
     ['--radiobutton-hover-dot-border-width', 'hover'],
-    ['--radiobutton-active-dot-border-width', 'active'],
+    ['--radiobutton-selected-dot-border-width', 'selected'],
     ['--radiobutton-default-label-font-family', 'default'],
     ['--radiobutton-hover-label-font-family', 'hover'],
-    ['--radiobutton-active-label-font-family', 'active'],
+    ['--radiobutton-selected-label-font-family', 'selected'],
     ['--radiobutton-default-label-font-size', 'default'],
     ['--radiobutton-hover-label-font-size', 'hover'],
-    ['--radiobutton-active-label-font-size', 'active'],
+    ['--radiobutton-selected-label-font-size', 'selected'],
     ['--radiobutton-default-label-font-weight', 'default'],
     ['--radiobutton-hover-label-font-weight', 'hover'],
-    ['--radiobutton-active-label-font-weight', 'active'],
+    ['--radiobutton-selected-label-font-weight', 'selected'],
     ['--radiobutton-default-label-line-height', 'default'],
     ['--radiobutton-hover-label-line-height', 'hover'],
-    ['--radiobutton-active-label-line-height', 'active'],
+    ['--radiobutton-selected-label-line-height', 'selected'],
   ]);
   export const allTokens: Token[] = [
     ...Object.values(states).flat(),
@@ -108,23 +108,23 @@
   >
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      {@const forceActive = activeState === 'active'}
+      {@const forceSelected = activeState === 'selected'}
       <div class="radio-demo-row">
         <RadioButton
           label="Defense"
-          active={forceActive || selectedRadio === 'option-a'}
+          selected={forceSelected || selectedRadio === 'option-a'}
           class={forceClass}
           on:click={() => (selectedRadio = 'option-a')}
         />
         <RadioButton
           label="Economy"
-          active={forceActive || selectedRadio === 'option-b'}
+          selected={forceSelected || selectedRadio === 'option-b'}
           class={forceClass}
           on:click={() => (selectedRadio = 'option-b')}
         />
         <RadioButton
           label="Loyalty"
-          active={forceActive || selectedRadio === 'option-c'}
+          selected={forceSelected || selectedRadio === 'option-c'}
           class={forceClass}
           on:click={() => (selectedRadio = 'option-c')}
         />

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

@@ -33,22 +33,22 @@
   function hairlineTokens(v: Variant): Token[] {
     return [
       { label: 'hairline color', canBeLinked: true, groupKey: 'hairline-color', variable: `--sectiondivider-${v}-hairline-color`, element: 'hairline' },
-      { label: 'hairline thickness', canBeLinked: true, groupKey: 'hairline-thickness', variable: `--sectiondivider-${v}-hairline-thickness`, element: 'hairline' },
+      { label: 'hairline width', canBeLinked: true, groupKey: 'hairline-width', variable: `--sectiondivider-${v}-hairline-width`, element: 'hairline' },
     ];
   }
-  function backgroundTokens(v: Variant): Token[] {
+  function surfaceTokens(v: Variant): Token[] {
     return [
-      { label: 'background', groupKey: 'background', variable: `--sectiondivider-${v}-background`, kind: 'gradient', family: variants.find((x) => x.key === v)!.family },
+      { label: 'surface', groupKey: 'surface', variable: `--sectiondivider-${v}-surface`, kind: 'gradient', family: variants.find((x) => x.key === v)!.family },
     ];
   }
   function variantTokens(v: Variant): Token[] {
-    return [...containerTokens(v), ...hairlineTokens(v), ...backgroundTokens(v), ...typePaddingTokens(v)];
+    return [...containerTokens(v), ...hairlineTokens(v), ...surfaceTokens(v), ...typePaddingTokens(v)];
   }
   function stateTokens(v: Variant): Token[] {
     return [
       ...containerTokens(v),
       ...hairlineTokens(v),
-      ...backgroundTokens(v).map((t) => ({ ...t, hidden: true })),
+      ...surfaceTokens(v).map((t) => ({ ...t, hidden: true })),
       ...typePaddingTokens(v),
     ];
   }
@@ -117,7 +117,7 @@
 
   const LINKED_GROUP_KEYS = [
     'container-padding', 'radius', 'border', 'border-width', 'shadow',
-    'hairline-color', 'hairline-thickness',
+    'hairline-color', 'hairline-width',
     'title-color', 'description-color', 'eyebrow-color',
     'title-padding', 'description-padding', 'eyebrow-padding',
     'title-font-family', 'title-font-weight', 'title-line-height', 'title-letter-spacing',
@@ -292,7 +292,7 @@
   let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(stateTokens(v), linked.varSet));
 
   const gradientSources = Object.fromEntries(
-    variants.map((v) => [v.key, componentGradientSource(component, `--sectiondivider-${v.key}-background`)]),
+    variants.map((v) => [v.key, componentGradientSource(component, `--sectiondivider-${v.key}-surface`)]),
   ) as Record<Variant, ReturnType<typeof componentGradientSource>>;
 
   // Family swap on color-family change: for every alias under this variant

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

@@ -13,9 +13,9 @@
       { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--segmentedcontrol-bar-surface' },
       { label: 'border color', element: 'frame', groupKey: 'border', variable: '--segmentedcontrol-bar-border' },
       { label: 'border width', element: 'frame', groupKey: 'width', variable: '--segmentedcontrol-bar-border-width' },
-      { label: 'color', element: 'divider', groupKey: 'color', variable: '--segmentedcontrol-divider-color' },
-      { label: 'width', element: 'divider', groupKey: 'thickness', variable: '--segmentedcontrol-divider-thickness' },
-      { label: 'inset', element: 'divider', groupKey: 'divider-inset', variable: '--segmentedcontrol-divider-inset' },
+      { label: 'color', element: 'hairline', groupKey: 'color', variable: '--segmentedcontrol-hairline-color' },
+      { label: 'width', element: 'hairline', groupKey: 'hairline-width', variable: '--segmentedcontrol-hairline-width' },
+      { label: 'inset', element: 'hairline', groupKey: 'hairline-inset', variable: '--segmentedcontrol-hairline-inset' },
       { label: 'corner radius', element: 'frame', groupKey: 'radius', variable: '--segmentedcontrol-bar-radius' },
       { label: 'option gap', element: 'frame', groupKey: 'gap', variable: '--segmentedcontrol-bar-gap' },
       { label: 'padding', element: 'frame', variable: '--segmentedcontrol-bar-padding', groupKey: 'bar-padding' },
@@ -54,8 +54,8 @@
     'control bar': [
       { label: 'corner radius', element: 'frame', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
       { label: 'padding', element: 'frame', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
-      { label: 'inset', element: 'divider', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-small-divider-inset' },
-      { label: 'width', element: 'divider', groupKey: 'small-divider-thickness', variable: '--segmentedcontrol-small-divider-thickness' },
+      { label: 'inset', element: 'hairline', groupKey: 'small-hairline-inset', variable: '--segmentedcontrol-small-hairline-inset' },
+      { label: 'width', element: 'hairline', groupKey: 'small-hairline-width', variable: '--segmentedcontrol-small-hairline-width' },
     ],
     'option base': [
       { label: 'icon size', groupKey: 'small-icon-size', variable: '--segmentedcontrol-option-small-icon-size' },

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

@@ -5,10 +5,10 @@
   export const component = 'sidenavigation';
 
   // Single-variant component with five structural parts. Three of them (Title,
-  // Item, Footer) carry default/hover/active interaction sub-states; Toggle
+  // Item, Footer) carry default/hover/selected interaction sub-states; Toggle
   // carries default/hover. Panel is geometry only. Keys use the " / " convention
   // VariantGroup recognises for two-tier parts/state strips.
-  const STATEFUL_STATES = ['default', 'hover', 'active'] as const;
+  const STATEFUL_STATES = ['default', 'hover', 'selected'] as const;
   const TOGGLE_STATES = ['default', 'hover'] as const;
   type StatefulState = typeof STATEFUL_STATES[number];
   type ToggleState = typeof TOGGLE_STATES[number];
@@ -16,7 +16,7 @@
   const STATE_LABELS: Record<string, string> = {
     default: 'Default',
     hover: 'Hover',
-    active: 'Active',
+    selected: 'Selected',
   };
 
   // --- Panel --------------------------------------------------------------
@@ -42,14 +42,14 @@
   // Title is a flex card containing the label box + toggle box. Per-state
   // tokens drive the card chrome (surface, border, padding); the stateless
   // bar + label-box structure lives in `titleBlockTokens` since it doesn't
-  // vary across default/hover/active.
+  // vary across default/hover/selected.
   function titleStateTokens(s: StatefulState): Token[] {
     return [
       { label: 'surface color', groupKey: 'title-surface', variable: `--sidenavigation-title-${s}-surface` },
       { label: 'border color', groupKey: 'title-border', variable: `--sidenavigation-title-${s}-border` },
       { label: 'border width', canBeLinked: true, groupKey: 'title-border-width', variable: `--sidenavigation-title-${s}-border-width` },
-      { label: 'indicator color', groupKey: 'title-accent', variable: `--sidenavigation-title-${s}-accent` },
-      { label: 'indicator width', canBeLinked: true, groupKey: 'title-accent-width', variable: `--sidenavigation-title-${s}-accent-width` },
+      { label: 'indicator color', groupKey: 'title-indicator', variable: `--sidenavigation-title-${s}-indicator` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'title-indicator-width', variable: `--sidenavigation-title-${s}-indicator-width` },
       { label: 'padding', canBeLinked: true, groupKey: 'title-padding', variable: `--sidenavigation-title-${s}-padding` },
     ];
   }
@@ -105,8 +105,8 @@
   function sectionStateTokens(s: StatefulState): Token[] {
     return [
       { label: 'surface color', groupKey: 'section-surface', variable: `--sidenavigation-section-${s}-surface` },
-      { label: 'indicator color', groupKey: 'section-accent', variable: `--sidenavigation-section-${s}-accent` },
-      { label: 'indicator width', canBeLinked: true, groupKey: 'section-accent-width', variable: `--sidenavigation-section-${s}-accent-width` },
+      { label: 'indicator color', groupKey: 'section-indicator', variable: `--sidenavigation-section-${s}-indicator` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'section-indicator-width', variable: `--sidenavigation-section-${s}-indicator-width` },
     ];
   }
   function sectionStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
@@ -131,8 +131,8 @@
     return [
       { label: 'surface color', groupKey: 'item-surface', variable: `--sidenavigation-item-${s}-surface` },
       { label: 'padding', canBeLinked: true, groupKey: 'item-padding', variable: `--sidenavigation-item-${s}-padding` },
-      { label: 'indicator color', groupKey: 'item-accent', variable: `--sidenavigation-item-${s}-accent` },
-      { label: 'indicator width', canBeLinked: true, groupKey: 'item-accent-width', variable: `--sidenavigation-item-${s}-accent-width` },
+      { label: 'indicator color', groupKey: 'item-indicator', variable: `--sidenavigation-item-${s}-indicator` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'item-indicator-width', variable: `--sidenavigation-item-${s}-indicator-width` },
     ];
   }
   function itemStateTypeGroups(s: StatefulState): TypeGroupConfig[] {
@@ -158,8 +158,8 @@
       { label: 'surface color', groupKey: 'footer-surface', variable: `--sidenavigation-footer-${s}-surface` },
       { label: 'padding', canBeLinked: true, groupKey: 'footer-padding', variable: `--sidenavigation-footer-${s}-padding` },
       { label: 'icon gap', groupKey: 'footer-gap', variable: `--sidenavigation-footer-${s}-gap` },
-      { label: 'indicator color', groupKey: 'footer-accent', variable: `--sidenavigation-footer-${s}-accent` },
-      { label: 'indicator width', canBeLinked: true, groupKey: 'footer-accent-width', variable: `--sidenavigation-footer-${s}-accent-width` },
+      { label: 'indicator color', groupKey: 'footer-indicator', variable: `--sidenavigation-footer-${s}-indicator` },
+      { label: 'indicator width', canBeLinked: true, groupKey: 'footer-indicator-width', variable: `--sidenavigation-footer-${s}-indicator-width` },
       { label: 'icon color', groupKey: 'footer-icon', variable: `--sidenavigation-footer-${s}-icon` },
       { label: 'icon size', canBeLinked: true, groupKey: 'footer-icon-size', variable: `--sidenavigation-footer-${s}-icon-size` },
     ];
@@ -214,11 +214,11 @@
   ];
 
   // Link contexts: within each part, the per-state values share a link tree so
-  // a single edit can fan padding/border-width/typography across default/hover/active.
+  // a single edit can fan padding/border-width/typography across default/hover/selected.
   const linkableContexts = new Map<string, string>([
     ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
       [`--sidenavigation-title-${s}-border-width`, `title ${s}`],
-      [`--sidenavigation-title-${s}-accent-width`, `title ${s}`],
+      [`--sidenavigation-title-${s}-indicator-width`, `title ${s}`],
       [`--sidenavigation-title-${s}-padding`, `title ${s}`],
       [`--sidenavigation-title-${s}-label-font-family`, `title ${s}`],
       [`--sidenavigation-title-${s}-label-font-size`, `title ${s}`],
@@ -232,7 +232,7 @@
       [`--sidenavigation-toggle-${s}-icon-size`, `toggle ${s}`],
     ]),
     ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
-      [`--sidenavigation-section-${s}-accent-width`, `section ${s}`],
+      [`--sidenavigation-section-${s}-indicator-width`, `section ${s}`],
       [`--sidenavigation-section-${s}-text-font-family`, `section ${s}`],
       [`--sidenavigation-section-${s}-text-font-size`, `section ${s}`],
       [`--sidenavigation-section-${s}-text-font-weight`, `section ${s}`],
@@ -240,7 +240,7 @@
     ]),
     ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
       [`--sidenavigation-item-${s}-padding`, `item ${s}`],
-      [`--sidenavigation-item-${s}-accent-width`, `item ${s}`],
+      [`--sidenavigation-item-${s}-indicator-width`, `item ${s}`],
       [`--sidenavigation-item-${s}-text-font-family`, `item ${s}`],
       [`--sidenavigation-item-${s}-text-font-size`, `item ${s}`],
       [`--sidenavigation-item-${s}-text-font-weight`, `item ${s}`],
@@ -248,7 +248,7 @@
     ]),
     ...STATEFUL_STATES.flatMap((s): Array<[string, string]> => [
       [`--sidenavigation-footer-${s}-padding`, `footer ${s}`],
-      [`--sidenavigation-footer-${s}-accent-width`, `footer ${s}`],
+      [`--sidenavigation-footer-${s}-indicator-width`, `footer ${s}`],
       [`--sidenavigation-footer-${s}-icon-size`, `footer ${s}`],
       [`--sidenavigation-footer-${s}-text-font-family`, `footer ${s}`],
       [`--sidenavigation-footer-${s}-text-font-size`, `footer ${s}`],
@@ -349,20 +349,20 @@
     ]),
   ) as Record<string, Token[]>);
 
-  // Map the active part/state to the demo's force-hover / force-active hooks
+  // Map the shown part/state to the demo's force-hover / force-selected hooks
   // so token edits always have a row painted in that state for the viewer.
   function deriveForce(activeState: string) {
     const [part, sub] = activeState.includes(' / ') ? activeState.split(' / ') : [activeState, ''];
     const partKey = part.toLowerCase();
     const subKey = sub.toLowerCase();
     let forceHoverPart: 'title' | 'toggle' | 'item' | 'footer' | 'section' | null = null;
-    let forceActivePart: 'title' | 'item' | 'footer' | 'section' | null = null;
+    let forceSelectedPart: 'title' | 'item' | 'footer' | 'section' | null = null;
     if (subKey === 'hover' && (partKey === 'title' || partKey === 'toggle' || partKey === 'item' || partKey === 'footer' || partKey === 'section')) {
       forceHoverPart = partKey;
-    } else if (subKey === 'active' && (partKey === 'title' || partKey === 'item' || partKey === 'footer' || partKey === 'section')) {
-      forceActivePart = partKey;
+    } else if (subKey === 'selected' && (partKey === 'title' || partKey === 'item' || partKey === 'footer' || partKey === 'section')) {
+      forceSelectedPart = partKey;
     }
-    return { forceHoverPart, forceActivePart };
+    return { forceHoverPart, forceSelectedPart };
   }
 </script>
 
@@ -396,18 +396,18 @@
       {/if}
     {/snippet}
     {#snippet children({ activeState })}
-      {@const { forceHoverPart, forceActivePart } = deriveForce(activeState)}
+      {@const { forceHoverPart, forceSelectedPart } = deriveForce(activeState)}
       <div class="sn-preview-frame">
         <SideNavigation
           sections={demoSections}
           footer={demoFooter}
-          titleLabel="Title"
+          title="Title"
           titleHref="#"
           currentPath="section-1/item-2"
           open={previewOpen}
           ontoggle={() => (previewOpen = !previewOpen)}
           {forceHoverPart}
-          {forceActivePart}
+          {forceSelectedPart}
         />
       </div>
     {/snippet}

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

@@ -4,8 +4,8 @@
 
   export const component = 'tabbar';
 
-  // The tab object — four states (default/hover/active/disabled) of the same tab button.
-  const tabStateNames = ['default', 'hover', 'active', 'disabled'] as const;
+  // The tab object — four states (default/hover/selected/disabled) of the same tab button.
+  const tabStateNames = ['default', 'hover', 'selected', 'disabled'] as const;
   type TabState = typeof tabStateNames[number];
   // `element` tags split each tab state into frame / icon / indicator / text.
   // No elementOrder: it would force the flat `bar` state into grouped mode.
@@ -39,14 +39,14 @@
   // states (mirrors SegmentedControl's "control bar" + per-option states layout).
   const states: Record<string, Token[]> = {
     bar: [
-      { label: 'divider color', groupKey: 'bar-divider', variable: '--tabbar-bar-divider' },
-      { label: 'divider thickness', groupKey: 'bar-divider-thickness', variable: '--tabbar-bar-divider-thickness' },
+      { label: 'hairline color', groupKey: 'bar-hairline', variable: '--tabbar-bar-hairline-color' },
+      { label: 'hairline width', groupKey: 'bar-hairline-width', variable: '--tabbar-bar-hairline-width' },
       { label: 'space above', groupKey: 'bar-top-margin', variable: '--tabbar-bar-top-margin' },
       // Consumed via `padding-bottom: var(--tabbar-bar-bottom-padding)` — a
       // one-axis read. Splitting would produce top/left/right values that have
       // nowhere to render.
       { label: 'space below tabs', groupKey: 'bar-bottom-padding', variable: '--tabbar-bar-bottom-padding', splittable: false },
-      { label: 'space under divider', groupKey: 'bar-bottom-margin', variable: '--tabbar-bar-bottom-margin' },
+      { label: 'space under hairline', groupKey: 'bar-bottom-margin', variable: '--tabbar-bar-bottom-margin' },
       { label: 'tab gap', groupKey: 'tab-gap', variable: '--tabbar-tab-gap' },
     ],
     ...Object.fromEntries(tabStateNames.map((s) => [`${s} tab`, tabStateTokens(s)])),
@@ -176,7 +176,7 @@
     {/snippet}
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
-      <TabBar tabs={demoTabs} selectedTab={selectedDemoTab} class={forceClass} on:tabChange={(e) => (selectedDemoTab = e.detail)} />
+      <TabBar tabs={demoTabs} value={selectedDemoTab} class={forceClass} onchange={(id) => (selectedDemoTab = id)} />
       <div class="tab-content-demo">
         <p style="margin: 0;">placeholder tab content</p>
       </div>

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

@@ -15,8 +15,8 @@
     ],
     header: [
       { label: 'surface color', groupKey: 'header-surface', variable: '--table-default-header-surface' },
-      { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-header-divider' },
-      { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-header-divider-width' },
+      { label: 'hairline color', canBeLinked: true, groupKey: 'border', variable: '--table-default-header-hairline-color' },
+      { label: 'hairline width', canBeLinked: true, groupKey: 'width', variable: '--table-default-header-hairline-width' },
       { label: 'padding', groupKey: 'header-padding', variable: '--table-default-header-padding' },
     ],
     cell: [
@@ -25,12 +25,12 @@
     row: [
       { label: 'surface color', groupKey: 'row-surface', variable: '--table-default-row-surface' },
       { label: 'stripe surface', groupKey: 'row-stripe-surface', variable: '--table-default-row-stripe-surface' },
-      { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-row-divider' },
-      { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-row-divider-width' },
+      { label: 'hairline color', canBeLinked: true, groupKey: 'border', variable: '--table-default-row-hairline-color' },
+      { label: 'hairline width', canBeLinked: true, groupKey: 'width', variable: '--table-default-row-hairline-width' },
     ],
     column: [
-      { label: 'divider color', canBeLinked: true, groupKey: 'border', variable: '--table-default-column-divider' },
-      { label: 'divider width', canBeLinked: true, groupKey: 'width', variable: '--table-default-column-divider-width' },
+      { label: 'hairline color', canBeLinked: true, groupKey: 'border', variable: '--table-default-column-hairline-color' },
+      { label: 'hairline width', canBeLinked: true, groupKey: 'width', variable: '--table-default-column-hairline-width' },
     ],
   };
 

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

@@ -16,7 +16,7 @@
       { label: 'surface',      element: 'thumb', variable: '--toggle-thumb-surface' },
       { label: 'border',       element: 'thumb', variable: '--toggle-thumb-border' },
       { label: 'size',         element: 'thumb', variable: '--toggle-thumb-size' },
-      { label: 'text',         element: 'label', variable: '--toggle-label-text' },
+      { label: 'text',         element: 'label', variable: '--toggle-label' },
       { label: 'font family',  element: 'label', variable: '--toggle-label-font-family' },
       { label: 'font size',    element: 'label', variable: '--toggle-label-font-size' },
       { label: 'font weight',  element: 'label', variable: '--toggle-label-font-weight' },
@@ -39,7 +39,7 @@
     disabled: [
       { label: 'track surface', variable: '--toggle-disabled-track-surface' },
       { label: 'thumb surface', variable: '--toggle-disabled-thumb-surface' },
-      { label: 'label text',    variable: '--toggle-disabled-label-text' },
+      { label: 'label text',    variable: '--toggle-disabled-label' },
     ],
   };
 

package/src/editor/component-editor/index.ts

@@ -29,3 +29,6 @@ export type { Token } from './scaffolding/types';
 // Intrinsic spec — structural/display props an editor drives outside the token
 // grid (alignment, visibility). Pass an array as `registerComponent({ intrinsics })`.
 export type { IntrinsicSpec } from './scaffolding/types';
+
+// Catalogue entry — the shape a runtime file's `catalogue` export satisfies.
+export type { CatalogueEntry } from './scaffolding/types';