@noxlovette/material 0.5.0 → 0.6.0

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;

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

@@ -1,19 +1,24 @@
 import { tv } from 'tailwind-variants';
+/*
+ * Standard button group, per https://m3.material.io/components/button-groups/specs: an invisible
+ * container that spaces its buttons so each keeps a 48dp target (18/12/8/8/8dp for XS–XL).
+ * Pressing a button widens it by 15% and its neighbours give that width back (ButtonGroup.svelte).
+ */
 export const buttonGroup = tv({
     slots: {
-        root: 'md-btn-group-standard'
+        root: 'inline-flex w-max flex-nowrap'
     },
     variants: {
         orientation: {
-            horizontal: { root: 'flex-row' },
-            vertical: { root: 'flex-col' }
+            horizontal: { root: 'flex-row items-center' },
+            vertical: { root: 'w-auto flex-col items-stretch' }
         },
         size: {
-            xs: {},
-            sm: {},
-            md: {},
-            lg: {},
-            xl: {}
+            xs: { root: 'gap-[1.125rem]' },
+            sm: { root: 'gap-spacing-150' },
+            md: { root: 'gap-spacing-100' },
+            lg: { root: 'gap-spacing-100' },
+            xl: { root: 'gap-spacing-100' }
         }
     },
     defaultVariants: {

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

@@ -1,14 +1,20 @@
 import type { Snippet } from 'svelte';
-import type { ButtonGroupVariants } from './theme.js';
-export type ButtonGroupProps = ButtonGroupVariants & {
-    /** Layout direction of the buttons. */
+import type { ButtonSize } from '../theme.js';
+export type ButtonGroupProps = {
+    /** @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * Drives the gap between buttons and the press-squeeze amount applied to a
-     * pressed button's immediate neighbors. Match the size of the buttons inside.
+     * The size of the buttons inside. Sets the space between them: 18, 12, 8, 8 and 8dp for XS to
+     * XL, so each keeps a 48dp target.
+     * @default 'sm'
+     */
+    size?: ButtonSize;
+    /**
+     * `Button`s, `Toggle`s and `ButtonIcon`s, mixed freely. Avoid `text` buttons and `standard`
+     * icon buttons, which have no container to change shape.
      */
-    size?: ButtonGroupVariants['size'];
-    /** The buttons in the group — `Button`, `ButtonIcon`, or `Toggle` components, mixed freely. */
     children: Snippet;
+    /** Accessible name, when the group needs one (it gets `role="group"`). */
+    'aria-label'?: string;
     class?: string;
 };

package/dist/components/buttons/connected/ConnectedButtonGroup.mdx

@@ -0,0 +1,43 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ConnectedStories from './ConnectedButtonGroup.stories.svelte';
+
+<Meta of={ConnectedStories} />
+
+<Title />
+
+<Subtitle>Connected button groups show related options, one or several selected.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/button-groups/specs) ·
+`import { ConnectedButtonGroup, ConnectedButtonGroupItem } from '@noxlovette/material';`
+
+<Canvas of={ConnectedStories.Playground} />
+
+<Controls of={ConnectedStories.Playground} />
+
+## When to use
+
+For a small set of related options that change what the page shows, such as Walk, Bike, Drive.
+It replaces M3's segmented button. For separate actions, use `ButtonGroup`.
+`type="single"` keeps one item selected; `type="multiple"` allows several.
+
+## Colour and shape
+
+Items are toggle buttons in the group's `variant`: filled (default), tonal, outlined or
+elevated, with the same unselected and selected colours as `Toggle`. Selection shows through
+colour and shape, not a check mark:
+
+- Items sit 2dp apart. The outer corners are fully round, or the inner size with
+  `shape="square"`.
+- Inner corners are 8dp (16dp at L, 20dp at XL), tighten while pressed, and round out fully on
+  the selected item. Neighbours never change.
+
+<Canvas of={ConnectedStories.ColourStyles} />
+
+<Canvas of={ConnectedStories.SizesAndShapes} />
+
+## Accessibility
+
+Name the group with `aria-label`, and give icon-only items an `aria-label`. Arrow keys move
+between items; Space and Enter select. XS and S items are at least 48dp wide.
+
+<Canvas of={ConnectedStories.MultiSelectIcons} />

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte

@@ -3,29 +3,22 @@
   import ConnectedButtonGroup from './ConnectedButtonGroup.svelte';
   import ConnectedButtonGroupItem from './ConnectedButtonGroupItem.svelte';
 
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+  const variants = ['filled', 'tonal', 'outlined', 'elevated'] as const;
+
   const { Story } = defineMeta({
     title: 'Buttons/Connected Button Group',
     component: ConnectedButtonGroup,
     argTypes: {
-      type: {
-        control: 'select',
-        options: ['single', 'multiple']
-      },
-      orientation: {
-        control: 'select',
-        options: ['horizontal', 'vertical']
-      },
-      shape: {
-        control: 'select',
-        options: ['round', 'square']
-      },
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl']
-      }
+      type: { control: 'inline-radio', options: ['single', 'multiple'] },
+      variant: { control: 'select', options: variants },
+      orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+      shape: { control: 'inline-radio', options: ['round', 'square'] },
+      size: { control: 'select', options: sizes }
     },
     args: {
       type: 'single',
+      variant: 'filled',
       orientation: 'horizontal',
       shape: 'round',
       size: 'sm'
@@ -33,86 +26,75 @@
   });
 </script>
 
+<script lang="ts">
+  let mode = $state('bike');
+  let format = $state<string[]>(['bold']);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
     <ConnectedButtonGroup
-      type={args.type}
-      orientation={args.orientation}
-      shape={args.shape}
-      size={args.size}
-      value="left"
+      {...args}
+      value={args.type === 'multiple' ? [] : 'walk'}
+      aria-label="Travel mode"
     >
+      <ConnectedButtonGroupItem value="walk" label="Walk" iconProps={{ name: 'directions_walk' }} />
+      <ConnectedButtonGroupItem value="bike" label="Bike" iconProps={{ name: 'directions_bike' }} />
       <ConnectedButtonGroupItem
-        value="left"
-        label="Left"
-        iconProps={{ name: 'format_align_left' }}
-      />
-      <ConnectedButtonGroupItem
-        value="center"
-        label="Center"
-        iconProps={{ name: 'format_align_center' }}
-      />
-      <ConnectedButtonGroupItem
-        value="right"
-        label="Right"
-        iconProps={{ name: 'format_align_right' }}
+        value="drive"
+        label="Drive"
+        iconProps={{ name: 'directions_car' }}
       />
     </ConnectedButtonGroup>
   {/snippet}
 </Story>
 
-<Story name="Multi-select" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="multiple" value={['bold']}>
-      <ConnectedButtonGroupItem value="bold" label="Bold" iconProps={{ name: 'format_bold' }} />
+<Story name="Colour styles" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-md flex-col">
+    {#each variants as variant (variant)}
+      <ConnectedButtonGroup type="single" {variant} bind:value={mode} aria-label="Travel mode">
+        <ConnectedButtonGroupItem value="walk" label="Walk" />
+        <ConnectedButtonGroupItem value="bike" label="Bike" />
+        <ConnectedButtonGroupItem value="drive" label="Drive" />
+      </ConnectedButtonGroup>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Multi-select icons" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col items-start">
+    <ConnectedButtonGroup type="multiple" bind:value={format} class="w-auto" aria-label="Format">
+      <ConnectedButtonGroupItem
+        value="bold"
+        aria-label="Bold"
+        iconProps={{ name: 'format_bold' }}
+      />
       <ConnectedButtonGroupItem
         value="italic"
-        label="Italic"
+        aria-label="Italic"
         iconProps={{ name: 'format_italic' }}
       />
       <ConnectedButtonGroupItem
         value="underline"
-        label="Underline"
+        aria-label="Underline"
         iconProps={{ name: 'format_underlined' }}
       />
     </ConnectedButtonGroup>
   </div>
 </Story>
 
-<Story name="Icon Only" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" value="list">
-      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>
-
-<Story name="Square Shape" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" shape="square" value="list">
-      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>
-
-<Story name="Sizes" asChild>
-  <div class="flex flex-col gap-6 p-6">
-    {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}
-      <ConnectedButtonGroup type="single" {size} value="list">
-        <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-        <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-      </ConnectedButtonGroup>
+<Story name="Sizes and shapes" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-xl flex-col">
+    {#each sizes as size (size)}
+      <div class="gap-spacing-200 flex">
+        {#each ['round', 'square'] as const as shape (shape)}
+          <ConnectedButtonGroup type="single" {size} {shape} value="b">
+            <ConnectedButtonGroupItem value="a" label="A" />
+            <ConnectedButtonGroupItem value="b" label="B" />
+            <ConnectedButtonGroupItem value="c" label="C" />
+          </ConnectedButtonGroup>
+        {/each}
+      </div>
     {/each}
   </div>
 </Story>
-
-<Story name="Vertical" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" orientation="vertical" value="list">
-      <ConnectedButtonGroupItem value="list" label="List" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" label="Grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import ConnectedButtonGroup from './ConnectedButtonGroup.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 ConnectedButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ConnectedButtonGroup = InstanceType<typeof ConnectedButtonGroup>;
+declare const ConnectedButtonGroup: import("svelte").Component<Record<string, never>, {}, "">;
+type ConnectedButtonGroup = ReturnType<typeof ConnectedButtonGroup>;
 export default ConnectedButtonGroup;

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte

@@ -1,9 +1,9 @@
 <!--
 @component
-A connected button group — the M3 replacement for the deprecated segmented
-button. Items sit in a shared pill (or square) shape with a small gap between
-them; selecting or pressing an item changes only that item's own shape and
-color, never its neighbors'.
+A connected button group, M3's replacement for the segmented button: toggle buttons 2dp apart
+in one shared shape, for related options such as Walk, Bike, Drive. Selecting an item rounds it
+out and gives it the selected colours; pressing tightens its inner corners. Neighbours never
+change.
 
 @see https://m3.material.io/components/button-groups/overview
 -->
@@ -21,9 +21,11 @@ color, never its neighbors'.
     disabled = false,
     loop = true,
     orientation = 'horizontal',
+    variant = 'filled',
     shape = 'round',
     size = 'sm',
     children,
+    'aria-label': ariaLabel,
     class: className
   }: ConnectedButtonGroupProps = $props();
 
@@ -35,6 +37,15 @@ color, never its neighbors'.
     },
     get shape() {
       return shape;
+    },
+    get variant() {
+      return variant;
+    },
+    get type() {
+      return type;
+    },
+    get value() {
+      return value;
     }
   });
 </script>
@@ -46,6 +57,7 @@ color, never its neighbors'.
   {disabled}
   {loop}
   {orientation}
+  aria-label={ariaLabel}
   class={cls.root({ class: clsx(className) })}
 >
   {@render children?.()}

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { ConnectedButtonGroupProps } from './types.js';
 /**
- * A connected button group — the M3 replacement for the deprecated segmented
- * button. Items sit in a shared pill (or square) shape with a small gap between
- * them; selecting or pressing an item changes only that item's own shape and
- * color, never its neighbors'.
+ * A connected button group, M3's replacement for the segmented button: toggle buttons 2dp apart
+ * in one shared shape, for related options such as Walk, Bike, Drive. Selecting an item rounds it
+ * out and gives it the selected colours; pressing tightens its inner corners. Neighbours never
+ * change.
  *
  * @see https://m3.material.io/components/button-groups/overview
  */