@noxlovette/material 0.3.3 → 0.4.0

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

@@ -0,0 +1,211 @@
+import { tv } from 'tailwind-variants';
+// Static class lookups, keyed by breakpoint then value — every string below is a
+// 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' }
+};
+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' }
+};
+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' }
+};
+const directionClasses = {
+    small: { row: 'flex-row', column: 'flex-col' },
+    medium: { row: 'md:flex-row', column: 'md:flex-col' },
+    large: { row: 'lg:flex-row', column: 'lg:flex-col' },
+    extraLarge: { row: 'xl:flex-row', column: 'xl:flex-col' }
+};
+const visibleFromClasses = {
+    small: '',
+    medium: 'hidden md:flex',
+    large: 'hidden lg:flex',
+    extraLarge: 'hidden xl:flex'
+};
+const hiddenFromClasses = {
+    small: 'hidden',
+    medium: 'md:hidden',
+    large: 'lg:hidden',
+    extraLarge: 'xl:hidden'
+};
+export const responsiveTables = {
+    gap: gapClasses,
+    padding: paddingClasses,
+    margin: marginClasses,
+    direction: directionClasses,
+    visibleFrom: visibleFromClasses,
+    hiddenFrom: hiddenFromClasses
+};
+/** Resolves a `Responsive<T>` prop into a space-separated class string using the given lookup table. */
+export function resolveResponsive(value, table) {
+    if (value === undefined)
+        return '';
+    if (typeof value === 'object') {
+        return Object.entries(value)
+            .map(([bp, v]) => table[bp][v])
+            .join(' ');
+    }
+    return table.small[value];
+}
+export const pane = tv({
+    slots: {
+        base: 'relative flex min-w-0 flex-col box-border overflow-clip items-center',
+        content: 'flex flex-1 flex-col w-full h-full'
+    },
+    variants: {
+        background: {
+            true: { base: 'bg-md-sys-color-surface' },
+            false: ''
+        },
+        full: {
+            // --appbar-height is set on the document root by a mounted AppBar (see
+            // AppBar.svelte); the var falls back to 0px so this equals plain
+            // min-h-dvh when no AppBar is present.
+            true: { base: 'min-h-[calc(100dvh-var(--appbar-height,0px))]' },
+            false: ''
+        },
+        rounded: {
+            true: { base: 'md:rounded-t-md' },
+            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' }
+        },
+        gap: {
+            none: { content: 'gap-0' },
+            sm: { content: 'gap-2' },
+            md: { content: 'gap-3' },
+            lg: { content: 'gap-4' },
+            xl: { content: 'gap-6' }
+        },
+        flexible: {
+            true: { base: 'min-w-0 grow basis-0' },
+            false: { base: 'shrink-0' }
+        },
+        sticky: {
+            true: {
+                base: 'sticky top-[var(--pane-sticky-top,0px)] self-start max-h-dvh overflow-y-auto scrollbar-none'
+            },
+            false: ''
+        }
+    },
+    defaultVariants: {
+        rounded: true,
+        flexible: true
+    }
+});
+/**
+ * A standalone drag divider, placed directly inside a `PaneGrid` between two
+ * `Pane`s. Sits in the grid's own gap as a real flex sibling — not clipped by
+ * a Pane's `overflow-clip` the way a self-owned handle was — and drags the
+ * width of whichever `Pane` shares its `persistKey` via the shared
+ * `resizeStore`.
+ */
+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] duration-150'
+    },
+    variants: {
+        dragging: {
+            true: { base: 'bg-md-sys-color-outline/20' },
+            false: ''
+        },
+        snapped: {
+            true: { grip: 'h-10 w-1.5 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'
+            }
+        }
+    },
+    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',
+        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',
+        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',
+        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',
+        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'
+    },
+    variants: {
+        dragging: {
+            true: { base: 'shadow-elevation-4 cursor-grabbing', headerBar: 'cursor-grabbing' },
+            false: { headerBar: 'cursor-grab' }
+        },
+        disableDrag: {
+            true: { headerBar: 'cursor-default' },
+            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' },
+            ne: {
+                resizeHandle: 'top-0 right-0 size-3 -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'
+            },
+            se: {
+                resizeHandle: 'bottom-0 right-0 size-3 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'
+            }
+        },
+        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' }
+        }
+    },
+    defaultVariants: {
+        dragging: false,
+        disableDrag: false,
+        corner: 'bottom-left'
+    }
+});
+export const paneGrid = tv({
+    slots: {
+        base: 'flex box-border'
+    },
+    variants: {
+        full: {
+            // See pane's `full` variant above — same --appbar-height fallback.
+            true: { base: 'min-h-[calc(100dvh-var(--appbar-height,0px))]' },
+            false: ''
+        },
+        rounded: {
+            true: { base: 'md:rounded-t-lg' },
+            false: ''
+        },
+        wrap: {
+            true: { base: 'flex-wrap' },
+            false: { base: 'flex-nowrap' }
+        }
+    },
+    defaultVariants: {
+        wrap: false
+    }
+});

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

@@ -0,0 +1,249 @@
+import type { DivAttrs } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { Breakpoint, DraggablePaneVariants, MinimizedCorner, PaneGridVariants, PaneVariants, Responsive, SpaceSize } from './theme.js';
+export type { MinimizedCorner, ResizeEdge } from './theme.js';
+export type { Breakpoint, Direction, Responsive, SpaceSize } from './theme.js';
+/**
+ * Props for the Pane component — a single content region. Used standalone as a
+ * page-level wrapper, or as a child of PaneGrid to become one region of a
+ * multi-pane layout (a sidebar, a detail column, a supporting panel, ...).
+ */
+export type PaneProps = PaneVariants & DivAttrs & {
+    /** Pane content. */
+    children: Snippet;
+    /** Optional root class. */
+    class?: string;
+    /** Optional content container class. */
+    contentClass?: string;
+    /**
+     * Fixed flex-basis in px. Omit for a flexible pane that grows to fill the
+     * remaining space in its PaneGrid. Bindable — with `resizable` and
+     * `persistKey` set, tracks live updates from a `PaneHandle` sharing the
+     * same `persistKey` instead of managing its own drag state.
+     * @default undefined (flexible)
+     */
+    width?: number;
+    /**
+     * Marks this pane as driven by a `PaneHandle` sharing the same
+     * `persistKey` — the pane no longer owns a handle itself, it just mirrors
+     * whatever width the handle drags it to.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Key shared with a `PaneHandle` to sync this pane's width through the
+     * localStorage-backed resize store. Required when `resizable` is set;
+     * omit to skip persistence for a plain fixed-width pane.
+     */
+    persistKey?: string;
+    /**
+     * Top offset in px for a `sticky` pane, e.g. to sit below a fixed app bar.
+     * @default 0
+     */
+    stickyTop?: number;
+    /**
+     * Hide this pane below the given breakpoint (visible from this size up).
+     * Mutually exclusive with `hiddenFrom`.
+     */
+    visibleFrom?: Breakpoint;
+    /**
+     * Hide this pane from the given breakpoint up (visible only below it).
+     * Mutually exclusive with `visibleFrom`.
+     */
+    hiddenFrom?: Breakpoint;
+};
+/**
+ * Props for the PaneGrid component — arranges Pane children relative to one
+ * another: direction, gap, and outer margin/padding, each independently
+ * responsive across viewport tiers (small/medium/large/extraLarge).
+ */
+export type PaneGridProps = PaneGridVariants & DivAttrs & {
+    /** Pane children. */
+    children: Snippet;
+    /** Optional root class. */
+    class?: string;
+    /**
+     * Row (side by side) or column (stacked), per breakpoint.
+     * @default 'row'
+     */
+    direction?: Responsive<'row' | 'column'>;
+    /**
+     * Space between panes, per breakpoint.
+     * @default 'md'
+     */
+    gap?: Responsive<SpaceSize>;
+    /**
+     * Padding on the grid's own edge, per breakpoint.
+     * @default 'none'
+     */
+    padding?: Responsive<SpaceSize>;
+    /**
+     * Margin around the grid, per breakpoint.
+     * @default 'none'
+     */
+    margin?: Responsive<SpaceSize>;
+};
+/**
+ * Props for the PaneHandle component — a drag divider placed directly inside
+ * a `PaneGrid`, between the `Pane` it resizes and its neighbor. Drags that
+ * pane's width by writing to the shared, localStorage-backed resize store;
+ * the `Pane` reads it back via a matching `persistKey`.
+ */
+export type PaneHandleProps = DivAttrs & {
+    /** Optional root class. */
+    class?: string;
+    /** Key shared with the `Pane` this handle resizes. */
+    persistKey: string;
+    /**
+     * Minimum width in px the paired pane can be dragged to.
+     * @default 200
+     */
+    min?: number;
+    /**
+     * Maximum width in px the paired pane can be dragged to.
+     * @default 640
+     */
+    max?: number;
+    /**
+     * Widths in px the drag magnetically snaps to when within `snapThreshold`.
+     * Defaults to M3's recommended custom two-pane widths (360dp/412dp) for
+     * `expanded`/`large`/`extraLarge` layouts.
+     * @default [360, 412]
+     */
+    snapPoints?: number[];
+    /**
+     * Distance in px from a snap point at which the drag locks onto it.
+     * @default 16
+     */
+    snapThreshold?: number;
+};
+/**
+ * Props for the DraggablePane component — a floating panel positioned by
+ * `x`/`y` and dragged into place by its header, rather than a `Pane`
+ * participating in a `PaneGrid`'s flex layout.
+ */
+export type DraggablePaneProps = DraggablePaneVariants & DivAttrs & {
+    /** Panel content. */
+    children: Snippet;
+    /** Optional custom header content, replacing the default grip/title/close row. */
+    header?: Snippet;
+    /** Title shown in the default header. Ignored when `header` is given. */
+    title?: string;
+    /** Shows a close button in the default header when given; called on click. */
+    onClose?: () => void;
+    /**
+     * Called on any pointer click outside the panel (while expanded — not
+     * wired up for the collapsed mini pill). Common use: `onClickOutside={onClose}`
+     * or `onClickOutside={() => (collapsed = true)}`. Omit to leave outside
+     * clicks with no effect.
+     */
+    onClickOutside?: () => void;
+    /**
+     * Current horizontal position in px, relative to `bounds`. Bindable —
+     * updates live while dragging. Omit to let the pane manage its own
+     * position starting from `initialX`.
+     */
+    x?: number;
+    /**
+     * Current vertical position in px, relative to `bounds`. Bindable —
+     * updates live while dragging. Omit to let the pane manage its own
+     * position starting from `initialY`.
+     */
+    y?: number;
+    /**
+     * Starting horizontal position in px, used when `x` is unset and (with
+     * `persistKey`) nothing is stored yet.
+     * @default 24
+     */
+    initialX?: number;
+    /**
+     * Starting vertical position in px, used when `y` is unset and (with
+     * `persistKey`) nothing is stored yet.
+     * @default 24
+     */
+    initialY?: number;
+    /**
+     * Key to persist this pane's dragged position to `localStorage` across
+     * reloads. Omit to keep the position in memory only.
+     */
+    persistKey?: string;
+    /**
+     * Clamp the drag to the viewport, or to a given element's current
+     * bounding rect.
+     * @default 'viewport'
+     */
+    bounds?: 'viewport' | HTMLElement;
+    /**
+     * Minimum distance in px kept between the pane and the edge of `bounds`.
+     * @default 8
+     */
+    boundsPadding?: number;
+    /**
+     * Current width in px. Bindable — updates live while resizing. Unset
+     * (the default) lets the panel size itself to content down to an 18rem
+     * floor; setting it (directly, or by resizing) switches to a fixed
+     * width, and `minWidth`/`maxWidth` become the floor/ceiling instead.
+     */
+    width?: number;
+    /**
+     * Current height in px. Bindable — updates live while resizing. Unset
+     * (the default) lets the panel size itself to content; setting it
+     * (directly, or by resizing) switches to a fixed height, and content
+     * beyond it scrolls.
+     */
+    height?: number;
+    /**
+     * Shows resize handles on all four edges and corners, letting the user
+     * resize the panel by pointer drag or, once an edge handle is focused,
+     * the arrow keys (Shift for a bigger step).
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Hard floor in px the panel can be resized down to — the safety net
+     * that keeps a resize from shrinking the panel into uselessness.
+     * @default 200
+     */
+    minWidth?: number;
+    /**
+     * Hard floor in px the panel can be resized down to.
+     * @default 160
+     */
+    minHeight?: number;
+    /** Ceiling in px the panel can be resized up to. Also capped by `bounds`. */
+    maxWidth?: number;
+    /** Ceiling in px the panel can be resized up to. Also capped by `bounds`. */
+    maxHeight?: number;
+    /**
+     * Disables dragging, e.g. to pin the pane in place on small viewports.
+     * @default false
+     */
+    disableDrag?: boolean;
+    /**
+     * Shows a minimize button in the default header that collapses the pane
+     * into a small fixed-corner pill (see `minimizedCorner`) showing just
+     * its title; clicking the pill restores it at its previous position/size.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Whether the pane is currently collapsed into its mini pill. Bindable —
+     * set directly to control collapse state without the default minimize
+     * button (e.g. drive it from your own UI).
+     * @default false
+     */
+    collapsed?: boolean;
+    /** Title shown on the collapsed mini pill. Defaults to `title`. */
+    minimizedTitle?: string;
+    /**
+     * Corner the collapsed mini pill docks to.
+     * @default 'bottom-left'
+     */
+    minimizedCorner?: MinimizedCorner;
+    /** Optional class for the collapsed mini pill — e.g. to override its docked corner with your own CSS. */
+    minimizedClass?: string;
+    /** Optional root class. */
+    class?: string;
+    /** Optional content container class. */
+    contentClass?: string;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -40,8 +40,8 @@
         align={args.align}
         sideOffset={args.sideOffset}
       >
-        {#snippet trigger()}
-          <Button variant="outlined">Show info</Button>
+        {#snippet trigger(triggerProps)}
+          <Button variant="outlined" {...triggerProps}>Show info</Button>
         {/snippet}
         <Body class="text-md-sys-color-on-surface-variant">
           75% of your storage has been used. Consider upgrading your plan.
@@ -54,8 +54,8 @@
 <Story name="Icon Trigger, No Title" asChild>
   <div class="p-24">
     <Popover showClose={false}>
-      {#snippet trigger()}
-        <ButtonIcon iconProps={{ name: 'info' }} variant="text" />
+      {#snippet trigger(triggerProps)}
+        <ButtonIcon iconProps={{ name: 'info' }} variant="text" {...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

@@ -29,7 +29,9 @@ Popovers display rich content in a non-modal overlay anchored to a trigger eleme
 
 <Popover.Root bind:open>
   <Popover.Trigger>
-    {@render trigger()}
+    {#snippet child({ props })}
+      {@render trigger(props)}
+    {/snippet}
   </Popover.Trigger>
 
   <Popover.Portal>

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

@@ -2,22 +2,22 @@ import { type VariantProps } from 'tailwind-variants';
 export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            close?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            body?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            close?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            body?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -28,12 +28,12 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     body: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            close?: import("tailwind-merge").ClassNameValue;
-            base?: import("tailwind-merge").ClassNameValue;
-            body?: import("tailwind-merge").ClassNameValue;
-            header?: import("tailwind-merge").ClassNameValue;
-            title?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            close?: import("tailwind-variants").ClassValue;
+            base?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            title?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -42,10 +42,10 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     header: string;
     title: string;
     body: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
     close: string;
     header: string;
     title: string;
     body: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

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

@@ -2,8 +2,12 @@ import type { Popover } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { PopoverVariants } from './theme.js';
 export interface PopoverProps extends PopoverVariants {
-    /** Snippet rendered as the trigger element (typically a Button or ButtonIcon). */
-    trigger: Snippet;
+    /**
+     * Snippet rendered as the trigger element (typically a Button or ButtonIcon).
+     * Receives the trigger's props — spread them onto the rendered element/component
+     * so bits-ui doesn't wrap it in its own `<button>` (which would nest buttons).
+     */
+    trigger: Snippet<[Record<string, unknown>]>;
     /** The popover panel content. */
     children: Snippet;
     /** Optional heading displayed at the top of the panel. */

package/dist/components/containers/scroll-area/theme.d.ts

@@ -34,7 +34,7 @@ export declare const scrollArea: import("tailwind-variants").TVReturnType<{
     scrollbar: string;
     thumb: string;
     corner: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         vertical: {
             scrollbar: string;
@@ -52,4 +52,4 @@ export declare const scrollArea: import("tailwind-variants").TVReturnType<{
     scrollbar: string;
     thumb: string;
     corner: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/containers/side-sheet/SideSheet.stories.svelte

@@ -1,10 +1,9 @@
 <!--
-  SideSheet is a content template only — a headline row with a close button, followed by
-  `children`. It renders no backdrop, no fixed/absolute positioning, and no open/close
-  transition of its own (unlike Dialogue and BottomSheet, which own their overlay). Consumers
-  are expected to place it inside their own positioned container (e.g. a fixed aside, or a
-  SplitPane right pane) — the wrapping <div> below is that story-only host, not part of the
-  component.
+  SideSheet has no `open` prop of its own — mounting it calls the native <dialog>'s showModal()
+  immediately, so visibility is controlled by conditionally rendering the component
+  ({#if open}<SideSheet ...>{/if}), same as BottomSheet. `close` is a required callback the
+  sheet invokes on Esc or backdrop click — the consumer is expected to flip its own `open` flag
+  to false in response.
 -->
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -25,29 +24,22 @@
 </script>
 
 <script lang="ts">
-  let playgroundOpen = $state(true);
+  let playgroundOpen = $state(false);
 </script>
 
 <Story name="Playground">
   {#snippet template(args)}
-    <div class="bg-md-sys-color-surface relative h-[420px] overflow-hidden">
+    <div class="p-6">
+      <Button onclick={() => (playgroundOpen = true)}>Show side sheet</Button>
       {#if playgroundOpen}
-        <div
-          class="bg-md-sys-color-surface-container-low shadow-elevation-1 absolute top-0 right-0 h-full w-80"
-        >
-          <SideSheet headline={args.headline} close={() => (playgroundOpen = false)}>
-            <div class="flex flex-col gap-3 px-6 pb-6">
-              <Body class="text-md-sys-color-on-surface-variant">
-                Supplementary content and actions, anchored to the edge of the screen while the main
-                content stays visible.
-              </Body>
-            </div>
-          </SideSheet>
-        </div>
-      {:else}
-        <div class="p-6">
-          <Button onclick={() => (playgroundOpen = true)}>Show side sheet</Button>
-        </div>
+        <SideSheet headline={args.headline} close={() => (playgroundOpen = false)}>
+          <div class="flex flex-col gap-3 px-6 pb-6">
+            <Body class="text-md-sys-color-on-surface-variant">
+              Supplementary content and actions, anchored to the edge of the screen while the main
+              content stays visible.
+            </Body>
+          </div>
+        </SideSheet>
       {/if}
     </div>
   {/snippet}