@noxlovette/material 0.5.0 → 0.6.0

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

@@ -1,14 +1,15 @@
 <!--
 @component
-A single item within a ConnectedButtonGroup. Selection is communicated through
-shape (round collapsing toward square) and color, matching the M3 spec — not
-through an overlaid check icon.
+One item of a `ConnectedButtonGroup`: a toggle button. Selection shows through its colour and
+shape (it rounds out), not a check mark.
 -->
 <script lang="ts">
   import { ToggleGroup } from 'bits-ui';
   import clsx from 'clsx';
   import { getContext } from 'svelte';
   import { Icon, Layer } from '../../../utils/index.js';
+  import { buttonColor, buttonElevation } from '../theme.js';
+  import { connectedCorners, shapeMorph } from '../shapeMorph.js';
   import { connectedButtonGroupItem } from './theme.js';
   import type { ConnectedButtonGroupCtx, ConnectedButtonGroupItemProps } from './types.js';
 
@@ -17,18 +18,44 @@ through an overlaid check icon.
     label,
     iconProps,
     disabled = false,
+    'aria-label': ariaLabel,
     class: className
   }: ConnectedButtonGroupItemProps = $props();
 
+  let ref = $state<HTMLElement | null>(null);
+  $effect(() => (ref ? shapeMorph(ref, connectedCorners) : undefined));
+
   const ctx = getContext<ConnectedButtonGroupCtx | undefined>('connectedButtonGroup');
-  const size = $derived(ctx?.size ?? 'sm');
-  const shape = $derived(ctx?.shape ?? 'round');
-  const { base, icon } = $derived(connectedButtonGroupItem({ size, shape }));
+  const variant = $derived(ctx?.variant ?? 'filled');
+  const selected = $derived(
+    ctx?.type === 'multiple'
+      ? Array.isArray(ctx.value) && ctx.value.includes(value)
+      : ctx?.value === value
+  );
+  const cls = $derived(
+    connectedButtonGroupItem({ size: ctx?.size ?? 'sm', shape: ctx?.shape ?? 'round' })
+  );
 </script>
 
-<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
+<ToggleGroup.Item
+  bind:ref
+  {value}
+  {disabled}
+  aria-label={ariaLabel}
+  class={cls.base({
+    class: clsx(
+      buttonColor({ variant, state: selected ? 'selected' : 'unselected' }),
+      buttonElevation[variant],
+      className
+    )
+  })}
+>
   {#if iconProps}
-    <Icon {...iconProps} class={icon()} />
+    <Icon
+      fill={selected ? 1 : 0}
+      {...iconProps}
+      class={cls.icon({ class: clsx(iconProps.class) })}
+    />
   {/if}
   {#if label}
     <span>{label}</span>

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

@@ -1,8 +1,7 @@
 import type { ConnectedButtonGroupItemProps } from './types.js';
 /**
- * A single item within a ConnectedButtonGroup. Selection is communicated through
- * shape (round collapsing toward square) and color, matching the M3 spec — not
- * through an overlaid check icon.
+ * One item of a `ConnectedButtonGroup`: a toggle button. Selection shows through its colour and
+ * shape (it rounds out), not a check mark.
  */
 declare const ConnectedButtonGroupItem: import("svelte").Component<ConnectedButtonGroupItemProps, {}, "">;
 type ConnectedButtonGroupItem = ReturnType<typeof ConnectedButtonGroupItem>;

package/dist/components/buttons/connected/theme.d.ts

@@ -38,19 +38,24 @@ export declare const connectedButtonGroup: import("tailwind-variants").TVReturnT
 export declare const connectedButtonGroupItem: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -62,24 +67,29 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, undefined, {
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -91,24 +101,29 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -120,6 +135,6 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }>>;

package/dist/components/buttons/connected/theme.js

@@ -1,7 +1,15 @@
 import { tv } from 'tailwind-variants';
+import { buttonBase, buttonSizes } from '../theme.js';
+/*
+ * Connected button group, per https://m3.material.io/components/button-groups/specs: toggle
+ * buttons 2dp apart that share one outline shape. Items take the button's measurements for their
+ * size. Corners (`.md-btn-connected` in styles/component.css): inner corners --cbg-inner, then
+ * --cbg-pressed while pressed and fully round while selected; outer corners --cbg-outer, fully
+ * round or, for the square shape, the inner size. XS and S items are at least 48dp wide.
+ */
 export const connectedButtonGroup = tv({
     slots: {
-        root: 'flex w-full items-stretch gap-0.5'
+        root: 'flex w-full items-stretch gap-spacing-25'
     },
     variants: {
         orientation: {
@@ -15,19 +23,34 @@ export const connectedButtonGroup = tv({
 });
 export const connectedButtonGroupItem = tv({
     slots: {
-        base: 'md-btn-connected layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 bg-md-sys-color-surface-container-high px-4 md-sys-typescale-label-large text-md-sys-color-on-surface-variant outline-none disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-primary data-[state=on]:text-md-sys-color-on-primary',
-        icon: 'size-[18px] text-[18px]'
+        base: [buttonBase, 'md-btn-connected min-w-spacing-600 flex-1'],
+        icon: 'shrink-0'
     },
     variants: {
         size: {
-            xs: { base: 'h-8 [--cbg-inner:0.25rem]' },
-            sm: { base: 'h-10 [--cbg-inner:0.5rem]' },
-            md: { base: 'h-14 [--cbg-inner:0.5rem]' },
-            lg: { base: 'h-24 [--cbg-inner:1rem]' },
-            xl: { base: 'h-34 [--cbg-inner:1.25rem]' }
+            xs: {
+                base: [buttonSizes.xs.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.xs.icon
+            },
+            sm: {
+                base: [buttonSizes.sm.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.sm.icon
+            },
+            md: {
+                base: [buttonSizes.md.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.md.icon
+            },
+            lg: {
+                base: [buttonSizes.lg.base, '[--cbg-inner:1rem] [--cbg-pressed:0.75rem]'],
+                icon: buttonSizes.lg.icon
+            },
+            xl: {
+                base: [buttonSizes.xl.base, '[--cbg-inner:1.25rem] [--cbg-pressed:1rem]'],
+                icon: buttonSizes.xl.icon
+            }
         },
         shape: {
-            round: { base: '[--cbg-outer:9999px]' },
+            round: { base: '[--cbg-outer:var(--btn-round)]' },
             square: { base: '[--cbg-outer:var(--cbg-inner)]' }
         }
     },

package/dist/components/buttons/connected/types.d.ts

@@ -1,33 +1,60 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
+import type { ButtonSize } from '../theme.js';
 import type { ConnectedButtonGroupVariants } from './theme.js';
+export type ConnectedButtonGroupVariant = 'elevated' | 'filled' | 'tonal' | 'outlined';
 export type ConnectedButtonGroupCtx = {
-    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size: ButtonSize;
     shape: 'round' | 'square';
+    variant: ConnectedButtonGroupVariant;
+    type: 'single' | 'multiple';
+    value: any;
 };
 export type ConnectedButtonGroupProps = ConnectedButtonGroupVariants & {
-    /** Whether only one item can be active at a time, or multiple. */
+    /** One selected item at a time, or several. */
     type: 'single' | 'multiple';
-    /** Currently selected value(s). @bindable */
+    /** The selected value (`single`) or values (`multiple`). Bindable. */
     value?: any;
+    /** Called when the selection changes. */
     onValueChange?: (value: any) => void;
+    /** Disables every item. */
     disabled?: boolean;
+    /** Whether arrow keys wrap from the last item to the first. @default true */
     loop?: boolean;
+    /** @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
-    /** Outer corner shape of the group. A selected/pressed item collapses to its inner corner size regardless. */
+    /**
+     * Toggle button colour style of the items: unselected and selected colours as for `Toggle`.
+     * @default 'filled'
+     */
+    variant?: ConnectedButtonGroupVariant;
+    /**
+     * Outer corners: fully round, or square (the inner corner size). Inner corners are the same
+     * for both.
+     * @default 'round'
+     */
     shape?: ConnectedButtonGroupCtx['shape'];
-    /** Drives the group's height and inner corner size. Match the size of the buttons this replaces. */
-    size?: ConnectedButtonGroupCtx['size'];
+    /**
+     * Height, padding and type of the items, as for `Button`: 32, 40, 56, 96 or 136dp.
+     * @default 'sm'
+     */
+    size?: ButtonSize;
+    /** `ConnectedButtonGroupItem`s. */
     children?: Snippet;
+    /** Accessible name of the group. */
+    'aria-label'?: string;
     class?: string;
 };
 export type ConnectedButtonGroupItemProps = {
-    /** The value this item represents. */
+    /** The value this item selects. */
     value: string;
-    /** Text label displayed inside the item. */
+    /** The label. */
     label?: string;
-    /** Optional icon. Stays visible when selected — selection is shown via shape and color, not an icon swap. */
+    /** A leading icon. It fills while the item is selected. */
     iconProps?: IconProps;
+    /** Accessible name, for an item with only an icon. */
+    'aria-label'?: string;
+    /** Disables the item. */
     disabled?: boolean;
     class?: string;
 };

package/dist/components/buttons/shapeMorph.d.ts

@@ -0,0 +1,26 @@
+export type ButtonState = {
+    pressed: boolean;
+    /** A mouse or pen over the button (never touch, where hover sticks after a tap). */
+    hovered: boolean;
+    focusVisible: boolean;
+};
+/** Corner radii in px, in logical order: start-start, start-end, end-end, end-start. */
+export type Corners = [number, number, number, number];
+type CornerResolver = (el: HTMLElement, state: ButtonState, px: (prop: string) => number) => Corners;
+/** Springs `el`'s four corners to whatever `corners` resolves for its current state. */
+export declare function shapeMorph(el: HTMLElement, corners: CornerResolver): () => void;
+/** Button, Toggle, ButtonIcon: --btn-shape at rest, --btn-pressed while pressed. */
+export declare const buttonCorners: CornerResolver;
+/**
+ * Split button halves. Outer corners stay round; inner corners are --split-inner at rest,
+ * --split-active while hovered, focused or pressed, and fully round on the trailing button while
+ * its menu is open.
+ */
+export declare const splitCorners: (side: "leading" | "trailing") => CornerResolver;
+/**
+ * Connected button group items. Inner corners (facing a neighbour) are --cbg-inner, then
+ * --cbg-pressed while pressed and fully round while selected; outer corners (the group's ends)
+ * are --cbg-outer.
+ */
+export declare const connectedCorners: CornerResolver;
+export {};

package/dist/components/buttons/shapeMorph.js

@@ -0,0 +1,142 @@
+import { springTokens, springTransition } from '../../animation/spring.js';
+import { animate, motionValue } from 'motion';
+const CORNER_PROPS = [
+    'borderStartStartRadius',
+    'borderStartEndRadius',
+    'borderEndEndRadius',
+    'borderEndStartRadius'
+];
+/** A length custom property in px. Handles the px, rem and em values the button classes use. */
+const lengthVar = (el, style, prop) => {
+    const value = style.getPropertyValue(prop).trim();
+    const n = parseFloat(value);
+    if (Number.isNaN(n))
+        return 0;
+    if (value.endsWith('rem'))
+        return n * parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (value.endsWith('em'))
+        return n * parseFloat(style.fontSize);
+    if (value.endsWith('%'))
+        return (n / 100) * Math.min(el.offsetWidth, el.offsetHeight);
+    return n;
+};
+const isDisabled = (el) => el.matches(':disabled, [aria-disabled="true"], [data-disabled]');
+/** Springs `el`'s four corners to whatever `corners` resolves for its current state. */
+export function shapeMorph(el, corners) {
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+    const spring = springTransition(springTokens.fastSpatial);
+    const state = { pressed: false, hovered: false, focusVisible: false };
+    const resolve = () => {
+        const style = getComputedStyle(el);
+        return corners(el, state, (prop) => lengthVar(el, style, prop));
+    };
+    const initial = resolve();
+    const values = initial.map((r) => motionValue(r));
+    const controls = [];
+    const unsubscribe = values.map((v, i) => v.on('change', (r) => (el.style[CORNER_PROPS[i]] = `${r}px`)));
+    values.forEach((v, i) => (el.style[CORNER_PROPS[i]] = `${v.get()}px`));
+    // Each spring restarts only when its target changes; a retarget mid-flight inherits velocity.
+    const targets = [...initial];
+    const retarget = () => {
+        resolve().forEach((to, i) => {
+            if (to === targets[i])
+                return;
+            targets[i] = to;
+            controls[i]?.stop();
+            if (reduced.matches)
+                values[i].jump(to);
+            else
+                controls[i] = animate(values[i], to, spring);
+        });
+    };
+    const set = (key, on) => {
+        if (state[key] === on)
+            return;
+        state[key] = on;
+        retarget();
+    };
+    const onPointerDown = (e) => {
+        if (e.button === 0 && !isDisabled(el))
+            set('pressed', true);
+    };
+    const onKeyDown = (e) => {
+        if (!e.repeat && (e.key === ' ' || e.key === 'Enter') && !isDisabled(el))
+            set('pressed', true);
+    };
+    const release = () => set('pressed', false);
+    const onEnter = (e) => {
+        if (e.pointerType !== 'touch')
+            set('hovered', true);
+    };
+    const onLeave = () => set('hovered', false);
+    const onFocus = () => set('focusVisible', el.matches(':focus-visible'));
+    const onBlur = () => {
+        state.pressed = false;
+        set('focusVisible', false);
+    };
+    // Selection, open state, size and shape arrive as attribute changes. Not `style`: the springs
+    // write the corners there every frame.
+    const observer = new MutationObserver(retarget);
+    observer.observe(el, {
+        attributes: true,
+        attributeFilter: ['class', 'data-state', 'aria-pressed', 'aria-expanded']
+    });
+    el.addEventListener('pointerdown', onPointerDown);
+    el.addEventListener('pointerenter', onEnter);
+    el.addEventListener('pointerleave', onLeave);
+    el.addEventListener('keydown', onKeyDown);
+    el.addEventListener('keyup', release);
+    el.addEventListener('focus', onFocus);
+    el.addEventListener('blur', onBlur);
+    window.addEventListener('pointerup', release);
+    window.addEventListener('pointercancel', release);
+    return () => {
+        observer.disconnect();
+        controls.forEach((c) => c?.stop());
+        unsubscribe.forEach((u) => u());
+        el.removeEventListener('pointerdown', onPointerDown);
+        el.removeEventListener('pointerenter', onEnter);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('keydown', onKeyDown);
+        el.removeEventListener('keyup', release);
+        el.removeEventListener('focus', onFocus);
+        el.removeEventListener('blur', onBlur);
+        window.removeEventListener('pointerup', release);
+        window.removeEventListener('pointercancel', release);
+    };
+}
+const all = (r) => [r, r, r, r];
+/** Button, Toggle, ButtonIcon: --btn-shape at rest, --btn-pressed while pressed. */
+export const buttonCorners = (_el, { pressed }, px) => all(pressed ? px('--btn-pressed') || px('--btn-shape') : px('--btn-shape'));
+/**
+ * Split button halves. Outer corners stay round; inner corners are --split-inner at rest,
+ * --split-active while hovered, focused or pressed, and fully round on the trailing button while
+ * its menu is open.
+ */
+export const splitCorners = (side) => (el, { pressed, hovered, focusVisible }, px) => {
+    const outer = px('--btn-round');
+    const open = side === 'trailing' && el.dataset.state === 'open';
+    const active = (pressed || hovered || focusVisible) && !isDisabled(el);
+    const inner = open ? outer : active ? px('--split-active') : px('--split-inner');
+    return side === 'leading' ? [outer, inner, inner, outer] : [inner, outer, outer, inner];
+};
+/**
+ * Connected button group items. Inner corners (facing a neighbour) are --cbg-inner, then
+ * --cbg-pressed while pressed and fully round while selected; outer corners (the group's ends)
+ * are --cbg-outer.
+ */
+export const connectedCorners = (el, { pressed }, px) => {
+    const selected = el.dataset.state === 'on';
+    const inner = pressed && !isDisabled(el)
+        ? px('--cbg-pressed')
+        : selected
+            ? px('--btn-round')
+            : px('--cbg-inner');
+    const outer = px('--cbg-outer');
+    const first = el.parentElement?.firstElementChild === el;
+    const last = el.parentElement?.lastElementChild === el;
+    const s = first ? outer : inner;
+    const e = last ? outer : inner;
+    // Horizontal: the start corners face the previous item. Vertical: the top corners do.
+    return el.dataset.orientation === 'vertical' ? [s, s, e, e] : [s, e, e, s];
+};

package/dist/components/buttons/split-button/SplitButton.mdx

@@ -0,0 +1,48 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as SplitStories from './SplitButton.stories.svelte';
+
+<Meta of={SplitStories} />
+
+<Title />
+
+<Subtitle>Split buttons open a menu of options related to their main action.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/split-button/specs) ·
+`import { SplitButton } from '@noxlovette/material';`
+
+<Canvas of={SplitStories.Playground} />
+
+<Controls of={SplitStories.Playground} />
+
+## Anatomy
+
+- **Leading button:** the main action, with a label, an icon, or both. An icon-only leading
+  button needs an `aria-label`.
+- **Trailing button:** always a menu icon. It opens the menu (`menuLabel` names it) and flips the
+  icon while open.
+
+The two share one colour style (elevated, filled, tonal or outlined; there is no text split
+button), and opening the menu doesn't change their colours.
+
+<Canvas of={SplitStories.WithLeadingIcon} />
+
+## Shape and size
+
+The buttons sit 2dp apart. Their outer corners are fully round; the inner corners are small at
+rest and round out while hovered, focused or pressed. While the menu is open, the trailing
+button becomes fully round and centres its icon, which sits slightly toward the leading button
+otherwise.
+
+| `size` | Height | Inner corner | Hovered/pressed | Trailing width | Menu icon |
+| ------ | ------ | ------------ | --------------- | -------------- | --------- |
+| `xs`   | 32dp   | 4dp          | 8dp             | 48dp           | 22dp      |
+| `sm`   | 40dp   | 4dp          | 12dp            | 48dp           | 22dp      |
+| `md`   | 56dp   | 4dp          | 12dp            | 56dp           | 26dp      |
+| `lg`   | 96dp   | 8dp          | 20dp            | 96dp           | 38dp      |
+| `xl`   | 136dp  | 12dp         | 20dp            | 136dp          | 50dp      |
+
+<Canvas of={SplitStories.Sizes} />
+
+## Migrating
+
+`color` and the `text` variant are gone, and the default size is now `sm`.

package/dist/components/buttons/split-button/SplitButton.stories.svelte

@@ -9,11 +9,7 @@
     argTypes: {
       variant: {
         control: 'select',
-        options: ['elevated', 'filled', 'tonal', 'outlined', 'text']
-      },
-      color: {
-        control: 'select',
-        options: ['default', 'primary', 'secondary', 'tertiary', 'error']
+        options: ['elevated', 'filled', 'tonal', 'outlined']
       },
       size: {
         control: 'select',
@@ -22,15 +18,14 @@
     },
     args: {
       variant: 'filled',
-      color: 'default',
-      size: 'md'
+      size: 'sm'
     }
   });
 </script>
 
 <Story name="Playground">
   {#snippet template(args)}
-    <SplitButton variant={args.variant} color={args.color} size={args.size}>
+    <SplitButton variant={args.variant} size={args.size}>
       {#snippet children()}
         Reply
       {/snippet}
@@ -42,8 +37,8 @@
   {/snippet}
 </Story>
 
-<Story name="WithLeadingIcon" asChild>
-  <div class="p-6">
+<Story name="With leading icon" asChild>
+  <div class="p-spacing-300">
     <SplitButton iconProps={{ name: 'send' }}>
       {#snippet children()}
         Send
@@ -57,8 +52,8 @@
 </Story>
 
 <Story name="Variants" asChild>
-  <div class="flex flex-wrap items-center gap-6 p-6">
-    {#each ['elevated', 'filled', 'tonal', 'outlined', 'text'] as const as variant (variant)}
+  <div class="gap-spacing-300 p-spacing-300 flex flex-wrap items-center">
+    {#each ['elevated', 'filled', 'tonal', 'outlined'] as const as variant (variant)}
       <SplitButton {variant}>
         {#snippet children()}
           Reply
@@ -73,7 +68,7 @@
 </Story>
 
 <Story name="Sizes" asChild>
-  <div class="flex flex-wrap items-center gap-6 p-6">
+  <div class="gap-spacing-300 p-spacing-300 flex flex-col items-start">
     {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}
       <SplitButton {size}>
         {#snippet children()}
@@ -89,7 +84,7 @@
 </Story>
 
 <Story name="Disabled" asChild>
-  <div class="p-6">
+  <div class="p-spacing-300">
     <SplitButton disabled>
       {#snippet children()}
         Reply