@motion-proto/live-tokens 0.68.1 → 0.70.0

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'menuselect';
 
@@ -91,14 +91,55 @@
     ['--menuselect-selected-icon-size', 'selected item'],
     ['--menuselect-disabled-icon-size', 'disabled item'],
   ]);
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--menuselect-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--menuselect-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import MenuSelect from '../../system/components/MenuSelect.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--menuselect-hover-surface', '--menuselect-default-surface'],
+  ];
+  const TINT_ON = 'var(--menuselect-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.menuselect?.aliases['--menuselect-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('menuselect', '--menuselect-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('menuselect', hover, { kind: 'token', name: base });
+      else clearComponentAlias('menuselect', hover);
+    }
+  }
 
   type Item = { value: string; label: string; icon?: string; disabled?: boolean };
   const items: Item[] = [
@@ -114,7 +155,12 @@
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(states).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 </script>
 
@@ -126,6 +172,20 @@
     {typeGroups}
     {component}
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--menuselect-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet canvasToolbarExtras()}
       <hr class="canvas-toolbar-divider" />
       <label class="show-icons-row">

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupTokens, buildTypeGroupShareableContexts } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'segmentedcontrol';
 
@@ -123,14 +123,55 @@
   const linkableContexts = new Map<string, string>(
     buildTypeGroupShareableContexts(typeGroups),
   );
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--segmentedcontrol-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--segmentedcontrol-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import SegmentedControl from '../../system/components/SegmentedControl.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--segmentedcontrol-option-hover-surface', '--color-transparent'],
+  ];
+  const TINT_ON = 'var(--segmentedcontrol-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.segmentedcontrol?.aliases['--segmentedcontrol-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('segmentedcontrol', '--segmentedcontrol-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('segmentedcontrol', hover, { kind: 'token', name: base });
+      else clearComponentAlias('segmentedcontrol', hover);
+    }
+  }
 
   type Segment = { value: string; label: string; icon?: string; disabled?: boolean };
   const segments: Segment[] = [
@@ -148,7 +189,12 @@
   let activeTypeGroups = $derived(previewSize === 'small' ? emptyTypeGroups : typeGroups);
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(activeStates).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(activeStates).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 </script>
 
@@ -160,6 +206,20 @@
     typeGroups={activeTypeGroups}
     {component}
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--segmentedcontrol-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet previewActions()}
       <label>
         <span>Size</span>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'sidenavigation';
 
@@ -259,14 +259,59 @@
     ['--sidenavigation-panel-padding', 'panel'],
     ['--sidenavigation-title-label-border-width', 'title block'],
   ]);
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--sidenavigation-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--sidenavigation-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import SideNavigation, { type SideNavSection, type SideNavFooter } from '../../system/components/SideNavigation.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--sidenavigation-title-hover-surface', '--sidenavigation-title-default-surface'],
+    ['--sidenavigation-toggle-hover-surface', '--sidenavigation-toggle-default-surface'],
+    ['--sidenavigation-section-hover-surface', '--sidenavigation-section-default-surface'],
+    ['--sidenavigation-item-hover-surface', '--sidenavigation-item-default-surface'],
+    ['--sidenavigation-footer-hover-surface', '--sidenavigation-footer-default-surface'],
+  ];
+  const TINT_ON = 'var(--sidenavigation-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.sidenavigation?.aliases['--sidenavigation-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('sidenavigation', '--sidenavigation-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('sidenavigation', hover, { kind: 'token', name: base });
+      else clearComponentAlias('sidenavigation', hover);
+    }
+  }
 
   const demoSections: SideNavSection[] = [
     {
@@ -296,7 +341,12 @@
   let previewOpen = $state(true);
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(states).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 
   // Map the active part/state to the demo's force-hover / force-active hooks
@@ -331,6 +381,20 @@
     {component}
     selectorLabel="Part"
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--sidenavigation-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet children({ activeState })}
       {@const { forceHoverPart, forceActivePart } = deriveForce(activeState)}
       <div class="sn-preview-frame">

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

@@ -0,0 +1,186 @@
+<script module lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import { sliderVariants } from '../../system/components/Slider.svelte';
+
+  export const component = 'slider';
+  const variants = sliderVariants;
+  type Variant = typeof variants[number];
+
+  // Geometry and colour are identical across the two variants by default, so
+  // every row is linkable: an edit to the single slider's track moves the range
+  // slider's track until a user unlinks them on purpose.
+  function variantDefaultTokens(v: Variant): Token[] {
+    return [
+      { label: 'surface', element: 'track', canBeLinked: true, groupKey: 'track-surface', variable: `--slider-${v}-track-surface` },
+      { label: 'border', element: 'track', canBeLinked: true, groupKey: 'track-border', variable: `--slider-${v}-track-border` },
+      { label: 'border width', element: 'track', canBeLinked: true, groupKey: 'track-border-width', variable: `--slider-${v}-track-border-width` },
+      { label: 'height', element: 'track', canBeLinked: true, groupKey: 'track-height', variable: `--slider-${v}-track-height` },
+      { label: 'corner radius', element: 'track', canBeLinked: true, groupKey: 'track-radius', variable: `--slider-${v}-track-radius` },
+      { label: 'color', element: 'fill', canBeLinked: true, groupKey: 'fill', variable: `--slider-${v}-fill` },
+      { label: 'surface', element: 'thumb', canBeLinked: true, groupKey: 'thumb-surface', variable: `--slider-${v}-thumb-surface` },
+      { label: 'border', element: 'thumb', canBeLinked: true, groupKey: 'thumb-border', variable: `--slider-${v}-thumb-border` },
+      { label: 'border width', element: 'thumb', canBeLinked: true, groupKey: 'thumb-border-width', variable: `--slider-${v}-thumb-border-width` },
+      { label: 'size', element: 'thumb', canBeLinked: true, groupKey: 'thumb-size', variable: `--slider-${v}-thumb-size` },
+      { label: 'corner radius', element: 'thumb', canBeLinked: true, groupKey: 'thumb-radius', variable: `--slider-${v}-thumb-radius` },
+      { label: 'shadow', element: 'thumb', canBeLinked: true, groupKey: 'thumb-shadow', variable: `--slider-${v}-thumb-shadow` },
+    ];
+  }
+
+  function variantHoverTokens(v: Variant): Token[] {
+    return [
+      { label: 'thumb surface', canBeLinked: true, groupKey: 'hover-thumb-surface', variable: `--slider-${v}-hover-thumb-surface` },
+      { label: 'thumb border', canBeLinked: true, groupKey: 'hover-thumb-border', variable: `--slider-${v}-hover-thumb-border` },
+    ];
+  }
+
+  function variantDisabledTokens(v: Variant): Token[] {
+    return [
+      { label: 'track surface', canBeLinked: true, groupKey: 'disabled-track-surface', variable: `--slider-${v}-disabled-track-surface` },
+      { label: 'fill color', canBeLinked: true, groupKey: 'disabled-fill', variable: `--slider-${v}-disabled-fill` },
+      { label: 'thumb surface', canBeLinked: true, groupKey: 'disabled-thumb-surface', variable: `--slider-${v}-disabled-thumb-surface` },
+      { label: 'thumb border', canBeLinked: true, groupKey: 'disabled-thumb-border', variable: `--slider-${v}-disabled-thumb-border` },
+    ];
+  }
+
+  // The label and its gap are shared by both variants, so their rows render
+  // once, under the single variant beside the type groups.
+  const labelGapToken: Token = { label: 'label gap', element: 'label', groupKey: 'label-gap', variable: '--slider-label-gap' };
+
+  function variantStates(v: Variant): Record<string, Token[]> {
+    return {
+      default: v === 'single' ? [...variantDefaultTokens(v), labelGapToken] : variantDefaultTokens(v),
+      hover: variantHoverTokens(v),
+      disabled: variantDisabledTokens(v),
+    };
+  }
+
+  // The label and value readout are shared by both variants, so they live in
+  // one type group outside the per-variant states.
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [
+      {
+        legend: '',
+        element: 'label',
+        colorVariable: '--slider-label',
+        familyVariable: '--slider-label-font-family',
+        sizeVariable: '--slider-label-font-size',
+        weightVariable: '--slider-label-font-weight',
+        lineHeightVariable: '--slider-label-line-height',
+      },
+      {
+        legend: '',
+        element: 'value',
+        colorVariable: '--slider-value',
+        familyVariable: '--slider-value-font-family',
+        sizeVariable: '--slider-value-font-size',
+        weightVariable: '--slider-value-font-weight',
+        lineHeightVariable: '--slider-value-line-height',
+      },
+    ],
+  };
+
+  const typeGroupTokens: Token[] = [
+    { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: '--slider-label-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: '--slider-label-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: '--slider-label-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: '--slider-label-line-height' },
+    { label: 'font family', canBeLinked: true, groupKey: 'value-font-family', variable: '--slider-value-font-family' },
+    { label: 'font size', canBeLinked: true, groupKey: 'value-font-size', variable: '--slider-value-font-size' },
+    { label: 'font weight', canBeLinked: true, groupKey: 'value-font-weight', variable: '--slider-value-font-weight' },
+    { label: 'line height', canBeLinked: true, groupKey: 'value-line-height', variable: '--slider-value-line-height' },
+  ];
+
+  export const allTokens: Token[] = [
+    ...variants.flatMap((v) => Object.values(variantStates(v)).flat()),
+    ...buildTypeGroupColorTokens(typeGroups, { component }),
+    ...typeGroupTokens,
+  ];
+
+  const linkableContexts = new Map<string, string>([
+    ...variants.flatMap((v) =>
+      Object.entries(variantStates(v)).flatMap(([state, list]) =>
+        list.filter((t) => t.canBeLinked).map((t) => [t.variable, `${v} ${state}`] as [string, string]),
+      ),
+    ),
+    ...typeGroupTokens
+      .filter((t) => t.canBeLinked)
+      .map((t) => [t.variable, t.variable.includes('-label-') ? 'label' : 'value'] as [string, string]),
+  ]);
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Slider from '../../system/components/Slider.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../core/store/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
+    Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>);
+
+  let value = $state(40);
+  let low = $state(20);
+  let high = $state(70);
+
+  function previewProps(activeState: string) {
+    return {
+      disabled: activeState === 'disabled',
+      forceClass: activeState === 'hover' ? 'force-hover' : '',
+    };
+  }
+</script>
+
+<ComponentEditorBase
+  {component}
+  title="Slider"
+  description="A number chosen by position on a track. Single moves one thumb to a value; range moves two thumbs to a low and a high bound."
+  tokens={allTokens}
+  {linked}
+  variants={variantOptions}
+>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={visibleVariantStates(v)}
+      typeGroups={v === 'single' ? typeGroups : undefined}
+      {component}
+      siblings={buildSiblings(variants, v, variantStates)}
+    >
+      {#snippet children({ activeState })}
+        {@const p = previewProps(activeState)}
+        <div class="slider-demo-stack">
+          {#if v === 'range'}
+            <Slider
+              variant="range"
+              label="Price"
+              {low}
+              {high}
+              disabled={p.disabled}
+              class={p.forceClass}
+              onrangechange={(l, h) => { low = l; high = h; }}
+            />
+          {:else}
+            <Slider label="Volume" {value} disabled={p.disabled} class={p.forceClass} onchange={(n) => (value = n)} />
+          {/if}
+        </div>
+      {/snippet}
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .slider-demo-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+    width: 100%;
+    max-width: 32rem;
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'tabbar';
 
@@ -81,14 +81,55 @@
     [`--tabbar-${s}-text-line-height`, `${s} tab`] as const,
   ]),
   ]);
+
+  // The hover tint is off unless a project turns it on: the gate holds a
+  // transparent layer, a no-op, until it holds the tint itself.
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'hover-tint',
+      variants: ['default'],
+      variable: () => '--tabbar-hover-tint-enabled',
+      values: ['var(--color-transparent)', 'var(--tabbar-hover-tint)'],
+      default: { default: 'var(--color-transparent)' },
+    },
+  ];
 </script>
 
 <script lang="ts">
   import TabBar from '../../system/components/TabBar.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import { editorState } from '../core/store/editorStore';
+  import { editorState, setComponentAlias, clearComponentAlias } from '../core/store/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import Toggle from '../ui/Toggle.svelte';
+  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
+
+  // One switch. Turning the tint on also stands each hover surface down to its
+  // own base, so hover is the tint alone rather than a swap wearing a wash.
+  // Written as aliases rather than gated in CSS: a component token's value is
+  // substituted at :root, so it can never name a per-variant private var.
+  // Off clears the overrides, returning each surface to its shipped default.
+  const HOVER_SWAPS: readonly (readonly [hover: string, base: string])[] = [
+    ['--tabbar-hover-surface', '--tabbar-default-surface'],
+  ];
+  const TINT_ON = 'var(--tabbar-hover-tint)';
+  const TINT_OFF = 'var(--color-transparent)';
+
+  let tintOn = $derived.by(() => {
+    const ref = $editorState.components.tabbar?.aliases['--tabbar-hover-tint-enabled'];
+    return (ref?.kind === 'literal' ? ref.value : TINT_OFF) === TINT_ON;
+  });
+
+  function setTintOn(checked: boolean) {
+    setComponentAlias('tabbar', '--tabbar-hover-tint-enabled', {
+      kind: 'literal',
+      value: checked ? TINT_ON : TINT_OFF,
+    });
+    for (const [hover, base] of HOVER_SWAPS) {
+      if (checked) setComponentAlias('tabbar', hover, { kind: 'token', name: base });
+      else clearComponentAlias('tabbar', hover);
+    }
+  }
 
   let selectedDemoTab = $state('overview');
   const demoTabs = [
@@ -101,7 +142,12 @@
   let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
   let visibleStates = $derived(Object.fromEntries(
-    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+    Object.entries(states).map(([name, list]) => [
+      name,
+      withLinkedDisabled(list, linked.varSet).map((t) =>
+        tintOn && t.variable.endsWith('-hover-surface') ? { ...t, disabled: true } : t,
+      ),
+    ]),
   ) as Record<string, Token[]>);
 </script>
 
@@ -114,6 +160,20 @@
     {component}
     
   >
+    {#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>
+          <Toggle checked={tintOn} onchange={setTintOn} />
+        </div>
+        {#if tintOn}
+          <div class="property-row">
+            <span class="property-label">tint color</span>
+            <UIPaletteSelector variable="--tabbar-hover-tint" {component} showNone={false} />
+          </div>
+        {/if}
+      {/if}
+    {/snippet}
     {#snippet children({ activeState })}
         {@const forceClass = activeState === 'hover tab' ? 'force-hover' : ''}
       <TabBar tabs={demoTabs} selectedTab={selectedDemoTab} class={forceClass} on:tabChange={(e) => (selectedDemoTab = e.detail)} />

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

@@ -19,6 +19,7 @@ import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEdi
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
 import PanelEditor, { allTokens as panelTokens } from './PanelEditor.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
+import SliderEditor, { allTokens as sliderTokens } from './SliderEditor.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
 import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics } from './SectionDividerEditor.svelte';
 import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
@@ -320,6 +321,15 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     schema: progressBarTokens,
     origin: 'system',
   },
+  slider: {
+    id: 'slider',
+    label: 'Slider',
+    icon: 'fas fa-sliders',
+    sourceFile: 'src/system/components/Slider.svelte',
+    editorComponent: SliderEditor,
+    schema: sliderTokens,
+    origin: 'system',
+  },
 });
 
 /** Mutable map of consumer-registered components, populated by `registerComponent()`. */