@motion-proto/live-tokens 0.17.0 → 0.18.2

package/.claude/skills/live-tokens-create-component/SKILL.md

@@ -473,7 +473,17 @@ npx live-tokens check-component <id>
 
 It enforces the file layout, the `:global(:root)` block, token-suffix vocabulary, state-before-property rule, theme-token defaults (no raw colour literals), public-imports rule, and the `registerComponent({ id })` call. Exit code 0 means the static contract is met.
 
-Then navigate to `/components` and confirm the runtime behaviours the static check can't see:
+**Then run the registry contract test.** If you're authoring inside the package itself, `src/editor/component-editor/registryContract.test.ts` runs `describe.each(getComponentRegistryEntries())` and verifies, per component:
+
+1. Registration resolves to a real `sourceFile` and a non-empty schema.
+2. Schema variables are unique within the component.
+3. Every editable token (excluding `hidden: true`, `kind: 'gradient'`, and padding-side suffixes) is declared in the runtime `<style>` block.
+4. Every editable token is seeded in the production-pointed config under `src/live-tokens/data/component-configs/<id>/`.
+5. `setComponentAlias` round-trips the alias through the slice.
+
+A new first-party component is auto-covered the moment it lands in `builtInRegistry` — `npm test` will fail if any of the five checks miss. For a consumer-authored component, mirror this pattern in your own test suite if you want the same drift protection (the same test logic works against any `registerComponent` registration; iterate `getComponentRegistryEntries()` after your `main.ts` has run).
+
+Finally navigate to `/components` and confirm the runtime behaviours no static check can see:
 
 - [ ] The new component appears in the nav rail under the **CUSTOM** group (system entries above, custom below the labeled divider).
 - [ ] Token rows render. Color pickers, radius selectors, font selectors all work.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.17.0",
+  "version": "0.18.2",
   "type": "module",
-  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
+  "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
     "svelte",
     "vite",
@@ -95,12 +95,12 @@
     "sass": "^1.0",
     "svelte": "^5",
     "svelte-preprocess": "^6.0",
-    "vite": "^6 || ^7"
+    "vite": "^8"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tsconfig/svelte": "^5.0.8",
-    "@types/node": "^24.12.0",
+    "@types/node": "^25.9.1",
     "happy-dom": "^20.9.0",
     "highlight.js": "^11.11.1",
     "marked": "^18.0.4",
@@ -110,8 +110,8 @@
     "svelte-check": "^4.4.8",
     "svelte-preprocess": "^6.0.3",
     "tsup": "^8.5.1",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.14",
     "vitest": "^4.1.4"
   },
   "dependencies": {

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

@@ -10,10 +10,6 @@
   const baseTokens: Token[] = [
     { label: 'offset from corner', canBeLinked: true, groupKey: 'margin', variable: '--corner-badge-margin', element: 'frame' },
     { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: '--corner-badge-padding', element: 'frame' },
-    { label: 'padding-top', canBeLinked: true, groupKey: 'padding-top', variable: '--corner-badge-padding-top', hidden: true, element: 'frame' },
-    { label: 'padding-right', canBeLinked: true, groupKey: 'padding-right', variable: '--corner-badge-padding-right', hidden: true, element: 'frame' },
-    { label: 'padding-bottom', canBeLinked: true, groupKey: 'padding-bottom', variable: '--corner-badge-padding-bottom', hidden: true, element: 'frame' },
-    { label: 'padding-left', canBeLinked: true, groupKey: 'padding-left', variable: '--corner-badge-padding-left', hidden: true, element: 'frame' },
     { label: 'outer corner radius', canBeLinked: true, groupKey: 'outer-radius', variable: '--corner-badge-outer-radius', element: 'frame' },
     { label: 'inner corner radius', canBeLinked: true, groupKey: 'inner-radius', variable: '--corner-badge-inner-radius', element: 'frame' },
     { label: 'horizontal-axis radius', canBeLinked: true, groupKey: 'h-axis-radius', variable: '--corner-badge-h-axis-radius', element: 'frame' },

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

@@ -12,10 +12,6 @@
       { label: 'corner radius', groupKey: 'radius', variable: '--input-radius' },
       { label: 'border width', groupKey: 'border-width', variable: '--input-border-width' },
       { label: 'padding', variable: '--input-padding', groupKey: 'padding' },
-      { label: 'padding-top', variable: '--input-padding-top', groupKey: 'padding-top', hidden: true },
-      { label: 'padding-right', variable: '--input-padding-right', groupKey: 'padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--input-padding-bottom', groupKey: 'padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--input-padding-left', groupKey: 'padding-left', hidden: true },
       { label: 'message gap', groupKey: 'gap', variable: '--input-gap' },
     ],
     default: [

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

@@ -12,18 +12,10 @@
       { label: 'border width', groupKey: 'width', variable: '--menuselect-menu-border-width' },
       { label: 'corner radius', groupKey: 'menu-radius', variable: '--menuselect-menu-radius' },
       { label: 'padding', variable: '--menuselect-menu-padding', groupKey: 'menu-padding' },
-      { label: 'padding-top', variable: '--menuselect-menu-padding-top', groupKey: 'menu-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--menuselect-menu-padding-right', groupKey: 'menu-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--menuselect-menu-padding-bottom', groupKey: 'menu-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--menuselect-menu-padding-left', groupKey: 'menu-padding-left', hidden: true },
       { label: 'item gap', groupKey: 'gap', variable: '--menuselect-menu-gap' },
       { label: 'shadow', groupKey: 'shadow', variable: '--menuselect-menu-shadow' },
       { label: 'item radius', groupKey: 'item-radius', variable: '--menuselect-item-radius' },
       { label: 'item padding', variable: '--menuselect-item-padding', groupKey: 'item-padding' },
-      { label: 'item padding-top', variable: '--menuselect-item-padding-top', groupKey: 'item-padding-top', hidden: true },
-      { label: 'item padding-right', variable: '--menuselect-item-padding-right', groupKey: 'item-padding-right', hidden: true },
-      { label: 'item padding-bottom', variable: '--menuselect-item-padding-bottom', groupKey: 'item-padding-bottom', hidden: true },
-      { label: 'item padding-left', variable: '--menuselect-item-padding-left', groupKey: 'item-padding-left', hidden: true },
     ],
     'default item': [
       { label: 'surface color', groupKey: 'surface', variable: '--menuselect-default-surface' },

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

@@ -19,17 +19,9 @@
       { label: 'corner radius', groupKey: 'radius', variable: '--segmentedcontrol-bar-radius' },
       { label: 'option gap', groupKey: 'gap', variable: '--segmentedcontrol-bar-gap' },
       { label: 'padding', variable: '--segmentedcontrol-bar-padding', groupKey: 'bar-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-bar-padding-top', groupKey: 'bar-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-bar-padding-right', groupKey: 'bar-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-bar-padding-bottom', groupKey: 'bar-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-bar-padding-left', groupKey: 'bar-padding-left', hidden: true },
     ],
     'option base': [
       { label: 'padding', variable: '--segmentedcontrol-option-padding', groupKey: 'option-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-option-padding-top', groupKey: 'option-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-option-padding-right', groupKey: 'option-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-option-padding-bottom', groupKey: 'option-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-option-padding-left', groupKey: 'option-padding-left', hidden: true },
       { label: 'icon gap', groupKey: 'option-gap', variable: '--segmentedcontrol-option-gap' },
       { label: 'icon size', groupKey: 'icon-size', variable: '--segmentedcontrol-option-icon-size' },
     ],
@@ -64,20 +56,12 @@
       { label: 'divider width', groupKey: 'small-thickness', variable: '--segmentedcontrol-divider-small-thickness' },
       { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
       { label: 'padding', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-bar-small-padding-top', groupKey: 'bar-small-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-bar-small-padding-right', groupKey: 'bar-small-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-bar-small-padding-bottom', groupKey: 'bar-small-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-bar-small-padding-left', groupKey: 'bar-small-padding-left', hidden: true },
     ],
     'option base': [
       { label: 'icon size', groupKey: 'small-icon-size', variable: '--segmentedcontrol-option-small-icon-size' },
       { label: 'font size', groupKey: 'small-text-font-size', variable: '--segmentedcontrol-option-small-text-font-size' },
       { label: 'line height', groupKey: 'small-text-line-height', variable: '--segmentedcontrol-option-small-text-line-height' },
       { label: 'padding', variable: '--segmentedcontrol-option-small-padding', groupKey: 'option-small-padding' },
-      { label: 'padding-top', variable: '--segmentedcontrol-option-small-padding-top', groupKey: 'option-small-padding-top', hidden: true },
-      { label: 'padding-right', variable: '--segmentedcontrol-option-small-padding-right', groupKey: 'option-small-padding-right', hidden: true },
-      { label: 'padding-bottom', variable: '--segmentedcontrol-option-small-padding-bottom', groupKey: 'option-small-padding-bottom', hidden: true },
-      { label: 'padding-left', variable: '--segmentedcontrol-option-small-padding-left', groupKey: 'option-small-padding-left', hidden: true },
       { label: 'icon gap', groupKey: 'option-small-gap', variable: '--segmentedcontrol-option-small-gap' },
     ],
     'selected option': [

package/src/live-tokens/data/tokens.generated.css

@@ -359,6 +359,30 @@
 
 /* Component aliases (production configs differing from defaults) */
 :root:root {
+  /* button (my-button) */
+  --button-primary-text-font-size: var(--font-size-md);
+  --button-primary-text-font-weight: var(--font-weight-semibold);
+  --button-primary-radius: var(--radius-xl);
+  --button-secondary-text-font-size: var(--font-size-md);
+  --button-secondary-text-font-weight: var(--font-weight-semibold);
+  --button-secondary-radius: var(--radius-xl);
+  --button-outline-text-font-size: var(--font-size-md);
+  --button-outline-text-font-weight: var(--font-weight-semibold);
+  --button-outline-radius: var(--radius-xl);
+  --button-success-text-font-size: var(--font-size-md);
+  --button-success-text-font-weight: var(--font-weight-semibold);
+  --button-success-border-width: var(--border-width-1);
+  --button-success-radius: var(--radius-xl);
+  --button-danger-text-font-size: var(--font-size-md);
+  --button-danger-text-font-weight: var(--font-weight-semibold);
+  --button-danger-border-width: var(--border-width-1);
+  --button-danger-radius: var(--radius-xl);
+  --button-warning-text-font-size: var(--font-size-md);
+  --button-warning-text-font-weight: var(--font-weight-semibold);
+  --button-warning-border-width: var(--border-width-1);
+  --button-warning-radius: var(--radius-xl);
+  --button-small-text-font-size: var(--font-size-sm);
+
   /* card (my-card) */
   --card-default-surface: color-mix(in srgb, var(--surface-neutral-lower) 70%, transparent);
   --card-default-header-surface: color-mix(in srgb, var(--surface-neutral-lowest) 80%, transparent);

package/src/system/components/SideNavigation.svelte

@@ -76,6 +76,19 @@
     expandedSections[path] = !expandedSections[path];
   }
 
+  // Clicking a section label whose route is already current would otherwise be
+  // a no-op navigation. Make it a toggle in that case so the user can collapse
+  // the section they just opened without having to chase the chevron. The
+  // chevron's own onclick is unaffected — its event target isn't inside an <a>.
+  function maybeInterceptLabel(e: MouseEvent, section: SideNavSection) {
+    if (!section.hasIndexPage || currentPath !== section.path) return;
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+    const target = e.target as Element | null;
+    if (!target?.closest('a')) return;
+    e.preventDefault();
+    toggleSection(section.path);
+  }
+
   function fireToggle() {
     ontoggle?.();
     dispatch('toggle');
@@ -164,10 +177,12 @@
     <div class="sn-menu">
       {#each sections as section (section.path)}
         <div class="sn-section">
+          <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions, a11y_no_static_element_interactions -->
           <div
             class="sn-section-header"
             class:active={isSectionActive(section)}
             class:force-hover={isSectionHover(section)}
+            onclick={(e) => maybeInterceptLabel(e, section)}
           >
             <CollapsibleSection
               variant="chromeless"