@noxlovette/material 0.5.1 → 0.6.0

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;

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

@@ -1,17 +1,19 @@
 <!--
 @component
-A standard button group — an invisible container that adds spacing between
-buttons and lets them mix variants, colors, and widths freely. Pressing a
-button also nudges the width of its immediate neighbors, per the M3 spec.
+A standard button group: an invisible container that spaces buttons and adds an interaction
+between neighbours. Pressing a button widens it by 15% while the buttons beside it narrow to
+make room, on the fast spatial spring; a toggle inside also swaps its shape as it's selected.
+Children keep their own style, so filled, tonal and outlined buttons and icon buttons mix freely.
 
-Buttons keep their own identity here; this is a plain layout wrapper around
-`Button` / `ButtonIcon` / `Toggle` children, not a selection primitive. For a
-single/multi-select segmented control, use `ConnectedButtonGroup` instead.
+For a set of related options where one or more is selected, use `ConnectedButtonGroup`.
 
-@see https://m3.material.io/components/button-groups/overview
+@see https://m3.material.io/components/button-groups/specs
 -->
 <script lang="ts">
   import clsx from 'clsx';
+  import { animate } from 'motion';
+  import type { Attachment } from 'svelte/attachments';
+  import { springTokens, springTransition } from '../../../animation/spring.js';
   import { buttonGroup } from './theme.js';
   import type { ButtonGroupProps } from './types.js';
 
@@ -19,12 +21,104 @@ single/multi-select segmented control, use `ConnectedButtonGroup` instead.
     orientation = 'horizontal',
     size = 'sm',
     children,
+    'aria-label': ariaLabel,
     class: className
   }: ButtonGroupProps = $props();
 
   const cls = $derived(buttonGroup({ orientation, size }));
+
+  const GROW = 0.15;
+  const spring = springTransition(springTokens.fastSpatial);
+  const reducedMotion = () =>
+    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  // The pressed button and its neighbours, with their widths before the press.
+  type Press = { items: { el: HTMLElement; width: number; to: number }[] };
+
+  const squeeze: Attachment<HTMLElement> = (group) => {
+    let press: Press | null = null;
+    // Widths at rest, kept while a release is still settling so a quick re-press starts from them.
+    const rest = new WeakMap<HTMLElement, number>();
+
+    const isEnabled = (el: Element | null): el is HTMLElement =>
+      el instanceof HTMLElement &&
+      !el.matches(':disabled, [aria-disabled="true"], [data-disabled]');
+
+    const itemOf = (target: EventTarget | null) => {
+      if (!(target instanceof Node)) return null;
+      let el = target instanceof Element ? target : target.parentElement;
+      while (el && el.parentElement !== group) el = el.parentElement;
+      return el && isEnabled(el) ? el : null;
+    };
+
+    const widthOf = (el: HTMLElement) => {
+      if (!rest.has(el)) rest.set(el, el.getBoundingClientRect().width);
+      return rest.get(el)!;
+    };
+
+    const start = (el: HTMLElement) => {
+      if (orientation !== 'horizontal' || press || reducedMotion()) return;
+      const width = widthOf(el);
+      const neighbours = [el.previousElementSibling, el.nextElementSibling].filter(isEnabled);
+      const share = (width * GROW) / Math.max(neighbours.length, 1);
+      press = {
+        items: [
+          { el, width, to: width * (1 + GROW) },
+          ...neighbours.map((n) => {
+            const w = widthOf(n);
+            return { el: n, width: w, to: Math.max(w - share, 0) };
+          })
+        ]
+      };
+      for (const { el: item, to } of press.items) animate(item, { width: `${to}px` }, spring);
+    };
+
+    const end = () => {
+      if (!press) return;
+      const { items } = press;
+      press = null;
+      for (const { el, width } of items) {
+        animate(el, { width: `${width}px` }, spring).then(() => {
+          // Hand the width back to the layout, unless a new press picked this button up.
+          if (press?.items.some((i) => i.el === el)) return;
+          el.style.width = '';
+          rest.delete(el);
+        });
+      }
+    };
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      const el = itemOf(e.target);
+      if (el) start(el);
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.repeat || (e.key !== ' ' && e.key !== 'Enter')) return;
+      const el = itemOf(e.target);
+      if (el) start(el);
+    };
+
+    group.addEventListener('pointerdown', onPointerDown);
+    group.addEventListener('keydown', onKeyDown);
+    group.addEventListener('keyup', end);
+    window.addEventListener('pointerup', end);
+    window.addEventListener('pointercancel', end);
+    return () => {
+      group.removeEventListener('pointerdown', onPointerDown);
+      group.removeEventListener('keydown', onKeyDown);
+      group.removeEventListener('keyup', end);
+      window.removeEventListener('pointerup', end);
+      window.removeEventListener('pointercancel', end);
+    };
+  };
 </script>
 
-<div class={cls.root({ class: clsx(className) })} data-size={size} data-orientation={orientation}>
+<div
+  role="group"
+  aria-label={ariaLabel}
+  data-orientation={orientation}
+  class={cls.root({ class: clsx(className) })}
+  {@attach squeeze}
+>
   {@render children()}
 </div>

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

@@ -1,14 +1,13 @@
 import type { ButtonGroupProps } from './types.js';
 /**
- * A standard button group — an invisible container that adds spacing between
- * buttons and lets them mix variants, colors, and widths freely. Pressing a
- * button also nudges the width of its immediate neighbors, per the M3 spec.
+ * A standard button group: an invisible container that spaces buttons and adds an interaction
+ * between neighbours. Pressing a button widens it by 15% while the buttons beside it narrow to
+ * make room, on the fast spatial spring; a toggle inside also swaps its shape as it's selected.
+ * Children keep their own style, so filled, tonal and outlined buttons and icon buttons mix freely.
  *
- * Buttons keep their own identity here; this is a plain layout wrapper around
- * `Button` / `ButtonIcon` / `Toggle` children, not a selection primitive. For a
- * single/multi-select segmented control, use `ConnectedButtonGroup` instead.
+ * For a set of related options where one or more is selected, use `ConnectedButtonGroup`.
  *
- * @see https://m3.material.io/components/button-groups/overview
+ * @see https://m3.material.io/components/button-groups/specs
  */
 declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;

package/dist/components/buttons/button-group/theme.d.ts

@@ -10,11 +10,21 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {};
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
 }, {
     root: string;
@@ -28,11 +38,21 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {};
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
 }, {
     root: string;
@@ -46,11 +66,21 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
         };
     };
     size: {
-        xs: {};
-        sm: {};
-        md: {};
-        lg: {};
-        xl: {};
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
     };
 }, {
     root: string;