@motion-proto/live-tokens 0.84.0 → 0.86.0

package/dist-plugin/setGeometry/index.cjs

@@ -74,9 +74,6 @@ var KIND_RULES = [
   { kind: "dot-size", suffix: ["-dot-size"] },
   { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
   { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: "opacity", suffix: ["-opacity"], prefix: ["--scrim-opacity"] },
   { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
   { kind: "padding", suffix: ["-padding", "-margin"] },
   { kind: "gap", suffix: ["-gap"] },
@@ -1569,6 +1566,77 @@ var componentMigration_2026_09_20_scrimColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-09-21-wash-color-and-opacity.ts
+var FAMILIES = ["scrim", "tint"];
+var COLOR_MIX_RE = /^color-mix\(in srgb,\s*var\((--[a-z0-9-]+)\)\s+(\d+(?:\.\d+)?)%,\s*transparent\)$/i;
+var PLAIN_VAR_RE = /^var\((--[a-z0-9-]+)\)$/i;
+function parseFill(raw) {
+  const s = raw.trim();
+  const mix = s.match(COLOR_MIX_RE);
+  if (mix) return { color: mix[1], opacity: Math.min(100, Number(mix[2])) / 100 };
+  const plain = s.match(PLAIN_VAR_RE);
+  return plain ? { color: plain[1], opacity: 1 } : null;
+}
+var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
+  id: "2026-09-21-wash-color-and-opacity",
+  fromVersion: 8,
+  toVersion: 9,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    const out = { ...rawVars };
+    for (const family of FAMILIES) {
+      let color = null;
+      for (const suffix of ["", "-low", "-high"]) {
+        const key = `--${family}${suffix}`;
+        const parsed = out[key] === void 0 ? null : parseFill(out[key]);
+        if (!parsed) continue;
+        color ??= parsed.color;
+        out[`--${family}-opacity${suffix}`] = String(parsed.opacity);
+        delete out[key];
+      }
+      if (color) out[`--${family}-color`] = `var(${color})`;
+    }
+    return out;
+  }
+};
+
+// src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
+var STOPS2 = {
+  "--scrim-opacity-low": "--scrim-low",
+  "--scrim-opacity": "--scrim",
+  "--scrim-opacity-high": "--scrim-high"
+};
+var PAIR = /^--(imagelightbox|dialog)-scrim-(color|opacity)$/;
+var ref = (value) => value.startsWith("--") ? `var(${value})` : value;
+function fill(color, opacity) {
+  if (color === "--scrim-color" && STOPS2[opacity]) return STOPS2[opacity];
+  if (opacity === "1") return color;
+  const pct = Number.isFinite(Number(opacity)) ? `${Number(opacity) * 100}%` : `calc(${ref(opacity)} * 100%)`;
+  return `color-mix(in srgb, ${ref(color)} ${pct}, transparent)`;
+}
+var componentMigration_2026_09_21_scrimSurface = {
+  id: "2026-09-21-scrim-surface",
+  fromVersion: 37,
+  toVersion: 38,
+  appliesTo: "component-config",
+  apply(rawVars) {
+    const out = {};
+    const pairs = {};
+    for (const [key, value] of Object.entries(rawVars)) {
+      const match = PAIR.exec(key);
+      if (!match) {
+        out[key] = value;
+        continue;
+      }
+      (pairs[match[1]] ??= {})[match[2]] = value;
+    }
+    for (const [id, { color = "--scrim-color", opacity = "--scrim-opacity-high" }] of Object.entries(pairs)) {
+      out[`--${id}-scrim-surface`] = fill(color, opacity);
+    }
+    return out;
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
 var RENAMES8 = {
   cornerbadge: {
@@ -1765,7 +1833,9 @@ var MIGRATIONS = [
   componentMigration_2026_09_13_collapsiblesectionOpen,
   componentMigration_2026_09_13_badgeBrand,
   componentMigration_2026_09_20_imagelightboxScrim,
-  componentMigration_2026_09_20_scrimColorAndOpacity
+  componentMigration_2026_09_20_scrimColorAndOpacity,
+  colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
+  componentMigration_2026_09_21_scrimSurface
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;

package/dist-plugin/setGeometry/index.d.cts

@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'opacity' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

package/dist-plugin/setGeometry/index.d.ts

@@ -37,7 +37,7 @@ interface AdjustResult {
 }
 declare function adjustAliases(configs: Record<string, ComponentConfig>, ops: readonly AdjustOp[], now: string): AdjustResult;
 
-type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'opacity' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
+type TokenKind = 'surface' | 'border' | 'border-width' | 'hairline-width' | 'indicator-width' | 'radius' | 'track-height' | 'hairline-inset' | 'dot-size' | 'length' | 'blur' | 'scale' | 'shadow' | 'font-family' | 'font-weight' | 'font-size' | 'line-height' | 'letter-spacing' | 'padding' | 'gap' | 'duration' | 'easing' | 'text-color';
 /** Side-aware kind test. Per-side paddings (`--card-default-body-padding-top`)
     are written by UIPaddingSelector and never declared as editor tokens, so
     `rawKind` never meets one; the CLI does, and they belong with their parent. */

package/dist-plugin/setGeometry/index.js

@@ -1,6 +1,6 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION
-} from "../chunk-FD4FVDOC.js";
+} from "../chunk-ONYAIXCZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
@@ -42,9 +42,6 @@ var KIND_RULES = [
   { kind: "dot-size", suffix: ["-dot-size"] },
   { kind: "blur", suffix: ["-blur"], prefix: ["--blur-"] },
   { kind: "scale", suffix: ["-scale"], prefix: ["--scale-"] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: "opacity", suffix: ["-opacity"], prefix: ["--scrim-opacity"] },
   { kind: "shadow", suffix: ["-shadow"], prefix: ["--shadow-"] },
   { kind: "padding", suffix: ["-padding", "-margin"] },
   { kind: "gap", suffix: ["-gap"] },

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -659,6 +659,26 @@ var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-09-21-tint-color-and-opacity.ts
+var ENTRIES3 = [
+  { name: "--tint-color", value: "rgb(255, 255, 255)" },
+  { name: "--tint-opacity-low", value: "0.05" },
+  { name: "--tint-opacity", value: "0.1" },
+  { name: "--tint-opacity-high", value: "0.15" }
+];
+var tokensCssMigration_2026_09_21_tintColorAndOpacity = {
+  id: "2026-09-21-tint-color-and-opacity",
+  kind: "additive",
+  description: "Add --tint-color and --tint-opacity-*; a tint's colour and strength are separate tokens",
+  apply(css) {
+    return ensureScale(css, {
+      entries: ENTRIES3,
+      sectionComment: "Tint colour and strength, which the --tint-* stops compose",
+      anchorPrefixes: ["--tint"]
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -712,7 +732,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_27_editorialLargeSteps,
   tokensCssMigration_2026_09_01_scrimRename,
   tokensCssMigration_2026_09_01_tintScale,
-  tokensCssMigration_2026_09_20_scrimColorAndOpacity
+  tokensCssMigration_2026_09_20_scrimColorAndOpacity,
+  tokensCssMigration_2026_09_21_tintColorAndOpacity
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,7 +13,7 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-V2OVSC5Z.js";
+} from "../chunk-GWMEYBZ2.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.84.0",
+  "version": "0.86.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [

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

@@ -16,8 +16,7 @@
   // Button styling lives in Button.svelte — the dialog only owns its own chrome.
   const frameStates: Record<string, Token[]> = {
     scrim: [
-      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-color' },
-      { label: 'scrim opacity', variable: '--dialog-scrim-opacity' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--dialog-scrim-surface' },
     ],
     dialog: [
       { label: 'surface color', variable: '--dialog-surface' },

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

@@ -15,8 +15,7 @@
       { label: 'tile shadow',                       variable: '--imagelightbox-tile-shadow' },
     ],
     overlay: [
-      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-color' },
-      { label: 'scrim opacity', variable: '--imagelightbox-scrim-opacity' },
+      { label: 'scrim color', groupKey: 'surface', variable: '--imagelightbox-scrim-surface' },
     ],
     chrome: [
       { label: 'surface color',       groupKey: 'surface', variable: '--imagelightbox-chrome-surface' },

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

@@ -0,0 +1,118 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'slidepager';
+
+  // Single variant: the default carries the frame, the bar, the counter and
+  // the control's resting look. Hover and disabled layer on the control alone.
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'frame', variable: '--slidepager-frame-surface' },
+      { label: 'border color', element: 'frame', variable: '--slidepager-frame-border' },
+      { label: 'border width', canBeLinked: true, element: 'frame', variable: '--slidepager-frame-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'frame', variable: '--slidepager-frame-radius' },
+      { label: 'shadow', element: 'frame', variable: '--slidepager-frame-shadow' },
+      { label: 'gap', canBeLinked: true, element: 'bar', variable: '--slidepager-bar-gap' },
+      { label: 'padding', canBeLinked: true, element: 'bar', variable: '--slidepager-bar-padding' },
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-border' },
+      { label: 'border width', canBeLinked: true, element: 'control', variable: '--slidepager-control-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'control', variable: '--slidepager-control-radius' },
+      { label: 'size', canBeLinked: true, element: 'control', variable: '--slidepager-control-size' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-icon' },
+      { label: 'icon size', canBeLinked: true, element: 'control', variable: '--slidepager-control-icon-size' },
+      { label: 'text color', element: 'counter', variable: '--slidepager-counter-text' },
+      { label: 'font family', element: 'counter', variable: '--slidepager-counter-font-family' },
+      { label: 'font size', element: 'counter', variable: '--slidepager-counter-font-size' },
+      { label: 'font weight', element: 'counter', variable: '--slidepager-counter-font-weight' },
+      { label: 'line height', element: 'counter', variable: '--slidepager-counter-line-height' },
+      { label: 'letter spacing', element: 'counter', variable: '--slidepager-counter-letter-spacing' },
+      { label: 'scrim color', element: 'overlay', variable: '--slidepager-scrim-surface' },
+      { label: 'padding', canBeLinked: true, element: 'overlay', variable: '--slidepager-overlay-padding' },
+      { label: 'close button margin', canBeLinked: true, element: 'overlay', variable: '--slidepager-close-margin' },
+      { label: 'fade duration', element: 'overlay', variable: '--slidepager-overlay-duration' },
+      { label: 'fade easing', element: 'overlay', variable: '--slidepager-overlay-easing' }
+    ],
+    hover: [
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-hover-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-hover-border' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-hover-icon' }
+    ],
+    disabled: [
+      { label: 'surface color', element: 'control', variable: '--slidepager-control-disabled-surface' },
+      { label: 'border color', element: 'control', variable: '--slidepager-control-disabled-border' },
+      { label: 'icon color', element: 'control', variable: '--slidepager-control-disabled-icon' }
+    ]
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import SlidePager, { type SlidePage } from '../../system/components/SlidePager.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import page04 from '../../system/assets/slide-04.webp';
+  import page05 from '../../system/assets/slide-05.webp';
+  import page06 from '../../system/assets/slide-06.webp';
+
+  const demoSlides: SlidePage[] = [
+    { src: page04, alt: 'Types of disabilities: visual, auditory, motor, cognitive', width: 960, height: 540 },
+    { src: page05, alt: 'Permanent, temporary, or situational', width: 960, height: 540 },
+    { src: page06, alt: 'Non-apparent disabilities', width: 960, height: 540 }
+  ];
+
+  // The control's two states are forced on both chevrons at once, so the strip
+  // shows each one without a pointer and without landing on an end slide.
+  function forceClass(activeState: string) {
+    if (activeState === 'hover') return 'force-hover';
+    if (activeState === 'disabled') return 'force-disabled';
+    return '';
+  }
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Slide Pager"
+  description="A deck of slides the reader flips through in place, one at a time. Clicking the frame opens a full-screen read that pages through every slide, with the same bar and a close button. The open preview shows it in place."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="slidepager"
+    title="Slide Pager"
+    {states}
+    {component}
+    elementOrder={['frame', 'bar', 'control', 'counter', 'overlay']}
+  >
+    {#snippet children({ activeState }: { activeState: string })}
+      <div class="slidepager-demo">
+        <div class="slidepager-demo-inline">
+          <SlidePager slides={demoSlides} index={1} class={forceClass(activeState)} />
+        </div>
+        <div class="slidepager-demo-open">
+          <SlidePager slides={demoSlides} index={1} inline class={forceClass(activeState)} />
+        </div>
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .slidepager-demo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--ui-space-32);
+    width: 100%;
+  }
+
+  .slidepager-demo-inline {
+    flex: 1 1 22rem;
+    max-width: 32rem;
+  }
+
+  .slidepager-demo-open {
+    flex: 1 1 16rem;
+    max-width: 22rem;
+  }
+</style>

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

@@ -0,0 +1,73 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'videoframe';
+
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'frame', variable: '--videoframe-frame-surface' },
+      { label: 'clip surface color', element: 'frame', variable: '--videoframe-clip-surface' },
+      { label: 'border color', element: 'frame', variable: '--videoframe-frame-border' },
+      { label: 'border width', canBeLinked: true, element: 'frame', variable: '--videoframe-frame-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'frame', variable: '--videoframe-frame-radius' },
+      { label: 'surface color', element: 'badge', variable: '--videoframe-badge-default-surface' },
+      { label: 'border color', element: 'badge', variable: '--videoframe-badge-default-border' },
+      { label: 'border width', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-border-width' },
+      { label: 'size', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-size' },
+      { label: 'icon color', element: 'badge', variable: '--videoframe-badge-default-icon' },
+      { label: 'icon size', canBeLinked: true, element: 'badge', variable: '--videoframe-badge-default-icon-size' },
+      { label: 'hover duration', element: 'badge', variable: '--videoframe-badge-duration' },
+      { label: 'hover easing', element: 'badge', variable: '--videoframe-badge-easing' }
+    ],
+    hover: [
+      { label: 'surface color', element: 'badge', variable: '--videoframe-badge-hover-surface' },
+      { label: 'border color', element: 'badge', variable: '--videoframe-badge-hover-border' },
+      { label: 'icon color', element: 'badge', variable: '--videoframe-badge-hover-icon' }
+    ]
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import VideoFrame from '../../system/components/VideoFrame.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import clipUrl from '../../system/assets/watch-navigation.mp4';
+  import posterUrl from '../../system/assets/watch-navigation-poster.webp';
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Video Frame"
+  description="A poster frame that plays its clip in place when clicked."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="videoframe"
+    title="Video Frame"
+    {states}
+    {component}
+    elementOrder={['frame', 'badge']}
+  >
+    {#snippet children({ activeState }: { activeState: string })}
+      <div class="videoframe-demo">
+        <VideoFrame
+          src={clipUrl}
+          poster={posterUrl}
+          alt="Navigation running on a smartwatch"
+          width={480}
+          height={552}
+          class={activeState === 'hover' ? 'force-hover' : ''}
+        />
+      </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .videoframe-demo {
+    width: 100%;
+    max-width: 14rem;
+  }
+</style>

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

@@ -0,0 +1,95 @@
+<script module lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'videolightbox';
+
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'surface color', element: 'tile', variable: '--videolightbox-tile-surface' },
+      { label: 'border color', element: 'tile', variable: '--videolightbox-tile-border' },
+      { label: 'border width', canBeLinked: true, element: 'tile', variable: '--videolightbox-tile-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'tile', variable: '--videolightbox-tile-radius' },
+      { label: 'shadow', element: 'tile', variable: '--videolightbox-tile-shadow' },
+      { label: 'scrim color', element: 'overlay', variable: '--videolightbox-scrim-surface' },
+      { label: 'padding', canBeLinked: true, element: 'overlay', variable: '--videolightbox-overlay-padding' },
+      { label: 'fade duration', element: 'overlay', variable: '--videolightbox-overlay-duration' },
+      { label: 'fade easing', element: 'overlay', variable: '--videolightbox-overlay-easing' },
+      { label: 'surface color', element: 'close', variable: '--videolightbox-chrome-surface' },
+      { label: 'border color', element: 'close', variable: '--videolightbox-chrome-border' },
+      { label: 'border width', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-border-width' },
+      { label: 'corner radius', canBeLinked: true, element: 'close', variable: '--videolightbox-chrome-radius' },
+      { label: 'icon color', element: 'close', variable: '--videolightbox-chrome-icon' },
+    ],
+    hover: [
+      { label: 'surface color', element: 'close', variable: '--videolightbox-chrome-hover-surface' },
+    ],
+  };
+
+  export const allTokens: Token[] = Object.values(states).flat();
+</script>
+
+<script lang="ts">
+  import VideoLightbox from '../../system/components/VideoLightbox.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import clipUrl from '../../system/assets/watch-navigation.mp4';
+  import posterUrl from '../../system/assets/watch-navigation-poster.webp';
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Video Lightbox"
+  description="A small still that fades the page away and plays its clip in the middle of the screen. Click anywhere, the close button, or Escape to close it. The open preview beside the tile shows the overlay and close button in place."
+  tokens={allTokens}
+>
+  <VariantGroup
+    name="videolightbox"
+    title="Video Lightbox"
+    {states}
+    {component}
+    elementOrder={['tile', 'overlay', 'close']}
+  >
+    {#snippet children({ activeState })}
+    <div class="videolightbox-demo">
+      <div class="videolightbox-demo-tile">
+        <VideoLightbox
+          src={clipUrl}
+          poster={posterUrl}
+          alt="Navigation running on a smartwatch"
+          width={480}
+          height={552}
+        />
+      </div>
+      <div class="videolightbox-demo-open">
+        <VideoLightbox
+          src={clipUrl}
+          poster={posterUrl}
+          width={480}
+          height={552}
+          inline
+          class={activeState === 'hover' ? 'force-hover' : ''}
+        />
+      </div>
+    </div>
+    {/snippet}
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .videolightbox-demo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-space-32);
+    width: 100%;
+  }
+
+  .videolightbox-demo-tile {
+    width: 8rem;
+  }
+
+  .videolightbox-demo-open {
+    flex: 1 1 18rem;
+    max-width: 28rem;
+  }
+</style>

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

@@ -24,6 +24,12 @@ import ImageEditor, { allTokens as imageTokens, intrinsics as imageIntrinsics }
 import { catalogue as imageCatalogue } from '../../system/components/Image.svelte';
 import ImageLightboxEditor, { allTokens as imageLightboxTokens } 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 { catalogue as videoFrameCatalogue } from '../../system/components/VideoFrame.svelte';
+import SlidePagerEditor, { allTokens as slidePagerTokens } 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 { catalogue as inlineEditActionsCatalogue } from '../../system/components/InlineEditActions.svelte';
 import InputEditor, { allTokens as inputTokens } from './InputEditor.svelte';
@@ -81,7 +87,10 @@ type BuiltInComponentId =
   | 'tabbar'
   | 'toggle'
   | 'tooltip'
-  | 'progressbar';
+  | 'progressbar'
+  | 'videolightbox'
+  | 'videoframe'
+  | 'slidepager';
 
 /**
  * Public component id type. Widened to `string` because consumers can register
@@ -255,6 +264,36 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     catalogue: imageLightboxCatalogue,
     origin: 'system',
   },
+  videolightbox: {
+    id: 'videolightbox',
+    label: 'Video Lightbox',
+    icon: 'fas fa-circle-play',
+    sourceFile: 'src/system/components/VideoLightbox.svelte',
+    editorComponent: VideoLightboxEditor,
+    schema: videoLightboxTokens,
+    catalogue: videoLightboxCatalogue,
+    origin: 'system',
+  },
+  videoframe: {
+    id: 'videoframe',
+    label: 'Video Frame',
+    icon: 'fas fa-film',
+    sourceFile: 'src/system/components/VideoFrame.svelte',
+    editorComponent: VideoFrameEditor,
+    schema: videoFrameTokens,
+    catalogue: videoFrameCatalogue,
+    origin: 'system',
+  },
+  slidepager: {
+    id: 'slidepager',
+    label: 'Slide Pager',
+    icon: 'fas fa-images',
+    sourceFile: 'src/system/components/SlidePager.svelte',
+    editorComponent: SlidePagerEditor,
+    schema: slidePagerTokens,
+    catalogue: slidePagerCatalogue,
+    origin: 'system',
+  },
   inlineeditactions: {
     id: 'inlineeditactions',
     label: 'Inline Edit Actions',

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

@@ -9,7 +9,7 @@
   import UIPaddingSelector from '../../ui/UIPaddingSelector.svelte';
   import UILetterSpacingSelector from '../../ui/UILetterSpacingSelector.svelte';
   import UIEasingSelector from '../../ui/UIEasingSelector.svelte';
-  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SCRIM_OPACITY, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
+  import { BLUR, BORDER_WIDTH, DOT_SIZE, DURATION, RADIUS, SCALE, SHADOW, TRACK_HEIGHT, HAIRLINE_INSET } from '../../ui/variantScales';
   import {
     editorState,
     getComponentPropertySiblings,
@@ -80,7 +80,6 @@
     'easing',
     'blur',
     'scale',
-    'opacity',
     'shadow',
     'text-color',
     'surface',
@@ -161,7 +160,6 @@
     'easing': { component: UIEasingSelector },
     'blur': { component: UIVariantSelector, extra: () => ({ ...BLUR }) },
     'scale': { component: UIVariantSelector, extra: () => ({ ...SCALE }) },
-    'opacity': { component: UIVariantSelector, extra: () => ({ ...SCRIM_OPACITY }) },
     'shadow': { component: UIVariantSelector, extra: () => ({ ...SHADOW }) },
     'surface': { component: UIPaletteSelector, extra: paletteExtra },
     'border': { component: UIPaletteSelector, extra: paletteExtra },
@@ -192,7 +190,6 @@
       'easing',
       'blur',
       'scale',
-      'opacity',
       'shadow',
       'surface',
       'border-width',

package/src/editor/core/components/aliasKinds.ts

@@ -11,7 +11,6 @@ export type TokenKind =
   | 'length'
   | 'blur'
   | 'scale'
-  | 'opacity'
   | 'shadow'
   | 'font-family'
   | 'font-weight'
@@ -60,9 +59,6 @@ export const KIND_RULES: ReadonlyArray<{
   { kind: 'dot-size',       suffix: ['-dot-size'] },
   { kind: 'blur',           suffix: ['-blur'], prefix: ['--blur-'] },
   { kind: 'scale',          suffix: ['-scale'], prefix: ['--scale-'] },
-  // A strength from 0 to 1 that the component mixes into a colour where it
-  // paints. A palette picker here writes a colour into a number.
-  { kind: 'opacity',        suffix: ['-opacity'], prefix: ['--scrim-opacity'] },
   { kind: 'shadow',         suffix: ['-shadow'], prefix: ['--shadow-'] },
   { kind: 'padding',        suffix: ['-padding', '-margin'] },
   { kind: 'gap',            suffix: ['-gap'] },

package/src/editor/core/sketch/sketchLayer.ts

@@ -186,12 +186,19 @@ const PART_SPECS: readonly PartSpec[] = [
   { sel: '.image-lightbox-thumb', stem: 'imagelightbox-tile', positioned: true, clips: true },
   // A fixed full-viewport scrim behind the open modal; no border of its own.
   {
-    sel: '.image-lightbox-overlay', fill: 'color-mix(in srgb, var(--imagelightbox-scrim-color) calc(var(--imagelightbox-scrim-opacity) * 100%), transparent)',
+    sel: '.image-lightbox-overlay', fill: 'var(--imagelightbox-scrim-surface)',
     stroke: 'transparent', positioned: true, unmasked: true,
   },
   // Close and the two nav chevrons all carry this class; each is fixed and
   // floats over the photo rather than a scrim of its own.
   { sel: '.image-lightbox-chrome', stem: 'imagelightbox-chrome', positioned: true, unmasked: true },
+  // The trigger inside clips the still, so the tile itself stays unclipped.
+  { sel: '.videolightbox', stem: 'videolightbox-tile' },
+  {
+    sel: '.videolightbox-modal', fill: 'var(--videolightbox-scrim-surface)',
+    stroke: 'transparent', positioned: true, unmasked: true,
+  },
+  { sel: '.videolightbox-close', stem: 'videolightbox-chrome', positioned: true, unmasked: true },
 
   // Status blocks
   ...STATUS_VARIANTS.map((v) => ({ sel: `.callout-${v}`, stem: `callout-${v}` })),