@motion-proto/live-tokens 0.96.0 → 0.98.2

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

@@ -1,6 +1,7 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
   import type { Token, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'iconbutton';
 
@@ -104,6 +105,32 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const icon = (s: StateName) => `${statePrefix(v, s)}-icon`;
+    const surface = (s: StateName) => `${statePrefix(v, s)}-surface`;
+    const hoverStack = ['--iconbutton-hover-tint-enabled', surface('hover')];
+    const disabled: ContrastPair = { foreground: icon('disabled'), backdrop: [surface('disabled')], role: 'non-text', inactive: true };
+    if (v !== 'outline') {
+      return [
+        { foreground: icon('default'), backdrop: [surface('default')], role: 'non-text' },
+        { foreground: icon('hover'), backdrop: hoverStack, role: 'non-text' },
+        disabled,
+      ];
+    }
+    // `:active` repaints the surface without the tint. A pointer press keeps the
+    // hover icon color, and a key press keeps the default one.
+    const active = ['--iconbutton-outline-active-surface'];
+    return [
+      { foreground: icon('default'), backdrop: [surface('default')], role: 'non-text', context: 'default' },
+      { foreground: icon('default'), backdrop: active, role: 'non-text', context: 'active' },
+      { foreground: icon('hover'), backdrop: hoverStack, role: 'non-text', context: 'hover' },
+      { foreground: icon('hover'), backdrop: active, role: 'non-text', context: 'active' },
+      disabled,
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">
@@ -113,6 +140,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
@@ -193,7 +221,7 @@
         {#snippet extraPropertyRows(stateName)}
           {#if stateName === 'hover'}
             <div class="property-row" data-token-variables="--iconbutton-hover-tint-enabled">
-              <span class="property-label">tint layer</span>
+              <span class="property-label">tint layer<A11yPropertyMark variables={['--iconbutton-hover-tint-enabled']} /></span>
               <Toggle checked={tintOn} onchange={setTintOn} />
             </div>
             {#if tintOn}

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

@@ -50,6 +50,7 @@
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
   import { buildSiblings } from './scaffolding/siblings';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import demoImageUrl from '../../system/assets/newspaper.webp';
   import { editorState, setComponentAlias } from '../core/store/editorStore';
 
@@ -77,17 +78,23 @@
 <ComponentEditorBase {component} title="Image" description="Picture in the page flow. Default frames it with rounded corners, a border, and a shadow. Bare shows the picture alone." tokens={allTokens} variants={variantOptions}>
   <VariantGroup name="default" title="Default" states={variantStates('default')} {component} siblings={buildSiblings(variants, 'default', variantStates)}>
     {#snippet stateActions()}
-      <label class="zoom-enable">
-        <input type="checkbox" checked={useZoom} onchange={(e) => setUseZoom(e.currentTarget.checked)} />
-        <span>Use zoom on hover</span>
-      </label>
-      <label class="zoom-enable" class:disabled={!useZoom}>
-        <input type="checkbox" checked={overflowScaling} disabled={!useZoom} onchange={(e) => setOverflowScaling(e.currentTarget.checked)} />
-        <span>Overflow scaling (mask zoom to frame)</span>
-      </label>
+      <span class="zoom-control" data-token-variables="--image-zoom-enabled">
+        <label class="zoom-enable">
+          <input type="checkbox" checked={useZoom} onchange={(e) => setUseZoom(e.currentTarget.checked)} />
+          <span>Use zoom on hover</span>
+        </label>
+        <A11yPropertyMark variables={['--image-zoom-enabled']} />
+      </span>
+      <span class="zoom-control" data-token-variables="--image-grow-enabled">
+        <label class="zoom-enable" class:disabled={!useZoom}>
+          <input type="checkbox" checked={overflowScaling} disabled={!useZoom} onchange={(e) => setOverflowScaling(e.currentTarget.checked)} />
+          <span>Overflow scaling (mask zoom to frame)</span>
+        </label>
+        <A11yPropertyMark variables={['--image-grow-enabled']} />
+      </span>
     {/snippet}
     <Image src={demoImageUrl} alt="Demo" size="banner" zoom={useZoom ? undefined : false} {overflowScaling} forceHover={useZoom} />
-    <p class="zoom-help">
+    <p class="zoom-help" data-preview-demo>
       Use zoom on hover: every image scales on hover (a page can still force it per image with the
       <code>zoom</code> prop). Overflow scaling on (default): the content zooms inside the fixed frame,
       masked by overflow. Off: the whole framed image grows past its box. Override per image with
@@ -100,6 +107,10 @@
 </ComponentEditorBase>
 
 <style>
+  .zoom-control {
+    display: inline-flex;
+    align-items: center;
+  }
   .zoom-enable {
     display: inline-flex;
     align-items: center;

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token, IntrinsicSpec } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
 
   export const component = 'imagelightbox';
 
@@ -39,13 +40,26 @@
       default: { default: 'contain' },
     },
   ];
+
+  // One color paints the chrome's icons and its extra-small counter text. The
+  // chrome floats on the scrim.
+  const scrim = '--imagelightbox-scrim-surface';
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--imagelightbox-chrome-icon', backdrop: ['--imagelightbox-chrome-surface', scrim], role: 'non-text', context: 'icons' },
+    { foreground: '--imagelightbox-chrome-icon', backdrop: ['--imagelightbox-chrome-hover-surface', scrim], role: 'non-text', context: 'hovered icons' },
+    { foreground: '--imagelightbox-chrome-icon', backdrop: ['--imagelightbox-chrome-surface', scrim], role: 'text', fontSize: '--font-size-xs', context: 'counter' },
+  ];
 </script>
 
 <script lang="ts">
   import ImageLightbox from '../../system/components/ImageLightbox.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import UISegmentedControl from '../ui/UISegmentedControl.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import newspaperUrl from '../../system/assets/newspaper.webp';
+  import { editorState, setComponentAlias } from '../core/store/editorStore';
+  import type { CssVarRef } from '../core/store/editorTypes';
 
   const demoImages = [
     // The first entry carries explicit dimensions (the no-reflow path); the second
@@ -56,6 +70,18 @@
 
   let multiple = $state(true);
   let shadow = $state<'box' | 'content' | 'none'>('box');
+
+  type TileFit = 'contain' | 'cover';
+  const TILE_FIT = intrinsics[0].variable('default');
+  const fitOptions: { value: TileFit; label: string; title: string }[] = [
+    { value: 'contain', label: 'Contain', title: 'Show the whole image inside the tile' },
+    { value: 'cover', label: 'Cover', title: 'Crop the image to fill the tile' },
+  ];
+  let tileFit = $derived.by((): TileFit => {
+    const ref = ($editorState.components[component]?.aliases as Record<string, CssVarRef> | undefined)?.[TILE_FIT];
+    const value = ref?.kind === 'literal' ? ref.value : intrinsics[0].default.default;
+    return value === 'cover' ? 'cover' : 'contain';
+  });
 </script>
 
 <ComponentEditorBase
@@ -79,6 +105,21 @@
         </select>
       </label>
     {/snippet}
+    {#snippet extraPropertyRowsTop(stateName)}
+      {#if stateName === 'tile'}
+        <div class="property-row" data-token-variables={TILE_FIT}>
+          <span class="property-label">tile fit<A11yPropertyMark variables={[TILE_FIT]} /></span>
+          <div class="tile-fit-control">
+            <UISegmentedControl
+              value={tileFit}
+              options={fitOptions}
+              ariaLabel="Tile fit"
+              onchange={(value) => setComponentAlias(component, TILE_FIT, { kind: 'literal', value })}
+            />
+          </div>
+        </div>
+      {/if}
+    {/snippet}
     <div class="preview-frame">
       <ImageLightbox images={multiple ? demoImages : [demoImages[0]]} {shadow} extended />
     </div>
@@ -91,6 +132,9 @@
     max-width: 28rem;
     margin: 0 auto;
   }
+  .tile-fit-control {
+    display: flex;
+  }
   .preview-toggle {
     display: inline-flex;
     align-items: center;

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,22 @@
     },
   ];
   const INTRINSIC_BY_KEY = new Map(intrinsics.map((i) => [i.key, i]));
+
+  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,
+      })),
+      { foreground: `--sectiondivider-${v}-hairline-color`, backdrop, role: 'non-text' },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap((v) => variantContrastPairs(v.key));
 </script>
 
 <script lang="ts">
@@ -200,6 +217,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 +394,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 +452,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 +483,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 +575,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 +588,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}