@noxlovette/material 0.5.1 → 0.6.0

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

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

@@ -1,27 +1,25 @@
 <!--
 @component
-A leading action button fused to a trailing chevron trigger that opens a menu
-of related actions — e.g. "Reply" with a dropdown for "Reply all" / "Forward".
+A split button: a leading button for the main action and a trailing button that opens a menu of
+related ones, such as Send with Schedule send. The two share one colour style and sit 2dp apart;
+their inner corners tighten at rest and round out while hovered, pressed or open.
 
-The two segments render as one connected shape: pill on the outer edges,
-squared on the corners where they touch (see `SPLIT_BUTTON_INNER_RADIUS`).
-Compose the dropdown from `MenuItem` (and `Divider`, headings, etc.), the
-same way you would with `Menu`.
+Compose the menu from `MenuItem`s (and `Divider`, headings), as with `Menu`. For one trigger that
+only opens a menu, use `Menu`; for selectable options, `ConnectedButtonGroup`.
 
-Contrast with `Menu` (a single trigger that only ever opens a menu — no
-separate primary action) and `ConnectedButtonGroup` (multiple equal,
-selectable items, no menu).
-
-@see https://m3.material.io/components/buttons/guidelines#834f5f31-e363-4d0f-bc4d-abac128f5f0e
+@see https://m3.material.io/components/split-button/specs
 -->
 <script lang="ts">
   import { enterExit, presence } from '../../../animation/index.js';
-  import { DropdownMenu } from 'bits-ui';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import { Button, DropdownMenu } from 'bits-ui';
   import clsx from 'clsx';
-  import Button from '../Button.svelte';
-  import ButtonIcon from '../ButtonIcon.svelte';
-  import { buttonIcon } from '../theme.js';
-  import { SPLIT_BUTTON_INNER_RADIUS, splitButton } from './theme.js';
+  import { buttonColor, buttonElevation } from '../theme.js';
+  import { menu } from '../../containers/menu/theme.js';
+  import { SPLIT_CHEVRON_OFFSET, splitButton } from './theme.js';
+  import { animate } from 'motion';
+  import { springTokens, springTransition } from '../../../animation/spring.js';
+  import { shapeMorph, splitCorners } from '../shapeMorph.js';
   import type { SplitButtonProps } from './types.js';
 
   let {
@@ -30,61 +28,80 @@ selectable items, no menu).
     onclick,
     iconProps,
     variant = 'filled',
-    color = 'default',
-    size = 'md',
+    size = 'sm',
     disabled = false,
     open = $bindable(false),
     align = 'end',
     menuLabel = 'More options',
+    'aria-label': ariaLabel,
     class: className
   }: SplitButtonProps = $props();
 
-  const cls = $derived(splitButton({ open }));
-  // Reuse ButtonIcon's own icon-size classes so the chevron matches exactly
-  // what ButtonIcon would render — `iconProps.class` fully replaces its
-  // internal size classes (see ButtonIcon.svelte), so we recompute them here.
-  const chevronCls = $derived(
-    clsx(buttonIcon({ variant, color, size, width: 'narrow' }).icon(), cls.icon())
-  );
+  const cls = $derived(splitButton({ size }));
 
-  const innerRadius = $derived(SPLIT_BUTTON_INNER_RADIUS[size ?? 'md']);
-  const leadingStyle = $derived(
-    `border-start-end-radius:${innerRadius};border-end-end-radius:${innerRadius}`
-  );
-  const trailingStyle = $derived(
-    `border-start-start-radius:${innerRadius};border-end-start-radius:${innerRadius}`
+  let leadingEl = $state<HTMLElement | null>(null);
+  let trailingEl = $state<HTMLElement | null>(null);
+  $effect(() => (leadingEl ? shapeMorph(leadingEl, splitCorners('leading')) : undefined));
+  $effect(() => (trailingEl ? shapeMorph(trailingEl, splitCorners('trailing')) : undefined));
+
+  // Open: the menu icon springs to centre (cancelling its resting offset) and flips.
+  let chevronEl = $state<HTMLElement | null>(null);
+  $effect(() => {
+    const el = chevronEl;
+    if (!el) return;
+    const target = { x: open ? SPLIT_CHEVRON_OFFSET[size] : 0, rotate: open ? 180 : 0 };
+    const controls = matchMedia('(prefers-reduced-motion: reduce)').matches
+      ? animate(el, target, { duration: 0 })
+      : animate(el, target, springTransition(springTokens.fastSpatial));
+    return () => controls.stop();
+  });
+  const colorCls = $derived(
+    clsx(buttonColor({ variant, state: 'default' }), buttonElevation[variant])
   );
 </script>
 
 <div class={cls.root({ class: clsx(className) })}>
-  <Button {variant} {color} {size} {disabled} {iconProps} {onclick} style={leadingStyle}>
-    {@render children()}
-  </Button>
-
+  <Button.Root
+    bind:ref={leadingEl}
+    type="button"
+    {disabled}
+    {onclick}
+    aria-label={ariaLabel}
+    class={cls.leading({ class: colorCls })}
+    data-cy="m3-split-button"
+  >
+    {#if iconProps}
+      <Icon {...iconProps} class={cls.leadingIcon({ class: clsx(iconProps.class) })} />
+    {/if}
+    {@render children?.()}
+    <Layer />
+  </Button.Root>
   <DropdownMenu.Root bind:open>
     <DropdownMenu.Trigger {disabled}>
       {#snippet child({ props })}
-        <ButtonIcon
-          {variant}
-          {color}
-          {size}
-          {disabled}
-          width="narrow"
-          style={trailingStyle}
-          tooltipContent={menuLabel}
-          iconProps={{ name: 'arrow_drop_down', class: chevronCls }}
+        <Button.Root
+          bind:ref={trailingEl}
+          type="button"
           {...props}
-        />
+          aria-label={menuLabel}
+          class={cls.trailing({ class: colorCls })}
+          data-cy="m3-split-button-menu"
+        >
+          <span bind:this={chevronEl} class="inline-flex">
+            <Icon name="keyboard_arrow_down" class={cls.chevron()} />
+          </span>
+          <Layer />
+        </Button.Root>
       {/snippet}
     </DropdownMenu.Trigger>
-
     <DropdownMenu.Portal>
       <DropdownMenu.Content {align} sideOffset={4} class="z-100">
         {#snippet child({ wrapperProps, props, open: isOpen })}
-          <div {...wrapperProps} class={wrapperProps.class as any}>
+          <div {...wrapperProps}>
+            <!-- Menu's own panel, so MenuItem rows look the same here. -->
             <div
               {...props}
-              class="bg-md-sys-color-surface-container-high shadow-elevation-3 ring-md-sys-color-outline/10 max-w-sm min-w-48 gap-1 overflow-y-auto rounded-lg px-2 py-1"
+              class={menu().content()}
               {@attach presence(() => isOpen, enterExit.scale)}
             >
               {@render menuChildren()}

package/dist/components/buttons/split-button/SplitButton.svelte.d.ts

@@ -1,18 +1,13 @@
 import type { SplitButtonProps } from './types.js';
 /**
- * A leading action button fused to a trailing chevron trigger that opens a menu
- * of related actions — e.g. "Reply" with a dropdown for "Reply all" / "Forward".
+ * A split button: a leading button for the main action and a trailing button that opens a menu of
+ * related ones, such as Send with Schedule send. The two share one colour style and sit 2dp apart;
+ * their inner corners tighten at rest and round out while hovered, pressed or open.
  *
- * The two segments render as one connected shape: pill on the outer edges,
- * squared on the corners where they touch (see `SPLIT_BUTTON_INNER_RADIUS`).
- * Compose the dropdown from `MenuItem` (and `Divider`, headings, etc.), the
- * same way you would with `Menu`.
+ * Compose the menu from `MenuItem`s (and `Divider`, headings), as with `Menu`. For one trigger that
+ * only opens a menu, use `Menu`; for selectable options, `ConnectedButtonGroup`.
  *
- * Contrast with `Menu` (a single trigger that only ever opens a menu — no
- * separate primary action) and `ConnectedButtonGroup` (multiple equal,
- * selectable items, no menu).
- *
- * @see https://m3.material.io/components/buttons/guidelines#834f5f31-e363-4d0f-bc4d-abac128f5f0e
+ * @see https://m3.material.io/components/split-button/specs
  */
 declare const SplitButton: import("svelte").Component<SplitButtonProps, {}, "open">;
 type SplitButton = ReturnType<typeof SplitButton>;