@motion-proto/live-tokens 0.97.0 → 0.99.0

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'inlineeditactions';
 
@@ -38,6 +39,17 @@
     [`--inlineeditactions-${btn}-default-padding`, btn] as const,
     [`--inlineeditactions-${btn}-default-icon-size`, btn] as const,
   ]));
+
+  // Each button holds a glyph and no text, so its color is a non-text pair.
+  function buttonContrastPairs(btn: Button): ContrastPair[] {
+    return (['default', 'hover'] as const).map((state) => ({
+      foreground: `--inlineeditactions-${btn}-${state}-text`,
+      backdrop: [`--inlineeditactions-${btn}-${state}-surface`],
+      role: 'non-text',
+    }));
+  }
+
+  export const contrastPairs: ContrastPair[] = buttons.flatMap(buttonContrastPairs);
 </script>
 
 <script lang="ts">
@@ -66,7 +78,7 @@
       {#snippet children({ activeState })}
             {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
         <div class="inline-edit-demo-row">
-          <span style="color: var(--text-secondary);">Editing value...</span>
+          <span style="color: var(--text-secondary);" data-preview-demo>Editing value...</span>
           <InlineEditActions
             onsave={() => {}}
             oncancel={() => {}}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'input';
 
@@ -146,6 +147,28 @@
   // 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;
+
+  function textPair(foreground: string, state: string, backdrop: string[]): ContrastPair {
+    const g = typeGroups[state][0];
+    return { foreground, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable };
+  }
+
+  // The placeholder paints on each state's surface at that state's text size.
+  // The icon button takes the focused icon color on hover and focus while the
+  // field itself stays unfocused. Label, hint and error sit on no surface.
+  export const contrastPairs: ContrastPair[] = [
+    textPair('--input-default-text', 'default', ['--input-default-surface']),
+    textPair('--input-focused-text', 'focused', ['--input-focused-surface']),
+    { ...textPair('--input-disabled-text', 'disabled', ['--input-disabled-surface']), inactive: true },
+    { ...textPair('--input-default-placeholder', 'default', ['--input-default-surface']), context: 'default' },
+    { ...textPair('--input-default-placeholder', 'focused', ['--input-focused-surface']), context: 'focused' },
+    { ...textPair('--input-default-placeholder', 'disabled', ['--input-disabled-surface']), context: 'disabled', inactive: true },
+    { foreground: '--input-default-icon', backdrop: ['--input-default-surface'], role: 'non-text' },
+    { foreground: '--input-focused-icon', backdrop: ['--input-focused-surface'], role: 'non-text', context: 'focused' },
+    { foreground: '--input-focused-icon', backdrop: ['--input-default-surface'], role: 'non-text', context: 'icon button' },
+    { foreground: '--input-disabled-icon', backdrop: ['--input-disabled-surface'], role: 'non-text', inactive: true },
+    ...(['label', 'hint', 'error'] as const).map((slot) => textPair(`--input-${slot}`, slot, [])),
+  ];
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'menuselect';
 
@@ -106,6 +107,29 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // Every item sits on the menu surface. The check mark paints on the selected item alone.
+  const menu = '--menuselect-menu-surface';
+  function itemContrastPairs(s: 'default' | 'hover' | 'selected' | 'disabled'): ContrastPair[] {
+    const backdrop = s === 'hover'
+      ? ['--menuselect-hover-tint-enabled', '--menuselect-hover-surface', menu]
+      : [`--menuselect-${s}-surface`, menu];
+    const inactive = s === 'disabled' ? { inactive: true } : {};
+    const marks = s === 'selected' ? ['--menuselect-selected-icon', '--menuselect-selected-indicator'] : [`--menuselect-${s}-icon`];
+    return [
+      ...typeGroups[`${s} item`].map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+        ...inactive,
+      })),
+      ...marks.map((foreground): ContrastPair => ({ foreground, backdrop, role: 'non-text', ...inactive })),
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = (['default', 'hover', 'selected', 'disabled'] as const).flatMap(itemContrastPairs);
 </script>
 
 <script lang="ts">
@@ -115,6 +139,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -178,7 +203,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName === 'hover item'}
         <div class="property-row" data-token-variables="--menuselect-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--menuselect-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}
@@ -203,6 +228,7 @@
         items={previewItems}
         value={previewValue}
         forceHoverValue={previewForceHover}
+        ariaLabel="Options"
       />
     {/snippet}
   </VariantGroup>

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'notification';
   const variants = ['info', 'success', 'warning', 'danger'] as const;
@@ -67,6 +68,20 @@
   }
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  // The body color also paints the dismiss button on the header. The body has
+  // no surface, and size="small" sets its description in --font-size-sm.
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const header = [`--notification-${v}-surface`];
+    return [
+      { foreground: `--notification-${v}-title`, backdrop: header, role: 'text', fontSize: `--notification-${v}-title-font-size`, fontWeight: `--notification-${v}-title-font-weight` },
+      { foreground: `--notification-${v}-icon`, backdrop: header, role: 'non-text' },
+      { foreground: `--notification-${v}-text`, backdrop: header, role: 'non-text', context: 'dismiss button' },
+      { foreground: `--notification-${v}-text`, backdrop: [], role: 'text', fontSize: '--font-size-sm', fontWeight: `--notification-${v}-text-font-weight`, context: 'body' },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

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

@@ -58,7 +58,7 @@
     {#snippet children()}
       <div class="panel-demo">
         <Panel minHeight="6rem">
-          <div class="content-placeholder">Content Placeholder</div>
+          <div class="content-placeholder" data-preview-demo>Content Placeholder</div>
         </Panel>
       </div>
     {/snippet}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'progressbar';
 
@@ -71,6 +72,18 @@
     ...buildTypeGroupColorTokens(typeGroups, { component }),
     ...typeGroupTokens,
   ];
+
+  // The label and value sit on no surface. The fill paints on the track.
+  export const contrastPairs: ContrastPair[] = [
+    ...typeGroups.default.map((g): ContrastPair => ({
+      foreground: g.colorVariable,
+      backdrop: [],
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    })),
+    { foreground: '--progressbar-fill', backdrop: ['--progressbar-track-surface'], role: 'non-text' },
+  ];
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'radiobutton';
 
@@ -79,6 +80,24 @@
     ...buildTypeGroupColorTokens(typeGroups, { component, variants: Object.keys(states) }),
     ...typeGroupTokens,
   ];
+
+  // The button paints no surface without the `color` prop, and the default dot
+  // stays hidden.
+  function stateContrastPairs(s: 'default' | 'hover' | 'selected'): ContrastPair[] {
+    const marks = s === 'default' ? ['--radiobutton-default-dot-border-color'] : [`--radiobutton-${s}-dot-border-color`, `--radiobutton-${s}-dot-fill`];
+    return [
+      ...typeGroups[s].map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop: [],
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+      })),
+      ...marks.map((foreground): ContrastPair => ({ foreground, backdrop: [], role: 'non-text' })),
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = (['default', 'hover', 'selected'] as const).flatMap(stateContrastPairs);
 </script>
 
 <script lang="ts">
@@ -109,7 +128,7 @@
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
       {@const forceSelected = activeState === 'selected'}
-      <div class="radio-demo-row">
+      <div class="radio-demo-row" role="radiogroup" aria-label="Priority">
         <RadioButton
           label="Defense"
           selected={forceSelected || selectedRadio === 'option-a'}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'sectiondivider';
 
@@ -193,6 +194,21 @@
     },
   ];
   const INTRINSIC_BY_KEY = new Map(intrinsics.map((i) => [i.key, i]));
+
+  // The hairline is decorative: the heading carries the section break, so
+  // WCAG 2.2 SC 1.4.11 sets no floor on it and it has no pair.
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const backdrop = [`--sectiondivider-${v}-surface`];
+    return variantTypeGroups(v).map((g): ContrastPair => ({
+      foreground: g.colorVariable,
+      backdrop,
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    }));
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap((v) => variantContrastPairs(v.key));
 </script>
 
 <script lang="ts">
@@ -200,6 +216,7 @@
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import GradientEditor from '../ui/GradientEditor.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import { editorState, mutate, setComponentAlias, setComponentConfig } from '../core/store/editorStore';
   import { componentGradientSource } from '../core/store/gradientSource';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
@@ -376,16 +393,19 @@
       description: {
         checked: getShowDescription(v),
         label: 'Show description',
+        variables: [`--sectiondivider-${v}-description-display`],
         onchange: (c: boolean) => setIntrinsic(v, 'description-display', c ? 'flex' : 'none'),
       },
       eyebrow: {
         checked: getShowEyebrow(v),
         label: 'Show eyebrow',
+        variables: [`--sectiondivider-${v}-eyebrow-display`],
         onchange: (c: boolean) => setIntrinsic(v, 'eyebrow-display', c ? 'block' : 'none'),
       },
       hairline: {
         checked: getShowHairline(v),
         label: 'Show',
+        variables: [`--sectiondivider-${v}-hairline`],
         onchange: (c: boolean) => setIntrinsic(v, 'hairline', c ? getHairlinePosition(v) : 'none'),
       },
     };
@@ -431,8 +451,8 @@
         </div>
       {/snippet}
       {#snippet extraPropertyRowsTop(_stateName)}
-        <div class="property-row sd-intrinsic-row">
-          <span class="property-label">alignment</span>
+        <div class="property-row sd-intrinsic-row" data-token-variables={`--sectiondivider-${v.key}-align`}>
+          <span class="property-label">alignment<A11yPropertyMark variables={[`--sectiondivider-${v.key}-align`]} /></span>
           <select
             class="sd-intrinsic-select"
             value={getAlign(v.key)}
@@ -462,18 +482,21 @@
       {/snippet}
       {#snippet elementExtras(elementName)}
         {#if elementName === 'eyebrow'}
-          <label class="sd-element-check">
-            <input
-              type="checkbox"
-              checked={getEyebrowUppercase(v.key)}
-              onchange={(e) => setIntrinsic(v.key, 'eyebrow-text-transform', (e.currentTarget as HTMLInputElement).checked ? 'uppercase' : 'none')}
-            />
-            <span>All caps</span>
-          </label>
+          <span class="sd-element-check-host" data-token-variables={`--sectiondivider-${v.key}-eyebrow-text-transform`}>
+            <label class="sd-element-check">
+              <input
+                type="checkbox"
+                checked={getEyebrowUppercase(v.key)}
+                onchange={(e) => setIntrinsic(v.key, 'eyebrow-text-transform', (e.currentTarget as HTMLInputElement).checked ? 'uppercase' : 'none')}
+              />
+              <span>All caps</span>
+            </label>
+            <A11yPropertyMark variables={[`--sectiondivider-${v.key}-eyebrow-text-transform`]} />
+          </span>
         {/if}
         {#if elementName === 'hairline'}
-          <div class="property-row sd-intrinsic-row sd-hairline-position-row">
-            <span class="property-label">position</span>
+          <div class="property-row sd-intrinsic-row sd-hairline-position-row" data-token-variables={`--sectiondivider-${v.key}-hairline`}>
+            <span class="property-label">position<A11yPropertyMark variables={[`--sectiondivider-${v.key}-hairline`]} /></span>
             <select
               class="sd-intrinsic-select"
               value={getHairlinePosition(v.key)}
@@ -551,6 +574,11 @@
   /* Inline boolean control inside an element-section (e.g. "All caps" under
      the eyebrow heading). Sits flush-left so it reads as a section property
      rather than aligning with the token grid below. */
+  :global(.sd-element-check-host) {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: var(--ui-space-4);
+  }
   :global(.sd-element-check) {
     display: inline-flex;
     align-items: center;
@@ -559,7 +587,6 @@
     color: var(--ui-text-secondary);
     cursor: pointer;
     user-select: none;
-    margin-bottom: var(--ui-space-4);
   }
   :global(.sd-element-check:hover) { color: var(--ui-text-primary); }
   :global(.sd-element-check input) { margin: 0; cursor: pointer; }

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'segmentedcontrol';
 
@@ -140,6 +141,32 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // Every option sits on the bar, and the default option paints no surface of
+  // its own. The small size sets every option's text in
+  // --segmentedcontrol-option-small-text-font-size, the smaller of its two sizes.
+  function optionContrastPairs(state: string, icon: string, backdrop: string[]): ContrastPair[] {
+    const inactive = state === 'disabled option' ? { inactive: true } : {};
+    return [
+      ...typeGroups[state].map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: '--segmentedcontrol-option-small-text-font-size',
+        fontWeight: g.weightVariable,
+        ...inactive,
+      })),
+      { foreground: icon, backdrop, role: 'non-text', ...inactive },
+    ];
+  }
+
+  const bar = '--segmentedcontrol-bar-surface';
+  export const contrastPairs: ContrastPair[] = [
+    ...optionContrastPairs('default option', '--segmentedcontrol-option-icon', [bar]),
+    ...optionContrastPairs('hover option', '--segmentedcontrol-option-hover-icon', ['--segmentedcontrol-hover-tint-enabled', '--segmentedcontrol-option-hover-surface', bar]),
+    ...optionContrastPairs('selected option', '--segmentedcontrol-selected-icon', ['--segmentedcontrol-selected-surface', bar]),
+    ...optionContrastPairs('disabled option', '--segmentedcontrol-disabled-icon', ['--segmentedcontrol-disabled-surface', bar]),
+  ];
 </script>
 
 <script lang="ts">
@@ -149,6 +176,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -214,7 +242,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName === 'hover option'}
         <div class="property-row" data-token-variables="--segmentedcontrol-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--segmentedcontrol-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'sidenavigation';
 
@@ -271,6 +272,43 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // Every part sits on the panel, and a hover rule lays the tint over its
+  // surface. The section header's own CollapsibleSection surface belongs to
+  // that component and stays out of the stack.
+  const panel = '--sidenavigation-panel-surface';
+  const tint = '--sidenavigation-hover-tint-enabled';
+  const partStack = (part: string, s: string): string[] =>
+    s === 'hover' ? [tint, `--sidenavigation-${part}-hover-surface`] : [`--sidenavigation-${part}-${s}-surface`];
+  const textPairs = (groups: TypeGroupConfig[], backdrop: string[]): ContrastPair[] =>
+    groups.map((g) => ({ foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable }));
+
+  // The toggle sits on the title, which a pointer on the toggle also hovers.
+  const toggleContrastPairs: ContrastPair[] = [
+    ...STATEFUL_STATES.map((title): ContrastPair => ({
+      foreground: '--sidenavigation-toggle-default-icon',
+      backdrop: ['--sidenavigation-toggle-default-surface', ...partStack('title', title), panel],
+      role: 'non-text',
+      context: `title ${title}`,
+    })),
+    ...(['hover', 'selected'] as const).map((title): ContrastPair => ({
+      foreground: '--sidenavigation-toggle-hover-icon',
+      backdrop: [...partStack('toggle', 'hover'), ...partStack('title', title), panel],
+      role: 'non-text',
+      context: `title ${title}`,
+    })),
+  ];
+
+  export const contrastPairs: ContrastPair[] = [
+    ...STATEFUL_STATES.flatMap((s): ContrastPair[] => [
+      ...textPairs(titleStateTypeGroups(s), ['--sidenavigation-title-label-surface', ...partStack('title', s), panel]),
+      ...textPairs(sectionStateTypeGroups(s), [...partStack('section', s), panel]),
+      ...textPairs(itemStateTypeGroups(s), [...partStack('item', s), panel]),
+      ...textPairs(footerStateTypeGroups(s), [...partStack('footer', s), panel]),
+      { foreground: `--sidenavigation-footer-${s}-icon`, backdrop: [...partStack('footer', s), panel], role: 'non-text' },
+    ]),
+    ...toggleContrastPairs,
+  ];
 </script>
 
 <script lang="ts">
@@ -280,6 +318,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -384,7 +423,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName.endsWith(' / Hover')}
         <div class="property-row" data-token-variables="--sidenavigation-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--sidenavigation-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'slidepager';
 
@@ -46,6 +47,25 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The bar sits on the page inline and on the scrim when zoomed.
+  const scrim = '--slidepager-scrim-surface';
+  function controlContrastPairs(foreground: string, surface: string, inactive: boolean): ContrastPair[] {
+    const flag = inactive ? { inactive } : {};
+    return [
+      { foreground, backdrop: [surface], role: 'non-text', context: 'inline', ...flag },
+      { foreground, backdrop: [surface, scrim], role: 'non-text', context: 'zoomed', ...flag },
+    ];
+  }
+  const counter = { foreground: '--slidepager-counter-text', role: 'text', fontSize: '--slidepager-counter-font-size', fontWeight: '--slidepager-counter-font-weight' } as const;
+
+  export const contrastPairs: ContrastPair[] = [
+    ...controlContrastPairs('--slidepager-control-icon', '--slidepager-control-surface', false),
+    ...controlContrastPairs('--slidepager-control-hover-icon', '--slidepager-control-hover-surface', false),
+    ...controlContrastPairs('--slidepager-control-disabled-icon', '--slidepager-control-disabled-surface', true),
+    { ...counter, backdrop: [], context: 'inline' },
+    { ...counter, backdrop: [scrim], context: 'zoomed' },
+  ];
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { sliderVariants } from '../../system/components/Slider.svelte';
 
   export const component = 'slider';
@@ -109,6 +110,38 @@
   ]);
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  // The fill paints on the track, and the thumb straddles the fill and the track.
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const thumbPairs = (thumb: string, fill: string, track: string, inactive: boolean): ContrastPair[] => {
+      const flag = inactive ? { inactive } : {};
+      return [
+        { foreground: thumb, backdrop: [fill, track], role: 'non-text', context: 'fill', ...flag },
+        { foreground: thumb, backdrop: [track], role: 'non-text', context: 'track', ...flag },
+      ];
+    };
+    const track = `--slider-${v}-track-surface`;
+    const disabledTrack = `--slider-${v}-disabled-track-surface`;
+    return [
+      { foreground: `--slider-${v}-fill`, backdrop: [track], role: 'non-text' },
+      ...thumbPairs(`--slider-${v}-thumb-surface`, `--slider-${v}-fill`, track, false),
+      ...thumbPairs(`--slider-${v}-hover-thumb-surface`, `--slider-${v}-fill`, track, false),
+      { foreground: `--slider-${v}-disabled-fill`, backdrop: [disabledTrack], role: 'non-text', inactive: true },
+      ...thumbPairs(`--slider-${v}-disabled-thumb-surface`, `--slider-${v}-disabled-fill`, disabledTrack, true),
+    ];
+  }
+
+  // Both variants share the label and value, which sit on no surface.
+  export const contrastPairs: ContrastPair[] = [
+    ...typeGroups.default.map((g): ContrastPair => ({
+      foreground: g.colorVariable,
+      backdrop: [],
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    })),
+    ...variants.flatMap(variantContrastPairs),
+  ];
 </script>
 
 <script lang="ts">

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'tabbar';
 
@@ -93,6 +94,25 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // The bottom indicator paints over its own tab's surface.
+  function tabContrastPairs(s: TabState): ContrastPair[] {
+    const backdrop = s === 'hover' ? ['--tabbar-hover-tint-enabled', '--tabbar-hover-surface'] : [`--tabbar-${s}-surface`];
+    const inactive = s === 'disabled' ? { inactive: true } : {};
+    return [
+      ...tabStateTypeGroups(s).map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+        ...inactive,
+      })),
+      { foreground: `--tabbar-${s}-border`, backdrop, role: 'non-text', ...inactive },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = tabStateNames.flatMap(tabContrastPairs);
 </script>
 
 <script lang="ts">
@@ -102,6 +122,7 @@
   import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
 
   // One switch. Turning the tint on also stands each hover surface down to its
@@ -163,7 +184,7 @@
     {#snippet extraPropertyRows(stateName)}
       {#if stateName === 'hover tab'}
         <div class="property-row" data-token-variables="--tabbar-hover-tint-enabled">
-          <span class="property-label">tint layer</span>
+          <span class="property-label">tint layer<A11yPropertyMark variables={['--tabbar-hover-tint-enabled']} /></span>
           <Toggle checked={tintOn} onchange={setTintOn} />
         </div>
         {#if tintOn}
@@ -177,7 +198,7 @@
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} value={selectedDemoTab} class={forceClass} onchange={(id) => (selectedDemoTab = id)} />
-      <div class="tab-content-demo">
+      <div class="tab-content-demo" data-preview-demo>
         <p style="margin: 0;">placeholder tab content</p>
       </div>
           {/snippet}

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens, buildTypeGroupFontTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'table';
 
@@ -72,6 +73,19 @@
     ...buildTypeGroupColorTokens(typeGroups, derivation),
     ...buildTypeGroupFontTokens(typeGroups, derivation),
   ];
+
+  // Every cell sits on the wrapper. Even rows lay the stripe over the row surface.
+  const wrapper = '--table-default-surface';
+  const textPair = (state: string, backdrop: string[]): ContrastPair => {
+    const g = typeGroups[state][0];
+    return { foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable };
+  };
+
+  export const contrastPairs: ContrastPair[] = [
+    textPair('header', ['--table-default-header-surface', wrapper]),
+    { ...textPair('cell', ['--table-default-row-surface', wrapper]), context: 'odd rows' },
+    { ...textPair('cell', ['--table-default-row-stripe-surface', '--table-default-row-surface', wrapper]), context: 'even rows' },
+  ];
 </script>
 
 <script lang="ts">