@noxlovette/material 0.5.0 → 0.6.0

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>;

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

@@ -1,35 +1,128 @@
 import { type VariantProps } from 'tailwind-variants';
-import type { ButtonMDVariants } from '../theme.js';
 export type SplitButtonVariants = VariantProps<typeof splitButton>;
-export declare const SPLIT_BUTTON_INNER_RADIUS: Record<NonNullable<ButtonMDVariants['size']>, string>;
 export declare const splitButton: import("tailwind-variants").TVReturnType<{
-    open: {
-        true: {
-            icon: string;
+    size: {
+        xs: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        sm: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        md: {
+            leading: string[];
+            leadingIcon: "size-spacing-300 text-[24px]";
+            trailing: string[];
+            chevron: string;
+        };
+        lg: {
+            leading: string[];
+            leadingIcon: "size-spacing-400 text-[32px]";
+            trailing: string[];
+            chevron: string;
+        };
+        xl: {
+            leading: string[];
+            leadingIcon: "size-spacing-500 text-[40px]";
+            trailing: string[];
+            chevron: string;
         };
-        false: {};
     };
 }, {
     root: string;
-    icon: string;
+    leading: string[];
+    leadingIcon: string;
+    trailing: string[];
+    chevron: string;
 }, undefined, {
-    open: {
-        true: {
-            icon: string;
+    size: {
+        xs: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        sm: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        md: {
+            leading: string[];
+            leadingIcon: "size-spacing-300 text-[24px]";
+            trailing: string[];
+            chevron: string;
+        };
+        lg: {
+            leading: string[];
+            leadingIcon: "size-spacing-400 text-[32px]";
+            trailing: string[];
+            chevron: string;
+        };
+        xl: {
+            leading: string[];
+            leadingIcon: "size-spacing-500 text-[40px]";
+            trailing: string[];
+            chevron: string;
         };
-        false: {};
     };
 }, {
     root: string;
-    icon: string;
+    leading: string[];
+    leadingIcon: string;
+    trailing: string[];
+    chevron: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    open: {
-        true: {
-            icon: string;
+    size: {
+        xs: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        sm: {
+            leading: string[];
+            leadingIcon: "size-spacing-250 text-[20px]";
+            trailing: string[];
+            chevron: string;
+        };
+        md: {
+            leading: string[];
+            leadingIcon: "size-spacing-300 text-[24px]";
+            trailing: string[];
+            chevron: string;
+        };
+        lg: {
+            leading: string[];
+            leadingIcon: "size-spacing-400 text-[32px]";
+            trailing: string[];
+            chevron: string;
+        };
+        xl: {
+            leading: string[];
+            leadingIcon: "size-spacing-500 text-[40px]";
+            trailing: string[];
+            chevron: string;
         };
-        false: {};
     };
 }, {
     root: string;
-    icon: string;
+    leading: string[];
+    leadingIcon: string;
+    trailing: string[];
+    chevron: string;
 }>>;
+/** The chevron's resting offset toward the leading button, in px (the `-translate-x-*` above). */
+export declare const SPLIT_CHEVRON_OFFSET: {
+    readonly xs: 1;
+    readonly sm: 1;
+    readonly md: 2;
+    readonly lg: 3;
+    readonly xl: 6;
+};

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

@@ -1,26 +1,84 @@
 import { tv } from 'tailwind-variants';
-// Inner (touching) corner radius per size — matches the ConnectedButtonGroup
-// scale (see buttons/connected/theme.ts's `--cbg-inner`), since a split button
-// is conceptually a 2-item connected group with a menu instead of a selection.
-export const SPLIT_BUTTON_INNER_RADIUS = {
-    xs: '0.25rem',
-    sm: '0.5rem',
-    md: '0.5rem',
-    lg: '1rem',
-    xl: '1.25rem'
-};
+import { buttonBase, buttonSizes } from '../theme.js';
+/*
+ * Split button, per https://m3.material.io/components/split-button/specs. Both halves take the
+ * button's height, type and outline for their size. The leading button has its own padding, the
+ * trailing button a fixed width around a larger menu icon, and they sit 2dp apart. The corner
+ * rules are `.md-btn-split-*` in styles/component.css: inner corners --split-inner at rest,
+ * --split-active while hovered, focused or pressed, and fully round on the trailing button while
+ * the menu is open.
+ */
 export const splitButton = tv({
     slots: {
-        root: 'inline-flex items-center gap-0.5',
-        icon: 'transition-transform md-sys-motion-fast-spatial'
+        root: 'inline-flex items-stretch gap-spacing-25',
+        leading: [buttonBase, 'md-btn-split-leading'],
+        leadingIcon: 'shrink-0',
+        trailing: [buttonBase, 'md-btn-split-trailing px-spacing-0'],
+        // Off centre toward the leading button while closed (it balances the round outer edge);
+        // SplitButton.svelte springs it to centre and flips it while open.
+        chevron: 'shrink-0'
     },
     variants: {
-        open: {
-            true: { icon: 'rotate-180' },
-            false: {}
+        size: {
+            xs: {
+                leading: [
+                    buttonSizes.xs.base,
+                    'ps-spacing-150 pe-spacing-125 [--split-active:0.5rem] [--split-inner:0.25rem]'
+                ],
+                leadingIcon: buttonSizes.xs.icon,
+                trailing: [
+                    buttonSizes.xs.base,
+                    'w-spacing-600 [--split-active:0.5rem] [--split-inner:0.25rem]'
+                ],
+                chevron: 'size-[22px] -translate-x-px text-[22px]'
+            },
+            sm: {
+                leading: [
+                    buttonSizes.sm.base,
+                    'ps-spacing-200 pe-spacing-150 [--split-active:0.75rem] [--split-inner:0.25rem]'
+                ],
+                leadingIcon: buttonSizes.sm.icon,
+                trailing: [
+                    buttonSizes.sm.base,
+                    'w-spacing-600 [--split-active:0.75rem] [--split-inner:0.25rem]'
+                ],
+                chevron: 'size-[22px] -translate-x-px text-[22px]'
+            },
+            md: {
+                leading: [
+                    buttonSizes.md.base,
+                    'px-spacing-300 [--split-active:0.75rem] [--split-inner:0.25rem]'
+                ],
+                leadingIcon: buttonSizes.md.icon,
+                trailing: [
+                    buttonSizes.md.base,
+                    'w-spacing-700 [--split-active:0.75rem] [--split-inner:0.25rem]'
+                ],
+                chevron: 'size-[26px] -translate-x-spacing-25 text-[26px]'
+            },
+            lg: {
+                leading: [
+                    buttonSizes.lg.base,
+                    'px-spacing-600 [--split-active:1.25rem] [--split-inner:0.5rem]'
+                ],
+                leadingIcon: buttonSizes.lg.icon,
+                trailing: [buttonSizes.lg.base, 'w-24 [--split-active:1.25rem] [--split-inner:0.5rem]'],
+                chevron: 'size-[38px] -translate-x-[3px] text-[38px]'
+            },
+            xl: {
+                leading: [
+                    buttonSizes.xl.base,
+                    'px-spacing-800 [--split-active:1.25rem] [--split-inner:0.75rem]'
+                ],
+                leadingIcon: buttonSizes.xl.icon,
+                trailing: [buttonSizes.xl.base, 'w-34 [--split-active:1.25rem] [--split-inner:0.75rem]'],
+                chevron: 'size-[50px] -translate-x-spacing-75 text-[50px]'
+            }
         }
     },
     defaultVariants: {
-        open: false
+        size: 'sm'
     }
 });
+/** The chevron's resting offset toward the leading button, in px (the `-translate-x-*` above). */
+export const SPLIT_CHEVRON_OFFSET = { xs: 1, sm: 1, md: 2, lg: 3, xl: 6 };

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

@@ -1,33 +1,39 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
-import type { ButtonMDVariants } from '../theme.js';
+import type { ButtonSize } from '../theme.js';
 export type SplitButtonProps = {
-    /** Label/content for the leading action button. */
-    children: Snippet;
-    /** `MenuItem` (or similar) rows rendered inside the trailing dropdown panel. */
+    /** The leading button's label. It can have a label, an icon, or both. */
+    children?: Snippet;
+    /** The menu: `MenuItem`s (and dividers or headings), as in `Menu`. */
     menuChildren: Snippet;
-    /** Called when the leading button itself is pressed (the primary action). */
+    /** The leading button's action. */
     onclick?: (e: MouseEvent) => void;
-    /** Optional leading icon for the primary action button. */
+    /** The leading button's icon. */
     iconProps?: IconProps;
-    /** The visual style shared by both segments. */
-    variant?: ButtonMDVariants['variant'];
-    /** The color scheme shared by both segments. */
-    color?: ButtonMDVariants['color'];
-    /** The size shared by both segments. Drives height, padding, and typescale. */
-    size?: ButtonMDVariants['size'];
-    /** Disables both the primary action and the menu trigger. */
+    /**
+     * Colour style of both buttons. Same colours as `Button`; opening the menu doesn't change them.
+     * There is no text split button.
+     * @default 'filled'
+     */
+    variant?: 'elevated' | 'filled' | 'tonal' | 'outlined';
+    /**
+     * Height 32, 40, 56, 96 or 136dp.
+     * @default 'sm'
+     */
+    size?: ButtonSize;
+    /** Disables both buttons. */
     disabled?: boolean;
-    /** Controlled open state of the trailing dropdown. @bindable */
+    /** Whether the menu is open. Bindable. */
     open?: boolean;
-    /** Alignment of the dropdown panel relative to the trailing trigger. @default 'end' */
+    /** Menu alignment against the trailing button. @default 'end' */
     align?: 'start' | 'center' | 'end';
     /**
-     * Accessible label for the trailing menu trigger (it has no visible text,
-     * only a chevron), and the tooltip shown on hover.
+     * Accessible name of the trailing button, which shows only an icon.
      * @default 'More options'
      */
     menuLabel?: string;
-    /** Additional CSS classes applied to the outer wrapper. */
+    /** Accessible name of the leading button when it shows only an icon. */
+    'aria-label'?: string;
+    /** Classes for the wrapper. */
     class?: string;
 };