@motion-proto/live-tokens 0.23.0 → 0.24.1

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

@@ -24,7 +24,7 @@ For pattern reference, read any shipped component's source directly from the con
 ## 4-step recipe
 
 1. **Runtime file** — `src/system/components/MyWidget.svelte`. Declare every editable slot as a CSS custom property inside `:global(:root)`, defaulting to a theme token (never a raw value). The plugin parses `:global(:root)` to seed `component-configs/<id>/default.json`; variables declared anywhere else can't be edited.
-2. **Editor file** — `src/system/components/MyWidgetEditor.svelte`. In a `<script module>` block, declare `const component = 'mywidget'`, build a `states: Record<string, Token[]>` for each VariantGroup, and export the flat union as `allTokens: Token[]`. Components with linked siblings also build a `linkableContexts: Map<string, string>` (see the linked-siblings extension below). In the runtime `<script>` block, mount `ComponentEditorBase` with one `VariantGroup` per variant.
+2. **Editor file** — `src/system/components/MyWidgetEditor.svelte`. In a `<script module>` block, declare `const component = 'mywidget'`, build a `states: Record<string, Token[]>` for each VariantGroup, and export the flat union as `allTokens: Token[]`. Components with linked siblings also build a `linkableContexts: Map<string, string>` (see the linked-siblings extension below). Components with structural/display controls that aren't token values (alignment, element visibility, layout position) also export an `intrinsics: IntrinsicSpec[]` (see the intrinsics extension below). In the runtime `<script>` block, mount `ComponentEditorBase` with one `VariantGroup` per variant.
 3. **Register** — in `src/main.ts` before `mount(App, ...)`:
    ```ts
    import { registerComponent } from '@motion-proto/live-tokens';
@@ -462,6 +462,65 @@ Toggle's tokens are flat per state. Most multi-variant components (Badge, Card,
 
 Single-variant components with multi-state linked tokens still set `canBeLinked` + `linkableContexts`, but skip `buildSiblings` and the `{#each}` loop. Components with no linked tokens (Toggle, SectionDivider) skip all five steps — `ComponentEditorBase` renders fine without a `{linked}` prop.
 
+## Extension: intrinsics
+
+Some components expose **structural or display choices** that aren't token values: an alignment (start / center), an element's visibility (show / hide), a layout position. These ride a bespoke `<select>` or checkbox you author in an editor snippet, not the generic token grid, so they don't belong in `allTokens`. Toggle and most components have none. SectionDivider is the worked example (alignment, hairline position, eyebrow / description visibility).
+
+An intrinsic still cascades through a CSS custom property with a default in the runtime `:global(:root)`. The trap: that default now lives in two places, the runtime `:global(:root)` AND the editor's read-back getter. When they disagree the control displays a state the page never renders, and a native `<select>` won't even fire `onchange` to write the "change" the user thinks they made. `:global(:root)` is the source of truth.
+
+Declare intrinsics so the editor and the contract test stay honest:
+
+1. **Runtime `:global(:root)`** carries the per-variant default like any other variable:
+
+   ```css
+   --mywidget-lg-align: start;
+   --mywidget-lg-eyebrow-display: block;
+   ```
+
+2. **Editor `<script module>`** exports `intrinsics: IntrinsicSpec[]`, one entry per structural property, each `default` mirroring `:global(:root)` per variant:
+
+   ```ts
+   import type { IntrinsicSpec } from '@motion-proto/live-tokens/component-editor';
+
+   export const intrinsics: IntrinsicSpec[] = [
+     {
+       key: 'align',
+       variants: ['lg', 'md', 'sm'],
+       variable: (v) => `--mywidget-${v}-align`,
+       values: ['start', 'center'],
+       default: { lg: 'start', md: 'start', sm: 'start' },
+     },
+   ];
+   ```
+
+3. **Read-back getters fall back to the spec default**, never a hard-coded constant. This is the rule that keeps the control's displayed default in step with what an unedited instance renders:
+
+   ```ts
+   const byKey = new Map(intrinsics.map((i) => [i.key, i]));
+   function readIntrinsic(key: string, v: string): string {
+     const spec = byKey.get(key)!;
+     const raw = readLiteral(spec.variable(v)) ?? spec.default[v];   // store override, else runtime default
+     return spec.normalize ? spec.normalize(raw) : raw;
+   }
+   function getAlign(v: string) {
+     return readIntrinsic('align', v) === 'center' ? 'center' : 'start';
+   }
+   ```
+
+   Writes go through `setComponentAlias(component, spec.variable(v), { kind: 'literal', value })` so the choice cascades to `:root` like any token.
+
+4. **Pass `intrinsics` to `registerComponent`** so the contract test can see it:
+
+   ```ts
+   registerComponent({
+     id: 'mywidget',
+     // ...label, icon, sourceFile, editorComponent, schema...
+     intrinsics: myWidgetIntrinsics,
+   });
+   ```
+
+Use `normalize` only when two raw values render identically and the dropdown lists just one (SectionDivider folds `above-description` into `below-label`). Properties that look like intrinsics but aren't: preview-only props with no persistence (a size selector that only changes the demo), `setComponentConfig` editor metadata (Dialog's button variants), and token-valued selects (a control choosing between two tokens). None carry a duplicated runtime default, so none need an `IntrinsicSpec`.
+
 ## Verification checklist
 
 After saving, run the static validator first:
@@ -483,6 +542,8 @@ It enforces the file layout, the `:global(:root)` block, token-suffix vocabulary
 
 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).
 
+**If your component declares `intrinsics`, the intrinsics contract test covers it too.** `src/editor/component-editor/intrinsicsContract.test.ts` iterates every entry with an `intrinsics` array and asserts, per (intrinsic, variant), that the runtime `:global(:root)` declares a default, the default is one of the spec's `values`, and the editor's `default` equals the runtime default. This is what would have caught a getter defaulting to `center` while `:global(:root)` says `start`. Same auto-coverage rule: declare `intrinsics` on the registry entry and the test picks it up.
+
 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).

package/package.json

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

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

@@ -9,19 +9,20 @@
 
   function variantTokens(v: Variant): Token[] {
     return [
-      { label: 'surface color', groupKey: 'surface', variable: `--callout-${v}-surface` },
-      { label: 'border color', groupKey: 'border', variable: `--callout-${v}-border` },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--callout-${v}-border-width` },
-      { label: 'accent edge width', canBeLinked: true, groupKey: 'accent-width', variable: `--callout-${v}-accent-width` },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--callout-${v}-radius` },
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--callout-${v}-padding` },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: `--callout-${v}-surface` },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: `--callout-${v}-border` },
+      { label: 'border width', element: 'frame', canBeLinked: true, groupKey: 'border-width', variable: `--callout-${v}-border-width` },
+      { label: 'accent edge width', element: 'frame', canBeLinked: true, groupKey: 'accent-width', variable: `--callout-${v}-accent-width` },
+      { label: 'corner radius', element: 'frame', canBeLinked: true, groupKey: 'radius', variable: `--callout-${v}-radius` },
+      { label: 'padding', element: 'frame', canBeLinked: true, groupKey: 'padding', variable: `--callout-${v}-padding` },
     ];
   }
   // Two type groups per variant: label (e.g. "Warning.") and message body.
   function variantTypeGroups(v: Variant): TypeGroupConfig[] {
     return [
       {
-        legend: `${v} label`,
+        legend: '',
+        element: 'label',
         colorVariable: `--callout-${v}-label`,
         familyVariable: `--callout-${v}-label-font-family`,
         sizeVariable: `--callout-${v}-label-font-size`,
@@ -29,7 +30,8 @@
         lineHeightVariable: `--callout-${v}-label-line-height`,
       },
       {
-        legend: `${v} message`,
+        legend: '',
+        element: 'message',
         colorVariable: `--callout-${v}-text`,
         familyVariable: `--callout-${v}-text-font-family`,
         sizeVariable: `--callout-${v}-text-font-size`,

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

@@ -3,23 +3,29 @@
 
   export const component = 'codesnippet';
 
-  // Single variant. Default carries every container, code, and icon token;
-  // hover layers a single icon-color override on top.
+  // `element` tags partition the panel into labeled groups (text / frame / icon /
+  // scrollbar) via StateBlock; labels drop the prefix the group heading carries.
+  // Order is permanent → impermanent. Hover overrides the icon color only.
   const states: Record<string, Token[]> = {
     default: [
-      { label: 'surface',          variable: '--codesnippet-surface' },
-      { label: 'border',           variable: '--codesnippet-border' },
-      { label: 'border width',     variable: '--codesnippet-border-width' },
-      { label: 'corner radius',    variable: '--codesnippet-radius' },
-      { label: 'padding',          variable: '--codesnippet-padding' },
-      { label: 'gap',              variable: '--codesnippet-gap' },
-      { label: 'code text',        variable: '--codesnippet-code-text' },
-      { label: 'code font family', variable: '--codesnippet-code-font-family' },
-      { label: 'code font size',   variable: '--codesnippet-code-font-size' },
-      { label: 'code font weight', variable: '--codesnippet-code-font-weight' },
-      { label: 'code line height', variable: '--codesnippet-code-line-height' },
-      { label: 'icon color',       variable: '--codesnippet-icon' },
-      { label: 'icon size',        variable: '--codesnippet-icon-size' },
+      { label: 'color',         element: 'text', variable: '--codesnippet-code-text' },
+      { label: 'font family',   element: 'text', variable: '--codesnippet-code-font-family' },
+      { label: 'font size',     element: 'text', variable: '--codesnippet-code-font-size' },
+      { label: 'font weight',   element: 'text', variable: '--codesnippet-code-font-weight' },
+      { label: 'line height',   element: 'text', variable: '--codesnippet-code-line-height' },
+
+      { label: 'surface',       element: 'frame', variable: '--codesnippet-surface' },
+      { label: 'border',        element: 'frame', variable: '--codesnippet-border' },
+      { label: 'border width',  element: 'frame', variable: '--codesnippet-border-width' },
+      { label: 'corner radius', element: 'frame', variable: '--codesnippet-radius' },
+      { label: 'padding',       element: 'frame', variable: '--codesnippet-padding' },
+      { label: 'gap',           element: 'frame', variable: '--codesnippet-gap' },
+
+      { label: 'color',         element: 'icon', variable: '--codesnippet-icon' },
+      { label: 'size',          element: 'icon', variable: '--codesnippet-icon-size' },
+
+      { label: 'thumb',         element: 'scrollbar', variable: '--codesnippet-scrollbar-thumb' },
+      { label: 'width',         element: 'scrollbar', variable: '--codesnippet-scrollbar-border-width' },
     ],
     hover: [
       { label: 'icon color', variable: '--codesnippet-hover-icon' },
@@ -33,19 +39,30 @@
   import CodeSnippet from '../../system/components/CodeSnippet.svelte';
   import VariantGroup from './scaffolding/VariantGroup.svelte';
   import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+
+  let previewCode = $state('npx @motion-proto/live-tokens setup-claude');
 </script>
 
 <ComponentEditorBase
   {component}
   title="Code Snippet"
-  description="Single-line code display with a copy button. Shows a brief confirmation popover on copy."
+  description="Code display with a copy button. Long lines scroll horizontally; the copy button stays pinned top-right. Shows a brief confirmation popover on copy."
   tokens={allTokens}
 >
   <VariantGroup name="codesnippet" title="Code Snippet" {states} {component}>
     {#snippet children({ activeState })}
       <div class="codesnippet-preview">
+        <label class="preview-text">
+          <span>Preview text</span>
+          <textarea
+            bind:value={previewCode}
+            rows="2"
+            spellcheck="false"
+            placeholder="Paste a long command or block to preview scrolling"
+          ></textarea>
+        </label>
         <CodeSnippet
-          code="npx @motion-proto/live-tokens setup-claude"
+          code={previewCode}
           class={activeState === 'hover' ? 'force-hover' : ''}
         />
       </div>
@@ -56,6 +73,35 @@
 <style>
   .codesnippet-preview {
     display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-12);
     padding: var(--ui-space-16);
   }
+
+  /* Fixed width so pasted content overflows and demonstrates horizontal scroll. */
+  .codesnippet-preview :global(.codesnippet) {
+    width: 24rem;
+    max-width: 100%;
+  }
+
+  .preview-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+  }
+
+  .preview-text textarea {
+    width: 100%;
+    padding: var(--ui-space-8);
+    background: var(--ui-surface-lowest);
+    color: var(--ui-text-primary);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-font-size-sm);
+    resize: vertical;
+  }
+  .preview-text textarea::placeholder { color: var(--ui-text-muted); opacity: 1; }
 </style>

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

@@ -12,13 +12,13 @@
   const variantOptions = buttons.map((b) => ({ value: b, label: b === 'save' ? 'Save button' : 'Cancel button' }));
   function buttonStateTokens(btn: Button, state: 'default' | 'hover'): Token[] {
     return [
-      { label: 'surface color', groupKey: 'surface', variable: `--inlineeditactions-${btn}-${state}-surface` },
-      { label: 'text color', groupKey: 'text', variable: `--inlineeditactions-${btn}-${state}-text` },
-      { label: 'border color', groupKey: 'border', variable: `--inlineeditactions-${btn}-${state}-border` },
-      { label: 'border width', canBeLinked: true, groupKey: `${btn}-border-width`, variable: `--inlineeditactions-${btn}-${state}-border-width` },
-      { label: 'corner radius', canBeLinked: true, groupKey: `${btn}-radius`, variable: `--inlineeditactions-${btn}-${state}-radius` },
-      { label: 'padding', canBeLinked: true, groupKey: `${btn}-padding`, variable: `--inlineeditactions-${btn}-${state}-padding` },
-      { label: 'icon size', canBeLinked: true, groupKey: `${btn}-icon-size`, variable: `--inlineeditactions-${btn}-${state}-icon-size` },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: `--inlineeditactions-${btn}-${state}-surface` },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: `--inlineeditactions-${btn}-${state}-border` },
+      { label: 'border width', element: 'frame', canBeLinked: true, groupKey: `${btn}-border-width`, variable: `--inlineeditactions-${btn}-${state}-border-width` },
+      { label: 'corner radius', element: 'frame', canBeLinked: true, groupKey: `${btn}-radius`, variable: `--inlineeditactions-${btn}-${state}-radius` },
+      { label: 'padding', element: 'frame', canBeLinked: true, groupKey: `${btn}-padding`, variable: `--inlineeditactions-${btn}-${state}-padding` },
+      { label: 'color', element: 'text', groupKey: 'text', variable: `--inlineeditactions-${btn}-${state}-text` },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: `${btn}-icon-size`, variable: `--inlineeditactions-${btn}-${state}-icon-size` },
     ];
   }
 

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

@@ -15,24 +15,24 @@
       { label: 'message gap', groupKey: 'gap', variable: '--input-gap' },
     ],
     default: [
-      { label: 'surface color', groupKey: 'surface', variable: '--input-default-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--input-default-border' },
-      { label: 'placeholder color', groupKey: 'placeholder', variable: '--input-default-placeholder' },
-      { label: 'icon color', groupKey: 'icon', variable: '--input-default-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-default-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--input-default-surface' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--input-default-border' },
+      { label: 'placeholder color', element: 'frame', groupKey: 'placeholder', variable: '--input-default-placeholder' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--input-default-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--input-default-icon-size' },
     ],
     focused: [
-      { label: 'surface color', groupKey: 'surface', variable: '--input-focused-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--input-focused-border' },
-      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: '--input-focused-border-width' },
-      { label: 'icon color', groupKey: 'icon', variable: '--input-focused-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-focused-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--input-focused-surface' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--input-focused-border' },
+      { label: 'border width', element: 'frame', canBeLinked: true, groupKey: 'border-width', variable: '--input-focused-border-width' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--input-focused-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--input-focused-icon-size' },
     ],
     disabled: [
-      { label: 'surface color', groupKey: 'surface', variable: '--input-disabled-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--input-disabled-border' },
-      { label: 'icon color', groupKey: 'icon', variable: '--input-disabled-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--input-disabled-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--input-disabled-surface' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--input-disabled-border' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--input-disabled-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--input-disabled-icon-size' },
     ],
     label: [],
     hint: [],
@@ -46,7 +46,8 @@
   // Slot-prefixed groupKeys keep label/hint/error from collapsing into each other.
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     default: [{
-      legend: 'input text',
+      legend: '',
+      element: 'text',
       colorVariable: '--input-default-text',
       familyVariable: '--input-default-text-font-family',
       sizeVariable: '--input-default-text-font-size',
@@ -54,7 +55,8 @@
       lineHeightVariable: '--input-default-text-line-height',
     }],
     focused: [{
-      legend: 'input text',
+      legend: '',
+      element: 'text',
       colorVariable: '--input-focused-text',
       familyVariable: '--input-focused-text-font-family',
       sizeVariable: '--input-focused-text-font-size',
@@ -62,7 +64,8 @@
       lineHeightVariable: '--input-focused-text-line-height',
     }],
     disabled: [{
-      legend: 'input text',
+      legend: '',
+      element: 'text',
       colorVariable: '--input-disabled-text',
       familyVariable: '--input-disabled-text-font-family',
       sizeVariable: '--input-disabled-text-font-size',

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

@@ -7,43 +7,44 @@
   // Non-text tokens per state; text/font lives in typeGroups. Item-shape tokens sit under `menu` so they read as one decision across states.
   const states: Record<string, Token[]> = {
     menu: [
-      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-menu-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--menuselect-menu-border' },
-      { 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: '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: 'surface color', element: 'frame', groupKey: 'surface', variable: '--menuselect-menu-surface' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--menuselect-menu-border' },
+      { label: 'border width', element: 'frame', groupKey: 'width', variable: '--menuselect-menu-border-width' },
+      { label: 'corner radius', element: 'frame', groupKey: 'menu-radius', variable: '--menuselect-menu-radius' },
+      { label: 'padding', element: 'frame', variable: '--menuselect-menu-padding', groupKey: 'menu-padding' },
+      { label: 'item gap', element: 'frame', groupKey: 'gap', variable: '--menuselect-menu-gap' },
+      { label: 'shadow', element: 'frame', groupKey: 'shadow', variable: '--menuselect-menu-shadow' },
+      { label: 'radius', element: 'item', groupKey: 'item-radius', variable: '--menuselect-item-radius' },
+      { label: 'padding', element: 'item', variable: '--menuselect-item-padding', groupKey: 'item-padding' },
     ],
     'default item': [
-      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-default-surface' },
-      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-default-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-default-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--menuselect-default-surface' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--menuselect-default-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-default-icon-size' },
     ],
     'hover item': [
-      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-hover-surface' },
-      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-hover-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-hover-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--menuselect-hover-surface' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--menuselect-hover-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-hover-icon-size' },
     ],
     'selected item': [
-      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-selected-surface' },
-      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-selected-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-selected-icon-size' },
-      { label: 'indicator color', groupKey: 'indicator', variable: '--menuselect-selected-indicator' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--menuselect-selected-surface' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--menuselect-selected-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-selected-icon-size' },
+      { label: 'color', element: 'indicator', groupKey: 'indicator', variable: '--menuselect-selected-indicator' },
     ],
     'disabled item': [
-      { label: 'surface color', groupKey: 'surface', variable: '--menuselect-disabled-surface' },
-      { label: 'icon color', groupKey: 'icon', variable: '--menuselect-disabled-icon' },
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-disabled-icon-size' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--menuselect-disabled-surface' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--menuselect-disabled-icon' },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: '--menuselect-disabled-icon-size' },
     ],
   };
 
   // Per-state item-label typography; linkable groupKeys let users collapse or diverge across states.
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     'default item': [{
-      legend: 'item label',
+      legend: '',
+      element: 'text',
       colorVariable: '--menuselect-default-text',
       familyVariable: '--menuselect-default-text-font-family',
       sizeVariable: '--menuselect-default-text-font-size',
@@ -51,7 +52,8 @@
       lineHeightVariable: '--menuselect-default-text-line-height',
     }],
     'hover item': [{
-      legend: 'item label',
+      legend: '',
+      element: 'text',
       colorVariable: '--menuselect-hover-text',
       familyVariable: '--menuselect-hover-text-font-family',
       sizeVariable: '--menuselect-hover-text-font-size',
@@ -59,7 +61,8 @@
       lineHeightVariable: '--menuselect-hover-text-line-height',
     }],
     'selected item': [{
-      legend: 'item label',
+      legend: '',
+      element: 'text',
       colorVariable: '--menuselect-selected-text',
       familyVariable: '--menuselect-selected-text-font-family',
       sizeVariable: '--menuselect-selected-text-font-size',
@@ -67,7 +70,8 @@
       lineHeightVariable: '--menuselect-selected-text-line-height',
     }],
     'disabled item': [{
-      legend: 'item label',
+      legend: '',
+      element: 'text',
       colorVariable: '--menuselect-disabled-text',
       familyVariable: '--menuselect-disabled-text-font-family',
       sizeVariable: '--menuselect-disabled-text-font-size',

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

@@ -8,20 +8,21 @@
   // not a per-variant token namespace.
   const states: Record<string, Token[]> = {
     default: [
-      { label: 'fill color', groupKey: 'fill', variable: '--progressbar-fill' },
-      { label: 'track surface color', groupKey: 'surface', variable: '--progressbar-track-surface' },
-      { label: 'track border color', groupKey: 'border', variable: '--progressbar-track-border' },
-      { label: 'track border width', canBeLinked: true, groupKey: 'track-border-width', variable: '--progressbar-track-border-width' },
-      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: '--progressbar-radius' },
-      { label: 'track height', canBeLinked: true, groupKey: 'track-height', variable: '--progressbar-track-height' },
-      { label: 'label gap', groupKey: 'label-gap', variable: '--progressbar-label-gap' },
+      { label: 'color', element: 'fill', groupKey: 'fill', variable: '--progressbar-fill' },
+      { label: 'surface', element: 'frame', groupKey: 'surface', variable: '--progressbar-track-surface' },
+      { label: 'border', element: 'frame', groupKey: 'border', variable: '--progressbar-track-border' },
+      { label: 'border width', element: 'frame', canBeLinked: true, groupKey: 'track-border-width', variable: '--progressbar-track-border-width' },
+      { label: 'corner radius', element: 'frame', canBeLinked: true, groupKey: 'radius', variable: '--progressbar-radius' },
+      { label: 'height', element: 'frame', canBeLinked: true, groupKey: 'track-height', variable: '--progressbar-track-height' },
+      { label: 'label gap', element: 'frame', groupKey: 'label-gap', variable: '--progressbar-label-gap' },
     ],
   };
 
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     default: [
       {
-        legend: 'label',
+        legend: '',
+        element: 'label',
         colorVariable: '--progressbar-label',
         familyVariable: '--progressbar-label-font-family',
         sizeVariable: '--progressbar-label-font-size',
@@ -29,7 +30,8 @@
         lineHeightVariable: '--progressbar-label-line-height',
       },
       {
-        legend: 'value',
+        legend: '',
+        element: 'value',
         colorVariable: '--progressbar-value',
         familyVariable: '--progressbar-value-font-family',
         sizeVariable: '--progressbar-value-font-size',

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

@@ -1,6 +1,6 @@
 <script module lang="ts">
   import { buildSiblings } from './scaffolding/siblings';
-  import type { Token, TypeGroupConfig } from './scaffolding/types';
+  import type { Token, TypeGroupConfig, IntrinsicSpec } from './scaffolding/types';
 
   export const component = 'sectiondivider';
 
@@ -149,6 +149,57 @@
     | 'above-description'
     | 'through-description'
     | 'below-description';
+
+  // Structural/display properties driven by the bespoke selects + element
+  // toggles below, not the token grid. Each `default` mirrors the runtime
+  // SectionDivider's `:global(:root)`; the read-back getters fall back to it
+  // when a variant is unedited, and intrinsicsContract.test pins the two
+  // copies together. Defaults are per-variant: lg ships eyebrow + description
+  // + a description-anchored hairline; md/sm ship the title alone.
+  const HAIRLINE_POSITIONS = [
+    'above-label', 'through-label', 'below-label', 'through-description', 'below-description',
+  ] as const;
+  export const intrinsics: IntrinsicSpec[] = [
+    {
+      key: 'align',
+      variants: ['lg', 'md', 'sm'],
+      variable: (v) => `--sectiondivider-${v}-align`,
+      values: ['start', 'center'],
+      default: { lg: 'start', md: 'start', sm: 'start' },
+    },
+    {
+      key: 'eyebrow-display',
+      variants: ['lg', 'md', 'sm'],
+      variable: (v) => `--sectiondivider-${v}-eyebrow-display`,
+      values: ['block', 'none'],
+      default: { lg: 'block', md: 'none', sm: 'none' },
+    },
+    {
+      key: 'description-display',
+      variants: ['lg', 'md', 'sm'],
+      variable: (v) => `--sectiondivider-${v}-description-display`,
+      values: ['flex', 'none'],
+      default: { lg: 'flex', md: 'none', sm: 'none' },
+    },
+    {
+      key: 'eyebrow-text-transform',
+      variants: ['lg', 'md', 'sm'],
+      variable: (v) => `--sectiondivider-${v}-eyebrow-text-transform`,
+      values: ['uppercase', 'none'],
+      default: { lg: 'none', md: 'none', sm: 'none' },
+    },
+    {
+      key: 'hairline',
+      variants: ['lg', 'md', 'sm'],
+      variable: (v) => `--sectiondivider-${v}-hairline`,
+      values: ['none', ...HAIRLINE_POSITIONS],
+      default: { lg: 'below-description', md: 'below-label', sm: 'below-label' },
+      // 'above-description' renders identically to 'below-label'; the position
+      // dropdown omits it, so coerce on read to keep the control's value valid.
+      normalize: (raw) => (raw === 'above-description' ? 'below-label' : raw),
+    },
+  ];
+  const INTRINSIC_BY_KEY = new Map(intrinsics.map((i) => [i.key, i]));
 </script>
 
 <script lang="ts">
@@ -191,8 +242,19 @@
     return ref.value;
   }
 
+  // Resolved raw intrinsic value: the stored override, else the spec's
+  // per-variant default (which mirrors the runtime :root). Normalized so the
+  // getters below branch on a canonical value. Falling back to the spec
+  // default — not a hard-coded constant — is what keeps each control's
+  // displayed default in step with what the unedited divider actually renders.
+  function readIntrinsic(key: string, v: Variant): string {
+    const spec = INTRINSIC_BY_KEY.get(key)!;
+    const raw = readLiteral(spec.variable(v)) ?? spec.default[v];
+    return spec.normalize ? spec.normalize(raw) : raw;
+  }
+
   function getAlign(v: Variant): Align {
-    return readLiteral(`--sectiondivider-${v}-align`) === 'start' ? 'start' : 'center';
+    return readIntrinsic('align', v) === 'center' ? 'center' : 'start';
   }
   function getColorFamily(v: Variant): string {
     const raw = cfg[`--sectiondivider-${v}-color-family`];
@@ -201,13 +263,9 @@
   }
   /** Active hairline position OR `'none'` (= hidden). */
   function getHairlineValue(v: Variant): HairlinePosition | 'none' {
-    const raw = readLiteral(`--sectiondivider-${v}-hairline`);
-    if (raw === undefined || raw === 'none') return 'none';
-    // 'above-description' renders identically to 'below-label' — coerce on read
-    // so the dropdown's option list (which omits 'above-description') stays valid.
-    if (raw === 'above-description') return 'below-label';
-    const positions: HairlinePosition[] = ['above-label', 'through-label', 'below-label', 'through-description', 'below-description'];
-    return (positions as string[]).includes(raw) ? (raw as HairlinePosition) : 'none';
+    const raw = readIntrinsic('hairline', v);
+    if (raw === 'none') return 'none';
+    return (HAIRLINE_POSITIONS as readonly string[]).includes(raw) ? (raw as HairlinePosition) : 'none';
   }
   function getShowHairline(v: Variant): boolean {
     return getHairlineValue(v) !== 'none';
@@ -220,17 +278,13 @@
     return val === 'none' ? 'above-label' : val;
   }
   function getShowEyebrow(v: Variant): boolean {
-    return readLiteral(`--sectiondivider-${v}-eyebrow-display`) === 'block';
+    return readIntrinsic('eyebrow-display', v) === 'block';
   }
   function getEyebrowUppercase(v: Variant): boolean {
-    return readLiteral(`--sectiondivider-${v}-eyebrow-text-transform`) === 'uppercase';
+    return readIntrinsic('eyebrow-text-transform', v) === 'uppercase';
   }
   function getShowDescription(v: Variant): boolean {
-    const raw = readLiteral(`--sectiondivider-${v}-description-display`);
-    // Default: shown (flex) when unset. Matches the :root default and the
-    // legacy `getShowDescription` semantics for files that never set the key.
-    if (raw === undefined) return true;
-    return raw === 'flex';
+    return readIntrinsic('description-display', v) !== 'none';
   }
   /** Write an intrinsic to the aliases bucket as a literal so it cascades
    *  through cssVarSync to `:root` on both the editor iframe and host page. */
@@ -391,8 +445,8 @@
             value={getAlign(v.key)}
             onchange={(e) => setIntrinsic(v.key, 'align', (e.currentTarget as HTMLSelectElement).value)}
           >
-            <option value="center">Center</option>
             <option value="start">Start</option>
+            <option value="center">Center</option>
           </select>
         </div>
         <div class="property-row sd-intrinsic-row">

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

@@ -10,15 +10,15 @@
   // they don't vary per state in the runtime.
   const defaultStates: Record<string, Token[]> = {
     'control bar': [
-      { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-bar-surface' },
-      { label: 'border color', groupKey: 'border', variable: '--segmentedcontrol-bar-border' },
-      { label: 'border width', groupKey: 'width', variable: '--segmentedcontrol-bar-border-width' },
-      { label: 'divider color', groupKey: 'color', variable: '--segmentedcontrol-divider-color' },
-      { label: 'divider width', groupKey: 'thickness', variable: '--segmentedcontrol-divider-thickness' },
-      { label: 'divider inset', groupKey: 'divider-inset', variable: '--segmentedcontrol-divider-inset' },
-      { 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: 'surface color', element: 'frame', groupKey: 'surface', variable: '--segmentedcontrol-bar-surface' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--segmentedcontrol-bar-border' },
+      { label: 'border width', element: 'frame', groupKey: 'width', variable: '--segmentedcontrol-bar-border-width' },
+      { label: 'color', element: 'divider', groupKey: 'color', variable: '--segmentedcontrol-divider-color' },
+      { label: 'width', element: 'divider', groupKey: 'thickness', variable: '--segmentedcontrol-divider-thickness' },
+      { label: 'inset', element: 'divider', groupKey: 'divider-inset', variable: '--segmentedcontrol-divider-inset' },
+      { label: 'corner radius', element: 'frame', groupKey: 'radius', variable: '--segmentedcontrol-bar-radius' },
+      { label: 'option gap', element: 'frame', groupKey: 'gap', variable: '--segmentedcontrol-bar-gap' },
+      { label: 'padding', element: 'frame', variable: '--segmentedcontrol-bar-padding', groupKey: 'bar-padding' },
     ],
     'option base': [
       { label: 'padding', variable: '--segmentedcontrol-option-padding', groupKey: 'option-padding' },
@@ -29,11 +29,11 @@
       { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-option-icon' },
     ],
     'selected option': [
-      { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-selected-surface' },
-      { label: 'icon color', groupKey: 'icon', variable: '--segmentedcontrol-selected-icon' },
-      { label: 'border color', groupKey: 'border', variable: '--segmentedcontrol-selected-border' },
-      { label: 'border width', groupKey: 'width', variable: '--segmentedcontrol-selected-border-width' },
-      { label: 'corner radius', groupKey: 'radius', variable: '--segmentedcontrol-selected-radius' },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: '--segmentedcontrol-selected-surface' },
+      { label: 'color', element: 'icon', groupKey: 'icon', variable: '--segmentedcontrol-selected-icon' },
+      { label: 'border color', element: 'frame', groupKey: 'border', variable: '--segmentedcontrol-selected-border' },
+      { label: 'border width', element: 'frame', groupKey: 'width', variable: '--segmentedcontrol-selected-border-width' },
+      { label: 'corner radius', element: 'frame', groupKey: 'radius', variable: '--segmentedcontrol-selected-radius' },
     ],
     'hover option': [
       { label: 'surface color', groupKey: 'surface', variable: '--segmentedcontrol-option-hover-surface' },
@@ -52,10 +52,10 @@
   // since family/weight/color don't differ.
   const smallStates: Record<string, Token[]> = {
     'control bar': [
-      { label: 'divider inset', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-small-divider-inset' },
-      { label: 'divider width', groupKey: 'small-divider-thickness', variable: '--segmentedcontrol-small-divider-thickness' },
-      { label: 'corner radius', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
-      { label: 'padding', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
+      { label: 'corner radius', element: 'frame', groupKey: 'small-radius', variable: '--segmentedcontrol-bar-small-radius' },
+      { label: 'padding', element: 'frame', variable: '--segmentedcontrol-bar-small-padding', groupKey: 'bar-small-padding' },
+      { label: 'inset', element: 'divider', groupKey: 'small-divider-inset', variable: '--segmentedcontrol-small-divider-inset' },
+      { label: 'width', element: 'divider', groupKey: 'small-divider-thickness', variable: '--segmentedcontrol-small-divider-thickness' },
     ],
     'option base': [
       { label: 'icon size', groupKey: 'small-icon-size', variable: '--segmentedcontrol-option-small-icon-size' },
@@ -80,7 +80,8 @@
       lineHeightVariable: '--segmentedcontrol-option-text-line-height',
     }],
     'selected option': [{
-      legend: 'option text',
+      legend: '',
+      element: 'text',
       colorVariable: '--segmentedcontrol-selected-text',
       familyVariable: '--segmentedcontrol-selected-text-font-family',
       sizeVariable: '--segmentedcontrol-selected-text-font-size',

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

@@ -7,21 +7,25 @@
   // The tab object — four states (default/hover/active/disabled) of the same tab button.
   const tabStateNames = ['default', 'hover', 'active', 'disabled'] as const;
   type TabState = typeof tabStateNames[number];
+  // `element` tags split each tab state into frame / icon / indicator / text.
+  // No elementOrder: it would force the flat `bar` state into grouped mode.
+  // Frame tokens lead so sections read frame → icon → indicator → text (typeGroup last).
   function tabStateTokens(s: TabState): Token[] {
     return [
-      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--tabbar-${s}-icon-size` },
-      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--tabbar-${s}-padding` },
-      { label: 'surface color', groupKey: 'surface', variable: `--tabbar-${s}-surface` },
-      { label: 'top radius', canBeLinked: true, groupKey: 'tab-top-radius', variable: `--tabbar-${s}-tab-top-radius` },
-      { label: 'bottom radius', canBeLinked: true, groupKey: 'tab-bottom-radius', variable: `--tabbar-${s}-tab-bottom-radius` },
-      { label: 'border color', canBeLinked: true, groupKey: 'tab-border-color', variable: `--tabbar-${s}-tab-border-color` },
-      { label: 'border width', canBeLinked: true, groupKey: 'tab-border-width', variable: `--tabbar-${s}-tab-border-width` },
-      { label: 'indicator width', canBeLinked: true, groupKey: 'indicator-border-width', variable: `--tabbar-${s}-indicator-border-width` },
+      { label: 'surface color', element: 'frame', groupKey: 'surface', variable: `--tabbar-${s}-surface` },
+      { label: 'top radius', element: 'frame', canBeLinked: true, groupKey: 'tab-top-radius', variable: `--tabbar-${s}-tab-top-radius` },
+      { label: 'bottom radius', element: 'frame', canBeLinked: true, groupKey: 'tab-bottom-radius', variable: `--tabbar-${s}-tab-bottom-radius` },
+      { label: 'border color', element: 'frame', canBeLinked: true, groupKey: 'tab-border-color', variable: `--tabbar-${s}-tab-border-color` },
+      { label: 'border width', element: 'frame', canBeLinked: true, groupKey: 'tab-border-width', variable: `--tabbar-${s}-tab-border-width` },
+      { label: 'padding', element: 'frame', canBeLinked: true, groupKey: 'padding', variable: `--tabbar-${s}-padding` },
+      { label: 'size', element: 'icon', canBeLinked: true, groupKey: 'icon-size', variable: `--tabbar-${s}-icon-size` },
+      { label: 'width', element: 'indicator', canBeLinked: true, groupKey: 'indicator-border-width', variable: `--tabbar-${s}-indicator-border-width` },
     ];
   }
   function tabStateTypeGroups(s: TabState): TypeGroupConfig[] {
     return [{
-      legend: 'tab text',
+      legend: '',
+      element: 'text',
       colorVariable: `--tabbar-${s}-text`,
       familyVariable: `--tabbar-${s}-text-font-family`,
       sizeVariable: `--tabbar-${s}-text-font-size`,
@@ -48,7 +52,7 @@
   };
   states['active tab'] = [
     ...states['active tab'],
-    { label: 'indicator color', groupKey: 'indicator-color', variable: '--tabbar-active-border' },
+    { label: 'color', element: 'indicator', groupKey: 'indicator-color', variable: '--tabbar-active-border' },
   ];
   const typeGroups: Record<string, TypeGroupConfig[]> = Object.fromEntries(
     tabStateNames.map((s) => [`${s} tab`, tabStateTypeGroups(s)]),

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

@@ -8,29 +8,29 @@
   // on top of that baseline.
   const states: Record<string, Token[]> = {
     default: [
-      { label: 'thumb size',        variable: '--toggle-thumb-size' },
-      { label: 'track padding',     variable: '--toggle-track-padding' },
-      { label: 'track radius',      variable: '--toggle-track-radius' },
-      { label: 'track border width',variable: '--toggle-track-border-width' },
-      { label: 'track border',      variable: '--toggle-track-border' },
-      { label: 'track surface',     variable: '--toggle-track-surface' },
-      { label: 'thumb border',      variable: '--toggle-thumb-border' },
-      { label: 'thumb surface',     variable: '--toggle-thumb-surface' },
-      { label: 'label text',        variable: '--toggle-label-text' },
-      { label: 'label font family', variable: '--toggle-label-font-family' },
-      { label: 'label font size',   variable: '--toggle-label-font-size' },
-      { label: 'label font weight', variable: '--toggle-label-font-weight' },
-      { label: 'label gap',         variable: '--toggle-gap' },
+      { label: 'surface',      element: 'track', variable: '--toggle-track-surface' },
+      { label: 'border',       element: 'track', variable: '--toggle-track-border' },
+      { label: 'border width', element: 'track', variable: '--toggle-track-border-width' },
+      { label: 'radius',       element: 'track', variable: '--toggle-track-radius' },
+      { label: 'padding',      element: 'track', variable: '--toggle-track-padding' },
+      { label: 'surface',      element: 'thumb', variable: '--toggle-thumb-surface' },
+      { label: 'border',       element: 'thumb', variable: '--toggle-thumb-border' },
+      { label: 'size',         element: 'thumb', variable: '--toggle-thumb-size' },
+      { label: 'text',         element: 'label', variable: '--toggle-label-text' },
+      { label: 'font family',  element: 'label', variable: '--toggle-label-font-family' },
+      { label: 'font size',    element: 'label', variable: '--toggle-label-font-size' },
+      { label: 'font weight',  element: 'label', variable: '--toggle-label-font-weight' },
+      { label: 'gap',          element: 'label', variable: '--toggle-gap' },
     ],
     hover: [
       { label: 'track surface', variable: '--toggle-hover-track-surface' },
       { label: 'thumb surface', variable: '--toggle-hover-thumb-surface' },
     ],
     on: [
-      { label: 'track surface', variable: '--toggle-on-track-surface' },
-      { label: 'track border',  variable: '--toggle-on-track-border' },
-      { label: 'thumb surface', variable: '--toggle-on-thumb-surface' },
-      { label: 'thumb border',  variable: '--toggle-on-thumb-border' },
+      { label: 'surface', element: 'track', variable: '--toggle-on-track-surface' },
+      { label: 'border',  element: 'track', variable: '--toggle-on-track-border' },
+      { label: 'surface', element: 'thumb', variable: '--toggle-on-thumb-surface' },
+      { label: 'border',  element: 'thumb', variable: '--toggle-on-thumb-border' },
     ],
     'on hover': [
       { label: 'track surface', variable: '--toggle-on-hover-track-surface' },

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

@@ -4,21 +4,22 @@
 
   export const component = 'tooltip';
 
-  // Tooltip is a single object — surface/border/padding/radius/shadow live together.
+  // Element tags split the panel into frame + text via StateBlock.
   const states: Record<string, Token[]> = {
     tooltip: [
-      { label: 'surface color', variable: '--tooltip-surface' },
-      { label: 'border color', variable: '--tooltip-border' },
-      { label: 'border width', groupKey: 'width', variable: '--tooltip-border-width' },
-      { label: 'corner radius', variable: '--tooltip-radius' },
-      { label: 'padding', variable: '--tooltip-padding' },
-      { label: 'tooltip shadow', variable: '--tooltip-shadow' },
+      { label: 'surface color', element: 'frame', variable: '--tooltip-surface' },
+      { label: 'border color', element: 'frame', variable: '--tooltip-border' },
+      { label: 'border width', element: 'frame', groupKey: 'width', variable: '--tooltip-border-width' },
+      { label: 'corner radius', element: 'frame', variable: '--tooltip-radius' },
+      { label: 'padding', element: 'frame', variable: '--tooltip-padding' },
+      { label: 'shadow', element: 'frame', variable: '--tooltip-shadow' },
     ],
   };
 
   const typeGroups: Record<string, TypeGroupConfig[]> = {
     tooltip: [{
-      legend: 'tooltip text',
+      legend: '',
+      element: 'text',
       colorVariable: '--tooltip-text',
       familyVariable: '--tooltip-text-font-family',
       sizeVariable: '--tooltip-text-font-size',

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

@@ -18,3 +18,7 @@ export { buildTypeGroupTokens } from './scaffolding/buildTypeGroupTokens';
 
 // Token schema type — the shape of an entry in an editor's `allTokens` array.
 export type { Token } from './scaffolding/types';
+
+// Intrinsic spec — structural/display props an editor drives outside the token
+// grid (alignment, visibility). Pass an array as `registerComponent({ intrinsics })`.
+export type { IntrinsicSpec } from './scaffolding/types';

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

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-import type { Token } from './scaffolding/types';
+import type { Token, IntrinsicSpec } from './scaffolding/types';
 import { registerComponentSchema } from '../core/store/editorStore';
 
 import BadgeEditor, { allTokens as badgeTokens } from './BadgeEditor.svelte';
@@ -18,7 +18,7 @@ import MenuSelectEditor, { allTokens as menuSelectTokens } from './MenuSelectEdi
 import NotificationEditor, { allTokens as notificationTokens } from './NotificationEditor.svelte';
 import ProgressBarEditor, { allTokens as progressBarTokens } from './ProgressBarEditor.svelte';
 import RadioButtonEditor, { allTokens as radioButtonTokens } from './RadioButtonEditor.svelte';
-import SectionDividerEditor, { allTokens as sectionDividerTokens } from './SectionDividerEditor.svelte';
+import SectionDividerEditor, { allTokens as sectionDividerTokens, intrinsics as sectionDividerIntrinsics } from './SectionDividerEditor.svelte';
 import SegmentedControlEditor, { allTokens as segmentedControlTokens } from './SegmentedControlEditor.svelte';
 import SideNavigationEditor, { allTokens as sideNavigationTokens } from './SideNavigationEditor.svelte';
 import TableEditor, { allTokens as tableTokens } from './TableEditor.svelte';
@@ -72,6 +72,10 @@ export interface RegistryEntry {
   editorComponent: Component<any, any, any>;
   /** Flat token list — the editor's declarative description of its token surface. */
   schema: Token[];
+  /** Structural/display properties controlled outside the token grid. Optional —
+      most components have none. When present, each spec's per-variant default is
+      pinned to the runtime `:global(:root)` by intrinsicsContract.test. */
+  intrinsics?: IntrinsicSpec[];
   /** `'system'` for first-party entries; `'custom'` for entries added via `registerComponent()`. */
   origin: 'system' | 'custom';
 }
@@ -226,6 +230,7 @@ const builtInRegistry: Readonly<Record<BuiltInComponentId, RegistryEntry>> = Obj
     sourceFile: 'src/system/components/SectionDivider.svelte',
     editorComponent: SectionDividerEditor,
     schema: sectionDividerTokens,
+    intrinsics: sectionDividerIntrinsics,
     origin: 'system',
   },
   collapsiblesection: {

package/src/editor/component-editor/scaffolding/types.ts

@@ -36,6 +36,31 @@ export type Token = {
   family?: string;
 };
 
+/** An intrinsic: a structural/display property (alignment, hairline position,
+    element visibility) driven by a bespoke editor control rather than the
+    generic token grid. Unlike a Token it carries the default twice — once in
+    the runtime component's `:global(:root)` and once in the editor's read-back
+    (`default` below, which the getters fall back to when unset). Those two
+    copies must agree or the control displays a state the page doesn't render
+    (the SectionDivider align bug). The intrinsics contract test pins them. */
+export type IntrinsicSpec = {
+  /** Stable id, used in diagnostics and to key getters off the spec. */
+  key: string;
+  /** Variant keys this intrinsic spans (e.g. ['lg','md','sm']). */
+  variants: string[];
+  /** Per-variant CSS custom property. */
+  variable: (variant: string) => string;
+  /** Allowed raw values; the runtime `:root` default must be one of these. */
+  values: string[];
+  /** Editor's unset-default raw value per variant — the read-back getters
+      source their default from here. Pinned to the runtime `:global(:root)`
+      default by the intrinsics contract test. */
+  default: Record<string, string>;
+  /** Folds render-equivalent raw values to one canonical form before
+      comparison (e.g. SectionDivider's 'above-description' ≡ 'below-label'). */
+  normalize?: (raw: string) => string;
+};
+
 /** Editor type-group: a fieldset containing a coordinated set of typography tokens
     (text color + font-family/size/weight/line-height) for a piece of content
     (e.g. a card title, notification body). Optional outline rows let

package/src/system/components/CodeSnippet.svelte

@@ -1,6 +1,6 @@
 <!--
-  CodeSnippet.svelte — single-line code display with a copy button. Click the
-  button to copy `code` to the clipboard; a Tooltip-rendered confirmation
+  CodeSnippet.svelte — code display with a copy button pinned top-right. Click
+  the button to copy `code` to the clipboard; a Tooltip-rendered confirmation
   ("Copied") flashes briefly above the button.
 -->
 <script lang="ts">
@@ -71,11 +71,15 @@
     --codesnippet-icon: var(--text-secondary);
     --codesnippet-icon-size: var(--font-size-md);
     --codesnippet-hover-icon: var(--text-primary);
+
+    /* Horizontal-scroll scrollbar. */
+    --codesnippet-scrollbar-border-width: var(--border-width-6);
+    --codesnippet-scrollbar-thumb: var(--text-tertiary);
   }
 
   .codesnippet {
     display: inline-flex;
-    align-items: center;
+    align-items: flex-start;
     gap: var(--codesnippet-gap);
     max-width: 100%;
     padding: var(--codesnippet-padding);
@@ -93,8 +97,22 @@
     font-weight: var(--codesnippet-code-font-weight);
     line-height: var(--codesnippet-code-line-height);
     white-space: pre;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--codesnippet-scrollbar-thumb) transparent;
+  }
+
+  .code::-webkit-scrollbar {
+    height: var(--codesnippet-scrollbar-border-width);
+  }
+
+  .code::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .code::-webkit-scrollbar-thumb {
+    background: var(--codesnippet-scrollbar-thumb);
+    border-radius: var(--radius-full);
   }
 
   .copy {