@motion-proto/live-tokens 0.96.0 → 0.98.2

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

@@ -2,66 +2,68 @@ import type { Component } from 'svelte';
 import type { CatalogueEntry, Token, IntrinsicSpec } from './scaffolding/types';
 import { registerComponentSchema } from '../core/store/editorStore';
 import { attachRegistry } from './registration';
+import type { ContrastPair } from '../core/palettes/contrastPairs';
+import { registerContrastPairs } from '../core/components/contrastPairRegistry';
 
 export { registerComponent } from './registration';
 
-import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
+import BadgeEditor, { allTokens as badgeTokens, contrastPairs as badgeContrastPairs } from './BadgeEditor.svelte';
 import { catalogue as badgeCatalogue } from '../../system/components/Badge.svelte';
-import CalloutEditor, { allTokens as calloutTokens } from './CalloutEditor.svelte';
+import CalloutEditor, { allTokens as calloutTokens, contrastPairs as calloutContrastPairs } from './CalloutEditor.svelte';
 import { catalogue as calloutCatalogue } from '../../system/components/Callout.svelte';
-import CornerBadgeEditor, { allTokens as cornerBadgeTokens } from './CornerBadgeEditor.svelte';
+import CornerBadgeEditor, { allTokens as cornerBadgeTokens, contrastPairs as cornerBadgeContrastPairs } from './CornerBadgeEditor.svelte';
 import { catalogue as cornerBadgeCatalogue } from '../../system/components/CornerBadge.svelte';
-import ButtonEditor, { allTokens as buttonTokens } from './ButtonEditor.svelte';
+import ButtonEditor, { allTokens as buttonTokens, intrinsics as buttonIntrinsics, contrastPairs as buttonContrastPairs } from './ButtonEditor.svelte';
 import { catalogue as buttonCatalogue } from '../../system/components/Button.svelte';
-import IconButtonEditor, { allTokens as iconButtonTokens } from './IconButtonEditor.svelte';
+import IconButtonEditor, { allTokens as iconButtonTokens, intrinsics as iconButtonIntrinsics, contrastPairs as iconButtonContrastPairs } from './IconButtonEditor.svelte';
 import { catalogue as iconButtonCatalogue } from '../../system/components/IconButton.svelte';
-import CardEditor, { allTokens as cardTokens, intrinsics as cardIntrinsics } from './CardEditor.svelte';
+import CardEditor, { allTokens as cardTokens, intrinsics as cardIntrinsics, contrastPairs as cardContrastPairs } from './CardEditor.svelte';
 import { catalogue as cardCatalogue } from '../../system/components/Card.svelte';
-import CodeSnippetEditor, { allTokens as codeSnippetTokens } from './CodeSnippetEditor.svelte';
+import CodeSnippetEditor, { allTokens as codeSnippetTokens, contrastPairs as codeSnippetContrastPairs } from './CodeSnippetEditor.svelte';
 import { catalogue as codeSnippetCatalogue } from '../../system/components/CodeSnippet.svelte';
-import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens } from './CollapsibleSectionEditor.svelte';
+import CollapsibleSectionEditor, { allTokens as collapsibleSectionTokens, contrastPairs as collapsibleSectionContrastPairs } from './CollapsibleSectionEditor.svelte';
 import { catalogue as collapsibleSectionCatalogue } from '../../system/components/CollapsibleSection.svelte';
-import DialogEditor, { allTokens as dialogTokens } from './DialogEditor.svelte';
+import DialogEditor, { allTokens as dialogTokens, contrastPairs as dialogContrastPairs } from './DialogEditor.svelte';
 import { catalogue as dialogCatalogue } from '../../system/components/Dialog.svelte';
 import ImageEditor, { allTokens as imageTokens, intrinsics as imageIntrinsics } from './ImageEditor.svelte';
 import { catalogue as imageCatalogue } from '../../system/components/Image.svelte';
-import ImageLightboxEditor, { allTokens as imageLightboxTokens } from './ImageLightboxEditor.svelte';
+import ImageLightboxEditor, { allTokens as imageLightboxTokens, intrinsics as imageLightboxIntrinsics, contrastPairs as imageLightboxContrastPairs } from './ImageLightboxEditor.svelte';
 import { catalogue as imageLightboxCatalogue } from '../../system/components/ImageLightbox.svelte';
-import VideoLightboxEditor, { allTokens as videoLightboxTokens } from './VideoLightboxEditor.svelte';
-import VideoFrameEditor, { allTokens as videoFrameTokens } from './VideoFrameEditor.svelte';
+import VideoLightboxEditor, { allTokens as videoLightboxTokens, contrastPairs as videoLightboxContrastPairs } from './VideoLightboxEditor.svelte';
+import VideoFrameEditor, { allTokens as videoFrameTokens, contrastPairs as videoFrameContrastPairs } from './VideoFrameEditor.svelte';
 import { catalogue as videoFrameCatalogue } from '../../system/components/VideoFrame.svelte';
-import SlidePagerEditor, { allTokens as slidePagerTokens } from './SlidePagerEditor.svelte';
+import SlidePagerEditor, { allTokens as slidePagerTokens, contrastPairs as slidePagerContrastPairs } from './SlidePagerEditor.svelte';
 import { catalogue as slidePagerCatalogue } from '../../system/components/SlidePager.svelte';
 import { catalogue as videoLightboxCatalogue } from '../../system/components/VideoLightbox.svelte';
-import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens } from './InlineEditActionsEditor.svelte';
+import InlineEditActionsEditor, { allTokens as inlineEditActionsTokens, contrastPairs as inlineEditActionsContrastPairs } from './InlineEditActionsEditor.svelte';
 import { catalogue as inlineEditActionsCatalogue } from '../../system/components/InlineEditActions.svelte';
-import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
+import InputEditor, { allTokens as inputTokens, contrastPairs as inputContrastPairs } from './InputEditor.svelte';
 import { catalogue as inputCatalogue } from '../../system/components/Input.svelte';
-import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEditor.svelte';
+import MenuSelectEditor, { allTokens as menuSelectTokens, intrinsics as menuSelectIntrinsics, contrastPairs as menuSelectContrastPairs } from './MenuSelectEditor.svelte';
 import { catalogue as menuSelectCatalogue } from '../../system/components/MenuSelect.svelte';
-import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
+import NotificationEditor, { allTokens as notificationTokens, contrastPairs as notificationContrastPairs } from './NotificationEditor.svelte';
 import { catalogue as notificationCatalogue } from '../../system/components/Notification.svelte';
 import PanelEditor, { allTokens as panelTokens } from './PanelEditor.svelte';
 import { catalogue as panelCatalogue } from '../../system/components/Panel.svelte';
-import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
+import ProgressBarEditor, { allTokens as progressBarTokens, contrastPairs as progressBarContrastPairs } from './ProgressBarEditor.svelte';
 import { catalogue as progressBarCatalogue } from '../../system/components/ProgressBar.svelte';
-import SliderEditor, { allTokens as sliderTokens } from './SliderEditor.svelte';
+import SliderEditor, { allTokens as sliderTokens, contrastPairs as sliderContrastPairs } from './SliderEditor.svelte';
 import { catalogue as sliderCatalogue } from '../../system/components/Slider.svelte';
-import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
+import RadioButtonEditor, { allTokens as radioButtonTokens, contrastPairs as radioButtonContrastPairs } from './RadioButtonEditor.svelte';
 import { catalogue as radioButtonCatalogue } from '../../system/components/RadioButton.svelte';
-import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics } from './SectionDividerEditor.svelte';
+import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics, contrastPairs as sectionDividerContrastPairs } from './SectionDividerEditor.svelte';
 import { catalogue as sectionDividerCatalogue } from '../../system/components/SectionDivider.svelte';
-import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
+import SegmentedControlEditor, { allTokens as segmentedControlTokens, intrinsics as segmentedControlIntrinsics, contrastPairs as segmentedControlContrastPairs } from './SegmentedControlEditor.svelte';
 import { catalogue as segmentedControlCatalogue } from '../../system/components/SegmentedControl.svelte';
-import SideNavigationEditor, { allTokens as sideNavigationTokens } from './SideNavigationEditor.svelte';
+import SideNavigationEditor, { allTokens as sideNavigationTokens, intrinsics as sideNavigationIntrinsics, contrastPairs as sideNavigationContrastPairs } from './SideNavigationEditor.svelte';
 import { catalogue as sideNavigationCatalogue } from '../../system/components/SideNavigation.svelte';
-import TableEditor, { allTokens as tableTokens } from './TableEditor.svelte';
+import TableEditor, { allTokens as tableTokens, contrastPairs as tableContrastPairs } from './TableEditor.svelte';
 import { catalogue as tableCatalogue } from '../../system/components/Table.svelte';
-import TabBarEditor, { allTokens as tabBarTokens } from './TabBarEditor.svelte';
+import TabBarEditor, { allTokens as tabBarTokens, intrinsics as tabBarIntrinsics, contrastPairs as tabBarContrastPairs } from './TabBarEditor.svelte';
 import { catalogue as tabBarCatalogue } from '../../system/components/TabBar.svelte';
-import ToggleEditor, { allTokens as toggleTokens } from './ToggleEditor.svelte';
+import ToggleEditor, { allTokens as toggleTokens, contrastPairs as toggleContrastPairs } from './ToggleEditor.svelte';
 import { catalogue as toggleCatalogue } from '../../system/components/Toggle.svelte';
-import TooltipEditor, { allTokens as tooltipTokens } from './TooltipEditor.svelte';
+import TooltipEditor, { allTokens as tooltipTokens, contrastPairs as tooltipContrastPairs } from './TooltipEditor.svelte';
 import { catalogue as tooltipCatalogue } from '../../system/components/Tooltip.svelte';
 
 /** Internal narrowed union of the first-party component ids. Not exposed publicly. */
@@ -119,6 +121,10 @@ export interface RegistryEntry {
       most components have none. When present, each spec's per-variant default is
       pinned to the runtime `:global(:root)` by intrinsicsContract.test. */
   intrinsics?: IntrinsicSpec[];
+  /** Each foreground color and the layers the runtime paints behind it. The
+      palette selector reads them to show a contrast readout on the foreground's
+      row. contrastContract.test pins them to the schema. */
+  contrastPairs?: ContrastPair[];
   /** What the component is, what to use it for, and what not to use it for.
       Imported from the runtime file's own `catalogue` export — never copied —
       so registryContract.test's identity check pins it to that one source. */
@@ -142,6 +148,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SegmentedControl.svelte',
     editorComponent: SegmentedControlEditor,
     schema: segmentedControlTokens,
+    intrinsics: segmentedControlIntrinsics,
+    contrastPairs: segmentedControlContrastPairs,
     catalogue: segmentedControlCatalogue,
     origin: 'system',
   },
@@ -152,6 +160,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Button.svelte',
     editorComponent: ButtonEditor,
     schema: buttonTokens,
+    intrinsics: buttonIntrinsics,
+    contrastPairs: buttonContrastPairs,
     catalogue: buttonCatalogue,
     origin: 'system',
   },
@@ -162,6 +172,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/IconButton.svelte',
     editorComponent: IconButtonEditor,
     schema: iconButtonTokens,
+    intrinsics: iconButtonIntrinsics,
+    contrastPairs: iconButtonContrastPairs,
     catalogue: iconButtonCatalogue,
     origin: 'system',
   },
@@ -172,6 +184,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Notification.svelte',
     editorComponent: NotificationEditor,
     schema: notificationTokens,
+    contrastPairs: notificationContrastPairs,
     catalogue: notificationCatalogue,
     origin: 'system',
   },
@@ -182,6 +195,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Dialog.svelte',
     editorComponent: DialogEditor,
     schema: dialogTokens,
+    contrastPairs: dialogContrastPairs,
     catalogue: dialogCatalogue,
     origin: 'system',
   },
@@ -192,6 +206,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/RadioButton.svelte',
     editorComponent: RadioButtonEditor,
     schema: radioButtonTokens,
+    contrastPairs: radioButtonContrastPairs,
     catalogue: radioButtonCatalogue,
     origin: 'system',
   },
@@ -203,6 +218,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     editorComponent: CardEditor,
     schema: cardTokens,
     intrinsics: cardIntrinsics,
+    contrastPairs: cardContrastPairs,
     catalogue: cardCatalogue,
     origin: 'system',
   },
@@ -213,6 +229,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Badge.svelte',
     editorComponent: BadgeEditor,
     schema: badgeTokens,
+    contrastPairs: badgeContrastPairs,
     catalogue: badgeCatalogue,
     origin: 'system',
   },
@@ -223,6 +240,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Callout.svelte',
     editorComponent: CalloutEditor,
     schema: calloutTokens,
+    contrastPairs: calloutContrastPairs,
     catalogue: calloutCatalogue,
     origin: 'system',
   },
@@ -233,6 +251,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CodeSnippet.svelte',
     editorComponent: CodeSnippetEditor,
     schema: codeSnippetTokens,
+    contrastPairs: codeSnippetContrastPairs,
     catalogue: codeSnippetCatalogue,
     origin: 'system',
   },
@@ -243,6 +262,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CornerBadge.svelte',
     editorComponent: CornerBadgeEditor,
     schema: cornerBadgeTokens,
+    contrastPairs: cornerBadgeContrastPairs,
     catalogue: cornerBadgeCatalogue,
     origin: 'system',
   },
@@ -264,6 +284,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/ImageLightbox.svelte',
     editorComponent: ImageLightboxEditor,
     schema: imageLightboxTokens,
+    intrinsics: imageLightboxIntrinsics,
+    contrastPairs: imageLightboxContrastPairs,
     catalogue: imageLightboxCatalogue,
     origin: 'system',
   },
@@ -274,6 +296,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/VideoLightbox.svelte',
     editorComponent: VideoLightboxEditor,
     schema: videoLightboxTokens,
+    contrastPairs: videoLightboxContrastPairs,
     catalogue: videoLightboxCatalogue,
     origin: 'system',
   },
@@ -284,6 +307,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/VideoFrame.svelte',
     editorComponent: VideoFrameEditor,
     schema: videoFrameTokens,
+    contrastPairs: videoFrameContrastPairs,
     catalogue: videoFrameCatalogue,
     origin: 'system',
   },
@@ -294,6 +318,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SlidePager.svelte',
     editorComponent: SlidePagerEditor,
     schema: slidePagerTokens,
+    contrastPairs: slidePagerContrastPairs,
     catalogue: slidePagerCatalogue,
     origin: 'system',
   },
@@ -304,6 +329,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/InlineEditActions.svelte',
     editorComponent: InlineEditActionsEditor,
     schema: inlineEditActionsTokens,
+    contrastPairs: inlineEditActionsContrastPairs,
     catalogue: inlineEditActionsCatalogue,
     origin: 'system',
   },
@@ -314,6 +340,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Input.svelte',
     editorComponent: InputEditor,
     schema: inputTokens,
+    contrastPairs: inputContrastPairs,
     catalogue: inputCatalogue,
     origin: 'system',
   },
@@ -324,6 +351,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/MenuSelect.svelte',
     editorComponent: MenuSelectEditor,
     schema: menuSelectTokens,
+    intrinsics: menuSelectIntrinsics,
+    contrastPairs: menuSelectContrastPairs,
     catalogue: menuSelectCatalogue,
     origin: 'system',
   },
@@ -345,6 +374,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     editorComponent: SectionDividerEditor,
     schema: sectionDividerTokens,
     intrinsics: sectionDividerIntrinsics,
+    contrastPairs: sectionDividerContrastPairs,
     catalogue: sectionDividerCatalogue,
     origin: 'system',
   },
@@ -355,6 +385,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/CollapsibleSection.svelte',
     editorComponent: CollapsibleSectionEditor,
     schema: collapsibleSectionTokens,
+    contrastPairs: collapsibleSectionContrastPairs,
     catalogue: collapsibleSectionCatalogue,
     origin: 'system',
   },
@@ -365,6 +396,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SideNavigation.svelte',
     editorComponent: SideNavigationEditor,
     schema: sideNavigationTokens,
+    intrinsics: sideNavigationIntrinsics,
+    contrastPairs: sideNavigationContrastPairs,
     catalogue: sideNavigationCatalogue,
     origin: 'system',
   },
@@ -375,6 +408,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Table.svelte',
     editorComponent: TableEditor,
     schema: tableTokens,
+    contrastPairs: tableContrastPairs,
     catalogue: tableCatalogue,
     origin: 'system',
   },
@@ -385,6 +419,8 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/TabBar.svelte',
     editorComponent: TabBarEditor,
     schema: tabBarTokens,
+    intrinsics: tabBarIntrinsics,
+    contrastPairs: tabBarContrastPairs,
     catalogue: tabBarCatalogue,
     origin: 'system',
   },
@@ -395,6 +431,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Toggle.svelte',
     editorComponent: ToggleEditor,
     schema: toggleTokens,
+    contrastPairs: toggleContrastPairs,
     catalogue: toggleCatalogue,
     origin: 'system',
   },
@@ -405,6 +442,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Tooltip.svelte',
     editorComponent: TooltipEditor,
     schema: tooltipTokens,
+    contrastPairs: tooltipContrastPairs,
     catalogue: tooltipCatalogue,
     origin: 'system',
   },
@@ -415,6 +453,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/ProgressBar.svelte',
     editorComponent: ProgressBarEditor,
     schema: progressBarTokens,
+    contrastPairs: progressBarContrastPairs,
     catalogue: progressBarCatalogue,
     origin: 'system',
   },
@@ -425,6 +464,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/Slider.svelte',
     editorComponent: SliderEditor,
     schema: sliderTokens,
+    contrastPairs: sliderContrastPairs,
     catalogue: sliderCatalogue,
     origin: 'system',
   },
@@ -445,6 +485,7 @@ function addCustomComponent(entry: RegisterComponentEntry): void {
   const stored: RegistryEntry = { ...entry, origin: 'custom' };
   customRegistry.set(entry.id, stored);
   registerComponentSchema(entry.id, entry.schema);
+  registerContrastPairs(entry.id, entry.contrastPairs ?? []);
 }
 
 /**
@@ -487,6 +528,7 @@ export function getComponentIds(): ReadonlyArray<string> {
 // editor instance mounts.
 for (const entry of Object.values(builtInRegistry)) {
   registerComponentSchema(entry.id, entry.schema);
+  registerContrastPairs(entry.id, entry.contrastPairs ?? []);
 }
 attachRegistry(addCustomComponent);
 

package/src/editor/component-editor/scaffolding/DemoHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import ComponentFileManager from './ComponentFileManager.svelte';
+  import A11yPanel from '../../ui/a11y/A11yPanel.svelte';
 
   interface Props {
     component: string;
@@ -17,6 +18,7 @@
 </script>
 
 <ComponentFileManager {component} {title} {resetVariables} />
+<A11yPanel {component} />
 
 {#if description}
   <p class="demo-description">{@html description}</p>

package/src/editor/component-editor/scaffolding/StateBlock.svelte

@@ -12,6 +12,7 @@
   import TokenLayout from './TokenLayout.svelte';
   import TypeEditor from './TypeEditor.svelte';
   import type { Token, TypeGroupConfig } from './types';
+  import A11yPropertyMark from '../../ui/a11y/A11yPropertyMark.svelte';
 
   
   
@@ -22,6 +23,8 @@
     checked: boolean;
     label?: string;
     onchange: (checked: boolean) => void;
+    /** The intrinsic variables the toggle writes, which mark it and let the panel reach it. */
+    variables?: string[];
   }
 
   interface Props {
@@ -111,14 +114,17 @@
         <div class="element-heading-row">
           <h4 class="element-heading">{section.element}</h4>
           {#if toggle}
-            <label class="element-show-toggle">
-              <input
-                type="checkbox"
-                checked={toggle.checked}
-                onchange={(e) => toggle.onchange((e.currentTarget as HTMLInputElement).checked)}
-              />
-              <span>{toggle.label ?? `Show ${section.element}`}</span>
-            </label>
+            <span class="element-show-toggle-host" data-token-variables={toggle.variables?.join(' ')}>
+              <label class="element-show-toggle">
+                <input
+                  type="checkbox"
+                  checked={toggle.checked}
+                  onchange={(e) => toggle.onchange((e.currentTarget as HTMLInputElement).checked)}
+                />
+                <span>{toggle.label ?? `Show ${section.element}`}</span>
+              </label>
+              {#if toggle.variables}<A11yPropertyMark variables={toggle.variables} />{/if}
+            </span>
           {/if}
         </div>
         {@render elementExtras?.(section.element)}
@@ -331,6 +337,11 @@
   /* Show toggle next to the section heading — drives preview visibility for
      the element. Property rows below stay visible so users can still tune the
      hidden element's tokens. */
+  .element-show-toggle-host {
+    display: inline-flex;
+    align-items: center;
+  }
+
   .element-show-toggle {
     display: inline-flex;
     align-items: center;

package/src/editor/component-editor/scaffolding/TokenLayout.svelte

@@ -439,6 +439,9 @@
       grid-template-columns: max-content var(--token-selector-w) minmax(0, 1fr);
       column-gap: var(--ui-space-6);
     }
+    /* A contrast readout wraps onto a line of its own below the value name. */
+    .token-grid :global(.ui-ts-meta) { flex-wrap: wrap; }
+    .token-grid :global(.ui-ts-meta > .ui-ts-meta-text) { flex-basis: 100%; }
   }
 
   .zone-divider {

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { writable } from 'svelte/store';
-  import type { Snippet } from 'svelte';
+  import { tick, untrack, type Snippet } from 'svelte';
   import TokenLayout from './TokenLayout.svelte';
   import StateBlock from './StateBlock.svelte';
   import CopyFromMenu from './CopyFromMenu.svelte';
@@ -10,7 +10,7 @@
   import { getDeclaredValue } from '../../core/palettes/tokenRegistry';
   import type { CssVarRef } from '../../core/store/editorTypes';
   import { cssStringToRef, refToCss } from '../../core/store/cssVarRef';
-  import { getEditorContext } from './editorContext';
+  import { getEditorContext, type RevealRequest } from './editorContext';
   import { setSketchScope } from '../../core/sketch/sketchLayer';
   import { sketchEnabled, sketchSettings } from '../../core/sketch/sketchStore';
   import type { Token, TypeGroupConfig } from './types';
@@ -45,7 +45,7 @@
         live with the canvas rather than in a separate config block above. */
     canvasToolbarExtras?: Snippet;
     /** Per-element Show toggles, forwarded to StateBlock. Keyed by element name. */
-    elementToggles?: Record<string, { checked: boolean; label?: string; onchange: (checked: boolean) => void }>;
+    elementToggles?: Record<string, { checked: boolean; label?: string; onchange: (checked: boolean) => void; variables?: string[] }>;
     /** Explicit order for element-grouped sections, forwarded to StateBlock. */
     elementOrder?: string[];
     /** Per-element extras snippet, forwarded to StateBlock. Receives the
@@ -101,6 +101,7 @@
   const focusedStateStore = editorCtx?.focusedState ?? writable<string | null>(null);
   const variantsStore = editorCtx?.variants ?? writable<{ value: string; label: string }[]>([]);
   const preserveColorFamilyStore = editorCtx?.preserveColorFamily ?? writable(false);
+  const revealVariableStore = editorCtx?.revealVariable ?? writable<RevealRequest | null>(null);
   let linkedOrder = $derived($linkedOrderStore ?? undefined);
 
   let activeTab: string = $state('');
@@ -372,6 +373,64 @@
   let amIFocused = $derived($focusedVariantStore === name);
   let shouldRender = $derived(!inFocusMode || amIFocused);
   let showVariantTabs = $derived(inFocusMode && $variantsStore.length >= 2);
+
+  const holds = (list: Token[] | undefined, variable: string) =>
+    !!list?.some((t) => !t.hidden && (t.variable === variable || t.mergeVariables?.includes(variable)));
+  const typeGroupHolds = (groups: TypeGroupConfig[] | undefined, variable: string) =>
+    !!groups?.some((tg) => TYPE_PROPS.some((prop) => tg[prop] === variable));
+
+  /** The tab whose rows include `variable`: '' for a group without tabs, null when it holds none. */
+  function tabHolding(variable: string): string | null {
+    if (!states) return holds(tokens, variable) ? '' : null;
+    return stateNames.find((s) => holds(states[s], variable) || typeGroupHolds(typeGroups[s], variable)) ?? null;
+  }
+
+  let searchedTab: string | null = $state(null);
+  let searchStage = $state<HTMLDivElement | undefined>(undefined);
+
+  /** The tab whose editor-authored rows include `variable`. Those rows come
+      from snippets, which show nothing of their variables until they render,
+      so each tab renders them out of sight in turn. */
+  async function snippetTabHolding(variable: string): Promise<string | null> {
+    const escaped = CSS.escape(variable);
+    const selector = `[data-token-variable="${escaped}"], [data-token-variables~="${escaped}"]`;
+    try {
+      for (const tab of stateNames) {
+        searchedTab = tab;
+        await tick();
+        if (searchStage?.querySelector(selector)) return tab;
+      }
+      return null;
+    } finally {
+      searchedTab = null;
+    }
+  }
+
+  function openTab(tab: string) {
+    if (inFocusMode) focusedVariantStore.set(name);
+    if (tab) {
+      activeTab = tab;
+      focusedStateStore.set(tab);
+    }
+  }
+
+  // Untracked so a later edit, which rebuilds `states`, never pulls the tabs back to an old request.
+  $effect(() => {
+    const request = $revealVariableStore;
+    if (!request) return;
+    untrack(() => {
+      const tab = tabHolding(request.variable);
+      if (tab !== null) {
+        openTab(tab);
+        return;
+      }
+      if (!shouldRender || !states || !(stateActions || extraPropertyRowsTop || extraPropertyRows)) return;
+      request.searches.push(snippetTabHolding(request.variable).then((found) => {
+        if (found !== null) openTab(found);
+      }));
+    });
+  });
+
   // Mirror state-tab clicks to the shared store so linked-block + chart track them.
   $effect(() => {
     if (amIFocused && activeTab && stateNames.includes(activeTab) && $focusedStateStore !== activeTab) {
@@ -484,6 +543,14 @@
       {/if}
     </div>
 
+    {#if searchedTab !== null}
+      <div hidden inert bind:this={searchStage}>
+        {@render stateActions?.(searchedTab)}
+        {@render extraPropertyRowsTop?.(searchedTab)}
+        {@render extraPropertyRows?.(searchedTab)}
+      </div>
+    {/if}
+
     {#if activeTab && states[activeTab]}
       {@const stateName = activeTab}
       {@render compositeControls?.(stateName)}
@@ -818,13 +885,6 @@
     color: var(--ui-text-tertiary);
   }
 
-  /* Anchor dropdown to the trigger's right edge; the toolbar sits flush against
-     the editor's right gutter, so a left-anchored dropdown would clip. */
-  .canvas-toolbar :global(.ui-ts-dropdown) {
-    left: auto;
-    right: 0;
-  }
-
   .variant-tabs {
     display: inline-flex;
     flex-wrap: wrap;

package/src/editor/component-editor/scaffolding/editorContext.ts

@@ -5,6 +5,9 @@ const KEY = Symbol('editor-context');
 
 export type VariantOption = { value: string; label: string };
 
+/** A request to show a variable's row. A group that has to search its tabs adds the search, so the requester can wait for it. */
+export type RevealRequest = { variable: string; searches: Promise<void>[] };
+
 export type EditorContext = {
   /** Per-variable rank for TokenLayout row alignment; null when no linked block. */
   linkedOrder: Readable<Map<string, number> | null>;
@@ -20,6 +23,8 @@ export type EditorContext = {
       on context (not local to CopyFromMenu) so it survives VariantGroup remounts
       when the user changes which variant is focused. */
   preserveColorFamily: Writable<boolean>;
+  /** Rebuilt per request. The VariantGroup holding the variable focuses its variant and opens its tab. */
+  revealVariable: Writable<RevealRequest | null>;
 };
 
 /** Mutable handle for ComponentEditorBase. */
@@ -35,6 +40,7 @@ export function createEditorContext(): EditorContextInternal {
   const focusedState = writable<string | null>(null);
   const hoveredLinkedVariable = writable<string | null>(null);
   const preserveColorFamily = writable<boolean>(false);
+  const revealVariable = writable<RevealRequest | null>(null);
   const ctx: EditorContextInternal = {
     linkedOrder: _linkedOrder,
     focusedVariant,
@@ -42,6 +48,7 @@ export function createEditorContext(): EditorContextInternal {
     focusedState,
     hoveredLinkedVariable,
     preserveColorFamily,
+    revealVariable,
     _linkedOrder,
     _variants,
   };