@motion-proto/live-tokens 0.3.9 → 0.6.0

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

@@ -13,8 +13,12 @@
   const fadeDur = reduceMotion ? 0 : 140;
   const slideDur = reduceMotion ? 0 : 200;
 
-  export let component: string;
-  export let linked: LinkedBlockResult;
+  interface Props {
+    component: string;
+    linked: LinkedBlockResult;
+  }
+
+  let { component, linked }: Props = $props();
 
   const editorCtx = getEditorContext();
   const focusedVariant = editorCtx?.focusedVariant;
@@ -25,9 +29,9 @@
       doesn't know if its rows are variants (top-level tab strip) or states (per-VariantGroup
       state tabs), so we set both stores; each consumer adopts the value only if it names
       one of its own tabs. */
-  function handleChartSelect(e: CustomEvent<string>) {
-    editorCtx?.focusedVariant.set(e.detail);
-    editorCtx?.focusedState.set(e.detail);
+  function handleChartSelect(label: string) {
+    editorCtx?.focusedVariant.set(label);
+    editorCtx?.focusedState.set(label);
   }
 
   /** Pick the sibling that backs the cell the user is currently focused on, so the row
@@ -71,35 +75,35 @@
     return `${brokenContexts.length} unlinked`;
   }
 
-  $: focusedV = (focusedVariant ? $focusedVariant : null) ?? null;
-  $: focusedS = (focusedState ? $focusedState : null) ?? null;
-  $: hoveredVar = (hoveredLinkedVariable ? $hoveredLinkedVariable : null) ?? null;
+  let focusedV = $derived((focusedVariant ? $focusedVariant : null) ?? null);
+  let focusedS = $derived((focusedState ? $focusedState : null) ?? null);
+  let hoveredVar = $derived((hoveredLinkedVariable ? $hoveredLinkedVariable : null) ?? null);
 
   function setHover(variable: string | null) {
     hoveredLinkedVariable?.set(variable);
   }
 
   /** One card per LinkedGroup. Stable order = editor-declared order. */
-  $: cards = linked.groups.map((g) => ({
+  let cards = $derived(linked.groups.map((g) => ({
     contexts: g.contexts,
     brokenContexts: g.brokenContexts,
     row: { ...g.token, variable: pickFocusedVariable(g, focusedV, focusedS) },
     caption: captionFor(g.contexts),
     unlinkedText: formatUnlinked(g.brokenContexts),
     isBroken: g.brokenContexts.length > 0,
-  }));
+  })));
 
   /** Section-level summary: count of properties with any broken peers. The
       header tells the user *whether to look*; the per-card text tells them
       *what's broken*. Two layers, two granularities. */
-  $: brokenPropertyCount = cards.filter((c) => c.isBroken).length;
-  $: hasAnyBroken = brokenPropertyCount > 0;
+  let brokenPropertyCount = $derived(cards.filter((c) => c.isBroken).length);
+  let hasAnyBroken = $derived(brokenPropertyCount > 0);
 
   /** Default closed; the section header's summary count + "in sync / N unlinked"
       text is the at-a-glance signal, so users opt into the matrix only when
       they need it. */
-  let sectionToggleOverride: boolean | null = null;
-  $: sectionExpanded = sectionToggleOverride ?? false;
+  let sectionToggleOverride: boolean | null = $state(null);
+  let sectionExpanded = $derived(sectionToggleOverride ?? false);
   function toggleSection() {
     sectionToggleOverride = !sectionExpanded;
   }
@@ -107,7 +111,7 @@
   /** Per-card chart expand state, keyed by the card's row variable (which is
       stable per LinkedGroup since pickFocusedVariable runs against the same
       group on every render). */
-  let expandedCards: Record<string, boolean> = {};
+  let expandedCards: Record<string, boolean> = $state({});
   function toggleCard(variable: string) {
     expandedCards = { ...expandedCards, [variable]: !expandedCards[variable] };
   }
@@ -120,7 +124,7 @@
       class="section-header"
       class:expanded={sectionExpanded}
       aria-expanded={sectionExpanded}
-      on:click={toggleSection}
+      onclick={toggleSection}
     >
       <i class="fas fa-chevron-right chevron"></i>
       <span class="section-title">Linked properties</span>
@@ -144,8 +148,8 @@
             class="linked-card"
             class:broken={card.isBroken}
             class:hovered={cardHovered}
-            on:mouseenter={() => setHover(card.row.variable)}
-            on:mouseleave={() => setHover(null)}
+            onmouseenter={() => setHover(card.row.variable)}
+            onmouseleave={() => setHover(null)}
           >
             <h4 class="property-name">{card.row.label}</h4>
             <div class="control-row">
@@ -154,7 +158,6 @@
                 {component}
                 linkedOrder={linked.linkedOrder}
                 isLinkedBlock
-                on:change
               />
             </div>
             <button
@@ -162,7 +165,7 @@
               class="drill-down"
               class:expanded={cardExpanded}
               aria-expanded={cardExpanded}
-              on:click={() => toggleCard(card.row.variable)}
+              onclick={() => toggleCard(card.row.variable)}
             >
               <i class="fas fa-chevron-right chevron"></i>
               <span class="drill-label">Links</span>
@@ -181,7 +184,7 @@
                   caption={card.caption}
                   selectedRow={focusedV}
                   selectedCol={focusedS}
-                  on:select={handleChartSelect}
+                  onselect={handleChartSelect}
                 />
               </div>
             {/if}

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

@@ -1,4 +1,9 @@
 <script lang="ts">
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
   /** Section that gathers render-time toggles a component accepts as props
       (e.g. dismissible, action buttons, hover shimmer, show icons). */
 </script>
@@ -9,7 +14,7 @@
     <p class="config-description">Component accepts multiple properties that can change its layout. Use these to preview.</p>
   </header>
   <div class="config-controls">
-    <slot />
+    {@render children?.()}
   </div>
 </section>
 

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

@@ -1,43 +1,26 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { run } from 'svelte/legacy';
+
   import type { ComponentConfigMeta } from '../../lib/themeTypes';
   import { sanitizeFileName } from '../../lib/themeService';
   import UIDialog from '../../ui/UIDialog.svelte';
 
-  /** Two-way bound: parent toggles to open/close. */
-  export let show: boolean = false;
-  /** Display name to seed the input with when the dialog opens. */
-  export let currentDisplayName: string = '';
-  /** Existing files used by the increment helper to find the next available `_NN` suffix. */
-  export let files: ComponentConfigMeta[] = [];
+  interface Props {
+    /** Two-way bound: parent toggles to open/close. */
+    show?: boolean;
+    /** Display name to seed the input with when the dialog opens. */
+    currentDisplayName?: string;
+    /** Existing files used by the increment helper to find the next available `_NN` suffix. */
+    files?: ComponentConfigMeta[];
+    onsave?: (payload: { displayName: string; fileName: string }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{
-    save: { displayName: string; fileName: string };
-  }>();
+  let { show = $bindable(false), currentDisplayName = '', files = [], onsave }: Props = $props();
 
-  let saveAsName = '';
-  let saveAsInput: HTMLInputElement;
+  let saveAsName = $state('');
+  let saveAsInput: HTMLInputElement | undefined = $state();
 
-  // Seed and select the input whenever the dialog opens. setTimeout(..., 0)
-  // matches the original parent's behaviour: it runs as a macrotask, after
-  // UIDialog's microtask-queued focus on the confirm button — so the input
-  // ends up focused-and-selected, not the button.
-  $: if (show) {
-    saveAsName =
-      sanitizeFileName(currentDisplayName) === 'default'
-        ? nextIncrementName(currentDisplayName).displayName
-        : currentDisplayName;
-    setTimeout(() => saveAsInput?.select(), 0);
-  }
 
-  $: saveAsError = (() => {
-    const trimmed = saveAsName.trim();
-    if (!trimmed) return '';
-    if (sanitizeFileName(trimmed) === 'default') {
-      return 'The name "default" is reserved for the core component definition.';
-    }
-    return '';
-  })();
 
   function nextIncrementName(baseDisplay: string): { displayName: string; fileName: string } {
     const baseName = baseDisplay.replace(/_\d+$/, '');
@@ -67,12 +50,33 @@
     if (!displayName || saveAsError) return;
     const fileName = sanitizeFileName(displayName);
     show = false;
-    dispatch('save', { displayName, fileName });
+    onsave?.({ displayName, fileName });
   }
 
   function handleKeydown(e: KeyboardEvent) {
     if (e.key === 'Enter') confirmSaveAs();
   }
+  // Seed and select the input whenever the dialog opens. setTimeout(..., 0)
+  // matches the original parent's behaviour: it runs as a macrotask, after
+  // UIDialog's microtask-queued focus on the confirm button — so the input
+  // ends up focused-and-selected, not the button.
+  run(() => {
+    if (show) {
+      saveAsName =
+        sanitizeFileName(currentDisplayName) === 'default'
+          ? nextIncrementName(currentDisplayName).displayName
+          : currentDisplayName;
+      setTimeout(() => saveAsInput?.select(), 0);
+    }
+  });
+  let saveAsError = $derived((() => {
+    const trimmed = saveAsName.trim();
+    if (!trimmed) return '';
+    if (sanitizeFileName(trimmed) === 'default') {
+      return 'The name "default" is reserved for the core component definition.';
+    }
+    return '';
+  })());
 </script>
 
 <UIDialog
@@ -81,7 +85,7 @@
   cancelLabel="Cancel"
   confirmLabel="Save"
   confirmDisabled={!saveAsName.trim() || !!saveAsError}
-  on:confirm={confirmSaveAs}
+  onconfirm={confirmSaveAs}
   width="360px"
 >
   <div class="save-as-dialog">
@@ -92,13 +96,13 @@
         type="text"
         bind:value={saveAsName}
         bind:this={saveAsInput}
-        on:keydown={handleKeydown}
+        onkeydown={handleKeydown}
         placeholder="Config name…"
       />
       <button
         type="button"
         class="save-as-increment"
-        on:click={incrementSaveAsName}
+        onclick={incrementSaveAsName}
         title="Increment filename"
       >
         <i class="fas fa-plus"></i>

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

@@ -1,20 +1,32 @@
 <script lang="ts">
   import newspaperBg from '../../assets/newspaper.webp';
 
-  export let mode: 'image' | 'color' = 'image';
-  /** CSS var name (set by ShadowBackdropControls) the backdrop reads when in color mode. */
-  export let colorVariable: string;
-  /** Padding around the slotted preview. Set to '0' when the slotted component should cover the full backdrop area (e.g. dialog overlay). */
-  export let padding: string = '128px';
+  
+  
+  interface Props {
+    mode?: 'image' | 'color';
+    /** CSS var name (set by ShadowBackdropControls) the backdrop reads when in color mode. */
+    colorVariable: string;
+    /** Padding around the slotted preview. Set to '0' when the slotted component should cover the full backdrop area (e.g. dialog overlay). */
+    padding?: string;
+    children?: import('svelte').Snippet;
+  }
+
+  let {
+    mode = 'image',
+    colorVariable,
+    padding = '128px',
+    children
+  }: Props = $props();
 
-  $: backgroundStyle =
-    mode === 'image'
+  let backgroundStyle =
+    $derived(mode === 'image'
       ? `padding: ${padding}; background-image: url(${newspaperBg}); background-size: cover; background-position: center; background-repeat: no-repeat;`
-      : `padding: ${padding}; background: var(${colorVariable}, #1a1a1a);`;
+      : `padding: ${padding}; background: var(${colorVariable}, #1a1a1a);`);
 </script>
 
 <div class="shadow-backdrop" style={backgroundStyle}>
-  <slot />
+  {@render children?.()}
 </div>
 
 <style>

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

@@ -5,9 +5,14 @@
   import { setCssVar } from '../../lib/cssVarSync';
 
   type Mode = 'image' | 'color';
-  export let mode: Mode = 'image';
-  /** Editor-scoped CSS var the picker writes to (must end with `-surface` to allow gradients). */
-  export let colorVariable: string;
+  
+  interface Props {
+    mode?: Mode;
+    /** Editor-scoped CSS var the picker writes to (must end with `-surface` to allow gradients). */
+    colorVariable: string;
+  }
+
+  let { mode = $bindable('image'), colorVariable }: Props = $props();
 
   const options: ReadonlyArray<{ value: Mode; label: string }> = [
     { value: 'image', label: 'Image' },

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

@@ -12,21 +12,38 @@
   import TypeEditor from './TypeEditor.svelte';
   import type { Token, TypeGroupConfig } from './types';
 
-  /** Tokens for this state, fed to `<TokenLayout>`. */
-  export let tokens: Token[];
-  /** Type groups for this state; rendered as a row of `<TypeEditor>` blocks. */
-  export let typeGroups: TypeGroupConfig[] = [];
-  /** Forwarded to TypeEditor and TokenLayout so writes persist through the editor store. */
-  export let component: string | undefined = undefined;
-  /** Per-variable rank passed through to TokenLayout for linked-block alignment. */
-  export let linkedOrder: Map<string, number> | undefined = undefined;
-  /** Render the token grid with N visual columns. >1 spreads a long property
+  
+  
+  
+  
+  
+  interface Props {
+    /** Tokens for this state, fed to `<TokenLayout>`. */
+    tokens: Token[];
+    /** Type groups for this state; rendered as a row of `<TypeEditor>` blocks. */
+    typeGroups?: TypeGroupConfig[];
+    /** Forwarded to TypeEditor and TokenLayout so writes persist through the editor store. */
+    component?: string | undefined;
+    /** Per-variable rank passed through to TokenLayout for linked-block alignment. */
+    linkedOrder?: Map<string, number> | undefined;
+    /** Render the token grid with N visual columns. >1 spreads a long property
       list horizontally; only meaningful for state-blocks without typeGroups
       (the two-col flex layout already partitions screen real estate when
       typeGroups are present). */
-  export let columns: number = 1;
+    columns?: number;
+    onchange?: () => void;
+  }
+
+  let {
+    tokens,
+    typeGroups = [],
+    component = undefined,
+    linkedOrder = undefined,
+    columns = 1,
+    onchange,
+  }: Props = $props();
 
-  $: hasTypeGroups = typeGroups.length > 0;
+  let hasTypeGroups = $derived(typeGroups.length > 0);
 </script>
 
 <div class="state-controls" class:two-col={hasTypeGroups}>
@@ -50,7 +67,7 @@
           outlineColorVariable={tg.outlineColorVariable}
           outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
           {component}
-          on:change
+          {onchange}
         />
       {/each}
     </div>
@@ -61,7 +78,7 @@
     {component}
     {linkedOrder}
     {columns}
-    on:change
+    {onchange}
   />
 </div>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, type ComponentType } from 'svelte';
+  import type { Component } from 'svelte';
   import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
   import UIVariantSelector from '../../ui/UIVariantSelector.svelte';
   import UIFontFamilySelector from '../../ui/UIFontFamilySelector.svelte';
@@ -40,21 +40,40 @@
 
   type Entry = { kind: Kind; token: Token };
 
-  export let title: string = '';
-  export let tokens: Token[];
-  /** Forwarded to each selector; when set, writes persist through the editor store. */
-  export let component: string | undefined = undefined;
-  /** Optional context labels per variable (shown below the selector). */
-  export let contexts: Record<string, string[]> = {};
-  /** Per-variable rank that overrides kind rank when sorting; lets linked tokens align with the top linked row. */
-  export let linkedOrder: Map<string, number> | undefined = undefined;
-  /** Set true on the linked-block instance so dimmed variant rows can scroll/flash to the matching anchor. */
-  export let isLinkedBlock: boolean = false;
-  /** Number of visual columns. >1 switches to a column-major grid (grid-auto-flow: column)
+  
+  
+  
+  
+  
+  interface Props {
+    title?: string;
+    tokens: Token[];
+    /** Forwarded to each selector; when set, writes persist through the editor store. */
+    component?: string | undefined;
+    /** Optional context labels per variable (shown below the selector). */
+    contexts?: Record<string, string[]>;
+    /** Per-variable rank that overrides kind rank when sorting; lets linked tokens align with the top linked row. */
+    linkedOrder?: Map<string, number> | undefined;
+    /** Set true on the linked-block instance so dimmed variant rows can scroll/flash to the matching anchor. */
+    isLinkedBlock?: boolean;
+    /** Number of visual columns. >1 switches to a column-major grid (grid-auto-flow: column)
       so the consumer can spread a long property list across the available width. In
       multi-col mode, the linked-first sort + zone divider are dropped — kind-grouped flow
       reads more naturally when columns themselves carry the visual grouping. */
-  export let columns: number = 1;
+    columns?: number;
+    onchange?: () => void;
+  }
+
+  let {
+    title = '',
+    tokens,
+    component = undefined,
+    contexts = {},
+    linkedOrder = undefined,
+    isLinkedBlock = false,
+    columns = 1,
+    onchange,
+  }: Props = $props();
 
   /** Suffix/prefix patterns mapped to kinds — single source of truth used by `categorize`.
       Order matters: `text` must run before `border`/`surface` because `--text-*` would
@@ -134,7 +153,7 @@
   /** Selector registry: one entry per kind. `extra` props (e.g. UIPaddingSelector's
       `mode`/`splittable`/`rowLabel`) are forwarded alongside the linked props. */
   type SelectorEntry = {
-    component: ComponentType;
+    component: Component<any, any, any>;
     extra?: (token: Token) => Record<string, unknown>;
     /** When true, the row is rendered as a self-contained block (spans all grid columns,
         no .token-row wrapper, no contexts strip). Currently only `padding-split`. */
@@ -235,8 +254,6 @@
     return set;
   }
 
-  const dispatch = createEventDispatcher();
-
   /** When a row collapses several groupKey leads into one display, mirror the lead's
       new alias onto each peer (and its siblings) so the merged display stays in sync. */
   function handleRowChange(token: Token) {
@@ -248,7 +265,7 @@
         else clearComponentAliasLinked(component, peer);
       }
     }
-    dispatch('change');
+    onchange?.();
   }
 
   /** Bidirectional hover cue with the Linked-properties block. The upper grid
@@ -263,20 +280,20 @@
     hoveredLinkedVariable?.set(variable);
   }
 
-  $: hoveredVar = !isLinkedBlock && hoveredLinkedVariable ? $hoveredLinkedVariable : null;
-  $: isMultiCol = columns > 1;
-  $: linkedKinds = computeLinkedKinds(component, $editorState);
-  $: entries = buildEntries(tokens.filter((t) => !t.hidden), linkedOrder, linkedKinds, component, $editorState, isMultiCol);
+  let hoveredVar = $derived(!isLinkedBlock && hoveredLinkedVariable ? $hoveredLinkedVariable : null);
+  let isMultiCol = $derived(columns > 1);
+  let linkedKinds = $derived(computeLinkedKinds(component, $editorState));
+  let entries = $derived(buildEntries(tokens.filter((t) => !t.hidden), linkedOrder, linkedKinds, component, $editorState, isMultiCol));
   /** Index of the first independent (non-linked) entry; -1 when there are no linked entries or no boundary.
       Suppressed in multi-col mode (no divider — column structure is the grouping). */
-  $: firstIndependentIdx = (() => {
+  let firstIndependentIdx = $derived((() => {
     if (isMultiCol) return -1;
     const idx = entries.findIndex((e) => !linkedKinds.has(e.kind));
     if (idx <= 0) return -1;
     return idx;
-  })();
+  })());
   /** Rows per column for column-major flow; ceil so the last column may be short. */
-  $: rowsPerCol = isMultiCol ? Math.max(1, Math.ceil(entries.length / columns)) : entries.length;
+  let rowsPerCol = $derived(isMultiCol ? Math.max(1, Math.ceil(entries.length / columns)) : entries.length);
 
 </script>
 
@@ -320,24 +337,23 @@
       -->
       {@const isLinkedRow = linkedKinds.has(entry.kind)}
       {@const isHovered = !isLinkedBlock && isLinkedRow && hoveredVar === token.variable}
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         class="token-entry"
         class:token-row={!sel.standalone}
         class:has-contexts={!sel.standalone && !!ctxs?.length}
         class:linked-hovered={isHovered}
         class:non-first-set={isNonFirstSet}
-        on:mouseenter={isLinkedBlock || !isLinkedRow ? undefined : () => setHover(token.variable)}
-        on:mouseleave={isLinkedBlock || !isLinkedRow ? undefined : () => setHover(null)}
+        onmouseenter={isLinkedBlock || !isLinkedRow ? undefined : () => setHover(token.variable)}
+        onmouseleave={isLinkedBlock || !isLinkedRow ? undefined : () => setHover(null)}
       >
         {#if !sel.standalone}
           <span class="token-label">{token.label}</span>
         {/if}
-        <svelte:component
-          this={sel.component}
+        <sel.component
           {...sharedProps}
           {...extra}
-          on:change={() => handleRowChange(token)}
+          onchange={() => handleRowChange(token)}
         />
         {#if !sel.standalone && ctxs?.length}
           <div class="token-contexts">

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

@@ -8,57 +8,83 @@
   import FieldsetWrapper from './FieldsetWrapper.svelte';
   import { BORDER_WIDTH } from '../../ui/variantScales';
 
-  export let colorVariable: string;
-  export let colorLabel: string = 'color';
-  export let familyVariable: string | undefined = undefined;
-  export let familyLabel: string = 'family';
-  export let sizeVariable: string | undefined = undefined;
-  export let sizeLabel: string = 'size';
-  export let weightVariable: string | undefined = undefined;
-  export let weightLabel: string = 'weight';
-  export let lineHeightVariable: string | undefined = undefined;
-  export let lineHeightLabel: string = 'line-h';
-  /** Optional outline rows rendered under the typography rows so a text-with-
+  
+  
+  
+  interface Props {
+    colorVariable: string;
+    colorLabel?: string;
+    familyVariable?: string | undefined;
+    familyLabel?: string;
+    sizeVariable?: string | undefined;
+    sizeLabel?: string;
+    weightVariable?: string | undefined;
+    weightLabel?: string;
+    lineHeightVariable?: string | undefined;
+    lineHeightLabel?: string;
+    /** Optional outline rows rendered under the typography rows so a text-with-
       stroke group keeps stroke controls visually nested with the type they
       drive (e.g. SectionDivider title outline). */
-  export let outlineWidthVariable: string | undefined = undefined;
-  export let outlineWidthLabel: string = 'outline thickness';
-  export let outlineColorVariable: string | undefined = undefined;
-  export let outlineColorLabel: string = 'outline color';
-  /** When set, writes persist through the editor store under this component. */
-  export let component: string | undefined = undefined;
-  /** Legend text for the fieldset. */
-  export let legend: string = 'type';
+    outlineWidthVariable?: string | undefined;
+    outlineWidthLabel?: string;
+    outlineColorVariable?: string | undefined;
+    outlineColorLabel?: string;
+    /** When set, writes persist through the editor store under this component. */
+    component?: string | undefined;
+    /** Legend text for the fieldset. */
+    legend?: string;
+    onchange?: () => void;
+  }
+
+  let {
+    colorVariable,
+    colorLabel = 'color',
+    familyVariable = undefined,
+    familyLabel = 'family',
+    sizeVariable = undefined,
+    sizeLabel = 'size',
+    weightVariable = undefined,
+    weightLabel = 'weight',
+    lineHeightVariable = undefined,
+    lineHeightLabel = 'line-h',
+    outlineWidthVariable = undefined,
+    outlineWidthLabel = 'outline thickness',
+    outlineColorVariable = undefined,
+    outlineColorLabel = 'outline color',
+    component = undefined,
+    legend = 'type',
+    onchange,
+  }: Props = $props();
 </script>
 
 <FieldsetWrapper {legend}>
   <div class="type-grid">
     <span class="row-label">{colorLabel}</span>
-    <UIPaletteSelector variable={colorVariable} {component} on:change />
+    <UIPaletteSelector variable={colorVariable} {component} {onchange} />
 
     {#if familyVariable}
       <span class="row-label">{familyLabel}</span>
-      <UIFontFamilySelector variable={familyVariable} {component} canBeLinked on:change />
+      <UIFontFamilySelector variable={familyVariable} {component} canBeLinked {onchange} />
     {/if}
     {#if weightVariable}
       <span class="row-label">{weightLabel}</span>
-      <UIFontWeightSelector variable={weightVariable} {component} canBeLinked on:change />
+      <UIFontWeightSelector variable={weightVariable} {component} canBeLinked {onchange} />
     {/if}
     {#if sizeVariable}
       <span class="row-label">{sizeLabel}</span>
-      <UIFontSizeSelector variable={sizeVariable} {component} canBeLinked on:change />
+      <UIFontSizeSelector variable={sizeVariable} {component} canBeLinked {onchange} />
     {/if}
     {#if lineHeightVariable}
       <span class="row-label">{lineHeightLabel}</span>
-      <UILineHeightSelector variable={lineHeightVariable} {component} canBeLinked on:change />
+      <UILineHeightSelector variable={lineHeightVariable} {component} canBeLinked {onchange} />
     {/if}
     {#if outlineWidthVariable}
       <span class="row-label">{outlineWidthLabel}</span>
-      <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} on:change />
+      <UIVariantSelector variable={outlineWidthVariable} {component} canBeLinked {...BORDER_WIDTH} {onchange} />
     {/if}
     {#if outlineColorVariable}
       <span class="row-label">{outlineColorLabel}</span>
-      <UIPaletteSelector variable={outlineColorVariable} {component} canBeLinked on:change />
+      <UIPaletteSelector variable={outlineColorVariable} {component} canBeLinked {onchange} />
     {/if}
   </div>
 </FieldsetWrapper>