@noxlovette/material 0.5.1 → 0.6.0

package/dist/components/containers/bottom-sheet/BottomSheet.mdx

@@ -0,0 +1,64 @@
+import { Meta, Title, Subtitle, Canvas, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as SheetStories from './BottomSheet.stories.svelte';
+
+<Meta of={SheetStories} />
+
+<Title />
+
+<Subtitle>Bottom sheets show secondary content anchored to the bottom of the screen.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/bottom-sheets/specs) ·
+`import { BottomSheet } from '@noxlovette/material';`
+
+<Canvas of={SheetStories.Modal} />
+
+<ArgTypes />
+
+## Modal or standard
+
+- **`modal`** (default) opens in front of the app above a scrim, and blocks everything else until
+  it's dismissed. Use it for actions or choices that need an answer, such as a share sheet. It is
+  a native `<dialog>` opened with `showModal()`, so the browser handles the focus trap, top-layer
+  stacking and making the page behind it inert.
+- **`standard`** leaves the rest of the screen usable, like an audio player over a list. There is
+  no scrim, and it never dismisses itself: the drag handle toggles `expanded` between its full
+  height and `peekHeight`. Hide it by setting `open` to false.
+
+<Canvas of={SheetStories.Standard} />
+
+## Opening and dismissing
+
+Bind `open`. The sheet slides up on the spatial spring, and when it closes it stays mounted until
+the slide out finishes. It slides without fading, as M3 asks of sheets.
+
+A modal sheet dismisses itself, sets `open` to false, and tells `close` why:
+
+| Reason   | When                                                         |
+| -------- | ------------------------------------------------------------ |
+| `esc`    | Escape                                                       |
+| `scrim`  | A tap on the scrim                                           |
+| `drag`   | A flick down, or a drag past half the sheet's height         |
+| `handle` | Activating the drag handle (Enter, Space, a click, or a tap) |
+
+A shorter drag springs back, carrying the finger's velocity.
+
+## Size
+
+The sheet spans the window up to 640dp. On windows over 640dp wide it keeps 56dp side margins.
+It stops 72dp below the top of the window (56dp over 640dp), and taller content scrolls inside
+it, under the drag handle.
+
+The sheet doesn't pad its content, so lists can run edge to edge. Pad other content yourself;
+M3 sheets usually keep text 16–24dp from the edges.
+
+<Canvas of={SheetStories.ScrollingContent} />
+
+## Accessibility
+
+- **Name the sheet.** Use `label`, or point `aria-labelledby` at a heading inside it.
+- **The drag handle is a button**, 48dp, with the 3dp focus ring. For keyboard and screen reader
+  users it does what dragging does: it reads "Close sheet" on a modal sheet, and "Expand sheet" or
+  "Collapse sheet" on a standard one. Only hide it (`hideHandle`) on a sheet that can't be dragged
+  anyway.
+- A modal sheet moves focus into itself when it opens (to the handle, the first focusable
+  element), and the browser returns focus to the opener when it closes.

package/dist/components/containers/bottom-sheet/BottomSheet.stories.svelte

@@ -1,31 +1,127 @@
 <!--
-  BottomSheet is controlled with `bind:open`: it dismisses itself on Esc, backdrop click, or
-  dragging the handle below a minimum height, and stays mounted until its exit animation
-  finishes. The optional `close` callback reports why ('esc' | 'click' | 'low').
+  BottomSheet is controlled with `bind:open`. A modal sheet dismisses itself (Esc, scrim tap,
+  dragging it down, activating the handle) and reports why through `close`. A standard sheet
+  never dismisses itself: dragging or activating the handle toggles `expanded`.
 -->
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import BottomSheet from './BottomSheet.svelte';
   import Button from '../../buttons/Button.svelte';
-  import MenuItem from '../menu/menu-item/MenuItem.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import List from '../list/List.svelte';
+  import ListItem from '../list/ListItem.svelte';
+  import Icon from '../../../utils/icon/Icon.svelte';
 
   const { Story } = defineMeta({
     title: 'Containers/Bottom Sheet',
     component: BottomSheet
   });
+
+  const shareTargets = [
+    { name: 'share', label: 'Share' },
+    { name: 'link', label: 'Copy link' },
+    { name: 'download', label: 'Download' },
+    { name: 'edit', label: 'Rename' },
+    { name: 'delete', label: 'Move to trash' }
+  ];
 </script>
 
 <script lang="ts">
-  let playgroundOpen = $state(false);
+  let modalOpen = $state(false);
+  let lastReason = $state('');
+  let longOpen = $state(false);
+  let playerOpen = $state(true);
+  let playerExpanded = $state(false);
 </script>
 
-<Story name="Playground" asChild>
-  <div class="p-6">
-    <Button onclick={() => (playgroundOpen = true)}>Open bottom sheet</Button>
-    <BottomSheet bind:open={playgroundOpen}>
-      <MenuItem iconProps={{ name: 'share' }}>Share</MenuItem>
-      <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
-      <MenuItem iconProps={{ name: 'download' }}>Download</MenuItem>
+<Story name="Modal" asChild>
+  <div class="gap-spacing-100 p-spacing-300 flex flex-col items-start">
+    <Button onclick={() => (modalOpen = true)}>Open bottom sheet</Button>
+    <p class="md-sys-typescale-body-medium">
+      {lastReason ? `Dismissed by: ${lastReason}` : 'Drag it down, tap the scrim, or press Esc.'}
+    </p>
+    <BottomSheet bind:open={modalOpen} label="File actions" close={(r) => (lastReason = r)}>
+      <List class="pb-spacing-200">
+        {#each shareTargets as t (t.name)}
+          <ListItem headline={t.label} onclick={() => (modalOpen = false)}>
+            {#snippet leading()}
+              <Icon name={t.name} size="sm" />
+            {/snippet}
+          </ListItem>
+        {/each}
+      </List>
+    </BottomSheet>
+  </div>
+</Story>
+
+<Story name="Scrolling content" asChild>
+  <div class="p-spacing-300">
+    <Button onclick={() => (longOpen = true)}>Open a long sheet</Button>
+    <BottomSheet bind:open={longOpen} aria-labelledby="terms-heading">
+      <div class="gap-spacing-200 px-spacing-300 pb-spacing-300 flex flex-col">
+        <h2 id="terms-heading" class="md-sys-typescale-title-large">Terms of service</h2>
+        {#each { length: 12 } as _, i (i)}
+          <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+            {i + 1}. The sheet stops 72dp below the top of the window (56dp on wider windows) and
+            this content scrolls inside it. The drag handle stays put.
+          </p>
+        {/each}
+        <Button onclick={() => (longOpen = false)}>Accept</Button>
+      </div>
+    </BottomSheet>
+  </div>
+</Story>
+
+<!-- Its own iframe on the docs page: an open, fixed-position sheet would cover the docs. -->
+<Story name="Standard" asChild parameters={{ docs: { story: { inline: false, height: '36rem' } } }}>
+  <div class="gap-spacing-200 p-spacing-300 flex min-h-[32rem] flex-col">
+    <p class="md-sys-typescale-body-large max-w-md">
+      A standard sheet leaves the page usable. Drag the handle, or activate it, to expand and
+      collapse the player.
+    </p>
+    <div class="gap-spacing-100 flex">
+      <Button variant="tonal" onclick={() => (playerOpen = !playerOpen)}>
+        {playerOpen ? 'Hide player' : 'Show player'}
+      </Button>
+      <Button variant="text" onclick={() => (playerExpanded = !playerExpanded)}>
+        {playerExpanded ? 'Collapse' : 'Expand'}
+      </Button>
+    </div>
+    <BottomSheet
+      variant="standard"
+      bind:open={playerOpen}
+      bind:expanded={playerExpanded}
+      peekHeight={120}
+      label="Now playing"
+    >
+      <div class="gap-spacing-300 px-spacing-300 pb-spacing-300 flex flex-col">
+        <div class="gap-spacing-200 flex items-center">
+          <div
+            class="bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container size-spacing-700 flex items-center justify-center rounded-lg"
+          >
+            <Icon name="music_note" />
+          </div>
+          <div class="min-w-spacing-0 flex-1">
+            <p class="md-sys-typescale-title-medium">Harbour lights</p>
+            <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant">
+              The Tidelines
+            </p>
+          </div>
+          <ButtonIcon variant="filled" iconProps={{ name: 'pause' }} aria-label="Pause" />
+        </div>
+        <div
+          class="bg-md-sys-color-secondary-container aspect-square w-full max-w-72 self-center rounded-3xl"
+        ></div>
+        <div class="gap-spacing-200 flex justify-center">
+          <ButtonIcon
+            variant="standard"
+            iconProps={{ name: 'skip_previous' }}
+            aria-label="Previous"
+          />
+          <ButtonIcon variant="filled" iconProps={{ name: 'pause' }} aria-label="Pause" />
+          <ButtonIcon variant="standard" iconProps={{ name: 'skip_next' }} aria-label="Next" />
+        </div>
+      </div>
     </BottomSheet>
   </div>
 </Story>

package/dist/components/containers/bottom-sheet/BottomSheet.svelte

@@ -1,137 +1,207 @@
 <!--
 @component
-Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
+Bottom sheets show secondary content anchored to the bottom of the screen.
 
-They provide access to supplementary content and actions, such as navigation or a menu,
-while keeping the main screen content visible.
+- **Modal** (default): a native `<dialog>` above a scrim. It dismisses on Esc, a scrim tap, a
+  downward drag, or activating the drag handle.
+- **Standard**: no scrim, the rest of the screen stays usable. Dragging or activating the handle
+  switches between expanded and collapsed to `peekHeight`.
 
-@see https://m3.material.io/components/bottom-sheets/overview
+Visibility is controlled with `bind:open`; the sheet stays mounted until its exit animation
+finishes. The content scrolls inside the sheet once it reaches its maximum height.
+
+@see https://m3.material.io/components/bottom-sheets/specs
 -->
 <script lang="ts">
-  import type { BottomSheetProps } from './types.js';
+  import { animate, type AnimationPlaybackControls } from 'motion';
+  import type { Attachment } from 'svelte/attachments';
   import { untrack } from 'svelte';
-  import { enterExit, Presence } from '../../../animation/index.js';
+  import clsx from 'clsx';
+  import { enterExit, Presence, springTokens, springTransition } from '../../../animation/index.js';
+  import { bottomSheet } from './theme.js';
+  import type { BottomSheetCloseReason, BottomSheetProps } from './types.js';
+
+  let {
+    children,
+    variant = 'modal',
+    open = $bindable(true),
+    expanded = $bindable(true),
+    peekHeight = 112,
+    label,
+    hideHandle = false,
+    close,
+    class: className,
+    'aria-labelledby': labelledby
+  }: BottomSheetProps = $props();
 
-  const DEFAULT_HEIGHT = 480;
-  const DISMISS_HEIGHT = 48;
+  const sheet = new Presence(() => open);
+  const modal = $derived(variant === 'modal');
+  const cls = $derived(bottomSheet({ variant }));
 
-  let { children, open = $bindable(true), close }: BottomSheetProps = $props();
+  let height = $state(0);
+  /** Where the sheet rests: 0 when expanded, lower when a standard sheet is collapsed. */
+  const rest = $derived(!modal && !expanded ? Math.max(0, height - peekHeight) : 0);
 
-  let height = $state(DEFAULT_HEIGHT);
-  let container: HTMLDivElement | undefined = $state();
-  let isDragging = $state(false);
-  let startY = $state(0);
+  // The drag offset lives outside Svelte state: it changes every pointer move and is written
+  // straight to the container's transform.
+  let el: HTMLElement | undefined;
+  let offset = 0;
+  let velocity = 0;
+  let controls: AnimationPlaybackControls | undefined;
 
-  const sheet = new Presence(() => open);
+  const set = (y: number) => {
+    offset = y;
+    if (el) el.style.transform = `translateY(${y}px)`;
+  };
+
+  /** Springs to `to`, carrying the velocity of the drag that let go. */
+  const settle = (to: number) => {
+    controls?.stop();
+    controls = animate(offset, to, {
+      ...springTransition(springTokens.spatial),
+      velocity,
+      onUpdate: set
+    });
+    velocity = 0;
+  };
 
-  // untrack: re-running this attachment on every drag would call showModal() on an open dialog.
-  const showModal = (node: HTMLDialogElement) => {
-    untrack(() => node.clientHeight < height && (height = node.clientHeight));
-    node.showModal();
+  const follow: Attachment<HTMLElement> = (node) => {
+    el = node;
+    height = node.offsetHeight;
+    set(untrack(() => rest));
+    $effect(() => {
+      const to = rest;
+      untrack(() => !drag && settle(to));
+    });
+    return () => {
+      controls?.stop();
+      el = undefined;
+    };
   };
 
-  const dismiss = (reason: 'esc' | 'click' | 'low') => {
+  // untrack: re-running this attachment would call showModal() on an open dialog. The dialog
+  // unmounts after its exit instead of calling close(), so focus is returned to the opener here.
+  const showModal: Attachment<HTMLDialogElement> = (node) =>
+    untrack(() => {
+      const opener = document.activeElement;
+      node.showModal();
+      return () => {
+        if (opener instanceof HTMLElement && opener.isConnected) opener.focus();
+      };
+    });
+
+  const dismiss = (reason: BottomSheetCloseReason) => {
     open = false;
     close?.(reason);
   };
 
-  // A sheet dragged shut keeps its collapsed height through the exit; restore it on reopen.
-  $effect.pre(() => {
-    if (open) untrack(() => height < DISMISS_HEIGHT && (height = DEFAULT_HEIGHT));
-  });
+  function activateHandle() {
+    if (dragged) return;
+    if (modal) dismiss('handle');
+    else expanded = !expanded;
+  }
 
-  const moveWheel = (e: WheelEvent) => {
-    e.preventDefault();
-    height += e.deltaY;
-    if (container && container.clientHeight < height) height = container.clientHeight;
-  };
+  // Dragging: window listeners, so a fast drag that leaves the 48dp handle area keeps tracking.
+  let drag: { startY: number; start: number; lastY: number; lastT: number } | null = null;
+  let dragged = false;
 
-  const moveMouse = (e: { clientY: number }) => {
-    if (isDragging) {
-      const distance = e.clientY - startY;
-      height -= distance;
-      startY = e.clientY;
-    }
-  };
+  function onpointerdown(e: PointerEvent) {
+    if (e.button !== 0) return;
+    controls?.stop();
+    dragged = false;
+    velocity = 0;
+    drag = { startY: e.clientY, start: offset, lastY: e.clientY, lastT: e.timeStamp };
+    window.addEventListener('pointermove', onpointermove);
+    window.addEventListener('pointerup', onpointerup);
+    window.addEventListener('pointercancel', onpointerup);
+  }
 
-  $effect(() => {
-    if (height < DISMISS_HEIGHT && untrack(() => open)) dismiss('low');
-  });
-</script>
+  function onpointermove(e: PointerEvent) {
+    if (!drag) return;
+    const dy = e.clientY - drag.startY;
+    if (!dragged && Math.abs(dy) < 4) return;
+    dragged = true;
+    const dt = e.timeStamp - drag.lastT;
+    if (dt > 0) velocity = ((e.clientY - drag.lastY) / dt) * 1000;
+    drag.lastY = e.clientY;
+    drag.lastT = e.timeStamp;
+    const next = drag.start + dy;
+    const max = modal ? height : height - peekHeight;
+    // Past the expanded position the sheet resists, at a quarter of the finger's travel.
+    set(Math.min(max, next < 0 ? next / 4 : next));
+  }
 
-<svelte:window
-  onmousemove={moveMouse}
-  onmouseup={() => (isDragging = false)}
-  ontouchmove={(e) => moveMouse(e.touches[0])}
-  ontouchend={() => (isDragging = false)}
-/>
+  function onpointerup() {
+    window.removeEventListener('pointermove', onpointermove);
+    window.removeEventListener('pointerup', onpointerup);
+    window.removeEventListener('pointercancel', onpointerup);
+    if (!drag) return;
+    drag = null;
+    if (!dragged) return;
+    // Where a fling would carry the sheet in the next 150ms decides where it goes.
+    const projected = offset + velocity * 0.15;
+    if (modal) {
+      if (projected > height / 2) dismiss('drag');
+      else settle(0);
+      return;
+    }
+    const collapse = projected > (height - peekHeight) / 2;
+    if (collapse === !expanded) settle(rest);
+    else expanded = !collapse;
+  }
+</script>
 
-{#if sheet.mounted}
-  <dialog
-    class="bg-md-sys-color-surface-container-low text-md-sys-color-on-surface mx-auto mt-auto w-full max-w-2xl overflow-hidden rounded-t-md"
-    style:max-height="{height}px"
-    data-state={open ? 'open' : 'closed'}
-    {@attach showModal}
-    {@attach sheet.attach(enterExit.bottomSheet)}
-    oncancel={(e) => {
-      e.preventDefault();
-      dismiss('esc');
-    }}
-    onmousedown={(e) => {
-      if (e.target != e.currentTarget) return;
-      dismiss('click');
-    }}
-    onwheel={moveWheel}
-  >
-    <div class="px-4" bind:this={container}>
+{#snippet surface()}
+  <div class={cls.container()} bind:offsetHeight={height} {@attach follow}>
+    {#if !hideHandle}
+      <!-- Pointer drag target; the button inside is the keyboard/screen reader equivalent. -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
-      <div
-        class="flex h-12 w-full cursor-grab items-center justify-center"
-        onmousedown={(e) => {
-          e.preventDefault();
-          isDragging = true;
-          startY = e.clientY;
-        }}
-        ontouchstart={(e) => {
-          isDragging = true;
-          startY = e.touches[0].clientY;
-        }}
-      >
-        <div class="bg-md-sys-color-on-surface-variant/40 h-1 w-8 rounded-full"></div>
+      <div class={cls.handleArea()} {onpointerdown}>
+        <button
+          type="button"
+          class={cls.handle()}
+          aria-label={modal ? 'Close sheet' : expanded ? 'Collapse sheet' : 'Expand sheet'}
+          onclick={activateHandle}
+        >
+          <span class={cls.handleBar()}></span>
+        </button>
       </div>
+    {/if}
+    <div class={cls.body()}>
       {@render children()}
     </div>
-  </dialog>
-{/if}
+  </div>
+{/snippet}
 
-<style>
-  dialog::backdrop {
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: backdrop var(--md-sys-motion-duration-effects-spring)
-      var(--md-sys-motion-timing-function-effects-spring);
-  }
-  dialog[data-state='closed'] {
-    pointer-events: none;
-  }
-  dialog[data-state='closed']::backdrop {
-    background-color: transparent;
-    animation: backdropReverse var(--md-sys-motion-duration-fast-effects-spring)
-      var(--md-sys-motion-timing-function-fast-effects-spring);
-  }
-  @keyframes backdrop {
-    from {
-      background-color: transparent;
-    }
-    to {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-  }
-  @keyframes backdropReverse {
-    from {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    to {
-      background-color: transparent;
-    }
-  }
-</style>
+{#if sheet.mounted}
+  {#if modal}
+    <dialog
+      class={cls.base({ class: clsx(className) })}
+      aria-label={label}
+      aria-labelledby={labelledby}
+      data-state={open ? 'open' : 'closed'}
+      {@attach showModal}
+      {@attach sheet.attach(enterExit.bottomSheet)}
+      oncancel={(e) => {
+        e.preventDefault();
+        dismiss('esc');
+      }}
+      onmousedown={(e) => {
+        // Only the ::backdrop (or the gap a drag uncovers) targets the dialog itself.
+        if (e.target === e.currentTarget) dismiss('scrim');
+      }}
+    >
+      {@render surface()}
+    </dialog>
+  {:else}
+    <div
+      class={cls.base({ class: clsx(className) })}
+      role="region"
+      aria-label={label}
+      aria-labelledby={labelledby}
+      {@attach sheet.attach(enterExit.bottomSheet)}
+    >
+      {@render surface()}
+    </div>
+  {/if}
+{/if}

package/dist/components/containers/bottom-sheet/BottomSheet.svelte.d.ts

@@ -1,12 +1,17 @@
 import type { BottomSheetProps } from './types.js';
 /**
- * Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
+ * Bottom sheets show secondary content anchored to the bottom of the screen.
  *
- * They provide access to supplementary content and actions, such as navigation or a menu,
- * while keeping the main screen content visible.
+ * - **Modal** (default): a native `<dialog>` above a scrim. It dismisses on Esc, a scrim tap, a
+ * downward drag, or activating the drag handle.
+ * - **Standard**: no scrim, the rest of the screen stays usable. Dragging or activating the handle
+ * switches between expanded and collapsed to `peekHeight`.
  *
- * @see https://m3.material.io/components/bottom-sheets/overview
+ * Visibility is controlled with `bind:open`; the sheet stays mounted until its exit animation
+ * finishes. The content scrolls inside the sheet once it reaches its maximum height.
+ *
+ * @see https://m3.material.io/components/bottom-sheets/specs
  */
-declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "open">;
+declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "open" | "expanded">;
 type BottomSheet = ReturnType<typeof BottomSheet>;
 export default BottomSheet;

package/dist/components/containers/bottom-sheet/index.d.ts

@@ -1,2 +1,3 @@
+export * from './theme.js';
 export * from './types.js';
 export { default as BottomSheet } from './BottomSheet.svelte';

package/dist/components/containers/bottom-sheet/index.js

@@ -1,5 +1,6 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // re-export TS/JS modules from this folder
+export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
 export { default as BottomSheet } from './BottomSheet.svelte';

package/dist/components/containers/bottom-sheet/theme.d.ts

@@ -0,0 +1,45 @@
+import { type VariantProps } from 'tailwind-variants';
+export type BottomSheetVariants = VariantProps<typeof bottomSheet>;
+export declare const bottomSheet: import("tailwind-variants").TVReturnType<{
+    variant: {
+        modal: {
+            base: string[];
+        };
+        standard: {};
+    };
+}, {
+    base: string[];
+    container: string[];
+    handleArea: string;
+    handle: string;
+    handleBar: string;
+    body: string;
+}, undefined, {
+    variant: {
+        modal: {
+            base: string[];
+        };
+        standard: {};
+    };
+}, {
+    base: string[];
+    container: string[];
+    handleArea: string;
+    handle: string;
+    handleBar: string;
+    body: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        modal: {
+            base: string[];
+        };
+        standard: {};
+    };
+}, {
+    base: string[];
+    container: string[];
+    handleArea: string;
+    handle: string;
+    handleBar: string;
+    body: string;
+}>>;

package/dist/components/containers/bottom-sheet/theme.js

@@ -0,0 +1,42 @@
+import { tv } from 'tailwind-variants';
+/*
+  M3 bottom sheet (https://m3.material.io/components/bottom-sheets/specs): `surface-container-low`
+  at elevation 1, 28dp top corners. Full window width up to 640dp; past 640dp it keeps 56dp side
+  margins. It stops 72dp below the top of the window (56dp past 640dp) and its content scrolls
+  inside it. The drag handle is 32×4dp `on-surface-variant` at 40%, with 22dp above and below.
+
+  `base` is what enters and exits (the dialog, or the standard sheet's wrapper); `container` is
+  the surface itself, which follows the drag.
+*/
+export const bottomSheet = tv({
+    slots: {
+        base: [
+            'fixed inset-x-spacing-0 top-auto bottom-spacing-0 z-40 mx-auto mt-auto mb-spacing-0 p-spacing-0',
+            'w-full max-w-160 sm:w-[calc(100%-7rem)]',
+            'max-h-[calc(100dvh-4.5rem)] sm:max-h-[calc(100dvh-3.5rem)]',
+            'overflow-visible bg-transparent outline-none'
+        ],
+        container: [
+            'bg-md-sys-color-surface-container-low text-md-sys-color-on-surface shadow-elevation-1',
+            'flex max-h-[inherit] flex-col rounded-t-[28px] will-change-transform'
+        ],
+        handleArea: 'flex h-spacing-600 shrink-0 cursor-grab touch-none justify-center active:cursor-grabbing',
+        handle: 'md-sys-state-focus-indicator flex h-spacing-600 w-spacing-600 items-center justify-center rounded-full outline-none',
+        handleBar: 'bg-md-sys-color-on-surface-variant/40 h-spacing-50 w-spacing-400 rounded-full',
+        body: 'min-h-spacing-0 flex-1 overflow-y-auto overscroll-contain pb-[env(safe-area-inset-bottom)]'
+    },
+    variants: {
+        variant: {
+            modal: {
+                base: [
+                    'backdrop:bg-md-sys-color-scrim/32 backdrop:transition-[background-color]',
+                    'backdrop:md-sys-motion-effects starting:backdrop:bg-transparent',
+                    'data-[state=closed]:pointer-events-none',
+                    'data-[state=closed]:backdrop:bg-transparent'
+                ]
+            },
+            standard: {}
+        }
+    },
+    defaultVariants: { variant: 'modal' }
+});