@motion-proto/live-tokens 0.97.0 → 0.98.2

package/dist-plugin/setColors/index.js

@@ -15,7 +15,7 @@ import {
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-A4TBP4MM.js";
+} from "../chunk-SLICH4IH.js";
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
 } from "../chunk-QQASYPW7.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.97.0",
+  "version": "0.98.2",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -205,15 +205,24 @@
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
     "eval": "bash scripts/eval.sh",
-    "eval:billing": "bash scripts/eval-billing.sh",
+    "eval:billing": "bash scripts/eval-harbor.sh",
     "build:eval-project": "bash scripts/build-eval-project.sh",
     "check:smoke-component-tests": "bash scripts/smoke-component-tests.sh",
     "check:smoke-page-tests": "bash scripts/smoke-page-tests.sh",
     "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:pages && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:cli-strings && npm run check:skill-sources && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create && npm run check:smoke-component-tests && npm run check:smoke-page-tests"
   },
   "peerDependencies": {
+    "@axe-core/playwright": "^4.11.1",
     "@playwright/test": "^1.55",
+    "@siteimprove/alfa-act": "^0.119.0",
+    "@siteimprove/alfa-device": "^0.119.0",
+    "@siteimprove/alfa-dom": "^0.119.0",
+    "@siteimprove/alfa-http": "^0.119.0",
+    "@siteimprove/alfa-rules": "^0.119.0",
+    "@siteimprove/alfa-url": "^0.119.0",
+    "@siteimprove/alfa-web": "^0.119.0",
     "@sveltejs/vite-plugin-svelte": "^7.0",
+    "axe-core": "^4.11.1",
     "happy-dom": "^20.0",
     "sass": "^1.0",
     "svelte": "^5",
@@ -221,9 +230,36 @@
     "vitest": "^4.0 || ^5.0"
   },
   "peerDependenciesMeta": {
+    "@axe-core/playwright": {
+      "optional": true
+    },
     "@playwright/test": {
       "optional": true
     },
+    "@siteimprove/alfa-act": {
+      "optional": true
+    },
+    "@siteimprove/alfa-device": {
+      "optional": true
+    },
+    "@siteimprove/alfa-dom": {
+      "optional": true
+    },
+    "@siteimprove/alfa-http": {
+      "optional": true
+    },
+    "@siteimprove/alfa-rules": {
+      "optional": true
+    },
+    "@siteimprove/alfa-url": {
+      "optional": true
+    },
+    "@siteimprove/alfa-web": {
+      "optional": true
+    },
+    "axe-core": {
+      "optional": true
+    },
     "happy-dom": {
       "optional": true
     },
@@ -232,9 +268,18 @@
     }
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.14.0",
     "@playwright/test": "^1.62.1",
+    "@siteimprove/alfa-act": "^0.119.0",
+    "@siteimprove/alfa-device": "^0.119.0",
+    "@siteimprove/alfa-dom": "^0.119.0",
+    "@siteimprove/alfa-http": "^0.119.0",
+    "@siteimprove/alfa-rules": "^0.119.0",
+    "@siteimprove/alfa-url": "^0.119.0",
+    "@siteimprove/alfa-web": "^0.119.0",
     "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/node": "^25.9.1",
+    "axe-core": "^4.14.0",
     "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
     "svelte": "^5.55.5",

package/src/demo/LabeledSelect.svelte

@@ -164,7 +164,7 @@
 
   {#if open}
     <div class="labeled-select-panel" bind:this={panelEl} use:portal>
-      <MenuSelect {items} {value} minWidth="12rem" onchange={select} />
+      <MenuSelect {items} {value} ariaLabel={label} minWidth="12rem" onchange={select} />
     </div>
   {/if}
 

package/src/editor/bootstrap.ts

@@ -50,16 +50,18 @@ export async function bootLiveTokens(
   if (import.meta.env.DEV) {
     // Imported here, never statically, so a build drops the editor. The
     // registry alone imports every shipped component and editor.
-    const [editorStore, themeDocumentSync, liveStateStream, { initializeTheme }] = await Promise.all([
+    const [editorStore, themeDocumentSync, liveStateStream, a11yReport, { initializeTheme }] = await Promise.all([
       import('./core/store/editorStore'),
       import('./core/themes/themeDocumentSync'),
       import('./core/themes/liveStateStream'),
+      import('./core/a11y/a11yReport'),
       import('./core/themes/themeInit'),
       import('./component-editor/registry'),
     ]);
     editorStore.init();
     themeDocumentSync.init();
     liveStateStream.init();
+    void a11yReport.init();
     if (opts.components) {
       for (const entry of opts.components) {
         registerComponent(entry);

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'badge';
@@ -57,6 +58,18 @@
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return [{
+      foreground: `--badge-${v}-text`,
+      backdrop: [`--badge-${v}-surface`],
+      role: 'text',
+      fontSize: `--badge-${v}-text-font-size`,
+      fontWeight: `--badge-${v}-text-font-weight`,
+    }];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/ButtonEditor.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 = 'button';
 
@@ -120,11 +121,41 @@
       default: { default: 'var(--color-transparent)' },
     },
   ];
+
+  // The small size keeps each variant's colors, and it is the smaller of the two text sizes.
+  const pairFont = { fontSize: '--button-small-text-font-size', fontWeight: '--button-small-text-font-weight' } as const;
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    const text = (s: StateName) => `${statePrefix(v, s)}-text`;
+    const surface = (s: StateName) => `${statePrefix(v, s)}-surface`;
+    const hoverStack = ['--button-hover-tint-enabled', surface('hover')];
+    const disabled: ContrastPair = { foreground: text('disabled'), backdrop: [surface('disabled')], role: 'text', ...pairFont, inactive: true };
+    if (v !== 'outline') {
+      return [
+        { foreground: text('default'), backdrop: [surface('default')], role: 'text', ...pairFont },
+        { foreground: text('hover'), backdrop: hoverStack, role: 'text', ...pairFont },
+        disabled,
+      ];
+    }
+    // `:active` repaints the surface without the tint. A pointer press keeps the
+    // hover text color, and a key press keeps the default one.
+    const active = ['--button-outline-active-surface'];
+    return [
+      { foreground: text('default'), backdrop: [surface('default')], role: 'text', ...pairFont, context: 'default' },
+      { foreground: text('default'), backdrop: active, role: 'text', ...pairFont, context: 'active' },
+      { foreground: text('hover'), backdrop: hoverStack, role: 'text', ...pairFont, context: 'hover' },
+      { foreground: text('hover'), backdrop: active, role: 'text', ...pairFont, context: 'active' },
+      disabled,
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">
   import Button from '../../system/components/Button.svelte';
   import Toggle from '../ui/Toggle.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
@@ -216,7 +247,7 @@
         {#snippet extraPropertyRows(stateName)}
           {#if stateName === 'hover'}
             <div class="property-row" data-token-variables="--button-hover-tint-enabled">
-              <span class="property-label">tint layer</span>
+              <span class="property-label">tint layer<A11yPropertyMark variables={['--button-hover-tint-enabled']} /></span>
               <Toggle checked={tintOn} onchange={setTintOn} />
             </div>
             {#if tintOn}
@@ -226,7 +257,7 @@
               </div>
             {/if}
             <div class="property-row" data-token-variables="--button-shimmer">
-              <span class="property-label">hover shimmer</span>
+              <span class="property-label">hover shimmer<A11yPropertyMark variables={['--button-shimmer']} /></span>
               <Toggle checked={shimmerEnabled} onchange={handleShimmerChange} />
             </div>
           {/if}

package/src/editor/component-editor/CalloutEditor.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 { calloutVariants } from '../../system/components/Callout.svelte';
 
   export const component = 'callout';
@@ -68,6 +69,18 @@
   );
 
   const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return variantTypeGroups(v).map((g) => ({
+      foreground: g.colorVariable,
+      backdrop: [`--callout-${v}-surface`],
+      role: 'text',
+      fontSize: g.sizeVariable,
+      fontWeight: g.weightVariable,
+    }));
+  }
+
+  export const contrastPairs: ContrastPair[] = variants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/CardEditor.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 = 'card';
 
@@ -104,12 +105,20 @@
       default: { default: HOVER_OFF.shadow },
     },
   ];
+
+  // size="small" sets the title in --font-size-md and the body in
+  // --font-size-sm, the smaller of each one's two sizes.
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--card-default-title', backdrop: ['--card-default-header-surface', '--card-default-surface'], role: 'text', fontSize: '--font-size-md', fontWeight: '--card-default-title-font-weight' },
+    { foreground: '--card-default-body', backdrop: ['--card-default-surface'], role: 'text', fontSize: '--font-size-sm', fontWeight: '--card-default-body-font-weight' },
+  ];
 </script>
 
 <script lang="ts">
   import Card from '../../system/components/Card.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import A11yPropertyMark from '../ui/a11y/A11yPropertyMark.svelte';
   import { editorState, setComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
@@ -152,6 +161,7 @@
             <input type="checkbox" checked={hoverEnabled} onchange={(e) => setHoverEnabled(e.currentTarget.checked)} />
             <span>Use hover</span>
           </label>
+          <A11yPropertyMark variables={['--card-hover-border-enabled', '--card-hover-shadow-enabled']} />
           <p class="hover-help">
             Checked: every card lifts on hover. Unchecked: hover is off by default and a page turns it on
             per card with the <code>hover</code> prop.
@@ -163,10 +173,10 @@
       {@const previewClass = activeState === 'hover' ? 'force-hover' : ''}
       <div class="card-demo">
         <Card title="Card title" icon="fas fa-star" class={previewClass}>
-          <div class="content-placeholder">Content Placeholder</div>
+          <div class="content-placeholder" data-preview-demo>Content Placeholder</div>
         </Card>
         <Card variant="bare" class={previewClass}>
-          <div class="content-placeholder">Bare variant</div>
+          <div class="content-placeholder" data-preview-demo>Bare variant</div>
         </Card>
       </div>
     {/snippet}

package/src/editor/component-editor/CodeSnippetEditor.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 = 'codesnippet';
 
@@ -33,6 +34,15 @@
   };
 
   export const allTokens: Token[] = Object.values(states).flat();
+
+  // The copy button and the scrollbar track paint no surface of their own.
+  const surface = ['--codesnippet-surface'];
+  export const contrastPairs: ContrastPair[] = [
+    { foreground: '--codesnippet-code-text', backdrop: surface, role: 'text', fontSize: '--codesnippet-code-font-size', fontWeight: '--codesnippet-code-font-weight' },
+    { foreground: '--codesnippet-icon', backdrop: surface, role: 'non-text' },
+    { foreground: '--codesnippet-hover-icon', backdrop: surface, role: 'non-text' },
+    { foreground: '--codesnippet-scrollbar-thumb', backdrop: surface, role: 'non-text' },
+  ];
 </script>
 
 <script lang="ts">
@@ -52,7 +62,7 @@
   <VariantGroup name="codesnippet" title="Code Snippet" {states} {component}>
     {#snippet children({ activeState })}
       <div class="codesnippet-preview">
-        <label class="preview-text">
+        <label class="preview-text" data-preview-demo>
           <span>Preview text</span>
           <textarea
             bind:value={previewCode}

package/src/editor/component-editor/CollapsibleSectionEditor.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 = 'collapsiblesection';
 
@@ -117,6 +118,22 @@
   ]);
 
   const variantOptions = VARIANTS.map((v) => ({ value: v, label: VARIANT_LABELS[v] }));
+
+  function headerContrastPairs(v: Variant, s: HeaderState): ContrastPair[] {
+    const backdrop = [`--collapsiblesection-${v}-${s}-surface`];
+    return [
+      ...variantTypeGroups(v)[`Header / ${HEADER_STATE_LABELS[s]}`].map((g): ContrastPair => ({
+        foreground: g.colorVariable,
+        backdrop,
+        role: 'text',
+        fontSize: g.sizeVariable,
+        fontWeight: g.weightVariable,
+      })),
+      { foreground: `--collapsiblesection-${v}-${s}-icon`, backdrop, role: 'non-text' },
+    ];
+  }
+
+  export const contrastPairs: ContrastPair[] = VARIANTS.flatMap((v) => HEADER_STATES.flatMap((s) => headerContrastPairs(v, s)));
 </script>
 
 <script lang="ts">
@@ -155,7 +172,7 @@
           open={isBody}
           class={forceClass}
         >
-          <p style="margin: 0; color: var(--text-secondary);">
+          <p style="margin: 0; color: var(--text-secondary);" data-preview-demo>
             {#if isContainerPart}
               (Container) — outer chrome only; switch to Body to see the content area.
             {:else}

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

@@ -1,5 +1,6 @@
 <script module lang="ts">
   import type { Token } from './scaffolding/types';
+  import type { ContrastPair } from '../core/palettes/contrastPairs';
   import { badgeVariants } from '../../system/components/Badge.svelte';
 
   export const component = 'cornerbadge';
@@ -40,6 +41,18 @@
   ];
 
   const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+
+  function variantContrastPairs(v: Variant): ContrastPair[] {
+    return [{
+      foreground: `--cornerbadge-${v}-text`,
+      backdrop: [`--cornerbadge-${v}-surface`],
+      role: 'text',
+      fontSize: '--cornerbadge-text-font-size',
+      fontWeight: '--cornerbadge-text-font-weight',
+    }];
+  }
+
+  export const contrastPairs: ContrastPair[] = badgeVariants.flatMap(variantContrastPairs);
 </script>
 
 <script lang="ts">

package/src/editor/component-editor/DialogEditor.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 = 'dialog';
 
@@ -85,6 +86,20 @@
   function variantLabel(v: ButtonVariant): string {
     return v.charAt(0).toUpperCase() + v.slice(1);
   }
+
+  // The header and body sit on the dialog box, and the box sits on the scrim.
+  const boxStack = ['--dialog-surface', '--dialog-scrim-surface'];
+  const headerStack = ['--dialog-header-surface', ...boxStack];
+  const textPair = (part: string, backdrop: string[]): ContrastPair => {
+    const g = frameTypeGroups[part][0];
+    return { foreground: g.colorVariable, backdrop, role: 'text', fontSize: g.sizeVariable, fontWeight: g.weightVariable };
+  };
+
+  export const contrastPairs: ContrastPair[] = [
+    textPair('header', headerStack),
+    { foreground: '--dialog-close-icon', backdrop: headerStack, role: 'non-text' },
+    textPair('body', boxStack),
+  ];
 </script>
 
 <script lang="ts">

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={() => {}}