@motion-proto/live-tokens 0.9.0 → 0.10.0

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

@@ -0,0 +1,272 @@
+<script module lang="ts">
+  import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'input';
+
+  // Shape lives under a `field` pseudo-state so it reads as one decision shared by every state.
+  // Default/focused/disabled hold the per-state chrome; label/hint/error hold message-row typography.
+  // Error also carries the invalid-state border so it sits next to the error text it pairs with.
+  const states: Record<string, Token[]> = {
+    field: [
+      { label: 'corner radius', groupKey: 'radius', variable: '--input-radius' },
+      { label: 'border width', groupKey: 'border-width', variable: '--input-border-width' },
+      { label: 'padding', variable: '--input-padding', groupKey: 'padding' },
+      { label: 'padding-top', variable: '--input-padding-top', groupKey: 'padding-top', hidden: true },
+      { label: 'padding-right', variable: '--input-padding-right', groupKey: 'padding-right', hidden: true },
+      { label: 'padding-bottom', variable: '--input-padding-bottom', groupKey: 'padding-bottom', hidden: true },
+      { label: 'padding-left', variable: '--input-padding-left', groupKey: 'padding-left', hidden: true },
+      { label: 'message gap', groupKey: 'gap', variable: '--input-gap' },
+    ],
+    default: [
+      { label: 'surface color', groupKey: 'surface', variable: '--input-default-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--input-default-border' },
+      { label: 'placeholder color', groupKey: 'placeholder', variable: '--input-default-placeholder' },
+      { label: 'icon color', groupKey: 'icon', variable: '--input-default-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-default-icon-size' },
+    ],
+    focused: [
+      { label: 'surface color', groupKey: 'surface', variable: '--input-focused-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--input-focused-border' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--input-focused-border-width' },
+      { label: 'icon color', groupKey: 'icon', variable: '--input-focused-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-focused-icon-size' },
+    ],
+    disabled: [
+      { label: 'surface color', groupKey: 'surface', variable: '--input-disabled-surface' },
+      { label: 'border color', groupKey: 'border', variable: '--input-disabled-border' },
+      { label: 'icon color', groupKey: 'icon', variable: '--input-disabled-icon' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-disabled-icon-size' },
+    ],
+    label: [],
+    hint: [],
+    error: [
+      { label: 'border color', groupKey: 'border', variable: '--input-error-border' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--input-error-border-width' },
+    ],
+  };
+
+  // Per-state input text + standalone label/hint/error message typography.
+  // Slot-prefixed groupKeys keep label/hint/error from collapsing into each other.
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [{
+      legend: 'input text',
+      colorVariable: '--input-default-text',
+      familyVariable: '--input-default-text-font-family',
+      sizeVariable: '--input-default-text-font-size',
+      weightVariable: '--input-default-text-font-weight',
+      lineHeightVariable: '--input-default-text-line-height',
+    }],
+    focused: [{
+      legend: 'input text',
+      colorVariable: '--input-focused-text',
+      familyVariable: '--input-focused-text-font-family',
+      sizeVariable: '--input-focused-text-font-size',
+      weightVariable: '--input-focused-text-font-weight',
+      lineHeightVariable: '--input-focused-text-line-height',
+    }],
+    disabled: [{
+      legend: 'input text',
+      colorVariable: '--input-disabled-text',
+      familyVariable: '--input-disabled-text-font-family',
+      sizeVariable: '--input-disabled-text-font-size',
+      weightVariable: '--input-disabled-text-font-weight',
+      lineHeightVariable: '--input-disabled-text-line-height',
+    }],
+    label: [{
+      legend: 'label',
+      colorVariable: '--input-label',
+      familyVariable: '--input-label-font-family',
+      sizeVariable: '--input-label-font-size',
+      weightVariable: '--input-label-font-weight',
+      lineHeightVariable: '--input-label-line-height',
+    }],
+    hint: [{
+      legend: 'hint',
+      colorVariable: '--input-hint',
+      familyVariable: '--input-hint-font-family',
+      sizeVariable: '--input-hint-font-size',
+      weightVariable: '--input-hint-font-weight',
+      lineHeightVariable: '--input-hint-line-height',
+    }],
+    error: [{
+      legend: 'error',
+      colorVariable: '--input-error',
+      familyVariable: '--input-error-font-family',
+      sizeVariable: '--input-error-font-size',
+      weightVariable: '--input-error-font-weight',
+      lineHeightVariable: '--input-error-line-height',
+    }],
+  };
+
+  // Slot-prefixed groupKeys: input text links across default/focused/disabled;
+  // label/hint/error each isolate their own typography.
+  const inputTextStates = ['default', 'focused', 'disabled'] as const;
+  const inputTextTypographyTokens: Token[] = inputTextStates.flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'input-text-font-family', variable: `--input-${s}-text-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'input-text-font-size', variable: `--input-${s}-text-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'input-text-font-weight', variable: `--input-${s}-text-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'input-text-line-height', variable: `--input-${s}-text-line-height` },
+  ]);
+
+  const messageTypographyTokens: Token[] = (['label', 'hint', 'error'] as const).flatMap((slot) => [
+    { label: 'font family', canBeLinked: true, groupKey: `${slot}-font-family`, variable: `--input-${slot}-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: `${slot}-font-size`, variable: `--input-${slot}-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: `${slot}-font-weight`, variable: `--input-${slot}-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: `${slot}-line-height`, variable: `--input-${slot}-line-height` },
+  ]);
+
+  // colorVariable tokens from buildTypeGroupTokens are derivable but redundant — hand-built typography
+  // gives us full control. Use buildTypeGroupShareableContexts for the linkableContexts wiring only.
+  // Take the color tokens via buildTypeGroupTokens-equivalent: just enumerate them inline.
+  const typographyColorTokens: Token[] = [
+    { label: 'color', groupKey: 'text', variable: '--input-default-text' },
+    { label: 'color', groupKey: 'text', variable: '--input-focused-text' },
+    { label: 'color', groupKey: 'text', variable: '--input-disabled-text' },
+    { label: 'color', groupKey: 'label', variable: '--input-label' },
+    { label: 'color', groupKey: 'hint', variable: '--input-hint' },
+    { label: 'color', groupKey: 'error', variable: '--input-error' },
+  ];
+
+  export const allTokens: Token[] = [
+    ...Object.values(states).flat(),
+    ...typographyColorTokens,
+    ...inputTextTypographyTokens,
+    ...messageTypographyTokens,
+  ];
+
+  const linkableContexts = new Map<string, string>([
+    ...buildTypeGroupShareableContexts(typeGroups),
+    ['--input-default-icon-size', 'default'],
+    ['--input-focused-icon-size', 'focused'],
+    ['--input-disabled-icon-size', 'disabled'],
+    ['--input-focused-border-width', 'focused'],
+    ['--input-error-border-width', 'error'],
+  ]);
+
+  // Silence unused-import lint without changing behavior; buildTypeGroupTokens stays available
+  // for editors that want auto-derived color rows, but we keep ours hand-built for slot-prefixed groupKeys.
+  void buildTypeGroupTokens;
+</script>
+
+<script lang="ts">
+  import Input from '../../system/components/Input.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  type InputType = 'text' | 'number' | 'search' | 'password';
+  const typeOptions: { value: InputType; label: string }[] = [
+    { value: 'text', label: 'Text' },
+    { value: 'number', label: 'Number' },
+    { value: 'search', label: 'Search' },
+    { value: 'password', label: 'Password' },
+  ];
+
+  let previewType: InputType = $state('text');
+  let showLabel = $state(true);
+  let showHint = $state(true);
+  let showError = $state(false);
+
+  let demoValue = $state('');
+
+  let placeholderFor = $derived((t: InputType) => {
+    switch (t) {
+      case 'number': return '0';
+      case 'search': return 'Search…';
+      case 'password': return 'Enter password';
+      default: return 'Type something';
+    }
+  });
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+
+  let visibleStates = $derived(Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Input"
+  description="Single-line text/number/search/password input with optional label, hint, and validation error."
+  tokens={allTokens}
+  {linked}
+>
+  <VariantGroup
+    name="input"
+    title="Input"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+  >
+    {#snippet canvasToolbarExtras()}
+      <hr class="canvas-toolbar-divider" />
+      <label class="toolbar-field">
+        <span>Type</span>
+        <select class="canvas-toolbar-select" bind:value={previewType}>
+          {#each typeOptions as opt}
+            <option value={opt.value}>{opt.label}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="toolbar-check">
+        <input type="checkbox" bind:checked={showLabel} />
+        <span>Label</span>
+      </label>
+      <label class="toolbar-check">
+        <input type="checkbox" bind:checked={showHint} />
+        <span>Hint</span>
+      </label>
+      <label class="toolbar-check">
+        <input type="checkbox" bind:checked={showError} />
+        <span>Error</span>
+      </label>
+    {/snippet}
+    {#snippet children({ activeState })}
+      {@const forceFocus = activeState === 'focused'}
+      {@const previewDisabled = activeState === 'disabled'}
+      {@const previewError = showError || activeState === 'error' ? 'Please enter a valid value.' : ''}
+      {@const previewHint = showHint || activeState === 'hint' ? 'Helper text describing the field.' : ''}
+      {@const previewLabel = showLabel || activeState === 'label' ? 'Field label' : ''}
+      <div class="input-demo-row">
+        <Input
+          type={previewType}
+          bind:value={demoValue}
+          placeholder={placeholderFor(previewType)}
+          disabled={previewDisabled}
+          {forceFocus}
+          label={previewLabel}
+          hint={previewHint}
+          error={previewError}
+        />
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .input-demo-row {
+    display: flex;
+    width: 100%;
+    max-width: 26rem;
+  }
+
+  .toolbar-check {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: rgba(255, 255, 255, 0.78);
+    cursor: pointer;
+  }
+
+  .toolbar-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    font-size: var(--ui-font-size-xs);
+    color: rgba(255, 255, 255, 0.6);
+  }
+</style>

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

@@ -1,80 +1,60 @@
 <script module lang="ts">
-  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token } from './scaffolding/types';
 
   export const component = 'notification';
   const variants = ['info', 'success', 'warning', 'danger'] as const;
   type Variant = typeof variants[number];
 
-  // Per variant: notification frame (surface, border, border-width, radius, padding) + icon (color, size)
-  // + action backdrop surface (paints behind the optional header action button).
-  function variantTokens(v: Variant): Token[] {
+  // Base part: notification chrome, icon sizing, and both typography stacks.
+  // Tagged with `element` so StateBlock partitions the panel into labeled
+  // `frame`, `title`, and `body` subsections — the title/body split mirrors the
+  // runtime's two type stacks. Section labels mean per-row labels can stay short
+  // ('font family', not 'title font family').
+  function variantBaseTokens(v: Variant): Token[] {
+    return [
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--notification-${v}-padding`, element: 'frame' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--notification-${v}-radius`, element: 'frame' },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--notification-${v}-border-width`, element: 'frame' },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--notification-${v}-icon-size`, element: 'frame' },
+      { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: `--notification-${v}-title-font-family`, element: 'title' },
+      { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: `--notification-${v}-title-font-size`, element: 'title' },
+      { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: `--notification-${v}-title-font-weight`, element: 'title' },
+      { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: `--notification-${v}-title-line-height`, element: 'title' },
+      { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: `--notification-${v}-text-font-family`, element: 'body' },
+      { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: `--notification-${v}-text-font-size`, element: 'body' },
+      { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: `--notification-${v}-text-font-weight`, element: 'body' },
+      { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--notification-${v}-text-line-height`, element: 'body' },
+    ];
+  }
+
+  // Colors part: the six shades that distinguish info/success/warning/danger.
+  function variantColorTokens(v: Variant): Token[] {
     return [
       { label: 'surface color', groupKey: 'surface', variable: `--notification-${v}-surface` },
       { label: 'action surface', groupKey: 'action-surface', variable: `--notification-${v}-action-surface` },
       { label: 'border color', groupKey: 'border', variable: `--notification-${v}-border` },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--notification-${v}-border-width` },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--notification-${v}-radius` },
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--notification-${v}-padding` },
       { label: 'icon color', groupKey: 'icon', variable: `--notification-${v}-icon` },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--notification-${v}-icon-size` },
+      { label: 'title color', groupKey: 'title', variable: `--notification-${v}-title` },
+      { label: 'body color', groupKey: 'text', variable: `--notification-${v}-text` },
     ];
   }
 
-  // Two type groups per variant: title and body text.
-  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
-    return [
-      {
-        legend: 'title',
-        colorVariable: `--notification-${v}-title`,
-        familyVariable: `--notification-${v}-title-font-family`,
-        sizeVariable: `--notification-${v}-title-font-size`,
-        weightVariable: `--notification-${v}-title-font-weight`,
-        lineHeightVariable: `--notification-${v}-title-line-height`,
-      },
-      {
-        legend: 'body text',
-        colorVariable: `--notification-${v}-text`,
-        familyVariable: `--notification-${v}-text-font-family`,
-        sizeVariable: `--notification-${v}-text-font-size`,
-        weightVariable: `--notification-${v}-text-font-weight`,
-        lineHeightVariable: `--notification-${v}-text-line-height`,
-      },
-    ];
-  }
-  function variantTypeGroupTokens(v: Variant): Token[] {
-    return [
-      { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: `--notification-${v}-title-font-family` },
-      { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: `--notification-${v}-title-font-size` },
-      { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: `--notification-${v}-title-font-weight` },
-      { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: `--notification-${v}-title-line-height` },
-      { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: `--notification-${v}-text-font-family` },
-      { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: `--notification-${v}-text-font-size` },
-      { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: `--notification-${v}-text-font-weight` },
-      { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--notification-${v}-text-line-height` },
-    ];
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return { base: variantBaseTokens(v), colors: variantColorTokens(v) };
   }
+
   export const allTokens: Token[] = variants.flatMap((v) => [
-    ...variantTokens(v),
-    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
-    ...variantTypeGroupTokens(v),
+    ...variantBaseTokens(v),
+    ...variantColorTokens(v),
   ]);
 
-  // Linked block surfaces shape and font props that may be linked across variants.
-  const linkableContexts = new Map<string, string>(variants.flatMap((v) => [
-    [`--notification-${v}-border-width`, v] as const,
-    [`--notification-${v}-radius`, v] as const,
-    [`--notification-${v}-padding`, v] as const,
-    [`--notification-${v}-icon-size`, v] as const,
-    [`--notification-${v}-title-font-family`, v] as const,
-    [`--notification-${v}-title-font-size`, v] as const,
-    [`--notification-${v}-title-font-weight`, v] as const,
-    [`--notification-${v}-title-line-height`, v] as const,
-    [`--notification-${v}-text-font-family`, v] as const,
-    [`--notification-${v}-text-font-size`, v] as const,
-    [`--notification-${v}-text-font-weight`, v] as const,
-    [`--notification-${v}-text-line-height`, v] as const,
-  ]));
+  const linkableContexts = new Map<string, string>(
+    variants.flatMap((v) =>
+      variantBaseTokens(v)
+        .filter((t) => t.canBeLinked)
+        .map((t) => [t.variable, `${v} base`] as [string, string]),
+    ),
+  );
 
   const BUTTON_VARIANT_OPTIONS = ['none', 'primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
   type ButtonVariantOption = typeof BUTTON_VARIANT_OPTIONS[number];
@@ -98,7 +78,9 @@
   import { buildSiblings } from './scaffolding/siblings';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
 
   import type { NotificationActions } from '../../system/components/types';
 
@@ -120,10 +102,9 @@
     <VariantGroup
       name={v}
       title={v.charAt(0).toUpperCase() + v.slice(1)}
-      states={{ [v]: visibleVariantTokens(v) }}
-      typeGroups={{ [v]: variantTypeGroups(v) }}
+      states={visibleVariantStates(v)}
       {component}
-      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+      siblings={buildSiblings(variants, v, variantStates)}
     >
       {#snippet canvasToolbarExtras()}
         <hr class="canvas-toolbar-divider" />
@@ -186,6 +167,4 @@
     font-size: var(--ui-font-size-xs);
     color: rgba(255, 255, 255, 0.6);
   }
-
 </style>
-

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

@@ -3,76 +3,72 @@
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
   export const component = 'progressbar';
-  const variants = ['primary', 'success', 'warning', 'danger', 'info'] as const;
-  type Variant = typeof variants[number];
 
-  // Per variant: track (surface, border, border-width, radius, height) + fill (color).
-  function variantTokens(v: Variant): Token[] {
-    return [
-      { label: 'fill color', groupKey: 'fill', variable: `--progressbar-${v}-fill` },
-      { label: 'track surface color', groupKey: 'surface', variable: `--progressbar-${v}-track-surface` },
-      { label: 'track border color', groupKey: 'border', variable: `--progressbar-${v}-track-border` },
-      { label: 'track border width', canBeLinked: true, groupKey: 'track-border-width', variable: `--progressbar-${v}-track-border-width` },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--progressbar-${v}-radius` },
-      { label: 'track height', canBeLinked: true, groupKey: 'track-height', variable: `--progressbar-${v}-track-height` },
-    ];
-  }
+  // Single-variant component: fill color is a runtime prop on the consumer side,
+  // not a per-variant token namespace.
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'fill color', groupKey: 'fill', variable: '--progressbar-fill' },
+      { label: 'track surface color', groupKey: 'surface', variable: '--progressbar-track-surface' },
+      { label: 'track border color', groupKey: 'border', variable: '--progressbar-track-border' },
+      { label: 'track border width', canBeLinked: true, groupKey: 'track-border-width', variable: '--progressbar-track-border-width' },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--progressbar-radius' },
+      { label: 'track height', canBeLinked: true, groupKey: 'track-height', variable: '--progressbar-track-height' },
+      { label: 'label gap', groupKey: 'label-gap', variable: '--progressbar-label-gap' },
+    ],
+  };
 
-  // Two type groups per variant: label and value.
-  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
-    return [
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [
       {
         legend: 'label',
-        colorVariable: `--progressbar-${v}-label`,
-        familyVariable: `--progressbar-${v}-label-font-family`,
-        sizeVariable: `--progressbar-${v}-label-font-size`,
-        weightVariable: `--progressbar-${v}-label-font-weight`,
-        lineHeightVariable: `--progressbar-${v}-label-line-height`,
+        colorVariable: '--progressbar-label',
+        familyVariable: '--progressbar-label-font-family',
+        sizeVariable: '--progressbar-label-font-size',
+        weightVariable: '--progressbar-label-font-weight',
+        lineHeightVariable: '--progressbar-label-line-height',
       },
       {
         legend: 'value',
-        colorVariable: `--progressbar-${v}-value`,
-        familyVariable: `--progressbar-${v}-value-font-family`,
-        sizeVariable: `--progressbar-${v}-value-font-size`,
-        weightVariable: `--progressbar-${v}-value-font-weight`,
-        lineHeightVariable: `--progressbar-${v}-value-line-height`,
+        colorVariable: '--progressbar-value',
+        familyVariable: '--progressbar-value-font-family',
+        sizeVariable: '--progressbar-value-font-size',
+        weightVariable: '--progressbar-value-font-weight',
+        lineHeightVariable: '--progressbar-value-line-height',
       },
-    ];
-  }
-  function variantTypeGroupTokens(v: Variant): Token[] {
-    return [
-      { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: `--progressbar-${v}-label-font-family` },
-      { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: `--progressbar-${v}-label-font-size` },
-      { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: `--progressbar-${v}-label-font-weight` },
-      { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: `--progressbar-${v}-label-line-height` },
-      { label: 'font family', canBeLinked: true, groupKey: 'value-font-family', variable: `--progressbar-${v}-value-font-family` },
-      { label: 'font size', canBeLinked: true, groupKey: 'value-font-size', variable: `--progressbar-${v}-value-font-size` },
-      { label: 'font weight', canBeLinked: true, groupKey: 'value-font-weight', variable: `--progressbar-${v}-value-font-weight` },
-      { label: 'line height', canBeLinked: true, groupKey: 'value-line-height', variable: `--progressbar-${v}-value-line-height` },
-    ];
-  }
-  export const allTokens: Token[] = variants.flatMap((v) => [
-    ...variantTokens(v),
-    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
-    ...variantTypeGroupTokens(v),
-  ]);
+    ],
+  };
+
+  const typeGroupTokens: Token[] = [
+    { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: '--progressbar-label-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: '--progressbar-label-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: '--progressbar-label-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: '--progressbar-label-line-height' },
+    { label: 'font family', canBeLinked: true, groupKey: 'value-font-family', variable: '--progressbar-value-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'value-font-size', variable: '--progressbar-value-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'value-font-weight', variable: '--progressbar-value-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'value-line-height', variable: '--progressbar-value-line-height' },
+  ];
 
-  // Cross-variant linked block surfaces shape and font props that may be linked.
-  const linkableContexts = new Map<string, string>(variants.flatMap((v) => [
-    [`--progressbar-${v}-track-border-width`, v] as const,
-    [`--progressbar-${v}-radius`, v] as const,
-    [`--progressbar-${v}-track-height`, v] as const,
-    [`--progressbar-${v}-label-font-family`, v] as const,
-    [`--progressbar-${v}-label-font-size`, v] as const,
-    [`--progressbar-${v}-label-font-weight`, v] as const,
-    [`--progressbar-${v}-label-line-height`, v] as const,
-    [`--progressbar-${v}-value-font-family`, v] as const,
-    [`--progressbar-${v}-value-font-size`, v] as const,
-    [`--progressbar-${v}-value-font-weight`, v] as const,
-    [`--progressbar-${v}-value-line-height`, v] as const,
-  ]));
+  const linkableContexts = new Map<string, string>([
+    ['--progressbar-track-border-width', 'progressbar'],
+    ['--progressbar-radius', 'progressbar'],
+    ['--progressbar-track-height', 'progressbar'],
+    ['--progressbar-label-font-family', 'label'],
+    ['--progressbar-label-font-size', 'label'],
+    ['--progressbar-label-font-weight', 'label'],
+    ['--progressbar-label-line-height', 'label'],
+    ['--progressbar-value-font-family', 'value'],
+    ['--progressbar-value-font-size', 'value'],
+    ['--progressbar-value-font-weight', 'value'],
+    ['--progressbar-value-line-height', 'value'],
+  ]);
 
-  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+  export const allTokens: Token[] = [
+    ...Object.values(states).flat(),
+    ...buildTypeGroupColorTokens(typeGroups),
+    ...typeGroupTokens,
+  ];
 </script>
 
 <script lang="ts">
@@ -81,37 +77,25 @@
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import { editorState } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
-  import { buildSiblings } from './scaffolding/siblings';
 
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
-  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
+  let visibleStates = $derived(Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
 </script>
 
-<ComponentEditorBase {component} title="Progress Bar" description="Animated progress bar with variants." tokens={allTokens} {linked} variants={variantOptions}>
-  {#each variants as v}
-    <VariantGroup
-      name={v}
-      title={v.charAt(0).toUpperCase() + v.slice(1)}
-      states={{ [v]: visibleVariantTokens(v) }}
-      typeGroups={{ [v]: variantTypeGroups(v) }}
-      {component}
-      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
-    >
-      <div class="progress-demo-stack">
-        {#if v === 'primary'}
-          <ProgressBar value={25} label="Getting Started" variant="primary" />
-        {:else if v === 'success'}
-          <ProgressBar value={100} label="Complete" variant="success" />
-        {:else if v === 'warning'}
-          <ProgressBar value={75} label="Almost Done" variant="warning" />
-        {:else if v === 'danger'}
-          <ProgressBar value={33} label="Danger Zone" variant="danger" />
-        {:else if v === 'info'}
-          <ProgressBar value={50} label="Halfway There" variant="info" />
-        {/if}
-      </div>
-    </VariantGroup>
-  {/each}
+<ComponentEditorBase {component} title="Progress Bar" description="Animated progress bar; consumers pass a fill color via the fill prop." tokens={allTokens} {linked}>
+  <VariantGroup
+    name="progressbar"
+    title="Progress Bar"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+  >
+    <div class="progress-demo-stack">
+      <ProgressBar value={75} label="Loading" />
+    </div>
+  </VariantGroup>
 </ComponentEditorBase>
 
 <style>