@motion-proto/live-tokens 0.3.7 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # Live Tokens
 
-A foundational design system for quickly styling and building Svelte 4 + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
+A foundational design system for quickly styling and building Svelte + Vite microsites. **Edit your tokens and components in real time** — colors, typography, spacing, per-component aliases — and see the site update as you drag the slider. Save the result as a portable configuration you can carry from project to project.
 
 `npm install @motion-proto/live-tokens` into your app — install once, style fast. The editor is dev-only; production builds get plain CSS variables and your chosen components, nothing else.
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.3.7",
+  "version": "0.5.0",
   "type": "module",
-  "description": "Design token editor with live CSS variable editing. Svelte 4 + Vite.",
+  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
     "svelte",
     "vite",
@@ -11,6 +11,7 @@
     "editor"
   ],
   "license": "MIT",
+  "author": "Mark Pearce <mark@motionproto.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/motionproto/live-tokens.git"
@@ -37,7 +38,8 @@
     "src/assets",
     "dist-plugin",
     "!**/*.test.ts",
-    "!**/*.spec.ts"
+    "!**/*.spec.ts",
+    "!**/__tests__/**"
   ],
   "exports": {
     ".": {
@@ -92,22 +94,22 @@
   },
   "peerDependencies": {
     "sass": "^1.0",
-    "svelte": "^4.2",
+    "svelte": "^5",
     "svelte-preprocess": "^6.0",
-    "vite": "^5.0"
+    "vite": "^6 || ^7"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tsconfig/svelte": "^5.0.8",
     "@types/node": "^24.12.0",
     "happy-dom": "^20.9.0",
     "sass": "^1.98.0",
-    "svelte": "^4.2.20",
-    "svelte-check": "^3.8.6",
+    "svelte": "^5.55.5",
+    "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
     "typescript": "~5.9.3",
-    "vite": "^5.4.21",
+    "vite": "^7.3.3",
     "vitest": "^4.1.4"
   },
   "dependencies": {

package/src/component-editor/BadgeEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
   import { badgeVariants } from '../components/Badge.svelte';
@@ -69,18 +69,18 @@
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
   import UIRadioGroup from '../ui/UIRadioGroup.svelte';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
 
-  let bgMode: 'image' | 'color' = 'image';
+  let bgMode: 'image' | 'color' = $state('image');
   const bgVar = '--backdrop-badge-surface';
 
   // Preview-only props for Badge's floating/anchor/flush features (not persisted).
   // For corner-anchored use, prefer the dedicated CornerBadge component; Badge.floating
   // is the low-level escape hatch for off-corner floating placements.
-  let floating: boolean = false;
-  let flush: boolean = false;
-  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = 'bottom-right';
+  let floating: boolean = $state(false);
+  let flush: boolean = $state(false);
+  let anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' = $state('bottom-right');
   const anchorOptions = [
     { value: 'top-left' as const, label: 'TL' },
     { value: 'top-right' as const, label: 'TR' },
@@ -90,23 +90,25 @@
 </script>
 
 <ComponentEditorBase {component} title="Badge" description="Pill-shaped badges with color variants. Import from <code>components/Badge.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
-  <svelte:fragment slot="config">
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-    <label class="float-toggle">
-      <input type="checkbox" bind:checked={floating} />
-      <span>Floating preview</span>
-    </label>
-    {#if floating}
+  {#snippet config()}
+  
+      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
       <label class="float-toggle">
-        <input type="checkbox" bind:checked={flush} />
-        <span>Flush corner</span>
+        <input type="checkbox" bind:checked={floating} />
+        <span>Floating preview</span>
       </label>
-      <div class="anchor-control">
-        <span>Anchor</span>
-        <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
-      </div>
-    {/if}
-  </svelte:fragment>
+      {#if floating}
+        <label class="float-toggle">
+          <input type="checkbox" bind:checked={flush} />
+          <span>Flush corner</span>
+        </label>
+        <div class="anchor-control">
+          <span>Anchor</span>
+          <UIRadioGroup bind:value={anchor} name="badge-anchor" options={anchorOptions} />
+        </div>
+      {/if}
+    
+  {/snippet}
   {#each variants as v}
     <VariantGroup
       name={v}

package/src/component-editor/CalloutEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
   import { calloutVariants } from '../components/Callout.svelte';
@@ -76,8 +76,8 @@
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import { buildSiblings } from './scaffolding/siblings';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleVariantTokens = $derived((v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet));
 
   const sample: Record<Variant, { label: string; message: string }> = {
     info: { label: 'Note.', message: 'This is contextual information you should know about.' },

package/src/component-editor/CardEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -127,46 +127,50 @@
   import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStates = Object.fromEntries(
+  let visibleStates = $derived(Object.fromEntries(
     Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) as Record<string, Token[]>);
 
-  let hoverEnabled = true;
-  let bgMode: 'image' | 'color' = 'image';
+  let hoverEnabled = $state(true);
+  let bgMode: 'image' | 'color' = $state('image');
   const bgVar = '--backdrop-card-surface';
 </script>
 
 <ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. Import from <code>components/Card.svelte</code>" tokens={allTokens} {linked}>
-  <svelte:fragment slot="config">
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+    
+  {/snippet}
   <VariantGroup
     name="card"
     title="Card"
     states={visibleStates}
     {typeGroups}
     {component}
-    let:activeState
+    
   >
-    <svelte:fragment slot="state-actions" let:stateName>
+    {#snippet stateActions(stateName)}
       {#if stateName === 'hover'}
         <label class="hover-enable">
           <input type="checkbox" bind:checked={hoverEnabled} />
           <span>Use hover</span>
         </label>
       {/if}
-    </svelte:fragment>
-    {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
-    <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
-      <div class="card-demo">
-        <Card title="Card title" class={previewClass}>
-          <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
-        </Card>
-      </div>
-    </ShadowBackdrop>
-  </VariantGroup>
+    {/snippet}
+    {#snippet children({ activeState })}
+        {@const previewClass = activeState === 'hover' ? 'force-hover' : (hoverEnabled ? '' : 'no-hover')}
+      <ShadowBackdrop mode={bgMode} colorVariable={bgVar}>
+        <div class="card-demo">
+          <Card title="Card title" class={previewClass}>
+            <p style="margin: 0;">Slotted body content. Hover the card (or switch the editor to the Hover state) to preview hover styling.</p>
+          </Card>
+        </div>
+      </ShadowBackdrop>
+          {/snippet}
+    </VariantGroup>
 </ComponentEditorBase>
 
 <style>

package/src/component-editor/CollapsibleSectionEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -125,11 +125,11 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleVariantStates = (v: Variant) => Object.fromEntries(
+  let visibleVariantStates = $derived((v: Variant) => Object.fromEntries(
     Object.entries(variantStates(v)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) as Record<string, Token[]>);
 </script>
 
 <ComponentEditorBase {component} title="Collapsible Section" description="Expandable section with chevron toggle. Variants: chromeless, divider, container. Import from <code>components/CollapsibleSection.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
@@ -141,27 +141,29 @@
       typeGroups={variantTypeGroups(v)}
       {component}
       siblings={buildSiblings(VARIANTS, v, variantStates, variantTypeGroups)}
-      let:activeState
+      
     >
-      {@const isExpanded = activeState === 'expanded'}
-      {@const isFrame = activeState === 'frame'}
-      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      {@const forceActive = activeState === 'active'}
-      <CollapsibleSection
-        variant={v}
-        label="Click to expand"
-        expanded={isExpanded}
-        active={forceActive}
-        class={forceClass}
-      >
-        <p style="margin: 0; color: var(--text-secondary);">
-          {#if isFrame}
-            (Frame) — outer chrome only; expand the section to see content area styling.
-          {:else}
-            This content is revealed when the section is expanded. Any content can go here.
-          {/if}
-        </p>
-      </CollapsibleSection>
-    </VariantGroup>
+      {#snippet children({ activeState })}
+            {@const isExpanded = activeState === 'expanded'}
+        {@const isFrame = activeState === 'frame'}
+        {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+        {@const forceActive = activeState === 'active'}
+        <CollapsibleSection
+          variant={v}
+          label="Click to expand"
+          expanded={isExpanded}
+          active={forceActive}
+          class={forceClass}
+        >
+          <p style="margin: 0; color: var(--text-secondary);">
+            {#if isFrame}
+              (Frame) — outer chrome only; expand the section to see content area styling.
+            {:else}
+              This content is revealed when the section is expanded. Any content can go here.
+            {/if}
+          </p>
+        </CollapsibleSection>
+                {/snippet}
+        </VariantGroup>
   {/each}
 </ComponentEditorBase>

package/src/component-editor/CornerBadgeEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
   import { badgeVariants } from '../components/Badge.svelte';
 
@@ -65,10 +65,10 @@
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
   import demoImageUrl from '../assets/newspaper.webp';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
-  $: visibleStates = Object.fromEntries(
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
+  let visibleStates = $derived(Object.fromEntries(
     badgeVariants.map((v) => [v, withLinkedDisabled(variantTokens(v), linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) as Record<string, Token[]>);
 
   const bgVar = '--backdrop-cornerbadge-surface';
 
@@ -78,7 +78,7 @@
     }
   });
 
-  let anchor: CornerAnchor = 'bottom-right';
+  let anchor: CornerAnchor = $state('bottom-right');
   const anchorGrid: ReadonlyArray<{ value: CornerAnchor; icon: string; label: string }> = [
     { value: 'top-left',     icon: 'fas fa-arrow-up-left',     label: 'Top left' },
     { value: 'top-right',    icon: 'fas fa-arrow-up-right',    label: 'Top right' },
@@ -86,42 +86,44 @@
     { value: 'bottom-right', icon: 'fas fa-arrow-down-right',  label: 'Bottom right' },
   ];
 
-  let variant: BadgeVariant = 'accent';
+  let variant: BadgeVariant = $state('accent');
   const variantOptions = badgeVariants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
 </script>
 
 <ComponentEditorBase {component} title="Corner Badge" description="Badge pinned flush to a corner of a positioned ancestor. Composes <code>Badge</code>; adds offset + inner-radius tokens. Import from <code>components/CornerBadge.svelte</code>" tokens={allTokens} {linked}>
-  <svelte:fragment slot="config">
-    <label class="backdrop-config">
-      <span>Sample background</span>
-      <div class="picker-slot">
-        <UIPaletteSelector variable={bgVar} />
+  {#snippet config()}
+  
+      <label class="backdrop-config">
+        <span>Sample background</span>
+        <div class="picker-slot">
+          <UIPaletteSelector variable={bgVar} />
+        </div>
+      </label>
+      <div class="control-row">
+        <span>Anchor</span>
+        <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
+          {#each anchorGrid as opt (opt.value)}
+            <button
+              type="button"
+              class="anchor-btn"
+              class:checked={anchor === opt.value}
+              role="radio"
+              aria-checked={anchor === opt.value}
+              aria-label={opt.label}
+              title={opt.label}
+              onclick={() => (anchor = opt.value)}
+            >
+              <i class={opt.icon} aria-hidden="true"></i>
+            </button>
+          {/each}
+        </div>
       </div>
-    </label>
-    <div class="control-row">
-      <span>Anchor</span>
-      <div class="anchor-grid" role="radiogroup" aria-label="Corner badge anchor">
-        {#each anchorGrid as opt (opt.value)}
-          <button
-            type="button"
-            class="anchor-btn"
-            class:checked={anchor === opt.value}
-            role="radio"
-            aria-checked={anchor === opt.value}
-            aria-label={opt.label}
-            title={opt.label}
-            on:click={() => (anchor = opt.value)}
-          >
-            <i class={opt.icon} aria-hidden="true"></i>
-          </button>
-        {/each}
+      <div class="control-row">
+        <span>Variant</span>
+        <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
       </div>
-    </div>
-    <div class="control-row">
-      <span>Variant</span>
-      <UIRadioGroup bind:value={variant} name="corner-badge-variant" options={variantOptions} />
-    </div>
-  </svelte:fragment>
+    
+  {/snippet}
   <VariantGroup name="cornerbadge" title="Corner Badge" states={visibleStates} {component}>
     <ShadowBackdrop mode="color" colorVariable={bgVar}>
       <div class="corner-stage-wrap">

package/src/component-editor/DialogEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
   import type { Token, TypeGroupConfig } from './scaffolding/types';
 
@@ -95,9 +95,9 @@
   import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
   import ShadowBackdropControls from './scaffolding/ShadowBackdropControls.svelte';
 
-  $: config = $editorState.components.dialog?.config ?? {};
-  $: confirmVariant = (BUTTON_VARIANTS.includes(config[CONFIRM_VAR] as ButtonVariant) ? config[CONFIRM_VAR] : DEFAULT_CONFIRM) as ButtonVariant;
-  $: cancelVariant = (BUTTON_VARIANTS.includes(config[CANCEL_VAR] as ButtonVariant) ? config[CANCEL_VAR] : DEFAULT_CANCEL) as ButtonVariant;
+  let config = $derived($editorState.components.dialog?.config ?? {});
+  let confirmVariant = $derived((BUTTON_VARIANTS.includes(config[CONFIRM_VAR] as ButtonVariant) ? config[CONFIRM_VAR] : DEFAULT_CONFIRM) as ButtonVariant);
+  let cancelVariant = $derived((BUTTON_VARIANTS.includes(config[CANCEL_VAR] as ButtonVariant) ? config[CANCEL_VAR] : DEFAULT_CANCEL) as ButtonVariant);
 
   function setConfirmVariant(e: Event) {
     const v = (e.target as HTMLSelectElement).value;
@@ -108,30 +108,32 @@
     setComponentConfig(component, CANCEL_VAR, v);
   }
 
-  let bgMode: 'image' | 'color' = 'image';
+  let bgMode: 'image' | 'color' = $state('image');
   const bgVar = '--backdrop-dialog-surface';
 </script>
 
 <ComponentEditorBase {component} title="Dialog" description="Modal dialog with focus management and slide-in animation. Import from <code>components/Dialog.svelte</code>" tokens={allTokens}>
-  <svelte:fragment slot="config">
-    <label>
-      <span>Cancel button (left)</span>
-      <select class="form-select" value={cancelVariant} on:change={setCancelVariant}>
-        {#each BUTTON_VARIANTS as v}
-          <option value={v}>{variantLabel(v)}</option>
-        {/each}
-      </select>
-    </label>
-    <label>
-      <span>Confirm button (right)</span>
-      <select class="form-select" value={confirmVariant} on:change={setConfirmVariant}>
-        {#each BUTTON_VARIANTS as v}
-          <option value={v}>{variantLabel(v)}</option>
-        {/each}
-      </select>
-    </label>
-    <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label>
+        <span>Cancel button (left)</span>
+        <select class="form-select" value={cancelVariant} onchange={setCancelVariant}>
+          {#each BUTTON_VARIANTS as v}
+            <option value={v}>{variantLabel(v)}</option>
+          {/each}
+        </select>
+      </label>
+      <label>
+        <span>Confirm button (right)</span>
+        <select class="form-select" value={confirmVariant} onchange={setConfirmVariant}>
+          {#each BUTTON_VARIANTS as v}
+            <option value={v}>{variantLabel(v)}</option>
+          {/each}
+        </select>
+      </label>
+      <ShadowBackdropControls bind:mode={bgMode} colorVariable={bgVar} />
+    
+  {/snippet}
   <div class="dialog-preview">
     <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding="0">
       <Dialog

package/src/component-editor/ImageEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
 
   export const component = 'image';
@@ -36,14 +36,16 @@
 </script>
 
 <ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow. Import from <code>components/Image.svelte</code>" tokens={allTokens}>
-  <svelte:fragment slot="config">
-    <label class="backdrop-config">
-      <span>Sample background</span>
-      <div class="picker-slot">
-        <UIPaletteSelector variable={bgVar} />
-      </div>
-    </label>
-  </svelte:fragment>
+  {#snippet config()}
+  
+      <label class="backdrop-config">
+        <span>Sample background</span>
+        <div class="picker-slot">
+          <UIPaletteSelector variable={bgVar} />
+        </div>
+      </label>
+    
+  {/snippet}
   <VariantGroup name="image" title="Image" {states} {component}>
     <ShadowBackdrop mode="color" colorVariable={bgVar}>
       <div class="image-demo-grid">

package/src/component-editor/InlineEditActionsEditor.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   import type { Token } from './scaffolding/types';
 
   export const component = 'inlineeditactions';
@@ -45,11 +45,11 @@
   import { editorState } from '../lib/editorStore';
   import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
 
-  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  let linked = $derived(computeLinkedBlock(component, linkableContexts, allTokens, $editorState));
 
-  $: visibleStatesByButton = (btn: Button) => Object.fromEntries(
+  let visibleStatesByButton = $derived((btn: Button) => Object.fromEntries(
     Object.entries(buttonStates(btn)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
-  ) as Record<string, Token[]>;
+  ) as Record<string, Token[]>);
 </script>
 
 <ComponentEditorBase {component} title="Inline Edit Actions" description="Confirm/cancel button pair for inline editing. Import from <code>components/InlineEditActions.svelte</code>" tokens={allTokens} {linked}>
@@ -59,18 +59,20 @@
       title={btn === 'save' ? 'Save button' : 'Cancel button'}
       states={visibleStatesByButton(btn)}
       {component}
-      let:activeState
+      
     >
-      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
-      <div class="inline-edit-demo-row">
-        <span style="color: var(--text-secondary);">Editing value...</span>
-        <InlineEditActions
-          onSave={() => {}}
-          onCancel={() => {}}
-          class={forceClass}
-        />
-      </div>
-    </VariantGroup>
+      {#snippet children({ activeState })}
+            {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+        <div class="inline-edit-demo-row">
+          <span style="color: var(--text-secondary);">Editing value...</span>
+          <InlineEditActions
+            onSave={() => {}}
+            onCancel={() => {}}
+            class={forceClass}
+          />
+        </div>
+                {/snippet}
+        </VariantGroup>
   {/each}
 </ComponentEditorBase>