@noxlovette/material 0.5.1 → 0.6.0

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

@@ -6,6 +6,7 @@
 
   const { Story } = defineMeta({
     title: 'Containers/Pane Grid',
+    tags: ['autodocs'],
     component: PaneGrid
   });
 </script>
@@ -20,7 +21,7 @@
   <div
     class="border-md-sys-color-outline-variant relative h-[420px] overflow-hidden rounded-lg border"
   >
-    <PaneGrid gap="none" class="h-full">
+    <PaneGrid direction="row" gap="none" class="h-full">
       <Pane
         width={320}
         resizable
@@ -29,8 +30,8 @@
         background={false}
         full={false}
       >
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Left pane</p>
+        <div class="p-spacing-200">
+          <p class="md-sys-typescale-title-small mb-spacing-100">Left pane</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">
             Drag the handle to resize — persisted to localStorage, and snaps near 360/412px.
           </p>
@@ -38,8 +39,8 @@
       </Pane>
       <PaneHandle persistKey="storybook:pane-grid-split" min={240} max={560} />
       <Pane rounded={false} full={false}>
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Right pane</p>
+        <div class="p-spacing-200">
+          <p class="md-sys-typescale-title-small mb-spacing-100">Right pane</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">Main content area.</p>
         </div>
       </Pane>
@@ -56,19 +57,19 @@
 -->
 <Story name="Sticky Sidebar" asChild>
   <div class="border-md-sys-color-outline-variant h-[420px] overflow-y-auto rounded-lg border">
-    <PaneGrid rounded>
+    <PaneGrid direction="row" rounded>
       <Pane width={240} sticky rounded={false}>
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Sticky nav</p>
+        <div class="p-spacing-200">
+          <p class="md-sys-typescale-title-small mb-spacing-100">Sticky nav</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">
             Stays pinned to the top of the scroll container while the right pane scrolls past it.
           </p>
         </div>
       </Pane>
       <Pane rounded={false}>
-        <div class="flex flex-col gap-4 p-4">
+        <div class="gap-spacing-200 p-spacing-200 flex flex-col">
           {#each Array(12) as _, i}
-            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+            <div class="bg-md-sys-color-surface-container-high p-spacing-300 rounded-lg">
               Scrollable content block {i + 1}
             </div>
           {/each}
@@ -87,17 +88,17 @@
   <div class="border-md-sys-color-outline-variant h-[420px] overflow-y-auto rounded-lg border">
     <PaneGrid direction={{ small: 'column', large: 'row' }} gap="lg" padding="md">
       <Pane background={false} padding="none">
-        <div class="flex flex-col gap-4">
+        <div class="gap-spacing-200 flex flex-col">
           {#each Array(6) as _, i}
-            <div class="bg-md-sys-color-surface-container-high rounded-lg p-6">
+            <div class="bg-md-sys-color-surface-container-high p-spacing-300 rounded-lg">
               Main content block {i + 1}
             </div>
           {/each}
         </div>
       </Pane>
       <Pane width={280} sticky background={false} padding="none">
-        <div class="bg-md-sys-color-surface-container rounded-lg p-4">
-          <p class="md-sys-typescale-title-small mb-2">Supporting content</p>
+        <div class="bg-md-sys-color-surface-container p-spacing-200 rounded-lg">
+          <p class="md-sys-typescale-title-small mb-spacing-100">Supporting content</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">
             Fixed-width panel — e.g. a table of contents or contextual actions.
           </p>
@@ -118,14 +119,14 @@
   >
     <PaneGrid full>
       <Pane width={320} rounded={false} background={false}>
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">List</p>
+        <div class="p-spacing-200">
+          <p class="md-sys-typescale-title-small mb-spacing-100">List</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">Always visible.</p>
         </div>
       </Pane>
       <Pane visibleFrom="medium" rounded={false}>
-        <div class="p-4">
-          <p class="md-sys-typescale-title-small mb-2">Detail</p>
+        <div class="p-spacing-200">
+          <p class="md-sys-typescale-title-small mb-spacing-100">Detail</p>
           <p class="text-md-sys-color-on-surface-variant text-sm">Visible from `medium` up only.</p>
         </div>
       </Pane>

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

@@ -2,7 +2,8 @@
 @component
 Arranges Pane children relative to one another: direction, gap, and outer
 margin/padding, each independently responsive across viewport tiers
-(small/medium/large/extraLarge). PaneGrid owns layout only — sizing, stickiness,
+(small/medium/large/extraLarge). `direction` defaults to M3's canonical layouts: panes stack
+below `large` and sit side by side from `large` (expanded) up. PaneGrid owns layout only — sizing, stickiness,
 resizing, and breakpoint visibility are declared per-Pane.
 
 With `full`, min-height is `100dvh` minus `--appbar-height` — see Pane.svelte's
@@ -15,7 +16,7 @@ doc comment for how that CSS custom property gets set.
 
   const {
     children,
-    direction = 'row',
+    direction = { small: 'column', large: 'row' },
     gap = 'md',
     padding = 'none',
     margin = 'none',

package/dist/components/containers/pane/PaneGrid.svelte.d.ts

@@ -2,7 +2,8 @@ import type { PaneGridProps } from './types.js';
 /**
  * Arranges Pane children relative to one another: direction, gap, and outer
  * margin/padding, each independently responsive across viewport tiers
- * (small/medium/large/extraLarge). PaneGrid owns layout only — sizing, stickiness,
+ * (small/medium/large/extraLarge). `direction` defaults to M3's canonical layouts: panes stack
+ * below `large` and sit side by side from `large` (expanded) up. PaneGrid owns layout only — sizing, stickiness,
  * resizing, and breakpoint visibility are declared per-Pane.
  *
  * With `full`, min-height is `100dvh` minus `--appbar-height` — see Pane.svelte's

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

@@ -6,10 +6,16 @@ resizes and its neighbor. Unlike a handle absolutely-positioned inside a Pane
 sits in the grid's flex flow — a real sibling with room to breathe in the
 gutter. Dragging it writes to the shared resize store; any `Pane` with a
 matching `persistKey` picks the new width up reactively.
+
+Motion matches Slider: the pane tracks the pointer 1:1 while dragged, and springs on the fast
+spatial spring into and out of snap points and on keyboard steps (arrows ±16px, Shift ±64px,
+Home/End to `min`/`max`).
 -->
 <script lang="ts">
   import clsx from 'clsx';
   import { onMount } from 'svelte';
+  import { springTokens } from '../../../animation/spring.js';
+  import { SpringValue } from '../../../animation/springValue.svelte.js';
   import { paneHandle } from './theme.js';
   import { paneWidths } from './resizeStore.svelte.js';
   import type { PaneHandleProps } from './types.js';
@@ -29,6 +35,16 @@ matching `persistKey` picks the new width up reactively.
 
   const { base, grip } = $derived(paneHandle({ dragging, snapped }));
 
+  /* Grip size in px, sprung: 4×32 at rest, 2×32 while dragged, 6×40 on a snap point. */
+  const gripWidth = new SpringValue(
+    () => (snapped ? 6 : dragging ? 2 : 4),
+    springTokens.fastSpatial
+  );
+  const gripHeight = new SpringValue(() => (snapped ? 40 : 32), springTokens.fastSpatial);
+
+  const KEY_STEP = 16;
+  const KEY_STEP_LARGE = 64;
+
   const clampWidth = (next: number) => Math.min(max, Math.max(min, next));
 
   /** Nearest snap point within `snapThreshold` of `value`, if any. */
@@ -63,16 +79,44 @@ matching `persistKey` picks the new width up reactively.
     if (!dragging) return;
     const raw = clampWidth(dragStartWidth + (event.clientX - dragStartX));
     const snap = nearestSnap(raw);
+    /* Entering or leaving a snap point springs; everywhere else the pane tracks the pointer. */
+    const snapChanged = (snap !== undefined) !== snapped;
     snapped = snap !== undefined;
-    paneWidths.set(persistKey, snap ?? raw);
+    paneWidths.set(persistKey, snap ?? raw, { spring: snapChanged });
   };
 
   const endDrag = () => {
     dragging = false;
     snapped = false;
   };
+
+  const onKeydown = (event: KeyboardEvent) => {
+    const current = paneWidths.get(persistKey) ?? min;
+    const step = event.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+    let next: number;
+    switch (event.key) {
+      case 'ArrowLeft':
+        next = current - step;
+        break;
+      case 'ArrowRight':
+        next = current + step;
+        break;
+      case 'Home':
+        next = min;
+        break;
+      case 'End':
+        next = max;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    paneWidths.set(persistKey, clampWidth(next), { spring: true });
+  };
 </script>
 
+<!-- A focusable separator is the WAI-ARIA window splitter, an interactive widget. -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class={base({ class: clsx(className) })}
   role="separator"
@@ -80,11 +124,13 @@ matching `persistKey` picks the new width up reactively.
   aria-valuenow={paneWidths.get(persistKey)}
   aria-valuemin={min}
   aria-valuemax={max}
+  tabindex="0"
+  onkeydown={onKeydown}
   onpointerdown={startDrag}
   onpointermove={moveDrag}
   onpointerup={endDrag}
   onpointercancel={endDrag}
   {...rest}
 >
-  <div class={grip()}></div>
+  <div class={grip()} style="width: {gripWidth.current}px; height: {gripHeight.current}px"></div>
 </div>

package/dist/components/containers/pane/PaneHandle.svelte.d.ts

@@ -6,6 +6,10 @@ import type { PaneHandleProps } from './types.js';
  * sits in the grid's flex flow — a real sibling with room to breathe in the
  * gutter. Dragging it writes to the shared resize store; any `Pane` with a
  * matching `persistKey` picks the new width up reactively.
+ *
+ * Motion matches Slider: the pane tracks the pointer 1:1 while dragged, and springs on the fast
+ * spatial spring into and out of snap points and on keyboard steps (arrows ±16px, Shift ±64px,
+ * Home/End to `min`/`max`).
  */
 declare const PaneHandle: import("svelte").Component<PaneHandleProps, {}, "">;
 type PaneHandle = ReturnType<typeof PaneHandle>;

package/dist/components/containers/pane/resizeStore.svelte.d.ts

@@ -1,10 +1,19 @@
 declare function get(key: string): number | undefined;
 /** Seeds `key` from localStorage (or `fallback`) the first time it's read; a no-op after that. */
 declare function hydrate(key: string, fallback: number): number;
-declare function set(key: string, value: number): void;
+/** Whether the pane should spring to `key`'s latest width instead of jumping to it. */
+declare function shouldSpring(key: string): boolean;
+/**
+ * Writes `key`'s width. `spring: true` asks the pane to spring there; otherwise it jumps (a drag
+ * tracking the pointer 1:1), unless a spring is still in flight, which it retargets instead.
+ */
+declare function set(key: string, value: number, { spring }?: {
+    spring?: boolean;
+}): void;
 export declare const paneWidths: {
     get: typeof get;
     hydrate: typeof hydrate;
     set: typeof set;
+    shouldSpring: typeof shouldSpring;
 };
 export {};

package/dist/components/containers/pane/resizeStore.svelte.js

@@ -6,6 +6,8 @@ import { SvelteMap } from 'svelte/reactivity';
  * writes on drag, the pane reads reactively.
  */
 const widths = new SvelteMap();
+/** Whether the last write to a key should spring (a snap, a keyboard step) rather than jump. */
+const springs = new SvelteMap();
 function get(key) {
     return widths.get(key);
 }
@@ -22,9 +24,18 @@ function hydrate(key, fallback) {
     widths.set(key, initial);
     return initial;
 }
-function set(key, value) {
+/** Whether the pane should spring to `key`'s latest width instead of jumping to it. */
+function shouldSpring(key) {
+    return springs.get(key) ?? false;
+}
+/**
+ * Writes `key`'s width. `spring: true` asks the pane to spring there; otherwise it jumps (a drag
+ * tracking the pointer 1:1), unless a spring is still in flight, which it retargets instead.
+ */
+function set(key, value, { spring = false } = {}) {
+    springs.set(key, spring);
     widths.set(key, value);
     if (typeof localStorage !== 'undefined')
         localStorage.setItem(key, String(value));
 }
-export const paneWidths = { get, hydrate, set };
+export const paneWidths = { get, hydrate, set, shouldSpring };

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

@@ -3,22 +3,94 @@ import { tv } from 'tailwind-variants';
 // literal Tailwind candidate, so the JIT scanner picks it up even though it's only
 // ever read through object indexing at runtime (see PaneGrid.svelte's resolveResponsive).
 const gapClasses = {
-    small: { none: 'gap-0', sm: 'gap-2', md: 'gap-3', lg: 'gap-4', xl: 'gap-6' },
-    medium: { none: 'md:gap-0', sm: 'md:gap-2', md: 'md:gap-3', lg: 'md:gap-4', xl: 'md:gap-6' },
-    large: { none: 'lg:gap-0', sm: 'lg:gap-2', md: 'lg:gap-3', lg: 'lg:gap-4', xl: 'lg:gap-6' },
-    extraLarge: { none: 'xl:gap-0', sm: 'xl:gap-2', md: 'xl:gap-3', lg: 'xl:gap-4', xl: 'xl:gap-6' }
+    small: {
+        none: 'gap-spacing-0',
+        sm: 'gap-spacing-100',
+        md: 'gap-spacing-150',
+        lg: 'gap-spacing-200',
+        xl: 'gap-spacing-300'
+    },
+    medium: {
+        none: 'md:gap-spacing-0',
+        sm: 'md:gap-spacing-100',
+        md: 'md:gap-spacing-150',
+        lg: 'md:gap-spacing-200',
+        xl: 'md:gap-spacing-300'
+    },
+    large: {
+        none: 'lg:gap-spacing-0',
+        sm: 'lg:gap-spacing-100',
+        md: 'lg:gap-spacing-150',
+        lg: 'lg:gap-spacing-200',
+        xl: 'lg:gap-spacing-300'
+    },
+    extraLarge: {
+        none: 'xl:gap-spacing-0',
+        sm: 'xl:gap-spacing-100',
+        md: 'xl:gap-spacing-150',
+        lg: 'xl:gap-spacing-200',
+        xl: 'xl:gap-spacing-300'
+    }
 };
 const paddingClasses = {
-    small: { none: 'p-0', sm: 'p-3', md: 'p-4', lg: 'p-6', xl: 'p-8' },
-    medium: { none: 'md:p-0', sm: 'md:p-3', md: 'md:p-4', lg: 'md:p-6', xl: 'md:p-8' },
-    large: { none: 'lg:p-0', sm: 'lg:p-3', md: 'lg:p-4', lg: 'lg:p-6', xl: 'lg:p-8' },
-    extraLarge: { none: 'xl:p-0', sm: 'xl:p-3', md: 'xl:p-4', lg: 'xl:p-6', xl: 'xl:p-8' }
+    small: {
+        none: 'p-spacing-0',
+        sm: 'p-spacing-150',
+        md: 'p-spacing-200',
+        lg: 'p-spacing-300',
+        xl: 'p-spacing-400'
+    },
+    medium: {
+        none: 'md:p-spacing-0',
+        sm: 'md:p-spacing-150',
+        md: 'md:p-spacing-200',
+        lg: 'md:p-spacing-300',
+        xl: 'md:p-spacing-400'
+    },
+    large: {
+        none: 'lg:p-spacing-0',
+        sm: 'lg:p-spacing-150',
+        md: 'lg:p-spacing-200',
+        lg: 'lg:p-spacing-300',
+        xl: 'lg:p-spacing-400'
+    },
+    extraLarge: {
+        none: 'xl:p-spacing-0',
+        sm: 'xl:p-spacing-150',
+        md: 'xl:p-spacing-200',
+        lg: 'xl:p-spacing-300',
+        xl: 'xl:p-spacing-400'
+    }
 };
 const marginClasses = {
-    small: { none: 'm-0', sm: 'm-3', md: 'm-4', lg: 'm-6', xl: 'm-8' },
-    medium: { none: 'md:m-0', sm: 'md:m-3', md: 'md:m-4', lg: 'md:m-6', xl: 'md:m-8' },
-    large: { none: 'lg:m-0', sm: 'lg:m-3', md: 'lg:m-4', lg: 'lg:m-6', xl: 'lg:m-8' },
-    extraLarge: { none: 'xl:m-0', sm: 'xl:m-3', md: 'xl:m-4', lg: 'xl:m-6', xl: 'xl:m-8' }
+    small: {
+        none: 'm-spacing-0',
+        sm: 'm-spacing-150',
+        md: 'm-spacing-200',
+        lg: 'm-spacing-300',
+        xl: 'm-spacing-400'
+    },
+    medium: {
+        none: 'md:m-spacing-0',
+        sm: 'md:m-spacing-150',
+        md: 'md:m-spacing-200',
+        lg: 'md:m-spacing-300',
+        xl: 'md:m-spacing-400'
+    },
+    large: {
+        none: 'lg:m-spacing-0',
+        sm: 'lg:m-spacing-150',
+        md: 'lg:m-spacing-200',
+        lg: 'lg:m-spacing-300',
+        xl: 'lg:m-spacing-400'
+    },
+    extraLarge: {
+        none: 'xl:m-spacing-0',
+        sm: 'xl:m-spacing-150',
+        md: 'xl:m-spacing-200',
+        lg: 'xl:m-spacing-300',
+        xl: 'xl:m-spacing-400'
+    }
 };
 const directionClasses = {
     small: { row: 'flex-row', column: 'flex-col' },
@@ -59,7 +131,7 @@ export function resolveResponsive(value, table) {
 }
 export const pane = tv({
     slots: {
-        base: 'relative flex min-w-0 flex-col box-border overflow-clip items-center',
+        base: 'relative flex min-w-spacing-0 flex-col box-border overflow-clip items-center',
         content: 'flex flex-1 flex-col w-full h-full'
     },
     variants: {
@@ -79,20 +151,24 @@ export const pane = tv({
             false: { base: '' }
         },
         padding: {
-            none: { content: 'p-0' },
-            sm: { content: 'px-3 md:px-4 py-2 md:py-3' },
-            md: { content: 'px-4 md:px-6 lg:px-8 py-3 md:py-4 lg: py-6' },
-            lg: { content: 'px-6 md:px-8 lg:px-12 py-4 md:py-6 lg:py-8' }
+            none: { content: 'p-spacing-0' },
+            sm: { content: 'px-spacing-150 md:px-spacing-200 py-spacing-100 md:py-spacing-150' },
+            md: {
+                content: 'px-spacing-200 md:px-spacing-300 lg:px-spacing-400 py-spacing-150 md:py-spacing-200 lg:py-spacing-300'
+            },
+            lg: {
+                content: 'px-spacing-300 md:px-spacing-400 lg:px-spacing-600 py-spacing-200 md:py-spacing-300 lg:py-spacing-400'
+            }
         },
         gap: {
-            none: { content: 'gap-0' },
-            sm: { content: 'gap-2' },
-            md: { content: 'gap-3' },
-            lg: { content: 'gap-4' },
-            xl: { content: 'gap-6' }
+            none: { content: 'gap-spacing-0' },
+            sm: { content: 'gap-spacing-100' },
+            md: { content: 'gap-spacing-150' },
+            lg: { content: 'gap-spacing-200' },
+            xl: { content: 'gap-spacing-300' }
         },
         flexible: {
-            true: { base: 'min-w-0 grow basis-0' },
+            true: { base: 'min-w-spacing-0 grow basis-spacing-0' },
             false: { base: 'shrink-0' }
         },
         sticky: {
@@ -116,8 +192,9 @@ export const pane = tv({
  */
 export const paneHandle = tv({
     slots: {
-        base: 'group relative flex shrink-0 w-3 self-stretch cursor-col-resize touch-none items-center justify-center rounded-full bg-transparent hover:bg-md-sys-color-outline/20',
-        grip: 'rounded-full transition-[background-color,height,width] md-sys-motion-fast-spatial'
+        base: 'group relative flex shrink-0 w-spacing-150 self-stretch cursor-col-resize touch-none items-center justify-center rounded-full bg-transparent outline-none hover:bg-md-sys-color-outline/20 focus-visible:outline-2 focus-visible:outline-md-sys-color-secondary',
+        // Size is sprung inline by PaneHandle.svelte; only color transitions here.
+        grip: 'rounded-full transition-colors md-sys-motion-effects'
     },
     variants: {
         dragging: {
@@ -125,24 +202,23 @@ export const paneHandle = tv({
             false: ''
         },
         snapped: {
-            true: { grip: 'h-10 w-1.5 bg-md-sys-color-tertiary' },
+            true: { grip: 'bg-md-sys-color-tertiary' },
             false: {
-                grip: 'h-8 w-1 bg-md-sys-color-on-surface-variant/40 group-hover:bg-md-sys-color-primary'
+                grip: 'bg-md-sys-color-on-surface-variant/40 group-hover:bg-md-sys-color-primary'
             }
         }
-    },
-    compoundVariants: [{ dragging: true, snapped: false, class: { grip: 'w-0.5' } }]
+    }
 });
 export const draggablePane = tv({
     slots: {
         base: 'fixed z-[100] flex min-w-72 flex-col rounded-md bg-md-sys-color-surface-container-highest shadow-elevation-3 transition-shadow md-sys-motion-effects',
-        headerBar: 'relative flex shrink-0 items-center gap-2 rounded-t-2xl px-3 py-2 touch-none select-none md-sys-state-focus-indicator',
+        headerBar: 'relative flex shrink-0 items-center gap-spacing-100 rounded-t-2xl px-spacing-150 py-spacing-100 touch-none select-none md-sys-state-focus-indicator',
         grip: 'shrink-0 text-md-sys-color-on-surface-variant',
         headline: 'flex-1 truncate md-sys-typescale-title-small text-md-sys-color-on-surface',
-        actions: 'flex shrink-0 items-center gap-1',
-        content: 'flex flex-1 flex-col min-h-0 min-w-0 overflow-auto p-4 pt-2',
+        actions: 'flex shrink-0 items-center gap-spacing-50',
+        content: 'flex flex-1 flex-col min-h-spacing-0 min-w-spacing-0 overflow-auto p-spacing-200 pt-spacing-100',
         resizeHandle: 'absolute touch-none',
-        miniBase: 'fixed z-[100] flex cursor-pointer items-center gap-2 rounded-full bg-md-sys-color-surface-container-high px-4 py-2 shadow-elevation-2 md-sys-state-focus-indicator hover:shadow-elevation-3',
+        miniBase: 'fixed z-[100] flex cursor-pointer items-center gap-spacing-100 rounded-full bg-md-sys-color-surface-container-high px-spacing-200 py-spacing-100 shadow-elevation-2 md-sys-state-focus-indicator hover:shadow-elevation-3',
         miniIcon: 'shrink-0 text-md-sys-color-on-surface-variant',
         miniLabel: 'md-sys-typescale-label-large max-w-48 truncate text-md-sys-color-on-surface'
     },
@@ -156,28 +232,36 @@ export const draggablePane = tv({
             false: ''
         },
         edge: {
-            n: { resizeHandle: 'top-0 inset-x-3 h-1.5 -translate-y-1/2 cursor-ns-resize' },
-            s: { resizeHandle: 'bottom-0 inset-x-3 h-1.5 translate-y-1/2 cursor-ns-resize' },
-            e: { resizeHandle: 'right-0 inset-y-3 w-1.5 translate-x-1/2 cursor-ew-resize' },
-            w: { resizeHandle: 'left-0 inset-y-3 w-1.5 -translate-x-1/2 cursor-ew-resize' },
+            n: {
+                resizeHandle: 'top-spacing-0 inset-x-spacing-150 h-spacing-75 -translate-y-1/2 cursor-ns-resize'
+            },
+            s: {
+                resizeHandle: 'bottom-spacing-0 inset-x-spacing-150 h-spacing-75 translate-y-1/2 cursor-ns-resize'
+            },
+            e: {
+                resizeHandle: 'right-spacing-0 inset-y-spacing-150 w-spacing-75 translate-x-1/2 cursor-ew-resize'
+            },
+            w: {
+                resizeHandle: 'left-spacing-0 inset-y-spacing-150 w-spacing-75 -translate-x-1/2 cursor-ew-resize'
+            },
             ne: {
-                resizeHandle: 'top-0 right-0 size-3 -translate-y-1/2 translate-x-1/2 cursor-nesw-resize'
+                resizeHandle: 'top-spacing-0 right-spacing-0 size-spacing-150 -translate-y-1/2 translate-x-1/2 cursor-nesw-resize'
             },
             nw: {
-                resizeHandle: 'top-0 left-0 size-3 -translate-y-1/2 -translate-x-1/2 cursor-nwse-resize'
+                resizeHandle: 'top-spacing-0 left-spacing-0 size-spacing-150 -translate-y-1/2 -translate-x-1/2 cursor-nwse-resize'
             },
             se: {
-                resizeHandle: 'bottom-0 right-0 size-3 translate-y-1/2 translate-x-1/2 cursor-nwse-resize'
+                resizeHandle: 'bottom-spacing-0 right-spacing-0 size-spacing-150 translate-y-1/2 translate-x-1/2 cursor-nwse-resize'
             },
             sw: {
-                resizeHandle: 'bottom-0 left-0 size-3 translate-y-1/2 -translate-x-1/2 cursor-nesw-resize'
+                resizeHandle: 'bottom-spacing-0 left-spacing-0 size-spacing-150 translate-y-1/2 -translate-x-1/2 cursor-nesw-resize'
             }
         },
         corner: {
-            'bottom-left': { miniBase: 'bottom-4 left-4' },
-            'bottom-right': { miniBase: 'bottom-4 right-4' },
-            'top-left': { miniBase: 'top-4 left-4' },
-            'top-right': { miniBase: 'top-4 right-4' }
+            'bottom-left': { miniBase: 'bottom-spacing-200 left-spacing-200' },
+            'bottom-right': { miniBase: 'bottom-spacing-200 right-spacing-200' },
+            'top-left': { miniBase: 'top-spacing-200 left-spacing-200' },
+            'top-right': { miniBase: 'top-spacing-200 right-spacing-200' }
         }
     },
     defaultVariants: {

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

@@ -63,8 +63,9 @@ export type PaneGridProps = PaneGridVariants & DivAttrs & {
     /** Optional root class. */
     class?: string;
     /**
-     * Row (side by side) or column (stacked), per breakpoint.
-     * @default 'row'
+     * Row (side by side) or column (stacked), per breakpoint. Defaults to M3's canonical layouts:
+     * one pane per row below the expanded window class, side by side from `large` up.
+     * @default { small: 'column', large: 'row' }
      */
     direction?: Responsive<'row' | 'column'>;
     /**

package/dist/components/containers/popover/Popover.mdx

@@ -0,0 +1,45 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as PopoverStories from './Popover.stories.svelte';
+
+<Meta of={PopoverStories} />
+
+<Title />
+
+<Subtitle>
+  A non-modal surface anchored to a trigger, for supplementary content or a few controls.
+</Subtitle>
+
+`import { Popover } from '@noxlovette/material';`
+
+<Canvas of={PopoverStories.Playground} />
+
+<Controls of={PopoverStories.Playground} />
+
+## When to use it
+
+M3 has no popover component; this one sits between its patterns. It opens on click and can hold
+interactive content, unlike a `Tooltip`. It doesn't block the page and has no scrim, unlike a
+`Dialogue`.
+
+- **Popover:** supplementary information or a few controls tied to one button.
+- **`Menu`:** a list of actions to choose from.
+- **`Dialogue`:** anything that must be resolved before the user continues.
+
+Pass the trigger as a snippet and spread the props it receives onto it:
+
+```svelte
+<Popover title="Storage">
+  {#snippet trigger(triggerProps)}
+    <Button variant="outlined" {...triggerProps}>Show info</Button>
+  {/snippet}
+  <Body>75% of your storage has been used.</Body>
+</Popover>
+```
+
+<Canvas of={PopoverStories.IconTriggerNoTitle} />
+
+## Accessibility
+
+- **Dismissal.** Escape closes the popover and returns focus to the trigger.
+- **Non-modal.** The rest of the page stays interactive while it's open, so don't use it for
+  content that must block the user.

package/dist/components/containers/popover/Popover.stories.svelte

@@ -55,7 +55,7 @@
   <div class="p-24">
     <Popover showClose={false}>
       {#snippet trigger(triggerProps)}
-        <ButtonIcon iconProps={{ name: 'info' }} variant="text" {...triggerProps} />
+        <ButtonIcon iconProps={{ name: 'info' }} variant="standard" {...triggerProps} />
       {/snippet}
       <Body class="text-md-sys-color-on-surface-variant">
         A minimal popover with no header — just an icon trigger and body text.

package/dist/components/containers/popover/Popover.svelte

@@ -55,7 +55,7 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
                         <ButtonIcon
                           {...closeProps}
                           iconProps={{ name: 'close' }}
-                          variant="text"
+                          variant="standard"
                           size="sm"
                         />
                       </div>

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

@@ -1,9 +1,9 @@
 import { tv } from 'tailwind-variants';
 export const popover = tv({
     slots: {
-        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-4 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
-        close: 'absolute top-3 right-3',
-        header: 'mb-2 flex items-center justify-between gap-4',
+        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
+        close: 'absolute top-spacing-150 right-spacing-150',
+        header: 'mb-spacing-100 flex items-center justify-between gap-spacing-200',
         title: 'md-sys-typescale-title-small text-md-sys-color-on-surface',
         body: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant'
     }

package/dist/components/containers/scroll-area/theme.js

@@ -10,10 +10,10 @@ export const scrollArea = tv({
     variants: {
         orientation: {
             vertical: {
-                scrollbar: 'h-full w-2 border-l border-l-transparent p-px'
+                scrollbar: 'h-full w-spacing-100 border-l border-l-transparent p-px'
             },
             horizontal: {
-                scrollbar: 'h-2 w-full border-t border-t-transparent p-px'
+                scrollbar: 'h-spacing-100 w-full border-t border-t-transparent p-px'
             },
             both: {
                 scrollbar: ''