@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/buttons/FABMenu.svelte

@@ -1,33 +1,52 @@
 <!--
 @component
-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.
+The item stack of a FAB menu, rendered by `FAB` when `withMenu` is set. It lives inside the
+FAB's `DropdownMenu.Root`, which owns open state, positioning, and outside-click/Escape
+dismissal. Items are end-aligned, 4dp apart and 8dp above the close button. Use up to six
+`FABMenuItem`s.
+
+Motion: the items grow out of the close button one after another, nearest first, on the fast
+spatial spring; the stack fades out on close.
 -->
 <script lang="ts">
   import clsx from 'clsx';
   import { DropdownMenu } from 'bits-ui';
+  import { animate, stagger } from 'motion';
+  import type { Attachment } from 'svelte/attachments';
   import { fabMenu } from './theme.js';
   import type { FABMenuProps } from './types.js';
   import { enterExit, presence } from '../../animation/index.js';
+  import { springTokens, springTransition } from '../../animation/spring.js';
 
   let { children, class: className, ...restProps }: FABMenuProps = $props();
 
   const { base } = fabMenu();
+
+  const STAGGER_S = 0.03;
+  const itemsIn: Attachment<HTMLElement> = (node) => {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const items = [...node.children] as HTMLElement[];
+    for (const item of items) item.style.transformOrigin = 'right center';
+    const controls = animate(
+      items,
+      { y: [8, 0], scale: [0.6, 1] },
+      { ...springTransition(springTokens.fastSpatial), delay: stagger(STAGGER_S, { from: 'last' }) }
+    );
+    return () => controls.stop();
+  };
 </script>
 
 <DropdownMenu.Portal>
-  <DropdownMenu.Content side="top" align="end" sideOffset={8} collisionPadding={8}>
+  <DropdownMenu.Content side="top" align="end" sideOffset={3} 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)}
+          class={base({ class: clsx(className) })}
+          {@attach presence(() => open, enterExit.fade)}
+          {@attach itemsIn}
         >
           {@render children()}
         </div>

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

@@ -1,8 +1,12 @@
 import type { FABMenuProps } from './types.js';
 /**
- * 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.
+ * The item stack of a FAB menu, rendered by `FAB` when `withMenu` is set. It lives inside the
+ * FAB's `DropdownMenu.Root`, which owns open state, positioning, and outside-click/Escape
+ * dismissal. Items are end-aligned, 4dp apart and 8dp above the close button. Use up to six
+ * `FABMenuItem`s.
+ *
+ * Motion: the items grow out of the close button one after another, nearest first, on the fast
+ * spatial spring; the stack fades out on close.
  */
 declare const FABMenu: import("svelte").Component<FABMenuProps, {}, "">;
 type FABMenu = ReturnType<typeof FABMenu>;

package/dist/components/buttons/FABMenuItem.svelte

@@ -1,11 +1,12 @@
 <!--
 @component
-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`.
+One action in a FAB menu: a 56dp pill in the FAB's colour set (primary, secondary or tertiary
+container). Wraps bits-ui's `DropdownMenu.Item`, so it gets the `menuitem` role, arrow-key
+navigation, and closes the menu when chosen. Render it inside a `FAB` with `withMenu`.
 -->
 <script lang="ts">
   import clsx from 'clsx';
+  import { getContext } from 'svelte';
   import { fabMenuItem } from './theme.js';
   import type { FABMenuItemProps } from './types.js';
   import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
@@ -13,7 +14,6 @@ inside a `FAB` with `withMenu`.
 
   let {
     class: className,
-    variant = 'secondary',
     loading,
     children,
     iconProps,
@@ -22,24 +22,28 @@ inside a `FAB` with `withMenu`.
     ...restProps
   }: FABMenuItemProps = $props();
 
-  const { base, icon } = $derived(fabMenuItem({ variant }));
-  const btnCls = $derived(base({ class: clsx(className) }));
+  const menuSet = getContext<(() => 'primary' | 'secondary' | 'tertiary') | undefined>(
+    'fabMenuSet'
+  );
+  const cls = $derived(fabMenuItem({ set: menuSet?.() ?? 'primary' }));
 </script>
 
 <!-- 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 />
+    <Button.Root
+      {formaction}
+      {disabled}
+      data-cy="m3-fab-menu-item"
+      {...props}
+      class={cls.base({ class: clsx(className) })}
+    >
+      {#if loading}
+        <LoadingIndicator center={false} class={cls.icon({ class: 'text-current' })} />
+      {:else}
+        <Icon {...iconProps} class={cls.icon({ class: clsx(iconProps.class) })} />
       {/if}
-      {@render children?.()}
+      {@render children()}
       <Layer />
     </Button.Root>
   {/snippet}

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

@@ -1,8 +1,8 @@
 import type { FABMenuItemProps } from './types.js';
 /**
- * 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`.
+ * One action in a FAB menu: a 56dp pill in the FAB's colour set (primary, secondary or tertiary
+ * container). Wraps bits-ui's `DropdownMenu.Item`, so it gets the `menuitem` role, arrow-key
+ * navigation, and closes the menu when chosen. Render it inside a `FAB` with `withMenu`.
  */
 declare const FABMenuItem: import("svelte").Component<FABMenuItemProps, {}, "">;
 type FABMenuItem = ReturnType<typeof FABMenuItem>;

package/dist/components/buttons/Toggle.stories.svelte

@@ -2,45 +2,53 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Toggle from './Toggle.svelte';
 
+  const variants = ['elevated', 'filled', 'tonal', 'outlined'] as const;
+
   const { Story } = defineMeta({
     title: 'Buttons/Toggle',
     component: Toggle,
+    tags: ['autodocs'],
     argTypes: {
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl']
-      },
-      shape: {
-        control: 'select',
-        options: ['round', 'square']
-      },
+      variant: { control: 'select', options: variants },
+      size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+      shape: { control: 'inline-radio', options: ['round', 'square'] },
       pressed: { control: 'boolean' },
-      disabled: { control: 'boolean' },
-      loading: { control: 'boolean' }
+      disabled: { control: 'boolean' }
     },
     args: {
-      size: 'md',
+      variant: 'filled',
+      size: 'sm',
       shape: 'round',
       pressed: false,
-      disabled: false,
-      loading: false
+      disabled: false
     }
   });
 </script>
 
-<Story name="Playground">Toggle</Story>
+<script lang="ts">
+  let selected = $state<Record<string, boolean>>({ tonal: true, outlined: true });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Toggle {...args} iconProps={{ name: 'bookmark' }}>Save</Toggle>
+  {/snippet}
+</Story>
 
-<Story name="With Icon" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
-    <Toggle iconProps={{ name: 'format_bold' }}>Bold</Toggle>
-    <Toggle iconProps={{ name: 'format_italic' }} pressed>Italic</Toggle>
+<Story name="Colour styles" asChild>
+  <div class="gap-spacing-200 p-spacing-300 grid grid-cols-[auto_auto] items-center justify-start">
+    {#each variants as variant (variant)}
+      <Toggle {variant} iconProps={{ name: 'favorite' }}>{variant}</Toggle>
+      <Toggle {variant} pressed iconProps={{ name: 'favorite' }}>{variant}</Toggle>
+    {/each}
   </div>
 </Story>
 
-<Story name="States" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
-    <Toggle>Unpressed</Toggle>
-    <Toggle pressed>Pressed</Toggle>
-    <Toggle disabled>Disabled</Toggle>
+<Story name="Shape swap" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
+    <Toggle size="md" bind:pressed={selected.tonal} variant="tonal">Round → square</Toggle>
+    <Toggle size="md" bind:pressed={selected.outlined} variant="outlined" shape="square">
+      Square → round
+    </Toggle>
   </div>
 </Story>

package/dist/components/buttons/Toggle.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import Toggle from './Toggle.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toggle = InstanceType<typeof Toggle>;
+declare const Toggle: import("svelte").Component<Record<string, never>, {}, "">;
+type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/components/buttons/Toggle.svelte

@@ -1,21 +1,23 @@
 <!--
 @component
-A toggle button that switches between pressed and unpressed states.
-Uses Material 3 selection button styling.
+A toggle button: a button with a selected state, exposed as `aria-pressed`. Selecting changes its
+colours and swaps its resting shape (round ↔ square).
 
-@see https://m3.material.io/components/all-buttons
+@see https://m3.material.io/components/buttons/specs
 -->
 <script lang="ts">
-  import type { ToggleMDProps } from './types.js';
+  import type { ToggleProps } from './types.js';
   import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
-  import { button } from './theme.js';
+  import { button, buttonColor } from './theme.js';
   import clsx from 'clsx';
+  import { buttonCorners, shapeMorph } from './shapeMorph.js';
   import { Toggle, type ToggleRootProps } from 'bits-ui';
 
   let {
     children,
     iconProps,
-    size = 'md',
+    variant = 'filled',
+    size = 'sm',
     shape = 'round',
     disabled,
     loading,
@@ -23,38 +25,39 @@ Uses Material 3 selection button styling.
     onPressedChange,
     class: className,
     ...restProps
-  }: ToggleMDProps = $props();
+  }: ToggleProps = $props();
 
-  const { base, icon } = $derived(
-    button({
-      usage: 'selection',
-      shape,
-      size,
-      selected: pressed
+  let ref = $state<HTMLElement | null>(null);
+  $effect(() => (ref ? shapeMorph(ref, buttonCorners) : undefined));
+
+  const cls = $derived(button({ variant, size, shape, selected: pressed }));
+  const btnCls = $derived(
+    cls.base({
+      class: clsx(buttonColor({ variant, state: pressed ? 'selected' : 'unselected' }), className)
     })
   );
-
-  const btnCls = $derived(base({ class: clsx(className) }));
 </script>
 
 <Toggle.Root
+  bind:ref
   bind:pressed
   {onPressedChange}
   {disabled}
   class={btnCls}
+  aria-busy={loading || undefined}
   data-cy="m3-toggle"
   {...restProps as ToggleRootProps}
 >
-  {#if iconProps}
-    {#if loading}
-      <LoadingIndicator container class={icon()} />
-    {:else}
-      <Icon class={icon()} {...iconProps} />
-      {@render children?.()}
-    {/if}
-  {:else if loading}
-    <LoadingIndicator container />
-  {:else}
+  {#if loading}
+    <LoadingIndicator center={false} class={cls.icon({ class: 'text-current' })} />
+  {:else if iconProps}
+    <Icon
+      fill={pressed ? 1 : 0}
+      {...iconProps}
+      class={cls.icon({ class: clsx(iconProps.class) })}
+    />
+  {/if}
+  {#if !loading || iconProps}
     {@render children?.()}
   {/if}
   <Layer />

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

@@ -1,11 +1,11 @@
-import type { ToggleMDProps } from './types.js';
+import type { ToggleProps } from './types.js';
 import { Toggle } from 'bits-ui';
 /**
- * A toggle button that switches between pressed and unpressed states.
- * Uses Material 3 selection button styling.
+ * A toggle button: a button with a selected state, exposed as `aria-pressed`. Selecting changes its
+ * colours and swaps its resting shape (round ↔ square).
  *
- * @see https://m3.material.io/components/all-buttons
+ * @see https://m3.material.io/components/buttons/specs
  */
-declare const Toggle: import("svelte").Component<ToggleMDProps, {}, "pressed">;
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "pressed">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/components/buttons/button-group/ButtonGroup.mdx

@@ -0,0 +1,39 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as GroupStories from './ButtonGroup.stories.svelte';
+
+<Meta of={GroupStories} />
+
+<Title />
+
+<Subtitle>Standard button groups space buttons and make them react to each other.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/button-groups/specs) ·
+`import { ButtonGroup } from '@noxlovette/material';`
+
+<Canvas of={GroupStories.Playground} />
+
+<Controls of={GroupStories.Playground} />
+
+## Standard or connected
+
+- **`ButtonGroup`** (standard) holds separate actions, such as Back, Play, Next. Pressing a
+  button widens it by 15% while the buttons beside it narrow to make room, then all settle back.
+- **`ConnectedButtonGroup`** holds related options, one or several selected, such as Walk, Bike,
+  Drive. It replaces the segmented button.
+
+## Contents
+
+Mix `Button`, `Toggle` and `ButtonIcon` freely, in the filled, tonal, outlined or elevated
+styles. Avoid text buttons and standard icon buttons, which have no container to change. A
+toggle inside swaps its shape as it's selected.
+
+<Canvas of={GroupStories.MixedButtons} />
+
+## Size
+
+Set `size` to the buttons' size. It sets the space between them so each keeps a 48dp target:
+18dp at XS, 12dp at S, 8dp from M up. The group takes its buttons' height.
+
+<Canvas of={GroupStories.Sizes} />
+
+The press interaction is horizontal only, and off under reduced motion.

package/dist/components/buttons/button-group/ButtonGroup.stories.svelte

@@ -2,20 +2,17 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import Button from '../Button.svelte';
   import ButtonIcon from '../ButtonIcon.svelte';
+  import Toggle from '../Toggle.svelte';
   import ButtonGroup from './ButtonGroup.svelte';
 
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+
   const { Story } = defineMeta({
     title: 'Buttons/Button Group',
     component: ButtonGroup,
     argTypes: {
-      orientation: {
-        control: 'select',
-        options: ['horizontal', 'vertical']
-      },
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl']
-      }
+      orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+      size: { control: 'select', options: sizes }
     },
     args: {
       orientation: 'horizontal',
@@ -24,57 +21,79 @@
   });
 </script>
 
+<script lang="ts">
+  let playing = $state(false);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
-    <ButtonGroup orientation={args.orientation} size={args.size}>
-      <Button variant="tonal">Left</Button>
-      <Button variant="tonal">Center</Button>
-      <Button variant="tonal">Right</Button>
+    <ButtonGroup orientation={args.orientation} size={args.size} aria-label="Playback">
+      <Button size={args.size} variant="tonal">Back</Button>
+      <Button size={args.size}>Play</Button>
+      <Button size={args.size} variant="tonal">Next</Button>
     </ButtonGroup>
   {/snippet}
 </Story>
 
-<Story name="Mixed Variants and Colors" asChild>
-  <div class="p-6">
-    <ButtonGroup size="sm">
-      <Button variant="outlined">Cancel</Button>
-      <Button variant="tonal" color="secondary">Save draft</Button>
-      <Button variant="filled" color="primary">Publish</Button>
+<Story name="Mixed buttons" asChild>
+  <div class="gap-spacing-400 p-spacing-300 flex flex-col items-start">
+    <ButtonGroup size="md" aria-label="Player">
+      <ButtonIcon
+        size="md"
+        variant="tonal"
+        width="wide"
+        aria-label="Previous"
+        iconProps={{ name: 'skip_previous' }}
+      />
+      <Toggle
+        size="md"
+        bind:pressed={playing}
+        iconProps={{ name: playing ? 'pause' : 'play_arrow' }}
+      >
+        {playing ? 'Pause' : 'Play'}
+      </Toggle>
+      <ButtonIcon
+        size="md"
+        variant="tonal"
+        width="wide"
+        aria-label="Next"
+        iconProps={{ name: 'skip_next' }}
+      />
     </ButtonGroup>
-  </div>
-</Story>
-
-<Story name="Icon Toolbar" asChild>
-  <div class="flex flex-wrap gap-8 p-6">
-    <ButtonGroup size="sm">
-      <ButtonIcon variant="tonal" variation="toggle" iconProps={{ name: 'mic' }} />
-      <ButtonIcon variant="tonal" variation="toggle" iconProps={{ name: 'videocam' }} />
-      <ButtonIcon variant="tonal" iconProps={{ name: 'more_vert' }} />
-      <ButtonIcon variant="filled" color="error" iconProps={{ name: 'call_end' }} />
+    <ButtonGroup size="sm" aria-label="Call">
+      <ButtonIcon
+        variant="tonal"
+        variation="toggle"
+        aria-label="Mute"
+        iconProps={{ name: 'mic' }}
+      />
+      <ButtonIcon
+        variant="tonal"
+        variation="toggle"
+        aria-label="Camera"
+        iconProps={{ name: 'videocam' }}
+      />
+      <ButtonIcon variant="outlined" aria-label="More" iconProps={{ name: 'more_vert' }} />
+      <ButtonIcon width="wide" aria-label="End call" iconProps={{ name: 'call_end' }} />
     </ButtonGroup>
   </div>
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-wrap items-center gap-8 p-6">
-    <ButtonGroup size="xs">
-      <Button size="xs" variant="tonal">XS</Button>
-      <Button size="xs" variant="tonal">XS</Button>
-    </ButtonGroup>
-    <ButtonGroup size="md">
-      <Button size="md" variant="tonal">M</Button>
-      <Button size="md" variant="tonal">M</Button>
-    </ButtonGroup>
-    <ButtonGroup size="xl">
-      <Button size="xl" variant="tonal">XL</Button>
-      <Button size="xl" variant="tonal">XL</Button>
-    </ButtonGroup>
+  <div class="gap-spacing-300 p-spacing-300 flex flex-col items-start">
+    {#each sizes as size (size)}
+      <ButtonGroup {size}>
+        <Button {size} variant="tonal">One</Button>
+        <Button {size}>Two</Button>
+        <Button {size} variant="tonal">Three</Button>
+      </ButtonGroup>
+    {/each}
   </div>
 </Story>
 
 <Story name="Vertical" asChild>
-  <div class="p-6">
-    <ButtonGroup orientation="vertical" size="sm">
+  <div class="p-spacing-300">
+    <ButtonGroup orientation="vertical">
       <Button variant="tonal">Top</Button>
       <Button variant="tonal">Middle</Button>
       <Button variant="tonal">Bottom</Button>

package/dist/components/buttons/button-group/ButtonGroup.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import ButtonGroup from './ButtonGroup.svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ButtonGroup = InstanceType<typeof ButtonGroup>;
+declare const ButtonGroup: import("svelte").Component<Record<string, never>, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;