@noxlovette/material 0.5.1 → 0.6.0

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