@noxlovette/material 0.4.8 → 0.5.1

package/dist/animation/sharedAxisTransition.d.ts

@@ -1,38 +1,58 @@
-import type { TransitionOptions } from './transitionTypes.js';
-type SharedAxisOptions = {
-    direction: 'X' | 'Y';
-    /**
-     * true if this element is on the top/left of things
-     * if it's first, then use transition: and set it to true
-     * if it's last, then use transition: and set it to false
-     * if it's in between, use separate in: and out: statements:
-     * > set it to false when it's interacting with the left side, and true when interacting with its right
-     * > in order to implement this, try something like using a prevPage variable:
-     * > ```
-     * > {:else if page == 1}
-     * > <div
-     * >   in:sharedAxisTransition={{
-     * >     direction: "X",
-     * >     rightSeam: prevPage > 1, (if we're transitioning from a page on the right, rightseam is true)
-     * >   }}
-     * >   out:sharedAxisTransition={{
-     * >     direction: "X",
-     * >     rightSeam: page > 1, (if we're transitioning to a page on the right, rightseam is true)
-     * >   }}
-     * > >
-     * > ```
-     *
-     * i went insane over figuring this out :)
-     */
-    rightSeam: boolean;
-} | {
-    direction: 'Z';
-    leaving: boolean;
-};
-export declare const sharedAxisTransition: (node: Element, options: TransitionOptions & SharedAxisOptions) => {
-    delay: number | undefined;
-    duration: number;
-    easing: (t: number) => number;
-    css: (t: number, u: number) => string;
-};
+import { type ViewTransitionTargetDefinition } from 'motion';
+import { type SpringToken } from './spring.js';
+export type NavigationDirection = 'forward' | 'backward';
+interface NavigationOptions {
+    /** The region whose content changes. Omit to transition the whole page. */
+    target?: ViewTransitionTargetDefinition;
+    /** `forward` moves deeper / to the next item, `backward` returns. */
+    direction?: NavigationDirection;
+    spring?: SpringToken;
+}
+export interface SharedAxisOptions extends NavigationOptions {
+    /** `x` for horizontal steps, `y` for vertical, `z` for parent → child depth. */
+    axis?: 'x' | 'y' | 'z';
+}
+/**
+ * M3 forward and backward (shared axis): outgoing and incoming content travel together along one
+ * axis while fading through each other.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#forward-and-backward
+ *
+ * The default for common hierarchical navigation (https://m3.material.io/styles/motion/transitions/applying-transitions).
+ * Don't use it for hero moments; use `containerTransform` for those. Keep one axis per relationship
+ * across the app (coherent spatial model), and move one `target` region as a unit instead of
+ * animating many elements independently.
+ *
+ * `update` performs the DOM change (`async () => { step++; await tick(); }`). Built on Motion's
+ * `animateView()` — both states never need to coexist in the DOM.
+ *
+ * Not built into any component: hierarchy levels and wizard steps live in the consuming app.
+ */
+export declare const sharedAxis: (update: () => void | Promise<void>, { target, axis, direction, spring }?: SharedAxisOptions) => import("motion-dom").ViewTransitionBuilder;
+/**
+ * M3 lateral: peer screens at the same level (tabs, carousels) slide past each other edge to edge,
+ * without fading — the new screen pushes the old one out.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ *
+ * Only for peers in one set (https://m3.material.io/styles/motion/transitions/applying-transitions). Never use it for hierarchical screens
+ * (use `sharedAxis`) or navbar/rail/drawer destinations (use `fadeThrough`, since the implied swipe
+ * conflicts with carousels and swipeable list items). Don't add a fade: it hides the peer
+ * relationship and makes the slide look like forward/backward.
+ *
+ * Built in: `TabHolder` (switching content panels) and `DateField`/`DateRangeField` (changing the
+ * visible month). Any new component that pages between peer views must use this too.
+ */
+export declare const lateral: (update: () => void | Promise<void>, { target, direction, spring }?: NavigationOptions) => import("motion-dom").ViewTransitionBuilder;
+/**
+ * M3 top level (fade through): destinations with no spatial relationship, e.g. navigation bar
+ * items. The outgoing screen fades out, then the incoming one fades in while scaling up from 92%.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#top-level
+ *
+ * The quick fade for navigation bar, rail and drawer destinations (https://m3.material.io/styles/motion/transitions/applying-transitions).
+ * It deliberately creates no spatial connection between screens, and it's the pattern to use
+ * instead of `lateral` there.
+ *
+ * Not built into `Navbar`/`Rail`: they don't own the content region that changes, so the app wraps
+ * its own route change in this.
+ */
+export declare const fadeThrough: (update: () => void | Promise<void>, { target, spring }?: Omit<NavigationOptions, "direction">) => import("motion-dom").ViewTransitionBuilder;
 export {};

package/dist/animation/sharedAxisTransition.js

@@ -1,23 +1,75 @@
-import { easeEmphasized } from './easing.js';
-/* protip: set a background color on the items, and utilize position relative + absolute to let them overlap */
-export const sharedAxisTransition = (node, options) => {
-    void node;
-    return {
-        delay: options.delay,
-        duration: options.duration ?? 500,
-        easing: options.easing ?? easeEmphasized,
-        css: (t, u) => {
-            const opacity = (t - 0.35) * (1 / 0.35);
-            if (options.direction == 'Z') {
-                const factor = options.leaving ? u * 0.1 + 1 : t * 0.2 + 0.8;
-                let css = `transform: scale(${factor.toFixed(3)});`;
-                if (!options.leaving)
-                    css += `opacity: ${opacity.toFixed(3)};`;
-                return css;
-            }
-            const factor = u * (options.rightSeam ? -30 : 30);
-            return (`transform: translate${options.direction}(${factor.toFixed(3)}px);` +
-                `opacity: ${opacity.toFixed(3)}`);
-        }
-    };
+import { animateView } from 'motion';
+import { springTokens, springTransition } from './spring.js';
+const SHARED_AXIS_OFFSET_PX = 30;
+const view = (update, target, spring) => {
+    const builder = animateView(update, springTransition(spring));
+    return target ? builder.add(target) : builder;
 };
+/* Outgoing content clears quickly; incoming content waits a beat so the two never overlap fully.
+   M3 "clean fades" (https://m3.material.io/styles/motion/transitions/applying-transitions): fade out before fading in; any cross-fade stays short
+   and hidden in the fastest part of the motion. Don't lengthen these. */
+const fadeOut = springTransition(springTokens.fastEffects);
+const fadeIn = { ...springTransition(springTokens.effects), delay: 0.05 };
+/**
+ * M3 forward and backward (shared axis): outgoing and incoming content travel together along one
+ * axis while fading through each other.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#forward-and-backward
+ *
+ * The default for common hierarchical navigation (https://m3.material.io/styles/motion/transitions/applying-transitions).
+ * Don't use it for hero moments; use `containerTransform` for those. Keep one axis per relationship
+ * across the app (coherent spatial model), and move one `target` region as a unit instead of
+ * animating many elements independently.
+ *
+ * `update` performs the DOM change (`async () => { step++; await tick(); }`). Built on Motion's
+ * `animateView()` — both states never need to coexist in the DOM.
+ *
+ * Not built into any component: hierarchy levels and wizard steps live in the consuming app.
+ */
+export const sharedAxis = (update, { target, axis = 'x', direction = 'forward', spring = springTokens.spatial } = {}) => {
+    const forward = direction === 'forward';
+    const [outgoing, incoming] = axis === 'z'
+        ? [`scale(${forward ? 1.1 : 0.8})`, `scale(${forward ? 0.8 : 1.1})`]
+        : [
+            `translate${axis.toUpperCase()}(${forward ? -SHARED_AXIS_OFFSET_PX : SHARED_AXIS_OFFSET_PX}px)`,
+            `translate${axis.toUpperCase()}(${forward ? SHARED_AXIS_OFFSET_PX : -SHARED_AXIS_OFFSET_PX}px)`
+        ];
+    const rest = axis === 'z' ? 'scale(1)' : `translate${axis.toUpperCase()}(0px)`;
+    return view(update, target, spring)
+        .old({ opacity: [1, 0], transform: [rest, outgoing] }, { opacity: fadeOut })
+        .new({ opacity: [0, 1], transform: [incoming, rest] }, { opacity: fadeIn });
+};
+/**
+ * M3 lateral: peer screens at the same level (tabs, carousels) slide past each other edge to edge,
+ * without fading — the new screen pushes the old one out.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#lateral
+ *
+ * Only for peers in one set (https://m3.material.io/styles/motion/transitions/applying-transitions). Never use it for hierarchical screens
+ * (use `sharedAxis`) or navbar/rail/drawer destinations (use `fadeThrough`, since the implied swipe
+ * conflicts with carousels and swipeable list items). Don't add a fade: it hides the peer
+ * relationship and makes the slide look like forward/backward.
+ *
+ * Built in: `TabHolder` (switching content panels) and `DateField`/`DateRangeField` (changing the
+ * visible month). Any new component that pages between peer views must use this too.
+ */
+export const lateral = (update, { target, direction = 'forward', spring = springTokens.spatial } = {}) => {
+    const sign = direction === 'forward' ? 1 : -1;
+    const builder = view(update, target, spring)
+        .old({ transform: ['translateX(0%)', `translateX(${-sign * 100}%)`] })
+        .new({ transform: [`translateX(${sign * 100}%)`, 'translateX(0%)'] });
+    return target ? builder.crop(true) : builder;
+};
+/**
+ * M3 top level (fade through): destinations with no spatial relationship, e.g. navigation bar
+ * items. The outgoing screen fades out, then the incoming one fades in while scaling up from 92%.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#top-level
+ *
+ * The quick fade for navigation bar, rail and drawer destinations (https://m3.material.io/styles/motion/transitions/applying-transitions).
+ * It deliberately creates no spatial connection between screens, and it's the pattern to use
+ * instead of `lateral` there.
+ *
+ * Not built into `Navbar`/`Rail`: they don't own the content region that changes, so the app wraps
+ * its own route change in this.
+ */
+export const fadeThrough = (update, { target, spring = springTokens.spatial } = {}) => view(update, target, spring)
+    .old({ opacity: [1, 0] }, fadeOut)
+    .new({ opacity: [0, 1], transform: ['scale(0.92)', 'scale(1)'] }, { opacity: { ...springTransition(springTokens.effects), delay: 0.09 } });

package/dist/animation/skeleton.d.ts

@@ -0,0 +1,16 @@
+import type { Attachment } from 'svelte/attachments';
+/**
+ * M3 skeleton loader: a placeholder pulses until real content replaces it. Swap the placeholder
+ * for the content with `presence(…, enterExit.fade)` so the reveal is a fade, not a cut.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#skeleton-loaders
+ *
+ * M3 "stable layouts" (https://m3.material.io/styles/motion/transitions/applying-transitions): the placeholder takes the loaded
+ * content's footprint so nothing pops in or shifts position when the data arrives.
+ *
+ * Not built into any component — none of them load their own data. Apps apply it to placeholders.
+ *
+ * ```svelte
+ * <div class="bg-md-sys-color-surface-container-highest h-4 rounded-sm" {@attach skeleton}></div>
+ * ```
+ */
+export declare const skeleton: Attachment<HTMLElement>;

package/dist/animation/skeleton.js

@@ -0,0 +1,28 @@
+import { animate } from 'motion';
+import { springTokens, springTransition } from './spring.js';
+/* Hold at each end of the pulse — a critically damped spring alone settles in ~370ms, which reads
+   as flicker. Not an M3 value: tune by eye. */
+const PULSE_HOLD_S = 0.5;
+/**
+ * M3 skeleton loader: a placeholder pulses until real content replaces it. Swap the placeholder
+ * for the content with `presence(…, enterExit.fade)` so the reveal is a fade, not a cut.
+ * https://m3.material.io/styles/motion/transitions/transition-patterns#skeleton-loaders
+ *
+ * M3 "stable layouts" (https://m3.material.io/styles/motion/transitions/applying-transitions): the placeholder takes the loaded
+ * content's footprint so nothing pops in or shifts position when the data arrives.
+ *
+ * Not built into any component — none of them load their own data. Apps apply it to placeholders.
+ *
+ * ```svelte
+ * <div class="bg-md-sys-color-surface-container-highest h-4 rounded-sm" {@attach skeleton}></div>
+ * ```
+ */
+export const skeleton = (node) => {
+    const controls = animate(node, { opacity: [1, 0.4] }, {
+        ...springTransition(springTokens.slowEffects),
+        repeat: Infinity,
+        repeatType: 'reverse',
+        repeatDelay: PULSE_HOLD_S
+    });
+    return () => controls.stop();
+};

package/dist/animation/spring.d.ts

@@ -0,0 +1,61 @@
+import { spring } from 'motion';
+/**
+ * M3 Expressive spring tokens: `stiffness` plus a `dampingRatio`
+ *
+ * - **spatial** springs move things (position, size, shape) and overshoot slightly.
+ * - **effects** springs change things in place (opacity, color) and are critically damped.
+ *
+ * https://m3.material.io/styles/motion/overview/specs
+ */
+export declare const springTokens: {
+    readonly fastSpatial: {
+        readonly stiffness: 800;
+        readonly dampingRatio: 0.6;
+    };
+    readonly spatial: {
+        readonly stiffness: 380;
+        readonly dampingRatio: 0.8;
+    };
+    readonly slowSpatial: {
+        readonly stiffness: 200;
+        readonly dampingRatio: 0.8;
+    };
+    readonly fastEffects: {
+        readonly stiffness: 3800;
+        readonly dampingRatio: 1;
+    };
+    readonly effects: {
+        readonly stiffness: 1600;
+        readonly dampingRatio: 1;
+    };
+    readonly slowEffects: {
+        readonly stiffness: 800;
+        readonly dampingRatio: 1;
+    };
+};
+export type SpringToken = {
+    stiffness: number;
+    dampingRatio: number;
+};
+/**
+ * A spring token as Motion transition options, for `animate()` / `animateView()`. Physics-based
+ * (stiffness/damping, mass 1), so an animation that interrupts another inherits its velocity.
+ *
+ * ```ts
+ * animate(node, { transform: 'scale(1)' }, springTransition(springTokens.fastSpatial));
+ * ```
+ */
+export declare const springTransition: ({ stiffness, dampingRatio }: SpringToken) => {
+    readonly type: typeof spring;
+    readonly stiffness: number;
+    readonly damping: number;
+    readonly mass: 1;
+};
+/**
+ * A spring as CSS `transition` parts: a settle `duration` and a `linear()` `easing`.
+ * Used by `scripts/generate-motion-springs.ts` to bake the tokens into `styles/motion.css`.
+ */
+export declare const springCss: (token: SpringToken, resolutionMs?: number) => {
+    duration: string;
+    easing: string;
+};

package/dist/animation/spring.js

@@ -0,0 +1,53 @@
+import { generateLinearEasing, spring } from 'motion';
+/**
+ * M3 Expressive spring tokens: `stiffness` plus a `dampingRatio`
+ *
+ * - **spatial** springs move things (position, size, shape) and overshoot slightly.
+ * - **effects** springs change things in place (opacity, color) and are critically damped.
+ *
+ * https://m3.material.io/styles/motion/overview/specs
+ */
+export const springTokens = {
+    fastSpatial: { stiffness: 800, dampingRatio: 0.6 },
+    spatial: { stiffness: 380, dampingRatio: 0.8 },
+    slowSpatial: { stiffness: 200, dampingRatio: 0.8 },
+    fastEffects: { stiffness: 3800, dampingRatio: 1 },
+    effects: { stiffness: 1600, dampingRatio: 1 },
+    slowEffects: { stiffness: 800, dampingRatio: 1 }
+};
+const STEP_MS = 10;
+const MAX_MS = 5000;
+const resolveSpring = (token) => {
+    // Motion takes an absolute damping coefficient; M3 specifies a ratio (mass is 1).
+    const { stiffness, damping } = springTransition(token);
+    const generator = spring({ keyframes: [0, 1], stiffness, damping });
+    let duration = 0;
+    while (!generator.next(duration).done && duration < MAX_MS)
+        duration += STEP_MS;
+    return { duration, at: (progress) => generator.next(duration * progress).value };
+};
+/**
+ * A spring token as Motion transition options, for `animate()` / `animateView()`. Physics-based
+ * (stiffness/damping, mass 1), so an animation that interrupts another inherits its velocity.
+ *
+ * ```ts
+ * animate(node, { transform: 'scale(1)' }, springTransition(springTokens.fastSpatial));
+ * ```
+ */
+export const springTransition = ({ stiffness, dampingRatio }) => ({
+    // The generator itself, not the string 'spring': the view-transition / WAAPI path
+    // (`animateView`, NativeAnimation) only bakes springs from the function and otherwise falls
+    // back to a 300ms easeOut.
+    type: spring,
+    stiffness,
+    damping: dampingRatio * 2 * Math.sqrt(stiffness),
+    mass: 1
+});
+/**
+ * A spring as CSS `transition` parts: a settle `duration` and a `linear()` `easing`.
+ * Used by `scripts/generate-motion-springs.ts` to bake the tokens into `styles/motion.css`.
+ */
+export const springCss = (token, resolutionMs = STEP_MS) => {
+    const { duration, at } = resolveSpring(token);
+    return { duration: `${duration}ms`, easing: generateLinearEasing(at, duration, resolutionMs) };
+};

package/dist/animation/springValue.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type SpringToken } from './spring.js';
+/**
+ * A number that springs towards a reactive target — for values rendered as geometry (a progress
+ * fill, a slider handle) rather than as a Motion-animated element. Retargeting mid-flight keeps
+ * the spring's velocity. Construct during component init.
+ *
+ * ```svelte
+ * <script>
+ *   const shown = new SpringValue(() => percent, springTokens.slowEffects);
+ * </script>
+ *
+ * <div style:width="{shown.current}%"></div>
+ * ```
+ *
+ * `immediate` jumps straight to the target while it returns true — e.g. while a handle is dragged,
+ * where the value must track the pointer 1:1.
+ */
+export declare class SpringValue {
+    #private;
+    current: number;
+    constructor(target: () => number, spring: SpringToken, immediate?: () => boolean);
+}

package/dist/animation/springValue.svelte.js

@@ -0,0 +1,42 @@
+import { animate } from 'motion';
+import { untrack } from 'svelte';
+import { springTransition } from './spring.js';
+/**
+ * A number that springs towards a reactive target — for values rendered as geometry (a progress
+ * fill, a slider handle) rather than as a Motion-animated element. Retargeting mid-flight keeps
+ * the spring's velocity. Construct during component init.
+ *
+ * ```svelte
+ * <script>
+ *   const shown = new SpringValue(() => percent, springTokens.slowEffects);
+ * </script>
+ *
+ * <div style:width="{shown.current}%"></div>
+ * ```
+ *
+ * `immediate` jumps straight to the target while it returns true — e.g. while a handle is dragged,
+ * where the value must track the pointer 1:1.
+ */
+export class SpringValue {
+    current = $state(0);
+    #controls;
+    constructor(target, spring, immediate) {
+        this.current = untrack(target);
+        $effect(() => {
+            const to = target();
+            const jump = immediate?.() ?? false;
+            untrack(() => {
+                this.#controls?.stop();
+                if (jump) {
+                    this.current = to;
+                    return;
+                }
+                this.#controls = animate(this.current, to, {
+                    ...springTransition(spring),
+                    onUpdate: (latest) => (this.current = latest)
+                });
+            });
+        });
+        $effect(() => () => this.#controls?.stop());
+    }
+}

package/dist/animation/transition.d.ts

@@ -1,4 +1,6 @@
 export * from './containerTransform.js';
 export * from './enterExit.js';
-export * from './outroClass.js';
+export * from './presence.svelte.js';
 export * from './sharedAxisTransition.js';
+export * from './skeleton.js';
+export * from './springValue.svelte.js';

package/dist/animation/transition.js

@@ -1,4 +1,6 @@
 export * from './containerTransform.js';
 export * from './enterExit.js';
-export * from './outroClass.js';
+export * from './presence.svelte.js';
 export * from './sharedAxisTransition.js';
+export * from './skeleton.js';
+export * from './springValue.svelte.js';

package/dist/attachments/clickOutside.d.ts

@@ -0,0 +1,13 @@
+import type { Attachment } from 'svelte/attachments';
+/**
+ * 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 declare function clickOutside(handler: (event: MouseEvent) => void): Attachment<HTMLElement>;

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, {}, "">;