@motion-proto/live-tokens 0.6.2 → 0.8.0

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import newspaperBg from '../../../system/assets/newspaper.webp';
+
+
+
+  interface Props {
+    mode?: 'default' | 'image' | 'color';
+    /** CSS var name (set by ShadowBackdropControls) the backdrop reads when in color mode. */
+    colorVariable?: string;
+    /** Padding around the slotted preview content. Set to '0' when the slotted component should cover the full backdrop area (e.g. dialog overlay). */
+    padding?: string;
+    children?: import('svelte').Snippet;
+    /** Optional right-rail snippet rendered inside the backdrop as a fixed-width column. Used for canvas-scoped settings (e.g. Background controls). */
+    controls?: import('svelte').Snippet;
+  }
+
+  let {
+    mode = 'default',
+    colorVariable,
+    padding = '4rem',
+    children,
+    controls
+  }: Props = $props();
+
+  let backgroundStyle = $derived.by(() => {
+    if (mode === 'image') {
+      return `background-image: url(${newspaperBg}); background-size: cover; background-position: center; background-repeat: no-repeat;`;
+    }
+    if (mode === 'color' && colorVariable) {
+      return `background: var(${colorVariable}, #1a1a1a);`;
+    }
+    return `background: var(--ui-surface-lowest); border: 1px solid var(--ui-border-low);`;
+  });
+</script>
+
+<div class="shadow-backdrop" class:with-controls={!!controls} style={backgroundStyle}>
+  <div class="shadow-backdrop-content" style="padding: {padding} {padding} {padding} 1.5rem;">
+    {@render children?.()}
+  </div>
+  {#if controls}
+    <div class="shadow-backdrop-controls">
+      {@render controls?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .shadow-backdrop {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    min-width: 0;
+    min-height: 12rem;
+    border-radius: var(--ui-radius-md);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .shadow-backdrop.with-controls {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "preview controls";
+  }
+
+  .shadow-backdrop-content {
+    display: grid;
+    align-items: center;
+    justify-items: start;
+    min-width: 0;
+    grid-area: preview;
+  }
+
+  .shadow-backdrop-controls {
+    padding: var(--ui-space-8);
+    grid-area: controls;
+  }
+
+  @container variant-group (max-width: 32rem) {
+    .shadow-backdrop.with-controls {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas:
+        "controls"
+        "preview";
+    }
+  }
+</style>

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

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
+  import { setCssVar } from '../../core/cssVarSync';
+
+  type Mode = 'default' | 'image' | 'color';
+
+  interface Props {
+    mode?: Mode;
+    /** Editor-scoped CSS var the picker writes to (must end with `-surface` to allow gradients). */
+    colorVariable: string;
+    /** Which modes to expose. Defaults to all three. */
+    modes?: ReadonlyArray<Mode>;
+  }
+
+  let { mode = $bindable('default'), colorVariable, modes = ['default', 'image', 'color'] }: Props = $props();
+
+  const ALL_OPTIONS: ReadonlyArray<{ value: Mode; label: string }> = [
+    { value: 'default', label: 'Default' },
+    { value: 'image', label: 'Image' },
+    { value: 'color', label: 'Color' },
+  ];
+  let options = $derived(ALL_OPTIONS.filter((o) => modes.includes(o.value)));
+
+  onMount(() => {
+    if (!document.documentElement.style.getPropertyValue(colorVariable)) {
+      setCssVar(colorVariable, 'var(--surface-canvas)');
+    }
+  });
+</script>
+
+<div class="backdrop-grid" role="radiogroup">
+  {#each options as opt (opt.value)}
+    <div
+      class="backdrop-option"
+      class:checked={mode === opt.value}
+      role="radio"
+      aria-checked={mode === opt.value}
+      aria-label={opt.label}
+      tabindex={mode === opt.value ? 0 : -1}
+      onclick={() => (mode = opt.value)}
+      onkeydown={(e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          mode = opt.value;
+        }
+      }}
+    >
+      <span class="backdrop-dot" aria-hidden="true"></span>
+      {#if opt.value !== 'color'}
+        <span>{opt.label}</span>
+      {:else}
+        <div class="picker-slot">
+          <UIPaletteSelector variable={colorVariable} />
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .backdrop-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  /* Reserve room for the swatch's absolute-positioned token-name caption so it
+     doesn't bleed onto whatever sits below the controls. */
+  .backdrop-grid:has(.picker-slot) {
+    padding-bottom: var(--ui-space-16);
+  }
+
+  /* Each row keeps the same vertical rhythm; the trigger's height defines
+     the line, so the radio-only rows match it via min-height. The whole row
+     is clickable via the onclick handler — selecting on any pointer hit. */
+  .backdrop-option {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    min-height: 1.75rem;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--ui-transition-fast);
+  }
+  .backdrop-option.checked {
+    color: var(--ui-text-primary);
+  }
+  .backdrop-option:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* Custom radio dot replaces native input so the entire row's onclick
+     handler runs without label/input dual-activation quirks. */
+  .backdrop-dot {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1.5px solid currentColor;
+    background: transparent;
+    opacity: 0.6;
+    transition: opacity var(--ui-transition-fast), background var(--ui-transition-fast);
+  }
+  .backdrop-option.checked .backdrop-dot {
+    opacity: 1;
+    background:
+      radial-gradient(circle, currentColor 0 35%, transparent 38%);
+  }
+
+  .picker-slot {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+  .picker-slot :global(.ui-token-selector) {
+    width: 100%;
+  }
+  /* Hang the token name caption under the swatch trigger so it doesn't
+     stretch the row's height. */
+  .picker-slot :global(.ui-ts-meta-text) {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 2px;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,345 @@
+<script lang="ts">
+  /**
+   * Shared inner block rendered inside a single state in VariantGroup.
+   *
+   * Both the tabs branch and the list branch of VariantGroup render the same
+   * `<TypeEditor>` (when a state has type groups) followed by `<TokenLayout>`,
+   * differing only in the surrounding chrome (preview placement, toggles,
+   * tab strip). This component owns the duplicated inner block so a per-state
+   * control change happens in exactly one place.
+   */
+  import type { Snippet } from 'svelte';
+  import TokenLayout from './TokenLayout.svelte';
+  import TypeEditor from './TypeEditor.svelte';
+  import type { Token, TypeGroupConfig } from './types';
+
+  
+  
+  
+  
+  
+  interface ElementToggle {
+    checked: boolean;
+    label?: string;
+    onchange: (checked: boolean) => void;
+  }
+
+  interface Props {
+    /** Tokens for this state, fed to `<TokenLayout>`. */
+    tokens: Token[];
+    /** Type groups for this state; rendered as a row of `<TypeEditor>` blocks. */
+    typeGroups?: TypeGroupConfig[];
+    /** Forwarded to TypeEditor and TokenLayout so writes persist through the editor store. */
+    component?: string | undefined;
+    /** Per-variable rank passed through to TokenLayout for linked-block alignment. */
+    linkedOrder?: Map<string, number> | undefined;
+    /** Render the token grid with N visual columns. >1 spreads a long property
+      list horizontally; only meaningful for state-blocks without typeGroups
+      (the two-col flex layout already partitions screen real estate when
+      typeGroups are present). */
+    columns?: number;
+    /** Per-element Show toggle. When provided for an element in element-grouped
+        mode, renders a checkbox next to that section's heading. The token rows
+        below stay visible regardless — the toggle drives preview visibility,
+        not editor visibility. */
+    elementToggles?: Record<string, ElementToggle>;
+    /** Explicit element ordering. Defaults to first-encounter across tokens
+        then typeGroups, which works when structural elements (frame, container)
+        come before named typography elements. Pass an explicit order when the
+        natural first-encounter wouldn't produce the right reading order. */
+    elementOrder?: string[];
+    /** Element-keyed snippet rendered between the section heading and the
+        section's typography/tokens. Lets callers inject per-element controls
+        (e.g. a hairline position dropdown that conceptually belongs in the
+        hairline section but isn't a CSS token). */
+    elementExtras?: Snippet<[string]>;
+    onchange?: () => void;
+  }
+
+  let {
+    tokens,
+    typeGroups = [],
+    component = undefined,
+    linkedOrder = undefined,
+    columns = 1,
+    elementToggles = {},
+    elementOrder,
+    elementExtras,
+    onchange,
+  }: Props = $props();
+
+  let hasTypeGroups = $derived(typeGroups.length > 0);
+
+  /** Element-grouped mode: when 2+ distinct element tags appear across tokens
+      and type-groups, partition the panel into labeled subsections (e.g.
+      "Frame", "Header", "Body"). Element order = first-encounter across the
+      combined tokens + type-groups list. */
+  let elementSections = $derived.by(() => {
+    const seen = new Set<string>();
+    const order: string[] = [];
+    if (elementOrder) {
+      for (const el of elementOrder) {
+        if (!seen.has(el)) { seen.add(el); order.push(el); }
+      }
+    }
+    for (const t of tokens) {
+      if (t.element && !seen.has(t.element)) {
+        seen.add(t.element);
+        order.push(t.element);
+      }
+    }
+    for (const tg of typeGroups) {
+      if (tg.element && !seen.has(tg.element)) {
+        seen.add(tg.element);
+        order.push(tg.element);
+      }
+    }
+    if (order.length < 2) return null;
+    return order.map((el) => ({
+      element: el,
+      tokens: tokens.filter((t) => t.element === el),
+      typeGroups: typeGroups.filter((tg) => tg.element === el),
+    }));
+  });
+</script>
+
+{#if elementSections}
+  <div class="state-controls element-grouped">
+    {#each elementSections as section}
+      {@const toggle = elementToggles[section.element]}
+      <section class="element-section">
+        <div class="element-heading-row">
+          <h4 class="element-heading">{section.element}</h4>
+          {#if toggle}
+            <label class="element-show-toggle">
+              <input
+                type="checkbox"
+                checked={toggle.checked}
+                onchange={(e) => toggle.onchange((e.currentTarget as HTMLInputElement).checked)}
+              />
+              <span>{toggle.label ?? `Show ${section.element}`}</span>
+            </label>
+          {/if}
+        </div>
+        {@render elementExtras?.(section.element)}
+        {#if section.typeGroups.length > 0}
+          <div class="state-type-groups">
+            {#each section.typeGroups as tg}
+              <TypeEditor
+                legend={tg.legend ?? ''}
+                colorVariable={tg.colorVariable}
+                colorLabel={tg.colorLabel ?? 'text color'}
+                familyVariable={tg.familyVariable}
+                familyLabel={tg.familyLabel ?? 'font family'}
+                sizeVariable={tg.sizeVariable}
+                sizeLabel={tg.sizeLabel ?? 'font size'}
+                weightVariable={tg.weightVariable}
+                weightLabel={tg.weightLabel ?? 'font weight'}
+                lineHeightVariable={tg.lineHeightVariable}
+                lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+                letterSpacingVariable={tg.letterSpacingVariable}
+                letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
+                outlineWidthVariable={tg.outlineWidthVariable}
+                outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
+                outlineColorVariable={tg.outlineColorVariable}
+                outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
+                {component}
+                {onchange}
+              />
+            {/each}
+          </div>
+        {/if}
+        {#if section.tokens.length > 0}
+          <TokenLayout
+            title=""
+            tokens={section.tokens}
+            {component}
+            {linkedOrder}
+            {columns}
+            {onchange}
+          />
+        {/if}
+      </section>
+    {/each}
+  </div>
+{:else}
+<div class="state-controls" class:two-col={hasTypeGroups}>
+  {#if hasTypeGroups}
+    <div class="state-type-groups">
+      {#each typeGroups as tg}
+        <TypeEditor
+          legend={tg.legend ?? 'type'}
+          colorVariable={tg.colorVariable}
+          colorLabel={tg.colorLabel ?? 'text color'}
+          familyVariable={tg.familyVariable}
+          familyLabel={tg.familyLabel ?? 'font family'}
+          sizeVariable={tg.sizeVariable}
+          sizeLabel={tg.sizeLabel ?? 'font size'}
+          weightVariable={tg.weightVariable}
+          weightLabel={tg.weightLabel ?? 'font weight'}
+          lineHeightVariable={tg.lineHeightVariable}
+          lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+          letterSpacingVariable={tg.letterSpacingVariable}
+          letterSpacingLabel={tg.letterSpacingLabel ?? 'letter spacing'}
+          outlineWidthVariable={tg.outlineWidthVariable}
+          outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
+          outlineColorVariable={tg.outlineColorVariable}
+          outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
+          {component}
+          {onchange}
+        />
+      {/each}
+    </div>
+  {/if}
+  <TokenLayout
+    title=""
+    {tokens}
+    {component}
+    {linkedOrder}
+    {columns}
+    {onchange}
+  />
+</div>
+{/if}
+
+<style>
+  .state-controls {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ui-space-12);
+    align-items: start;
+    margin-top: var(--ui-space-4);
+  }
+
+  .state-controls.two-col {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16) var(--ui-space-16);
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .state-type-groups {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
+  }
+
+  /* Inside a state's two-col layout the fieldset frame is redundant with the
+     surrounding state card. Flatten the border/padding but keep the legend so
+     each block ("title", "body text", …) is identifiable. */
+  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper) {
+    border: none;
+    padding: 0;
+  }
+
+  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper.active) {
+    outline: none;
+  }
+
+  .state-controls.two-col .state-type-groups :global(.fieldset-legend) {
+    padding: 0 var(--ui-space-4) var(--ui-space-4);
+  }
+
+  /* The general-properties column has no legend of its own; pad it down by
+     one legend-line so its first row aligns with the first row of the
+     adjacent type-group. */
+  .state-controls.two-col > :global(.token-group) {
+    padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
+  }
+
+  /* Element-grouped mode: subsections fan out across available width, each
+     labeled by the element it targets (e.g. Frame / Header / Body). Three
+     columns at typical editor widths, dropping to two then one as the panel
+     narrows — the auto-fit + minmax does the responsive work without media
+     queries. `align-items: start` keeps columns of different heights aligned
+     to their top edge instead of stretching the shorter ones.
+     Within a section the two-col split (typography fieldsets + property grid)
+     still applies when the section has both. */
+  .state-controls.element-grouped {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+    gap: var(--ui-space-20) var(--ui-space-32);
+    align-items: start;
+  }
+
+  /* Each element section stacks typography fieldset(s) above the property
+     grid in a single column, so both share the section's leftmost edge and
+     line up with neighbouring sections that have no typography (e.g. Frame). */
+  .element-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    align-items: stretch;
+  }
+
+  .element-section .state-type-groups {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
+  }
+
+  /* Type-fieldsets sit chrome-less against the element-section's own
+     boundary — the section heading already frames the block, and an extra
+     fieldset border would double-line the visual. */
+  .element-section .state-type-groups :global(.fieldset-wrapper) {
+    border: none;
+    padding: 0;
+  }
+  .element-section .state-type-groups :global(.fieldset-wrapper.active) {
+    outline: none;
+  }
+  .element-section .state-type-groups :global(.fieldset-legend) {
+    padding: 0 var(--ui-space-4) var(--ui-space-4);
+  }
+
+  /* TypeEditor's `.type-grid` and TokenLayout's `.token-grid` are independent
+     grids stacked inside the same element-section. Each sizes its label
+     column from its own `max-content`, so when one grid has long labels
+     ("letter spacing") and the other has short ones ("padding") their
+     dropdowns land at different x positions. Both grids honour
+     `--editor-label-col` for their first column track; setting it here pins
+     the label column to a shared minimum so short labels pad out and the
+     dropdowns line up across the section. The `max-content` upper bound
+     still lets exceptionally long labels grow.
+     Cascades into the inner grids; @container narrow-width overrides in
+     TokenLayout (which redefine `grid-template-columns` wholesale) still
+     win when the panel is too tight to honour the wider track. */
+  .element-section {
+    --editor-label-col: minmax(7.5rem, max-content);
+  }
+
+  .element-heading-row {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-12);
+    padding-bottom: var(--ui-space-4);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+
+  .element-heading {
+    margin: 0;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-medium);
+    color: var(--ui-text-tertiary);
+  }
+
+  /* Show toggle next to the section heading — drives preview visibility for
+     the element. Property rows below stay visible so users can still tune the
+     hidden element's tokens. */
+  .element-show-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+    cursor: pointer;
+    user-select: none;
+  }
+  .element-show-toggle:hover { color: var(--ui-text-primary); }
+  .element-show-toggle input { margin: 0; cursor: pointer; }
+</style>

package/src/{component-editor → editor/component-editor}/scaffolding/TokenLayout.svelte

@@ -13,7 +13,7 @@
     getComponentPropertySiblings,
     setComponentAliasLinked,
     clearComponentAliasLinked,
-  } from '../../lib/editorStore';
+  } from '../../core/store/editorStore';
   import { getEditorContext } from './editorContext';
   import type { Token } from './types';
 
@@ -92,7 +92,7 @@
     { kind: 'shadow', matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
     { kind: 'padding', matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
     { kind: 'gap', matches: (v) => v.endsWith('-gap') },
-    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.startsWith('--border-width-') },
+    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.endsWith('-hairline-thickness') || v.startsWith('--border-width-') },
     { kind: 'border', matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
     { kind: 'surface', matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
   ];
@@ -139,9 +139,11 @@
     return sides.some((s) => !!document.documentElement.style.getPropertyValue(`${varName}-${s}`).trim());
   }
 
-  function categorize(v: string, comp: string | undefined, state: typeof $editorState): Kind {
-    const k = rawKind(v);
-    if (k === 'padding' && paddingIsSplit(v, comp, state)) return 'padding-split';
+  function categorize(token: Token, comp: string | undefined, state: typeof $editorState): Kind {
+    const k = rawKind(token.variable);
+    if (k === 'padding' && token.splittable !== false && paddingIsSplit(token.variable, comp, state)) {
+      return 'padding-split';
+    }
     return k;
   }
 
@@ -170,7 +172,7 @@
     'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
     'radius': { component: UIVariantSelector, extra: () => ({ ...RADIUS }) },
-    'padding': { component: UIPaddingSelector, extra: () => ({ mode: 'single' }) },
+    'padding': { component: UIPaddingSelector, extra: (t) => ({ mode: 'single', splittable: t.splittable !== false }) },
     /* padding-split is NOT standalone: TokenLayout renders the .token-label
        (e.g. "padding") in col 1 and the wrapper provides the [label][trigger][value]
        subgrid. UIPaddingSelector's sides template fills cols 2-3 of row 1 with
@@ -217,7 +219,7 @@
   })();
 
   function buildEntries(list: Token[], order: Map<string, number> | undefined, linked: Set<Kind>, comp: string | undefined, state: typeof $editorState, multiCol: boolean): Entry[] {
-    const indexed = list.map((token, i) => ({ e: { kind: categorize(token.variable, comp, state), token }, i }));
+    const indexed = list.map((token, i) => ({ e: { kind: categorize(token, comp, state), token }, i }));
     const rank = multiCol ? multiColRank : orderRank;
     indexed.sort((a, b) => {
       if (!multiCol) {
@@ -385,7 +387,10 @@
     --token-selector-w: 8rem;
     --columns: 1;
     display: grid;
-    grid-template-columns: repeat(var(--columns), max-content var(--token-selector-w) 1fr);
+    /* Label column tracks `--editor-label-col` when an ancestor sets one
+       (e.g. StateBlock's `.element-section`), so this grid lines up with a
+       sibling `.type-grid` whose `max-content` would otherwise differ. */
+    grid-template-columns: repeat(var(--columns), var(--editor-label-col, max-content) var(--token-selector-w) 1fr);
     column-gap: var(--ui-space-10);
     row-gap: var(--ui-space-6);
     align-items: center;
@@ -412,13 +417,13 @@
     padding-left: var(--ui-space-20);
   }
 
-  @container (max-width: 480px) {
+  @container variant-group (max-width: 480px) {
     .token-grid { --token-selector-w: 6rem; }
   }
 
   /* Narrow multi-col: shrink selector + inter-set gap further before giving
      up the second column. Targets the overlay's typical docked width range. */
-  @container (max-width: 640px) {
+  @container variant-group (max-width: 640px) {
     .token-grid.multi-col {
       --token-selector-w: 6rem;
       column-gap: var(--ui-space-6);
@@ -434,7 +439,7 @@
      `1fr` so the lone column fills the panel like single-col mode, and the
      inter-set padding is suppressed so wrapped "set 2" rows don't sit
      indented. */
-  @container (max-width: 520px) {
+  @container variant-group (max-width: 520px) {
     .token-grid.multi-col {
       --columns: 1;
       grid-template-columns: max-content var(--token-selector-w) 1fr;
@@ -447,7 +452,7 @@
     }
   }
 
-  @container (max-width: 380px) {
+  @container variant-group (max-width: 380px) {
     .token-grid {
       grid-template-columns: max-content 1fr;
       column-gap: var(--ui-space-6);