@motion-proto/live-tokens 0.24.2 → 0.25.0

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

@@ -16,20 +16,69 @@ export const TYPE_FONT_PROPS = [
 
 export type TypeFontProp = typeof TYPE_FONT_PROPS[number];
 
-export type BuildTypeGroupTokensOptions = {
-  /** Override the default groupKey per property. Receives the prop descriptor and the
+/** Declarative inputs that let the helpers derive a slot-scoped groupKey from a
+    variable name instead of guessing from its last dash. Pass `component` (the id,
+    so the `--<id>-` prefix is stripped) and `variants` (the variant/state segment
+    strings exactly as they appear in variable names, e.g. `['default','hover']`).
+    The derived key is everything left after removing the prefix and those segments,
+    so two parts that share a suffix (`section-text`, `item-text`) stay distinct
+    while the same slot across variants collapses to one key. */
+export type GroupKeyDerivation = {
+  component?: string;
+  variants?: readonly string[];
+};
+
+export type BuildTypeGroupTokensOptions = GroupKeyDerivation & {
+  /** Override the derived groupKey per property. Receives the prop descriptor and the
       type-group config it came from. Return a stable string — siblings sharing the same
-      groupKey are linked in the linked block. */
+      groupKey are linked in the linked block. Wins over structural derivation. */
   groupKeyFor?: (prop: TypeFontProp, group: TypeGroupConfig) => string;
 };
 
+/** Color-token derivation: either the legacy single-arg callback form
+    `(group) => string`, or the declarative options object. */
+export type ColorGroupKeyOption =
+  | ((group: TypeGroupConfig) => string)
+  | (GroupKeyDerivation & { groupKeyFor?: (group: TypeGroupConfig) => string });
+
+/** Remove the first contiguous run matching each `segment` (a segment may itself
+    be multi-part, e.g. `'on-hover'`) from `segs`. */
+function stripSegments(segs: string[], remove: readonly string[]): string[] {
+  let out = segs;
+  for (const r of remove) {
+    const rs = r.split('-');
+    for (let i = 0; i + rs.length <= out.length; i++) {
+      if (rs.every((s, k) => out[i + k] === s)) {
+        out = [...out.slice(0, i), ...out.slice(i + rs.length)];
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+/** Slot-scoped key = the variable minus the `--<component>-` prefix and any
+    variant/state segments. Falls back to the whole variable if nothing remains. */
+export function structuralGroupKey(
+  variable: string,
+  { component, variants }: GroupKeyDerivation,
+): string {
+  let body = variable.startsWith('--') ? variable.slice(2) : variable;
+  if (component && body.startsWith(component + '-')) body = body.slice(component.length + 1);
+  const segs = stripSegments(body.split('-'), variants ?? []);
+  return segs.join('-') || variable;
+}
+
 /** Derive the Token[] schema entries for every TypeGroupConfig in `typeGroups`. Each
     group emits one `colorVariable` token plus up to 4 font-shape tokens (family/size/
     weight/line-height) for whichever of those are declared on the group. Font-shape
     tokens carry `canBeLinked: true` and a stable `groupKey` so the linked-block linkage
-    sees them; the color token is emitted plain (no groupKey, not shareable) so it stays
-    out of the linked block while still appearing in the editor's full token surface
-    (used by the reset-button and the design-token resolution test).
+    sees them; the color token is emitted plain (no groupKey, not shareable) unless a
+    derivation is supplied, in which case it too gets a slot-scoped key.
+
+    Pass `{ component, variants }` so font keys are slot-scoped
+    (`--card-default-title-font-family` → `title-font-family`) instead of the bare
+    `font-family` default, which silently merges multiple slots into one link tree.
 
     Mirrors the `flatMap`/loop pattern in ButtonEditor and RadioButtonEditor so
     editors don't have to hand-list 16+ near-identical Token entries. */
@@ -37,15 +86,23 @@ export function buildTypeGroupTokens(
   typeGroups: Record<string, TypeGroupConfig[]>,
   options: BuildTypeGroupTokensOptions = {},
 ): Token[] {
-  const { groupKeyFor } = options;
+  const { groupKeyFor, component, variants } = options;
+  const derive = component !== undefined || variants !== undefined;
   const tokens: Token[] = [];
   for (const groups of Object.values(typeGroups)) {
     for (const group of groups) {
-      tokens.push({ label: group.colorLabel ?? 'color', variable: group.colorVariable });
+      const colorToken: Token = { label: group.colorLabel ?? 'color', variable: group.colorVariable };
+      if (group.colorGroupKey) colorToken.groupKey = group.colorGroupKey;
+      else if (derive) colorToken.groupKey = structuralGroupKey(group.colorVariable, { component, variants });
+      tokens.push(colorToken);
       for (const prop of TYPE_FONT_PROPS) {
         const variable = group[prop.key];
         if (!variable) continue;
-        const groupKey = groupKeyFor ? groupKeyFor(prop, group) : prop.defaultGroupKey;
+        const groupKey = groupKeyFor
+          ? groupKeyFor(prop, group)
+          : derive
+            ? structuralGroupKey(variable, { component, variants })
+            : prop.defaultGroupKey;
         tokens.push({ label: prop.label, canBeLinked: true, groupKey, variable });
       }
     }
@@ -60,24 +117,70 @@ export function buildTypeGroupTokens(
     cleanly into both `Object.values(typeGroups).flat()` chains and per-variant
     `flatMap` constructions.
 
-    Each color token gets a groupKey derived from the colorVariable's last-dash
-    suffix (e.g. `--badge-primary-text` → `text`) so that all variants/states of
-    the same slot are siblings and can be linked in the editor. They start out
-    divergent (one value per variant) and the user can opt in to a single shared
-    value via the link UI. */
+    groupKey precedence per group: explicit `group.colorGroupKey` > the second
+    argument (`groupKeyFor` callback) > structural derivation (`{ component, variants }`).
+    With none of these the color token is emitted without a groupKey (solo, no
+    siblings) — the contract is explicit, there is no name-based inference. Pass
+    `{ component, variants }` to group a slot's color across variants; structural
+    derivation keeps several slots ending in the same word (SideNavigation's
+    section / item / footer) distinct, so `editor color/font link-group parity`
+    stays satisfied. */
 export function buildTypeGroupColorTokens(
   typeGroups: Record<string, TypeGroupConfig[]> | TypeGroupConfig[],
+  option?: ColorGroupKeyOption,
 ): Token[] {
   const groups: TypeGroupConfig[] = Array.isArray(typeGroups)
     ? typeGroups
     : Object.values(typeGroups).flat();
+  const legacyFn = typeof option === 'function' ? option : undefined;
+  const opts = typeof option === 'object' ? option : undefined;
+  const groupKeyFor = legacyFn ?? opts?.groupKeyFor;
+  const derive = opts && (opts.component !== undefined || opts.variants !== undefined);
   return groups.map((g) => {
-    const lastDash = g.colorVariable.lastIndexOf('-');
-    const groupKey = lastDash >= 0 ? g.colorVariable.slice(lastDash + 1) : g.colorVariable;
-    return { label: g.colorLabel ?? 'color', variable: g.colorVariable, groupKey };
+    const groupKey = g.colorGroupKey
+      ? g.colorGroupKey
+      : groupKeyFor
+        ? groupKeyFor(g)
+        : derive
+          ? structuralGroupKey(g.colorVariable, opts)
+          : undefined;
+    const token: Token = { label: g.colorLabel ?? 'color', variable: g.colorVariable };
+    if (groupKey) token.groupKey = groupKey;
+    return token;
   });
 }
 
+/** Font-only counterpart: the family/size/weight/line-height tokens for each group
+    with slot-scoped, linkable groupKeys, but no color token. Use alongside
+    `buildTypeGroupColorTokens` when a component wants its type-group colors and fonts
+    emitted separately (e.g. Table keeps per-slot colors but a custom layout). Keys
+    derive structurally from `{ component, variants }`; without a derivation they fall
+    back to the bare `font-family`/`font-size`/… defaults. */
+export function buildTypeGroupFontTokens(
+  typeGroups: Record<string, TypeGroupConfig[]> | TypeGroupConfig[],
+  options: BuildTypeGroupTokensOptions = {},
+): Token[] {
+  const { groupKeyFor, component, variants } = options;
+  const derive = component !== undefined || variants !== undefined;
+  const groups: TypeGroupConfig[] = Array.isArray(typeGroups)
+    ? typeGroups
+    : Object.values(typeGroups).flat();
+  const tokens: Token[] = [];
+  for (const group of groups) {
+    for (const prop of TYPE_FONT_PROPS) {
+      const variable = group[prop.key];
+      if (!variable) continue;
+      const groupKey = groupKeyFor
+        ? groupKeyFor(prop, group)
+        : derive
+          ? structuralGroupKey(variable, { component, variants })
+          : prop.defaultGroupKey;
+      tokens.push({ label: prop.label, canBeLinked: true, groupKey, variable });
+    }
+  }
+  return tokens;
+}
+
 /** Companion helper: derive a `linkableContexts` map mapping every typography variable in
     `typeGroups` to its state name. Use to build the linked-block context map without
     spelling out 16+ entries; merge with non-typography entries via spread. */

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

@@ -84,6 +84,10 @@ export type TypeGroupConfig = {
   outlineWidthLabel?: string;
   outlineColorVariable?: string;
   outlineColorLabel?: string;
+  /** Explicit groupKey for this group's color token. Wins over every derivation
+      (structural or `groupKeyFor`) and is never recomputed — the durable, one-line
+      fix when the derived key is wrong. */
+  colorGroupKey?: string;
   /** See `Token.element` — when present, StateBlock groups this fieldset under
       the matching element subsection. */
   element?: string;

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -146,15 +146,61 @@
   let floating = $state({ ...initial.floating });
 
   // Collapsed-pill size; slight overshoot is fine (overflow:hidden).
-  const COLLAPSED_WIDTH = 200;
+  const COLLAPSED_WIDTH = 232;
   const COLLAPSED_HEIGHT = 44;
 
   // Fade for open-only buttons (bar timing lives in CSS vars below).
   const BTN_FADE = { duration: 130, easing: cubicInOut };
 
+  // Mirror the CSS bar timings; used for the fallback that clears the mask if
+  // no transitionend fires (reduced motion, suppressed transitions, no delta).
+  const OPEN_DUR = 240;
+  const CLOSE_DUR = 240;
+  const CLOSE_DELAY = 120; // matches --bar-close-delay: collapse waits for the fade-out
+
   // Suppress CSS transitions during gestures + mode swaps.
   let suppressTransition = $state(false);
 
+  // Mask the iframe during the pill↔full size change so the editor route's
+  // reflow (side-nav scrollbar, white body) never shows. On open, content fades
+  // in once the panel settles; on close, content fades out first, then the
+  // panel collapses (the shrink is delayed by --bar-close-delay to wait for it).
+  let opening = $state(false);
+  let closing = $state(false);
+  let prevOpen = open;
+  let maskTimer: ReturnType<typeof setTimeout> | undefined;
+  run(() => {
+    if (open === prevOpen) return;
+    prevOpen = open;
+    clearTimeout(maskTimer);
+    if (open) {
+      closing = false;
+      opening = true;
+      if (gesturing || suppressTransition) {
+        // .no-transition path: no transitionend will fire, so reveal next frame.
+        requestAnimationFrame(() => { opening = false; });
+      } else {
+        maskTimer = setTimeout(() => { opening = false; }, OPEN_DUR + 60);
+      }
+    } else {
+      opening = false;
+      closing = true;
+      if (gesturing || suppressTransition) {
+        requestAnimationFrame(() => { closing = false; });
+      } else {
+        maskTimer = setTimeout(() => { closing = false; }, CLOSE_DELAY + CLOSE_DUR + 60);
+      }
+    }
+  });
+
+  function onPanelTransitionEnd(e: TransitionEvent) {
+    if (e.target !== e.currentTarget) return;
+    if (e.propertyName !== 'width' && e.propertyName !== 'height') return;
+    clearTimeout(maskTimer);
+    opening = false;
+    closing = false;
+  }
+
   // Scrim catches pointer events during gestures so they hit the panel, not the iframe.
   let gesturing: 'drag' | 'resize-left' | 'resize-se' | null = $state(null);
 
@@ -268,6 +314,7 @@
   });
   onDestroy(() => {
     window.removeEventListener('lt-overlay-toggle', handleToggleRequest);
+    clearTimeout(maskTimer);
   });
 
   let panelStyle = $derived(!open
@@ -286,7 +333,10 @@
   class:hidden={!open}
   class:docked={open && mode === 'docked'}
   class:floating={open && mode === 'floating'}
+  class:opening={open && opening}
+  class:closing={!open && closing}
   class:no-transition={!!gesturing || suppressTransition}
+  ontransitionend={onPanelTransitionEnd}
 >
   <div
     class="header"
@@ -394,8 +444,8 @@
     --bar-open-ease: cubic-bezier(0.65, 0, 0.35, 1);
     --bar-open-delay: 0ms;
     --bar-close-dur: 240ms;
-    --bar-close-ease: cubic-bezier(0.65, 0, 0.35, 1);
-    --bar-close-delay: 70ms;
+    --bar-close-ease: cubic-bezier(0, 0, 0.2, 1); /* ease-out */
+    --bar-close-delay: 120ms; /* let the iframe fade out before the panel shrinks */
 
     display: flex;
     flex-direction: column;
@@ -426,6 +476,7 @@
   /* Collapsed state: pinned top-right; iframe stays mounted, clipped by overflow:hidden. */
   .lt-overlay.hidden {
     border-radius: var(--ui-radius-lg, 6px);
+    border-color: rgba(255, 255, 255, 0.32);
     transition:
       width var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
       height var(--bar-close-dur) var(--bar-close-ease) var(--bar-close-delay),
@@ -616,6 +667,23 @@
     height: 100%;
     border: 0;
     display: block;
+    transition: opacity 200ms ease-in;
+  }
+
+  /* While the panel grows pill → full, hide the iframe over the #000 frame-wrap
+     so the editor route's intermediate reflow (side-nav scrollbar, white body)
+     never shows; it fades in once the size transition settles. */
+  .lt-overlay.opening .editor-frame {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* On collapse, fade the iframe out quickly first (the panel shrink is held
+     back by --bar-close-delay), so the reflow during shrink stays masked. */
+  .lt-overlay.closing .editor-frame {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 120ms ease-in;
   }
 
   .gesture-scrim {
@@ -654,4 +722,12 @@
       transparent 55%
     );
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .lt-overlay,
+    .lt-overlay.hidden,
+    .editor-frame {
+      transition: none;
+    }
+  }
 </style>

package/src/editor/styles/ui-editor.css

@@ -7,8 +7,14 @@
   font-family: var(--ui-font-sans);
 }
 
-/* Override tokens.css's global :where(*) font-family. */
-.editor-page *:not([class*="fa-"]) {
+/* Pull editor chrome onto --ui-font-sans, overriding tokens.css's global
+   :where(*) theme-font baseline. The element matcher stays inside :where() so
+   this override computes to (0,1,0) — above the zero-specificity baseline but
+   below a component's single-class scoped font rule (`.sn-item.svelte-HASH` =
+   (0,2,0)). Without :where() it would tie those component rules and, winning on
+   source order, freeze every preview on --ui-font-sans (font-token edits write
+   the variable but the preview never repaints). */
+.editor-page :where(*:not([class*="fa-"])) {
   font-family: inherit;
 }
 

package/src/system/assets/github-mark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ffffff" d="M10.226 17.284c-2.965-.36-5.054-2.493-5.054-5.256 0-1.123.404-2.336 1.078-3.144-.292-.741-.247-2.314.09-2.965.898-.112 2.111.36 2.83 1.01.853-.269 1.752-.404 2.853-.404 1.1 0 1.999.135 2.807.382.696-.629 1.932-1.1 2.83-.988.315.606.36 2.179.067 2.942.72.854 1.101 2 1.101 3.167 0 2.763-2.089 4.852-5.098 5.234.763.494 1.28 1.572 1.28 2.807v2.336c0 .674.561 1.056 1.235.786 4.066-1.55 7.255-5.615 7.255-10.646C23.5 6.188 18.334 1 11.978 1 5.62 1 .5 6.188.5 12.545c0 4.986 3.167 9.12 7.435 10.669.606.225 1.19-.18 1.19-.786V20.63a2.9 2.9 0 0 1-1.078.224c-1.483 0-2.359-.808-2.987-2.313-.247-.607-.517-.966-1.034-1.033-.27-.023-.359-.135-.359-.27 0-.27.45-.471.898-.471.652 0 1.213.404 1.797 1.235.45.651.921.943 1.483.943.561 0 .92-.202 1.437-.719.382-.381.674-.718.944-.943"/></svg>

package/src/system/assets/npm-mark-white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#ffffff" fill-rule="evenodd" d="M0,16V0H16V16ZM3,3V13H8V5h3v8h2V3Z"/></svg>

package/src/system/components/Button.svelte

@@ -77,7 +77,7 @@
       --button-primary-surface: var(--surface-brand-high);
       --button-primary-text: var(--text-primary);
       --button-primary-text-font-family: var(--font-sans);
-      --button-primary-text-font-size: var(--font-size-md);
+      --button-primary-text-font-size: var(--font-size-lg);
       --button-primary-text-font-weight: var(--font-weight-semibold);
       --button-primary-text-line-height: var(--line-height-sm);
       --button-primary-border: var(--border-brand);
@@ -90,13 +90,13 @@
       --button-primary-disabled-surface: var(--color-neutral-700);
       --button-primary-disabled-text: var(--text-tertiary);
       --button-primary-disabled-border: var(--border-neutral-faint);
-      --button-primary-icon-size: var(--icon-size-sm);
+      --button-primary-icon-size: var(--icon-size-md);
 
       /* Secondary */
       --button-secondary-surface: var(--surface-neutral-high);
       --button-secondary-text: var(--text-primary);
       --button-secondary-text-font-family: var(--font-sans);
-      --button-secondary-text-font-size: var(--font-size-md);
+      --button-secondary-text-font-size: var(--font-size-lg);
       --button-secondary-text-font-weight: var(--font-weight-semibold);
       --button-secondary-text-line-height: var(--line-height-sm);
       --button-secondary-border: var(--border-neutral);
@@ -109,13 +109,13 @@
       --button-secondary-disabled-surface: var(--color-neutral-700);
       --button-secondary-disabled-text: var(--text-tertiary);
       --button-secondary-disabled-border: var(--border-neutral-faint);
-      --button-secondary-icon-size: var(--icon-size-sm);
+      --button-secondary-icon-size: var(--icon-size-md);
 
       /* Outline */
       --button-outline-surface: var(--color-transparent);
       --button-outline-text: var(--text-primary);
       --button-outline-text-font-family: var(--font-sans);
-      --button-outline-text-font-size: var(--font-size-md);
+      --button-outline-text-font-size: var(--font-size-lg);
       --button-outline-text-font-weight: var(--font-weight-semibold);
       --button-outline-text-line-height: var(--line-height-sm);
       --button-outline-border: var(--border-neutral);
@@ -129,13 +129,13 @@
       --button-outline-disabled-surface: var(--color-transparent);
       --button-outline-disabled-text: var(--text-tertiary);
       --button-outline-disabled-border: var(--border-neutral-faint);
-      --button-outline-icon-size: var(--icon-size-sm);
+      --button-outline-icon-size: var(--icon-size-md);
 
       /* Success */
       --button-success-surface: var(--surface-success-low);
       --button-success-text: var(--text-success);
       --button-success-text-font-family: var(--font-sans);
-      --button-success-text-font-size: var(--font-size-md);
+      --button-success-text-font-size: var(--font-size-lg);
       --button-success-text-font-weight: var(--font-weight-semibold);
       --button-success-text-line-height: var(--line-height-sm);
       --button-success-border: var(--border-success);
@@ -148,13 +148,13 @@
       --button-success-disabled-surface: var(--color-neutral-700);
       --button-success-disabled-text: var(--text-tertiary);
       --button-success-disabled-border: var(--border-neutral-faint);
-      --button-success-icon-size: var(--icon-size-sm);
+      --button-success-icon-size: var(--icon-size-md);
 
       /* Danger */
       --button-danger-surface: var(--surface-danger-low);
       --button-danger-text: var(--text-danger);
       --button-danger-text-font-family: var(--font-sans);
-      --button-danger-text-font-size: var(--font-size-md);
+      --button-danger-text-font-size: var(--font-size-lg);
       --button-danger-text-font-weight: var(--font-weight-semibold);
       --button-danger-text-line-height: var(--line-height-sm);
       --button-danger-border: var(--border-danger);
@@ -167,13 +167,13 @@
       --button-danger-disabled-surface: var(--color-neutral-700);
       --button-danger-disabled-text: var(--text-tertiary);
       --button-danger-disabled-border: var(--border-neutral-faint);
-      --button-danger-icon-size: var(--icon-size-sm);
+      --button-danger-icon-size: var(--icon-size-md);
 
       /* Warning */
       --button-warning-surface: var(--surface-warning-low);
       --button-warning-text: var(--text-warning);
       --button-warning-text-font-family: var(--font-sans);
-      --button-warning-text-font-size: var(--font-size-md);
+      --button-warning-text-font-size: var(--font-size-lg);
       --button-warning-text-font-weight: var(--font-weight-semibold);
       --button-warning-text-line-height: var(--line-height-sm);
       --button-warning-border: var(--border-warning);
@@ -186,7 +186,7 @@
       --button-warning-disabled-surface: var(--color-neutral-700);
       --button-warning-disabled-text: var(--text-tertiary);
       --button-warning-disabled-border: var(--border-neutral-faint);
-      --button-warning-icon-size: var(--icon-size-sm);
+      --button-warning-icon-size: var(--icon-size-md);
 
       /* Small size — shared across all variants. The `.small` rule below reads
          these tokens directly (no per-variant rebind needed, since small

package/src/system/components/CodeSnippet.svelte

@@ -61,7 +61,7 @@
     --codesnippet-gap: var(--space-16);
 
     /* Code text. */
-    --codesnippet-code-text: var(--text-brand-secondary);
+    --codesnippet-code-text: var(--text-brand);
     --codesnippet-code-font-family: var(--font-mono);
     --codesnippet-code-font-size: var(--font-size-md);
     --codesnippet-code-font-weight: var(--font-weight-normal);
@@ -78,6 +78,9 @@
   }
 
   .codesnippet {
+    /* Without a global border-box reset, content-box would let the snippet's own
+       padding + border overflow max-width: 100%, tripping a spurious side scroll. */
+    box-sizing: border-box;
     display: inline-flex;
     align-items: flex-start;
     gap: var(--codesnippet-gap);

package/src/system/components/Panel.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Forwarded to the stage so callers can inject token overrides. */
+    style?: string;
+    /** Fixes the stage height so it never reflows when its content resizes. */
+    minHeight?: string;
+    children: Snippet;
+  }
+
+  let { style = '', minHeight, children }: Props = $props();
+</script>
+
+<div class="panel" {style} style:min-height={minHeight}>
+  {@render children()}
+</div>
+
+<style>
+  :global(:root) {
+    --panel-frame-border: var(--border-neutral);
+    --panel-frame-border-width: var(--border-width-1);
+    --panel-frame-radius: var(--radius-2xl);
+
+    --panel-stage-surface: linear-gradient(0deg, color-mix(in srgb, var(--surface-neutral-low) 40%, transparent) 0.5%, color-mix(in srgb, var(--surface-neutral-lowest) 75%, transparent) 100%);
+    --panel-stage-padding: var(--space-16);
+    --panel-stage-inline-padding: var(--space-32);
+    --panel-stage-gap: var(--space-16);
+  }
+
+  .panel {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--panel-stage-gap);
+    width: 100%;
+    border: var(--panel-frame-border-width) solid var(--panel-frame-border);
+    border-radius: var(--panel-frame-radius);
+    background: var(--panel-stage-surface);
+    padding: var(--panel-stage-padding) var(--panel-stage-inline-padding);
+    overflow: hidden;
+  }
+</style>

package/src/system/components/SectionDivider.svelte

@@ -213,7 +213,7 @@
     --sectiondivider-lg-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-lg-eyebrow-font-size: var(--font-size-md);
     --sectiondivider-lg-eyebrow-letter-spacing: var(--letter-spacing-wide);
-    --sectiondivider-lg-padding: var(--space-4);
+    --sectiondivider-lg-padding: var(--space-0);
     --sectiondivider-lg-title-padding: var(--space-2);
     --sectiondivider-lg-description-padding: var(--space-0);
     --sectiondivider-lg-eyebrow-padding: var(--space-0);
@@ -244,7 +244,7 @@
     --sectiondivider-md-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-md-eyebrow-font-size: var(--font-size-sm);
     --sectiondivider-md-eyebrow-letter-spacing: var(--letter-spacing-wide);
-    --sectiondivider-md-padding: var(--space-4);
+    --sectiondivider-md-padding: var(--space-0);
     --sectiondivider-md-title-padding: var(--space-2);
     --sectiondivider-md-description-padding: var(--space-0);
     --sectiondivider-md-eyebrow-padding: var(--space-0);
@@ -262,8 +262,8 @@
 
     /* Small */
     --sectiondivider-sm-title-font-family: var(--font-display);
-    --sectiondivider-sm-title-font-weight: var(--font-weight-bold);
-    --sectiondivider-sm-title-font-size: var(--font-size-2xl);
+    --sectiondivider-sm-title-font-weight: var(--font-weight-medium);
+    --sectiondivider-sm-title-font-size: var(--font-size-3xl);
     --sectiondivider-sm-title-line-height: var(--line-height-md);
     --sectiondivider-sm-title-letter-spacing: var(--letter-spacing-normal);
     --sectiondivider-sm-title-outline-width: var(--border-width-4);
@@ -275,7 +275,7 @@
     --sectiondivider-sm-eyebrow-font-weight: var(--font-weight-medium);
     --sectiondivider-sm-eyebrow-font-size: var(--font-size-xs);
     --sectiondivider-sm-eyebrow-letter-spacing: var(--letter-spacing-wide);
-    --sectiondivider-sm-padding: var(--space-4);
+    --sectiondivider-sm-padding: var(--space-0);
     --sectiondivider-sm-title-padding: var(--space-2);
     --sectiondivider-sm-description-padding: var(--space-0);
     --sectiondivider-sm-eyebrow-padding: var(--space-0);
@@ -284,12 +284,12 @@
     --sectiondivider-sm-shadow: var(--shadow-none);
     --sectiondivider-sm-hairline-thickness: var(--border-width-1);
     --sectiondivider-sm-background: var(--color-transparent);
-    --sectiondivider-sm-title: var(--text-primary);
+    --sectiondivider-sm-title: var(--text-brand);
     --sectiondivider-sm-description: var(--text-secondary);
     --sectiondivider-sm-eyebrow: var(--text-tertiary);
     --sectiondivider-sm-border: var(--color-transparent);
-    --sectiondivider-sm-title-outline-color: var(--surface-canvas-lowest);
-    --sectiondivider-sm-hairline-color: var(--border-brand-medium);
+    --sectiondivider-sm-title-outline-color: color-mix(in srgb, var(--surface-neutral-lowest) 25%, transparent);
+    --sectiondivider-sm-hairline-color: color-mix(in srgb, var(--border-brand-medium) 50%, transparent);
 
     /* Intrinsic defaults. These keys cascade to `:root` via the editor's
        alias bucket; un-edited variants fall back to these. The defaults
@@ -297,7 +297,7 @@
        eyebrow, visible description, hidden hairline, normal-case eyebrow. */
     --sectiondivider-lg-align: start;
     --sectiondivider-md-align: start;
-    --sectiondivider-sm-align: start;
+    --sectiondivider-sm-align: center;
     --sectiondivider-lg-eyebrow-display: block;
     --sectiondivider-md-eyebrow-display: none;
     --sectiondivider-sm-eyebrow-display: none;
@@ -306,7 +306,7 @@
     --sectiondivider-sm-description-display: none;
     --sectiondivider-lg-hairline: below-description;
     --sectiondivider-md-hairline: below-label;
-    --sectiondivider-sm-hairline: below-label;
+    --sectiondivider-sm-hairline: none;
     --sectiondivider-lg-eyebrow-text-transform: none;
     --sectiondivider-md-eyebrow-text-transform: none;
     --sectiondivider-sm-eyebrow-text-transform: none;

package/src/system/components/SideNavigation.svelte

@@ -41,6 +41,13 @@
     class?: string;
     /** Toggle callback. Preferred over `on:toggle` from 0.5.0 onward. */
     ontoggle?: () => void;
+    /** Optional content rendered at the top of the rail, above the title
+        (e.g. a logo or company name). Hidden while collapsed. No spacing is
+        imposed — the consumer controls it. */
+    lead?: import('svelte').Snippet;
+    /** Optional content rendered at the foot of the nav list, inside the panel.
+        Hidden while collapsed. No spacing is imposed — the consumer controls it. */
+    actions?: import('svelte').Snippet;
   }
 
   let {
@@ -55,6 +62,8 @@
     forceActivePart = null,
     class: className = '',
     ontoggle,
+    lead,
+    actions,
   }: Props = $props();
 
   // Dual-fire bridge — see Button.svelte for the deprecation timeline.
@@ -152,6 +161,8 @@
   class:force-footer-hover={forceHoverPart === 'footer'}
   class:force-footer-active={forceActivePart === 'footer'}
 >
+  {#if open && lead}{@render lead()}{/if}
+
   <!-- Header is always rendered so the toggle (a child here) survives the
        collapsed state. The label is the only conditional child — when the
        rail is closed, the header reduces to just the toggle, centred via the
@@ -220,6 +231,8 @@
           <span>{footer.title}</span>
         </a>
       {/if}
+
+      {#if actions}{@render actions()}{/if}
     </div>
   {/if}
 </aside>