@noxlovette/material 0.4.8 → 0.5.1

package/dist/components/buttons/FABMenuItem.svelte

@@ -1,13 +1,15 @@
 <!--
 @component
-An individual action within a FAB menu.
+An individual action within a FAB menu. Wraps bits-ui's `DropdownMenu.Item`, so it gets the
+`menuitem` role, arrow-key navigation, and closes the menu when selected. Must be rendered
+inside a `FAB` with `withMenu`.
 -->
 <script lang="ts">
   import clsx from 'clsx';
   import { fabMenuItem } from './theme.js';
   import type { FABMenuItemProps } from './types.js';
   import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
-  import { Button, type ButtonRootProps } from 'bits-ui';
+  import { Button, DropdownMenu, type DropdownMenuItemProps } from 'bits-ui';
 
   let {
     class: className,
@@ -16,6 +18,7 @@ An individual action within a FAB menu.
     children,
     iconProps,
     formaction,
+    disabled,
     ...restProps
   }: FABMenuItemProps = $props();
 
@@ -23,21 +26,21 @@ An individual action within a FAB menu.
   const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
-<Button.Root
-  {formaction}
-  class={btnCls}
-  data-cy="m3-fab-menu-item"
-  {...restProps as ButtonRootProps}
->
-  {#if iconProps}
-    {#if loading}
-      <LoadingIndicator />
-    {:else}
-      <Icon class={icon()} {...iconProps} />
-    {/if}
-  {:else if loading}
-    <LoadingIndicator />
-  {/if}
-  {@render children?.()}
-  <Layer />
-</Button.Root>
+<!-- Spread onto the Item, not the button: bits-ui merges (and chains handlers of) these into `props`. -->
+<DropdownMenu.Item {disabled} {...restProps as DropdownMenuItemProps}>
+  {#snippet child({ props })}
+    <Button.Root {formaction} {disabled} data-cy="m3-fab-menu-item" {...props} class={btnCls}>
+      {#if iconProps}
+        {#if loading}
+          <LoadingIndicator />
+        {:else}
+          <Icon class={icon()} {...iconProps} />
+        {/if}
+      {:else if loading}
+        <LoadingIndicator />
+      {/if}
+      {@render children?.()}
+      <Layer />
+    </Button.Root>
+  {/snippet}
+</DropdownMenu.Item>

package/dist/components/buttons/FABMenuItem.svelte.d.ts

@@ -1,5 +1,9 @@
 import type { FABMenuItemProps } from './types.js';
-/** An individual action within a FAB menu. */
+/**
+ * An individual action within a FAB menu. Wraps bits-ui's `DropdownMenu.Item`, so it gets the
+ * `menuitem` role, arrow-key navigation, and closes the menu when selected. Must be rendered
+ * inside a `FAB` with `withMenu`.
+ */
 declare const FABMenuItem: import("svelte").Component<FABMenuItemProps, {}, "">;
 type FABMenuItem = ReturnType<typeof FABMenuItem>;
 export default FABMenuItem;

package/dist/components/buttons/split-button/SplitButton.svelte

@@ -15,10 +15,9 @@ selectable items, no menu).
 @see https://m3.material.io/components/buttons/guidelines#834f5f31-e363-4d0f-bc4d-abac128f5f0e
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { DropdownMenu } from 'bits-ui';
   import clsx from 'clsx';
-  import { easeEmphasizedDecel } from '../../../animation/easing.js';
-  import { enterExit } from '../../../animation/enterExit.js';
   import Button from '../Button.svelte';
   import ButtonIcon from '../ButtonIcon.svelte';
   import { buttonIcon } from '../theme.js';
@@ -80,23 +79,17 @@ selectable items, no menu).
     </DropdownMenu.Trigger>
 
     <DropdownMenu.Portal>
-      <DropdownMenu.Content forceMount {align} sideOffset={4} class="z-100">
+      <DropdownMenu.Content {align} sideOffset={4} class="z-100">
         {#snippet child({ wrapperProps, props, open: isOpen })}
-          {#if isOpen}
-            <div {...wrapperProps} class={wrapperProps.class as any}>
-              <div
-                {...props}
-                class="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"
-                transition:enterExit={{
-                  duration: 200,
-                  easing: easeEmphasizedDecel,
-                  mode: 'scale'
-                }}
-              >
-                {@render menuChildren()}
-              </div>
+          <div {...wrapperProps} class={wrapperProps.class as any}>
+            <div
+              {...props}
+              class="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"
+              {@attach presence(() => isOpen, enterExit.scale)}
+            >
+              {@render menuChildren()}
             </div>
-          {/if}
+          </div>
         {/snippet}
       </DropdownMenu.Content>
     </DropdownMenu.Portal>

package/dist/components/buttons/split-button/theme.js

@@ -12,7 +12,7 @@ export const SPLIT_BUTTON_INNER_RADIUS = {
 export const splitButton = tv({
     slots: {
         root: 'inline-flex items-center gap-0.5',
-        icon: 'transition-transform duration-200'
+        icon: 'transition-transform md-sys-motion-fast-spatial'
     },
     variants: {
         open: {

package/dist/components/buttons/types.d.ts

@@ -146,9 +146,7 @@ export type FABProps = FABVariants & AnchorButtonAttributes & {
      */
     children?: Snippet;
 };
-export type FABMenuProps = HTMLAttributes<HTMLUListElement> & {
-    /** The FAB button element to position the menu relative to. */
-    anchorEl: HTMLElement;
+export type FABMenuProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * The menu items. Use `FABMenuItem` components.
      */
@@ -159,6 +157,8 @@ export type FABMenuItemProps = FABMenuItemVariants & AnchorButtonAttributes & {
      * The visual variant of the menu item.
      */
     variant?: FABMenuItemVariants['variant'];
+    /** Whether the menu item is disabled (skipped by keyboard navigation). */
+    disabled?: boolean;
     /** Whether the menu item is in a loading state. */
     loading?: boolean;
     /**

package/dist/components/cards/theme.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const card = tv({
     slots: {
-        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg [transition:box-shadow_var(--md-sys-motion-duration,200ms)_var(--md-sys-motion-timing-function,cubic-bezier(0.34,0.8,0.34,1))]',
+        base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',
         icon: 'size-6 text-[24px] text-md-sys-color-primary'
     },
     variants: {

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

@@ -1,9 +1,7 @@
 <!--
-  BottomSheet 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}<BottomSheet ...>{/if}). `close` is a required callback the sheet invokes on Esc,
-  backdrop click, or dragging the handle down below a minimum height ('esc' | 'click' | 'low') —
-  the consumer is expected to flip its own `open` flag to false in response.
+  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').
 -->
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
@@ -24,12 +22,10 @@
 <Story name="Playground" asChild>
   <div class="p-6">
     <Button onclick={() => (playgroundOpen = true)}>Open bottom sheet</Button>
-    {#if playgroundOpen}
-      <BottomSheet close={() => (playgroundOpen = false)}>
-        <MenuItem iconProps={{ name: 'share' }}>Share</MenuItem>
-        <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
-        <MenuItem iconProps={{ name: 'download' }}>Download</MenuItem>
-      </BottomSheet>
-    {/if}
+    <BottomSheet bind:open={playgroundOpen}>
+      <MenuItem iconProps={{ name: 'share' }}>Share</MenuItem>
+      <MenuItem iconProps={{ name: 'link' }}>Copy link</MenuItem>
+      <MenuItem iconProps={{ name: 'download' }}>Download</MenuItem>
+    </BottomSheet>
   </div>
 </Story>

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

@@ -9,31 +9,37 @@ while keeping the main screen content visible.
 -->
 <script lang="ts">
   import type { BottomSheetProps } from './types.js';
-  import type { TransitionConfig } from 'svelte/transition';
-  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../../animation/easing.js';
-  import { outroClass } from '../../../animation/outroClass.js';
+  import { untrack } from 'svelte';
+  import { enterExit, Presence } from '../../../animation/index.js';
 
-  let { children, close }: BottomSheetProps = $props();
+  const DEFAULT_HEIGHT = 480;
+  const DISMISS_HEIGHT = 48;
 
-  let height = $state(480);
+  let { children, open = $bindable(true), close }: BottomSheetProps = $props();
+
+  let height = $state(DEFAULT_HEIGHT);
   let container: HTMLDivElement | undefined = $state();
   let isDragging = $state(false);
   let startY = $state(0);
 
-  const open = (node: HTMLDialogElement) => node.showModal();
+  const sheet = new Presence(() => open);
+
+  // 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 heightAnim = (
-    node: HTMLDialogElement,
-    options: { duration: number; easing: typeof easeEmphasizedDecel }
-  ): TransitionConfig => {
-    if (node.clientHeight < height) height = node.clientHeight;
-    return {
-      duration: options.duration,
-      easing: options.easing,
-      css: (t) => `max-height: ${t * height}px`
-    };
+  const dismiss = (reason: 'esc' | 'click' | 'low') => {
+    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));
+  });
+
   const moveWheel = (e: WheelEvent) => {
     e.preventDefault();
     height += e.deltaY;
@@ -49,7 +55,7 @@ while keeping the main screen content visible.
   };
 
   $effect(() => {
-    if (height < 48) close('low');
+    if (height < DISMISS_HEIGHT && untrack(() => open)) dismiss('low');
   });
 </script>
 
@@ -60,51 +66,57 @@ while keeping the main screen content visible.
   ontouchend={() => (isDragging = false)}
 />
 
-<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"
-  use:open
-  use:outroClass
-  oncancel={(e) => {
-    e.preventDefault();
-    close('esc');
-  }}
-  onmousedown={(e) => {
-    if (e.target != e.currentTarget) return;
-    close('click');
-  }}
-  onwheel={moveWheel}
-  in:heightAnim={{ easing: easeEmphasizedDecel, duration: 400 }}
-  out:heightAnim={{ easing: easeEmphasizedAccel, duration: 300 }}
->
-  <div class="px-4" bind:this={container}>
-    <!-- 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>
+{#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}>
+      <!-- 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>
+      {@render children()}
     </div>
-    {@render children()}
-  </div>
-</dialog>
+  </dialog>
+{/if}
 
 <style>
   dialog::backdrop {
     background-color: rgba(0, 0, 0, 0.5);
-    animation: backdrop 400ms;
+    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:global(.leaving)::backdrop {
+  dialog[data-state='closed']::backdrop {
     background-color: transparent;
-    animation: backdropReverse 400ms;
+    animation: backdropReverse var(--md-sys-motion-duration-fast-effects-spring)
+      var(--md-sys-motion-timing-function-fast-effects-spring);
   }
   @keyframes backdrop {
     from {

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

@@ -7,6 +7,6 @@ import type { BottomSheetProps } from './types.js';
  *
  * @see https://m3.material.io/components/bottom-sheets/overview
  */
-declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "">;
+declare const BottomSheet: import("svelte").Component<BottomSheetProps, {}, "open">;
 type BottomSheet = ReturnType<typeof BottomSheet>;
 export default BottomSheet;

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

@@ -9,8 +9,14 @@ export interface BottomSheetProps {
      */
     children: Snippet;
     /**
-     * Callback function to close the bottom sheet.
+     * Whether the sheet is shown. Bind it (`bind:open`) so the sheet can play its exit animation
+     * before unmounting.
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Called when the user dismisses the sheet.
      * @param reason The reason for closing ('esc' key, 'click' outside, or 'low' drag height).
      */
-    close: (reason: 'esc' | 'click' | 'low') => void;
+    close?: (reason: 'esc' | 'click' | 'low') => void;
 }

package/dist/components/containers/context-menu/ContextMenu.svelte

@@ -30,13 +30,12 @@ you need it (e.g. a table row):
 @see https://m3.material.io/components/menus/guidelines
 -->
 <script lang="ts">
+  import { enterExit, presence } from '../../../animation/index.js';
   import { ContextMenu as BitsContextMenu } from 'bits-ui';
   import { contextMenu } from './theme.js';
   import type { ContextMenuProps, ContextMenuDataItem } from './types.js';
   import Icon from '../../../utils/icon/Icon.svelte';
   import Divider from '../divider/Divider.svelte';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasizedDecel } from '../../../animation/easing.js';
 
   let {
     items = [],
@@ -75,25 +74,19 @@ you need it (e.g. a table row):
         <Icon name="chevron_right" class={theme.rightSlot()} />
       </BitsContextMenu.SubTrigger>
       <BitsContextMenu.Portal>
-        <BitsContextMenu.SubContent forceMount class={theme.content()}>
+        <BitsContextMenu.SubContent class={theme.content()}>
           {#snippet child({ wrapperProps, props, open })}
-            {#if open}
-              <div {...wrapperProps} class={wrapperProps.class as any}>
-                <div
-                  {...props}
-                  class={props.class as any}
-                  transition:enterExit={{
-                    duration: 200,
-                    easing: easeEmphasizedDecel,
-                    mode: 'scale'
-                  }}
-                >
-                  {#each item.items as subItem (subItem)}
-                    {@render MenuItem(subItem)}
-                  {/each}
-                </div>
+            <div {...wrapperProps} class={wrapperProps.class as any}>
+              <div
+                {...props}
+                class={props.class as any}
+                {@attach presence(() => open, enterExit.scale)}
+              >
+                {#each item.items as subItem (subItem)}
+                  {@render MenuItem(subItem)}
+                {/each}
               </div>
-            {/if}
+            </div>
           {/snippet}
         </BitsContextMenu.SubContent>
       </BitsContextMenu.Portal>
@@ -142,25 +135,19 @@ you need it (e.g. a table row):
   </BitsContextMenu.Trigger>
 
   <BitsContextMenu.Portal>
-    <BitsContextMenu.Content forceMount class={theme.content()}>
+    <BitsContextMenu.Content class={theme.content()}>
       {#snippet child({ wrapperProps, props, open })}
-        {#if open}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
-            <div
-              {...props}
-              class={props.class as any}
-              transition:enterExit={{
-                duration: 200,
-                easing: easeEmphasizedDecel,
-                mode: 'scale'
-              }}
-            >
-              {#each items as item (item)}
-                {@render MenuItem(item)}
-              {/each}
-            </div>
+        <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div
+            {...props}
+            class={props.class as any}
+            {@attach presence(() => open, enterExit.scale)}
+          >
+            {#each items as item (item)}
+              {@render MenuItem(item)}
+            {/each}
           </div>
-        {/if}
+        </div>
       {/snippet}
     </BitsContextMenu.Content>
   </BitsContextMenu.Portal>

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

@@ -9,14 +9,14 @@ export const contextMenu = tv({
         item: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
       px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
-      outline-none transition-colors duration-150
+      outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38
     `,
         subTrigger: `
       rounded-sm relative flex w-full cursor-pointer select-none items-center gap-2
       px-3 py-2 text-left md-sys-typescale-body-large text-md-sys-color-on-surface
-      outline-none transition-colors duration-150
+      outline-none transition-colors md-sys-motion-fast-effects
       hover:bg-md-sys-color-on-surface/8 data-[state=open]:bg-md-sys-color-on-surface/8
       data-[highlighted]:bg-md-sys-color-on-surface/8
       data-[disabled]:cursor-not-allowed data-[disabled]:opacity-38

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -13,8 +13,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
   import { dialogue } from './theme.js';
   import type { DialogueProps } from './types.js';
   import { Dialog } from 'bits-ui';
-  import { enterExit } from '../../../animation/enterExit.js';
-  import { easeEmphasized, easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { enterExit, presence } from '../../../animation/index.js';
   import { Button } from '../../buttons/index.js';
 
   let {
@@ -44,79 +43,64 @@ on screen until confirmed, dismissed, or a required action has been taken.
 
 <Dialog.Root bind:open {...rootRest}>
   <Dialog.Portal disabled={portalDisabled}>
-    <Dialog.Overlay forceMount>
+    <Dialog.Overlay>
       {#snippet child({ props, open })}
-        {#if open}
-          <div
-            {...props}
-            class={base()}
-            transition:enterExit={{
-              duration: 500,
-              easing: easeEmphasizedDecel
-            }}
-          ></div>
-        {/if}
+        <div {...props} class={base()} {@attach presence(() => open, enterExit.fade)}></div>
       {/snippet}
     </Dialog.Overlay>
-    <Dialog.Content forceMount>
+    <Dialog.Content>
       {#snippet child({ props, open: isOpen })}
-        {#if isOpen}
-          <form
-            method="POST"
-            action={confirmAction}
-            use:enhance
-            {...props}
-            {...formProps}
-            class={inner({ class: className })}
-            style:min-width={minWidth}
-            style:max-width={maxWidth}
-            transition:enterExit={{
-              duration: 500,
-              easing: easeEmphasized,
-              mode: 'dialog-m3'
-            }}
-          >
-            {#if headline}
-              <Dialog.Title class={headlineContainer()}>
-                {headline}
-              </Dialog.Title>
-            {/if}
-            {#if supportingText}
-              <Dialog.Description class={supportingTextContainer()}>
-                {supportingText}
-              </Dialog.Description>
-            {/if}
+        <form
+          method="POST"
+          action={confirmAction}
+          use:enhance
+          {...props}
+          {...formProps}
+          class={inner({ class: className })}
+          style:min-width={minWidth}
+          style:max-width={maxWidth}
+          {@attach presence(() => isOpen, enterExit.dialog)}
+        >
+          {#if headline}
+            <Dialog.Title class={headlineContainer()}>
+              {headline}
+            </Dialog.Title>
+          {/if}
+          {#if supportingText}
+            <Dialog.Description class={supportingTextContainer()}>
+              {supportingText}
+            </Dialog.Description>
+          {/if}
 
-            {#if children}
-              <div class="flex w-full flex-col gap-4">
-                {@render children()}
-              </div>
-            {/if}
+          {#if children}
+            <div class="flex w-full flex-col gap-4">
+              {@render children()}
+            </div>
+          {/if}
 
-            <div class={buttonContainer()}>
-              <Button
-                type="button"
-                variant="text"
-                data-cy="dialogue-cancel"
-                onclick={() => (open = false)}
-              >
-                {cancelText}
-              </Button>
+          <div class={buttonContainer()}>
+            <Button
+              type="button"
+              variant="text"
+              data-cy="dialogue-cancel"
+              onclick={() => (open = false)}
+            >
+              {cancelText}
+            </Button>
 
-              {#if delegateClose}
+            {#if delegateClose}
+              <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
+                {confirmText}
+              </Button>
+            {:else}
+              <Dialog.Close>
                 <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
                   {confirmText}
                 </Button>
-              {:else}
-                <Dialog.Close>
-                  <Button type="submit" {disabled} {loading} data-cy="dialogue-confirm">
-                    {confirmText}
-                  </Button>
-                </Dialog.Close>
-              {/if}
-            </div>
-          </form>
-        {/if}
+              </Dialog.Close>
+            {/if}
+          </div>
+        </form>
       {/snippet}
     </Dialog.Content>
   </Dialog.Portal>