@noxlovette/material 0.4.7 → 0.5.0

package/dist/attachments/clickOutside.js

@@ -0,0 +1,18 @@
+import { on } from 'svelte/events';
+/**
+ * Calls `handler` when a click lands outside the element. Listens in the capture phase so
+ * it still fires when something inside the page stops propagation.
+ *
+ * Attach it conditionally so the document listener only exists while there is something to
+ * dismiss:
+ *
+ * ```svelte
+ * <div {@attach open && clickOutside(() => (open = false))}>...</div>
+ * ```
+ */
+export function clickOutside(handler) {
+    return (node) => on(document, 'click', (event) => {
+        if (!event.composedPath().includes(node))
+            handler(event);
+    }, { capture: true });
+}

package/dist/attachments/index.d.ts

@@ -0,0 +1 @@
+export * from './clickOutside.js';

package/dist/attachments/index.js

@@ -0,0 +1 @@
+export * from './clickOutside.js';

package/dist/components/buttons/FAB.svelte

@@ -15,8 +15,7 @@ Floating action buttons (FABs) help people take primary actions.
   import type { FABProps } from './types.js';
   import FABMenu from './FABMenu.svelte';
   import { Layer, Icon, LoadingIndicator } from '../../utils/index.js';
-  import { clickOutside } from '../../actions/index.js';
-  import { Button, type ButtonRootProps } from 'bits-ui';
+  import { Button, DropdownMenu, type ButtonRootProps } from 'bits-ui';
 
   let {
     children,
@@ -30,44 +29,43 @@ Floating action buttons (FABs) help people take primary actions.
     expanded = false,
     class: className,
     withMenu,
+    onclick,
     ...restProps
   }: FABProps = $props();
 
   const { base, icon, label: labelClass } = $derived(fab({ size, config, expanded }));
 
   let showMenu = $state(false);
-  let wrapperEl = $state<HTMLElement | null>(null);
 
   const btnCls = $derived(
     base({
       class: clsx(
         className,
-        'transition-[border-radius] duration-300',
+        'transition-[border-radius] md-sys-motion-fast-spatial',
         withMenu && showMenu && '!rounded-full'
       )
     })
   );
 
-  function handleClick(e: MouseEvent) {
+  function handleClick(e: MouseEvent, triggerClick?: unknown) {
     if (disabled || loading) {
       e.preventDefault();
       return;
     }
-    if (withMenu) {
-      e.preventDefault();
-      showMenu = !showMenu;
-    }
+    (onclick as ((e: MouseEvent) => void) | null | undefined)?.(e);
+    if (typeof triggerClick === 'function') triggerClick(e);
   }
 </script>
 
-<div class="contents" bind:this={wrapperEl} use:clickOutside={() => (showMenu = false)}>
+{#snippet fabButton(triggerProps: Record<string, unknown>)}
   <Button.Root
     {disabled}
     {formaction}
-    class={btnCls}
-    onclick={handleClick}
     data-cy="m3-fab"
     {...restProps as ButtonRootProps}
+    {...triggerProps}
+    class={btnCls}
+    onclick={(e: MouseEvent) => handleClick(e, triggerProps.onclick)}
   >
     {#if loading}
       <LoadingIndicator />
@@ -81,10 +79,19 @@ Floating action buttons (FABs) help people take primary actions.
       </p>
     {/if}
   </Button.Root>
+{/snippet}
 
-  {#if withMenu && showMenu && wrapperEl?.firstElementChild}
-    <FABMenu anchorEl={wrapperEl.firstElementChild as HTMLElement}>
+{#if withMenu}
+  <DropdownMenu.Root bind:open={showMenu}>
+    <DropdownMenu.Trigger disabled={disabled || loading}>
+      {#snippet child({ props })}
+        {@render fabButton(props)}
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <FABMenu>
       {@render children?.()}
     </FABMenu>
-  {/if}
-</div>
+  </DropdownMenu.Root>
+{:else}
+  {@render fabButton({})}
+{/if}

package/dist/components/buttons/FABMenu.svelte

@@ -1,42 +1,37 @@
 <!--
 @component
-A menu container for multiple FAB actions.
+The floating panel of a FAB menu. Rendered by `FAB` when `withMenu` is set — must live inside
+its `DropdownMenu.Root`, which owns open state, positioning, and outside-click/Escape dismissal.
 Should be used with `FABMenuItem` as children.
 -->
 <script lang="ts">
   import clsx from 'clsx';
-  import { flip } from '@floating-ui/dom';
+  import { DropdownMenu } from 'bits-ui';
   import { fabMenu } from './theme.js';
   import type { FABMenuProps } from './types.js';
-  import { enterExit } from '../../animation/enterExit.js';
-  import { easeEmphasizedAccel, easeEmphasizedDecel } from '../../animation/easing.js';
-  import { floating, portal } from '../../actions/index.js';
+  import { enterExit, presence } from '../../animation/index.js';
 
-  let { children, class: className, anchorEl, ...restProps }: FABMenuProps = $props();
+  let { children, class: className, ...restProps }: FABMenuProps = $props();
 
   const { base } = fabMenu();
 </script>
 
-<ul
-  data-cy="m3-fab-menu"
-  {...restProps}
-  class={base({ class: clsx(className, 'fab-menu overflow-y-auto') })}
-  in:enterExit={{ duration: 300, easing: easeEmphasizedDecel, mode: 'scale' }}
-  out:enterExit={{ duration: 200, easing: easeEmphasizedAccel, mode: 'scale' }}
-  use:portal
-  use:floating={{
-    reference: anchorEl,
-    strategy: 'fixed',
-    placement: 'top-end',
-    offsetPx: 8,
-    middleware: [flip()]
-  }}
->
-  {@render children()}
-</ul>
-
-<style>
-  .fab-menu {
-    transform-origin: bottom right;
-  }
-</style>
+<DropdownMenu.Portal>
+  <DropdownMenu.Content side="top" align="end" sideOffset={8} collisionPadding={8}>
+    {#snippet child({ wrapperProps, props, open })}
+      <div {...wrapperProps}>
+        <div
+          data-cy="m3-fab-menu"
+          {...restProps}
+          {...props}
+          class={base({
+            class: clsx(className, 'overflow-y-auto')
+          })}
+          {@attach presence(() => open, enterExit.scale)}
+        >
+          {@render children()}
+        </div>
+      </div>
+    {/snippet}
+  </DropdownMenu.Content>
+</DropdownMenu.Portal>

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

@@ -1,6 +1,7 @@
 import type { FABMenuProps } from './types.js';
 /**
- * A menu container for multiple FAB actions.
+ * The floating panel of a FAB menu. Rendered by `FAB` when `withMenu` is set — must live inside
+ * its `DropdownMenu.Root`, which owns open state, positioning, and outside-click/Escape dismissal.
  * Should be used with `FABMenuItem` as children.
  */
 declare const FABMenu: import("svelte").Component<FABMenuProps, {}, "">;

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;
 }