@noxlovette/material 0.5.1 → 0.6.1

package/dist/components/containers/list/theme.js

@@ -1,27 +1,154 @@
-import { tv } from 'tailwind-variants';
-export const listiem = tv({
+import { tv } from '../../../utils/tv.js';
+/*
+  M3 Expressive lists (https://m3.material.io/components/lists/specs).
+
+  Item shape: every item reads its corners from `--li-top`/`--li-bottom`, falling back to its own
+  state shape `--li-shape` (4dp at rest, 12dp hovered, 16dp focused/pressed/selected). A segmented
+  `List` sets `--li-top`/`--li-bottom` to 16dp on its first/last child, so the list's outer
+  corners stay 16dp while the inner ones morph. Custom properties inherit, so this reaches an item
+  through its `<li>`; each `<ul>` resets both so nested lists start clean.
+*/
+export const list = tv({
+    base: 'flex w-full flex-col [--li-bottom:initial] [--li-top:initial]',
+    variants: {
+        variant: {
+            standard: '',
+            // 2dp between segments; outer corners 16dp (md.comp.list.container.shape).
+            segmented: 'gap-spacing-25 [&>:first-child]:[--li-top:1rem] [&>:last-child]:[--li-bottom:1rem]'
+        }
+    },
+    defaultVariants: { variant: 'standard' }
+});
+export const listItem = tv({
     slots: {
-        base: 'bg-md-sys-color-surface text-md-sys-color-on-surface-variant state-layer disabled:before:bg-md-sys-color-on-surface/10 md-sys-state-focus-indicator px-4 py-2 gap-4 items-center relative flex rounded-lg before:rounded-lg w-full',
-        leading: 'inline-flex items-start',
-        body: 'min-w-0',
-        overline: 'md-sys-typescale-label-small line-clamp-1',
-        headline: 'text-md-sys-color-on-surface md-sys-typescale-body-large line-clamp-1',
-        supporting: 'md-sys-typescale-body-medium line-clamp-2',
-        trailing: 'inline-flex ml-auto'
+        base: [
+            'relative flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
+            '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
+            'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
+            'text-md-sys-color-on-surface-variant'
+        ],
+        leading: 'flex shrink-0 items-center text-md-sys-color-on-surface-variant',
+        body: 'flex min-w-spacing-0 flex-1 flex-col justify-center',
+        overline: 'md-sys-typescale-label-small line-clamp-1 text-md-sys-color-on-surface-variant',
+        headline: 'md-sys-typescale-body-large line-clamp-1 text-md-sys-color-on-surface',
+        supporting: 'md-sys-typescale-body-medium line-clamp-2 text-md-sys-color-on-surface-variant',
+        trailing: 'relative flex shrink-0 items-center gap-spacing-150 overflow-visible text-md-sys-color-on-surface-variant',
+        trailingText: 'md-sys-typescale-label-small text-md-sys-color-on-surface-variant',
+        expandIcon: 'grid size-spacing-400 place-items-center rounded-full text-md-sys-color-on-surface transition-[background-color,rotate] md-sys-motion-fast-spatial',
+        group: 'flex flex-col',
+        region: 'grid transition-[grid-template-rows] md-sys-motion-spatial',
+        regionInner: 'min-h-spacing-0 overflow-hidden',
+        nested: 'flex flex-col [--li-top:initial] [--li-bottom:initial]'
     },
     variants: {
+        // md.comp.list.list-item.{one,two,three}-line.container.height: minimums, so larger text grows
+        // the item instead of clipping. From 88dp up, leading/text/trailing align to the top.
         lines: {
-            1: 'h-14',
-            2: 'h-18',
-            3: 'h-22'
+            1: { base: 'min-h-spacing-700 items-center' },
+            2: { base: 'min-h-spacing-900 items-center' },
+            3: { base: 'min-h-22 items-start', leading: 'items-start', trailing: 'items-start' }
+        },
+        variant: {
+            standard: { base: 'bg-md-sys-color-surface', nested: '' },
+            /* The segmented token resolves to `surface`, but the spec's own figures draw segments one
+               tone up so they read against the page; surface-container matches the figures. */
+            segmented: {
+                base: 'bg-md-sys-color-surface-container',
+                nested: 'gap-spacing-25 pt-spacing-25'
+            }
+        },
+        interactive: {
+            true: {
+                base: [
+                    'cursor-pointer outline-none',
+                    'hover:[--li-shape:0.75rem]',
+                    'focus-visible:[--li-shape:1rem]',
+                    'focus-visible:outline-3 focus-visible:-outline-offset-3 focus-visible:outline-md-sys-color-secondary',
+                    'active:[--li-shape:1rem]'
+                ]
+            },
+            false: ''
         },
         selected: {
             true: {
-                base: 'text-md-sys-color-on-secondary-container bg-md-sys-color-secondary-container',
+                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
+                leading: 'text-md-sys-color-on-secondary-container',
+                overline: 'text-md-sys-color-on-secondary-container',
                 headline: 'text-md-sys-color-on-secondary-container',
-                trailing: 'text-md-sys-color-primary'
+                supporting: 'text-md-sys-color-on-secondary-container',
+                trailing: 'text-md-sys-color-on-secondary-container',
+                trailingText: 'text-md-sys-color-on-secondary-container'
+            },
+            false: ''
+        },
+        disabled: {
+            true: {
+                base: 'pointer-events-none cursor-default',
+                leading: 'text-md-sys-color-on-surface opacity-38',
+                overline: 'text-md-sys-color-on-surface/38',
+                headline: 'text-md-sys-color-on-surface/38',
+                supporting: 'text-md-sys-color-on-surface/38',
+                trailing: 'text-md-sys-color-on-surface opacity-38',
+                trailingText: 'text-md-sys-color-on-surface/38'
             },
             false: ''
+        },
+        expanded: {
+            true: {
+                // The expanded group is one 16dp container: header on top, nested items below.
+                base: '[--li-top:1rem] [--li-bottom:var(--li-shape)]',
+                expandIcon: 'rotate-180 bg-md-sys-color-surface-container',
+                region: 'grid-rows-[1fr]',
+                nested: '[&>:last-child]:[--li-bottom:1rem]'
+            },
+            false: {
+                expandIcon: 'bg-md-sys-color-surface',
+                region: 'grid-rows-[0fr]'
+            }
         }
+    },
+    compoundVariants: [
+        {
+            selected: true,
+            disabled: true,
+            class: { base: 'bg-md-sys-color-on-surface/12 text-md-sys-color-on-surface/38' }
+        }
+    ],
+    defaultVariants: {
+        lines: 1,
+        variant: 'standard',
+        interactive: false,
+        selected: false,
+        disabled: false
     }
 });
+/** @deprecated Misspelled; use `listItem`. */
+export const listiem = listItem;
+/**
+ * Sizes and shapes for a list item's leading media, per the M3 list spec. Apply it to whatever you
+ * render in `leading`, so the item keeps spec padding and alignment:
+ *
+ * ```svelte
+ * {#snippet leading()}
+ *   <img src={cover} alt="" class={listMedia({ kind: 'image' })} />
+ * {/snippet}
+ * ```
+ *
+ * - `icon`: 20dp. Prefer `<Icon size="sm">`, which is already 20dp.
+ * - `avatar`: 40dp circle, e.g. `<Avatar class={listMedia({ kind: 'avatar' })} />`.
+ * - `image`: 56dp square, 8dp corners.
+ * - `video`: 100×56dp, 8dp corners. `videoLarge`: 114×64dp.
+ */
+export const listMedia = tv({
+    base: 'shrink-0',
+    variants: {
+        kind: {
+            icon: 'size-spacing-250',
+            avatar: 'size-spacing-500 rounded-full',
+            image: 'size-spacing-700 rounded-lg object-cover',
+            video: 'h-spacing-700 w-25 rounded-lg object-cover',
+            videoLarge: 'h-spacing-800 w-28.5 rounded-lg object-cover'
+        }
+    },
+    defaultVariants: { kind: 'icon' }
+});

package/dist/components/containers/list/types.d.ts

@@ -1,24 +1,47 @@
 import type { ButtonAttrs, DivAttrs, NotButton } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAnchorAttributes, HTMLLabelAttributes } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLabelAttributes } from 'svelte/elements';
 export type ActionProps = DivAttrs | ButtonAttrs | ({
     label: true;
 } & NotButton<HTMLLabelAttributes>) | ({
     href: string | null;
 } & NotButton<HTMLAnchorAttributes>);
+/** Props for the `List` container. */
+export type ListProps = HTMLAttributes<HTMLUListElement> & {
+    /**
+     * `standard`: items sit on the page. `segmented`: each item is its own segment, 2dp apart, with
+     * 16dp outer corners. A visual choice only; it doesn't change behavior.
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'segmented';
+    children?: Snippet;
+};
 /**
  * Props for the ListItem component.
  * Lists are continuous, vertical indexes of text or images.
  */
 export type ListitemProps = {
     /**
-     * Optional leading slot, typically used for an icon, avatar, or checkbox.
+     * The leading slot: must be narrower than the text and hold one element. Allowed content, per
+     * the M3 list spec (size it with `listMedia`):
+     * - **Icon**: 20dp (`<Icon size="sm">`).
+     * - **Avatar**: 40dp circle (`listMedia({ kind: 'avatar' })`).
+     * - **Image**: 56×56dp, 8dp corners (`listMedia({ kind: 'image' })`).
+     * - **Video thumbnail**: 100×56dp or 114×64dp, 8dp corners (`kind: 'video' | 'videoLarge'`).
+     * - **Selection control**: a checkbox, radio button or switch. Use `label` so the whole item
+     *   toggles it, and don't add a second selection control in `trailing`.
+     *
+     * Decorative media gets `alt=""`; the headline is the item's accessible name.
      */
     leading?: Snippet;
     /**
-     * Whether the list item is in a selected state.
+     * Whether the item is selected: secondary-container fill and a 16dp shape. Exposed to
+     * assistive tech as `aria-selected` (with `role="option"`), `aria-current="page"` (links) or
+     * `aria-pressed` (buttons).
      */
     selected?: boolean;
+    /** Disables the item: 38% content, no interaction. */
+    disabled?: boolean;
     /**
      * Optional overline text displayed above the headline.
      */
@@ -32,9 +55,12 @@ export type ListitemProps = {
      */
     supporting?: string | null;
     /**
-     * Optional trailing slot, typically used for an icon, metadata, or switch.
+     * The trailing slot: an icon (20dp, `<Icon size="sm">`), an icon button, or a selection control
+     * (checkbox, radio, switch). Interactive content keeps a 48dp target.
      */
     trailing?: Snippet;
+    /** Short trailing text, e.g. a count, time or shortcut ("100+", "⌘C"). */
+    trailingText?: string;
     /**
      * Badge to display in the trailing area.
      * - `true`: renders a small dot badge (notification indicator).
@@ -42,10 +68,18 @@ export type ListitemProps = {
      */
     badge?: number | boolean;
     /**
-     * The number of text lines to reserve space for.
+     * The number of text lines to reserve space for (56, 72 or 88dp minimum height). At 3 lines,
+     * content aligns to the top.
      * If not provided, it's calculated based on presence of overline and supporting text.
      */
     lines?: 1 | 2 | 3;
+    /**
+     * Nested items. Giving `children` makes this an expandable item: the item becomes a button
+     * that toggles them, with a trailing expand indicator.
+     */
+    children?: Snippet;
+    /** Whether the nested `children` are shown. Bindable. */
+    expanded?: boolean;
     /**
      * If true, the component will not wrap its content in an `<li>` element.
      * Useful for when the parent already provides the list item container.

package/dist/components/containers/menu/Menu.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as MenuStories from './Menu.stories.svelte';
+
+<Meta of={MenuStories} />
+
+<Title />
+
+<Subtitle>Menus show a list of choices on a temporary surface.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/menus/specs) ·
+`import { Menu, MenuItem } from '@noxlovette/material';`
+
+<Canvas of={MenuStories.Playground} />
+
+<Controls of={MenuStories.Playground} />
+
+## Composition
+
+`Menu` handles only the open state and where the panel floats. Its children are the rows:
+
+- `MenuItem`: a single action, with optional icon, supporting text and `selected` check.
+- `MenuGroup`: a labelled set of items.
+- `MenuCheckboxItem`, `MenuRadioGroup`/`MenuRadioItem`: checkable items.
+- `MenuSub`: a nested submenu.
+- `Divider`: a separator.
+
+```svelte
+<Menu label="Options" align="end">
+  <MenuItem iconProps={{ name: 'edit' }} onclick={edit}>Edit</MenuItem>
+  <MenuItem iconProps={{ name: 'delete' }} onclick={remove}>Delete</MenuItem>
+</Menu>
+```
+
+<Canvas of={MenuStories.WithGroups} />
+
+<Canvas of={MenuStories.WithSubmenu} />
+
+## Trigger
+
+Without a `trigger` snippet, `Menu` renders a filled `Button` labelled `label`. Pass `trigger` to
+use your own element, such as an icon button, and spread the props it receives onto it.
+
+<Canvas of={MenuStories.WithCustomTrigger} />
+
+For a right-click menu, use `ContextMenu`.
+
+## Accessibility
+
+- **Keyboard.** Arrow keys move through items, Enter and Space activate, and Escape closes and
+  returns focus to the trigger.
+- **Selection** shows a check icon as well as a color, so it doesn't rely on color alone.
+- **Disabled items** are skipped by keyboard navigation.

package/dist/components/containers/menu/Menu.stories.svelte

@@ -40,7 +40,7 @@
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="p-6">
+    <div class="p-spacing-300">
       <Menu label={args.label} align={args.align}>
         <MenuItem iconProps={{ name: 'content_cut' }}>Cut</MenuItem>
         <MenuItem iconProps={{ name: 'content_copy' }}>Copy</MenuItem>
@@ -51,21 +51,21 @@
 </Story>
 
 <Story name="With Custom Trigger" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu align="end">
       {#snippet trigger(triggerProps)}
-        <ButtonIcon iconProps={{ name: 'more_vert' }} variant="text" {...triggerProps} />
+        <ButtonIcon iconProps={{ name: 'more_vert' }} variant="standard" {...triggerProps} />
       {/snippet}
       <MenuItem iconProps={{ name: 'edit' }}>Edit</MenuItem>
       <MenuItem iconProps={{ name: 'archive' }} helper="Move to archive folder">Archive</MenuItem>
-      <Divider class="my-2" />
+      <Divider class="my-spacing-100" />
       <MenuItem iconProps={{ name: 'delete' }} disabled>Delete</MenuItem>
     </Menu>
   </div>
 </Story>
 
 <Story name="With Selected Item" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="Sort by">
       <MenuItem selected>Name</MenuItem>
       <MenuItem>Date modified</MenuItem>
@@ -75,13 +75,13 @@
 </Story>
 
 <Story name="With Groups" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="Sort by">
       <MenuGroup heading="Name">
         <MenuItem>A to Z</MenuItem>
         <MenuItem>Z to A</MenuItem>
       </MenuGroup>
-      <Divider class="my-1" />
+      <Divider class="my-spacing-50" />
       <MenuGroup heading="Date">
         <MenuItem>Newest first</MenuItem>
         <MenuItem>Oldest first</MenuItem>
@@ -91,7 +91,7 @@
 </Story>
 
 <Story name="With Checkboxes" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="View">
       <MenuCheckboxItem bind:checked={showHidden}>Show hidden files</MenuCheckboxItem>
       <MenuCheckboxItem bind:checked={showExtensions}>Show file extensions</MenuCheckboxItem>
@@ -101,7 +101,7 @@
 </Story>
 
 <Story name="With Radio Group" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="Sort by">
       <MenuRadioGroup bind:value={sortBy}>
         <MenuRadioItem value="name">Name</MenuRadioItem>
@@ -113,7 +113,7 @@
 </Story>
 
 <Story name="With Submenu" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="File">
       <MenuItem iconProps={{ name: 'draft' }}>New</MenuItem>
       <MenuItem iconProps={{ name: 'folder' }}>Open</MenuItem>
@@ -131,14 +131,14 @@
           </MenuSub>
         {/snippet}
       </MenuSub>
-      <Divider class="my-1" />
+      <Divider class="my-spacing-50" />
       <MenuItem iconProps={{ name: 'delete' }}>Delete</MenuItem>
     </Menu>
   </div>
 </Story>
 
 <Story name="Kitchen Sink" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <Menu label="Document">
       <MenuGroup heading="Sort by">
         <MenuRadioGroup bind:value={kitchenSinkSort}>
@@ -146,11 +146,11 @@
           <MenuRadioItem value="date">Date modified</MenuRadioItem>
         </MenuRadioGroup>
       </MenuGroup>
-      <Divider class="my-1" />
+      <Divider class="my-spacing-50" />
       <MenuGroup heading="View">
         <MenuCheckboxItem bind:checked={kitchenSinkWordWrap}>Word wrap</MenuCheckboxItem>
       </MenuGroup>
-      <Divider class="my-1" />
+      <Divider class="my-spacing-50" />
       <MenuSub iconProps={{ name: 'ios_share' }}>
         Share
         {#snippet submenu()}

package/dist/components/containers/menu/Menu.svelte

@@ -44,13 +44,13 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
   </DropdownMenu.Trigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.Content {align} sideOffset={4} class="z-100">
+    <DropdownMenu.Content {align} sideOffset={4} class="z-layer-popup">
       {#snippet child({ wrapperProps, props, open: isOpen })}
         <div {...wrapperProps} class={wrapperProps.class as any}>
           <div
             {...props}
             class={clsx(
-              'bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1 overflow-y-auto rounded-lg px-2 py-1',
+              'bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 gap-spacing-50 px-spacing-100 py-spacing-50 max-w-sm min-w-48 overflow-y-auto rounded-lg',
               props.class as any,
               contentClass
             )}

package/dist/components/containers/menu/MenuGroup.svelte

@@ -13,7 +13,7 @@ set. Purely organizational — it renders no interactive behavior of its own.
     <MenuItem>A to Z</MenuItem>
     <MenuItem>Z to A</MenuItem>
   </MenuGroup>
-  <Divider class="my-1" />
+  <Divider class="my-spacing-50" />
   <MenuGroup heading="Date">
     <MenuItem>Newest first</MenuItem>
     <MenuItem>Oldest first</MenuItem>

package/dist/components/containers/menu/MenuGroup.svelte.d.ts

@@ -13,7 +13,7 @@ import type { MenuGroupProps } from './types.js';
  *   <MenuItem>A to Z</MenuItem>
  *   <MenuItem>Z to A</MenuItem>
  * </MenuGroup>
- * <Divider class="my-1" />
+ * <Divider class="my-spacing-50" />
  * <MenuGroup heading="Date">
  *   <MenuItem>Newest first</MenuItem>
  *   <MenuItem>Oldest first</MenuItem>

package/dist/components/containers/menu/MenuSub.svelte

@@ -67,7 +67,7 @@ trigger row (`iconProps`/`helper`/`children` label) behaves like a
   </DropdownMenu.SubTrigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.SubContent sideOffset={4} class="z-100">
+    <DropdownMenu.SubContent sideOffset={4} class="z-layer-popup">
       {#snippet child({ wrapperProps, props, open: isOpen })}
         <div {...wrapperProps} class={wrapperProps.class as any}>
           <div

package/dist/components/containers/menu/menu-item/MenuItem.svelte

@@ -66,6 +66,6 @@ and `ContextMenu`, which owns its own item list and is right-click triggered.
 {:else}
   <!-- Render as a gap -->
   <DropdownMenu.Item>
-    <hr class="h-1" />
+    <hr class="h-spacing-50" />
   </DropdownMenu.Item>
 {/if}

package/dist/components/containers/menu/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 /**
  * Shared styling for every row-shaped element inside a `Menu`'s floating
  * panel: `MenuItem`, `MenuCheckboxItem`, `MenuRadioItem`, and `MenuSub`'s

package/dist/components/containers/menu/theme.js

@@ -1,25 +1,25 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const menu = tv({
     slots: {
         content: `
       bg-md-sys-color-surface-container-high shadow-elevation-3
-      ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1
-      overflow-y-auto rounded-lg px-2 py-1
+      ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-spacing-50
+      overflow-y-auto rounded-lg px-spacing-100 py-spacing-50
     `,
         item: `
-      rounded-sm h-11 relative flex w-full cursor-pointer items-center gap-2 px-3 py-2
+      rounded-sm h-11 relative flex w-full cursor-pointer items-center gap-spacing-100 px-spacing-150 py-spacing-100
       md-sys-typescale-body-medium whitespace-nowrap text-md-sys-color-on-surface
       hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
       focus-visible:outline-2 focus-visible:outline-offset-2
       focus-visible:outline-md-sys-color-primary
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
-        icon: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
-        indicator: 'size-5 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
-        itemContent: 'flex flex-1 flex-col gap-1 text-left min-w-0',
+        icon: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
+        indicator: 'size-spacing-250 text-[20px] shrink-0 text-md-sys-color-on-surface-variant',
+        itemContent: 'flex flex-1 flex-col gap-spacing-50 text-left min-w-spacing-0',
         helper: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
-        rightSlot: 'text-md-sys-color-on-surface-variant size-5 text-[20px] shrink-0',
-        groupHeading: 'px-3 pt-2 pb-1 md-sys-typescale-label-medium text-md-sys-color-primary'
+        rightSlot: 'text-md-sys-color-on-surface-variant size-spacing-250 text-[20px] shrink-0',
+        groupHeading: 'px-spacing-150 pt-spacing-100 pb-spacing-50 md-sys-typescale-label-medium text-md-sys-color-primary'
     },
     variants: {
         selected: {

package/dist/components/containers/pane/DraggablePane.stories.svelte

@@ -4,6 +4,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/DraggablePane',
+    tags: ['autodocs'],
     component: DraggablePane,
     argTypes: {
       title: { control: 'text' },
@@ -92,7 +93,7 @@
   <DraggablePane initialX={32} initialY={32}>
     {#snippet header()}
       <span
-        class="md-sys-typescale-label-large text-md-sys-color-on-surface flex-1 truncate px-1 py-1"
+        class="md-sys-typescale-label-large text-md-sys-color-on-surface px-spacing-50 py-spacing-50 flex-1 truncate"
       >
         ⠿ Custom drag handle
       </span>
@@ -157,7 +158,7 @@
 <Story name="Content Overflow (Unbounded)" asChild>
   <DraggablePane title="Long Form">
     <div
-      class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant flex w-56 flex-col gap-3"
+      class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant gap-spacing-150 flex w-56 flex-col"
     >
       {#each Array(30) as _, i (i)}
         <p>
@@ -171,7 +172,7 @@
 <!--
   A fixed `height` turns the content area into an internal scroll region
   instead of letting the panel grow past its bound — the `content` slot needs
-  `min-h-0` alongside `flex-1 overflow-auto`, otherwise a flex child's default
+  `min-h-spacing-0` alongside `flex-1 overflow-auto`, otherwise a flex child's default
   `min-height: auto` lets it grow past its flex-basis and overflow the fixed-
   height panel instead of scrolling internally.
 -->

package/dist/components/containers/pane/DraggablePane.svelte

@@ -560,7 +560,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
           >
             {#if collapsible}
               <ButtonIcon
-                variant="text"
+                variant="standard"
                 size="sm"
                 iconProps={{ name: 'collapse_all' }}
                 aria-label="Minimize"
@@ -569,7 +569,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
             {/if}
             {#if onClose}
               <ButtonIcon
-                variant="text"
+                variant="standard"
                 size="sm"
                 iconProps={{ name: 'close' }}
                 aria-label="Close"

package/dist/components/containers/pane/Pane.stories.svelte

@@ -5,6 +5,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/Pane',
+    tags: ['autodocs'],
     component: Pane,
     argTypes: {
       padding: {
@@ -39,24 +40,24 @@
       full={args.full}
       rounded={args.rounded}
     >
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block one</div>
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block two</div>
-      <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">Block three</div>
+      <div class="bg-md-sys-color-surface-container-high p-spacing-300 rounded-lg">Block one</div>
+      <div class="bg-md-sys-color-surface-container-high p-spacing-300 rounded-lg">Block two</div>
+      <div class="bg-md-sys-color-surface-container-high p-spacing-300 rounded-lg">Block three</div>
     </Pane>
   {/snippet}
 </Story>
 
 <!-- Pane has no built-in centered-width variant — center content by passing `contentClass`. -->
 <Story name="Centered Widths" asChild>
-  <div class="flex flex-col gap-6">
+  <div class="gap-spacing-300 flex flex-col">
     <Pane contentClass="max-w-2xl mx-auto" background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">narrow</div>
+      <div class="bg-md-sys-color-secondary-container p-spacing-200 rounded-lg text-sm">narrow</div>
     </Pane>
     <Pane contentClass="max-w-5xl mx-auto" background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">medium</div>
+      <div class="bg-md-sys-color-secondary-container p-spacing-200 rounded-lg text-sm">medium</div>
     </Pane>
     <Pane background={false}>
-      <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">
+      <div class="bg-md-sys-color-secondary-container p-spacing-200 rounded-lg text-sm">
         none (full width)
       </div>
     </Pane>
@@ -77,7 +78,7 @@
 <Story name="With AppBar" asChild parameters={{ viewport: { defaultViewport: 'mobile1' } }}>
   <AppBar title="Inbox" ghost />
   <Pane>
-    <div class="bg-md-sys-color-secondary-container rounded-lg p-4 text-sm">
+    <div class="bg-md-sys-color-secondary-container p-spacing-200 rounded-lg text-sm">
       This pane's min-height is <code>100dvh</code> minus the AppBar's measured height above —
       automatic, via <code>appbarStore.svelte.ts</code>.
     </div>
@@ -90,12 +91,12 @@
   >
     <div class="flex h-full">
       <Pane width={200} background={false} padding="sm">
-        <div class="bg-md-sys-color-secondary-container h-full rounded-lg p-4 text-sm">
+        <div class="bg-md-sys-color-secondary-container p-spacing-200 h-full rounded-lg text-sm">
           width=200 (fixed)
         </div>
       </Pane>
       <Pane background={false} padding="sm">
-        <div class="bg-md-sys-color-surface-container-high h-full rounded-lg p-4 text-sm">
+        <div class="bg-md-sys-color-surface-container-high p-spacing-200 h-full rounded-lg text-sm">
           width unset (flexible, grows)
         </div>
       </Pane>