@noxlovette/material 0.3.3 → 0.4.1

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

@@ -0,0 +1,104 @@
+<!--
+@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".
+
+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`.
+
+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
+-->
+<script lang="ts">
+  import { DropdownMenu } from 'bits-ui';
+  import clsx from 'clsx';
+  import { easeEmphasizedDecel } from '../../../animation/easing.js';
+  import { enterExit } from '../../../animation/enterExit.js';
+  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 type { SplitButtonProps } from './types.js';
+
+  let {
+    children,
+    menuChildren,
+    onclick,
+    iconProps,
+    variant = 'filled',
+    color = 'default',
+    size = 'md',
+    disabled = false,
+    open = $bindable(false),
+    align = 'end',
+    menuLabel = 'More options',
+    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 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}`
+  );
+</script>
+
+<div class={cls.root({ class: clsx(className) })}>
+  <Button {variant} {color} {size} {disabled} {iconProps} {onclick} style={leadingStyle}>
+    {@render children()}
+  </Button>
+
+  <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 }}
+          {...props}
+        />
+      {/snippet}
+    </DropdownMenu.Trigger>
+
+    <DropdownMenu.Portal>
+      <DropdownMenu.Content forceMount {align} sideOffset={4} class="z-100">
+        {#snippet child({ wrapperProps, props, open: isOpen })}
+          {#if isOpen}
+            <div {...wrapperProps} class={wrapperProps.class as any}>
+              <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"
+                transition:enterExit={{
+                  duration: 200,
+                  easing: easeEmphasizedDecel,
+                  mode: 'scale'
+                }}
+              >
+                {@render menuChildren()}
+              </div>
+            </div>
+          {/if}
+        {/snippet}
+      </DropdownMenu.Content>
+    </DropdownMenu.Portal>
+  </DropdownMenu.Root>
+</div>

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

@@ -0,0 +1,19 @@
+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".
+ *
+ * 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`.
+ *
+ * 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
+ */
+declare const SplitButton: import("svelte").Component<SplitButtonProps, {}, "open">;
+type SplitButton = ReturnType<typeof SplitButton>;
+export default SplitButton;

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

@@ -0,0 +1,3 @@
+export * from './theme.js';
+export * from './types.js';
+export { default as SplitButton } from './SplitButton.svelte';

package/dist/components/{containers/panes → buttons/split-button}/index.js

@@ -3,6 +3,4 @@
 export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
-export { default as SinglePane } from './SinglePane.svelte';
-export { default as SplitPane } from './SplitPane.svelte';
-export { default as SupportingPane } from './SupportingPane.svelte';
+export { default as SplitButton } from './SplitButton.svelte';

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

@@ -0,0 +1,35 @@
+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;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}, undefined, {
+    open: {
+        true: {
+            icon: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    open: {
+        true: {
+            icon: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    icon: string;
+}>>;

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

@@ -0,0 +1,26 @@
+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'
+};
+export const splitButton = tv({
+    slots: {
+        root: 'inline-flex items-center gap-0.5',
+        icon: 'transition-transform duration-200'
+    },
+    variants: {
+        open: {
+            true: { icon: 'rotate-180' },
+            false: {}
+        }
+    },
+    defaultVariants: {
+        open: false
+    }
+});

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

@@ -0,0 +1,33 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { ButtonMDVariants } 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. */
+    menuChildren: Snippet;
+    /** Called when the leading button itself is pressed (the primary action). */
+    onclick?: (e: MouseEvent) => void;
+    /** Optional leading icon for the primary action button. */
+    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. */
+    disabled?: boolean;
+    /** Controlled open state of the trailing dropdown. @bindable */
+    open?: boolean;
+    /** Alignment of the dropdown panel relative to the trailing trigger. @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.
+     * @default 'More options'
+     */
+    menuLabel?: string;
+    /** Additional CSS classes applied to the outer wrapper. */
+    class?: string;
+};