@noxlovette/material 0.1.29 → 0.1.30

package/dist/components/buttons/button-group/ButtonGroup.svelte

@@ -0,0 +1,45 @@
+<!--
+@component
+A group of connected buttons for filtering or mode selection.
+
+Replaces the deprecated ToggleGroup / segmented-buttons pattern.
+
+@see https://m3.material.io/components/button-groups/overview
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { setContext } from 'svelte';
+  import { buttonGroup } from './theme.js';
+  import type { ButtonGroupProps } from './types.js';
+
+  let {
+    type,
+    value = $bindable(undefined),
+    onValueChange,
+    disabled = false,
+    loop = true,
+    orientation = 'horizontal',
+    shape = 'round',
+    size = 'sm',
+    children,
+    class: className
+  }: ButtonGroupProps = $props();
+
+  const cls = $derived(buttonGroup({ orientation, shape, size }));
+
+  const buttonGroupCtx = { get orientation() { return orientation; } };
+  setContext('buttonGroup', buttonGroupCtx);
+</script>
+
+<ToggleGroup.Root
+  {type}
+  bind:value
+  {onValueChange}
+  {disabled}
+  {loop}
+  {orientation}
+  class={cls.root({ class: clsx(className) })}
+>
+  {@render children?.()}
+</ToggleGroup.Root>

package/dist/components/buttons/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonGroupProps } from './types.js';
+/**
+ * A group of connected buttons for filtering or mode selection.
+ *
+ * Replaces the deprecated ToggleGroup / segmented-buttons pattern.
+ *
+ * @see https://m3.material.io/components/button-groups/overview
+ */
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "value">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/buttons/button-group/ButtonGroupItem.svelte

@@ -0,0 +1,34 @@
+<!--
+@component
+A single button within a ButtonGroup.
+Displays a leading check icon when selected, per M3 spec.
+-->
+<script lang="ts">
+  import { ToggleGroup } from 'bits-ui';
+  import clsx from 'clsx';
+  import { getContext } from 'svelte';
+  import { Icon, Layer } from '../../../utils/index.js';
+  import { buttonGroupItem } from './theme.js';
+  import type { ButtonGroupItemProps } from './types.js';
+
+  let { value, label, iconProps, disabled = false, class: className }: ButtonGroupItemProps =
+    $props();
+
+  const buttonGroupCtx = getContext<{ orientation: 'horizontal' | 'vertical' } | undefined>('buttonGroup');
+  const orientation = $derived(buttonGroupCtx?.orientation ?? 'horizontal');
+  const { base, checkIcon, icon } = $derived(buttonGroupItem({ orientation }));
+</script>
+
+<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
+  {#snippet children({ pressed })}
+    {#if pressed}
+      <Icon name="check" class={checkIcon()} />
+    {:else if iconProps}
+      <Icon {...iconProps} class={icon()} />
+    {/if}
+    {#if label}
+      <span>{label}</span>
+    {/if}
+    <Layer />
+  {/snippet}
+</ToggleGroup.Item>

package/dist/components/buttons/button-group/ButtonGroupItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonGroupItemProps } from './types.js';
+/**
+ * A single button within a ButtonGroup.
+ * Displays a leading check icon when selected, per M3 spec.
+ */
+declare const ButtonGroupItem: import("svelte").Component<ButtonGroupItemProps, {}, "">;
+type ButtonGroupItem = ReturnType<typeof ButtonGroupItem>;
+export default ButtonGroupItem;

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

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

package/dist/components/buttons/button-group/index.js

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

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

@@ -0,0 +1,143 @@
+import { type VariantProps } from 'tailwind-variants';
+export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
+export type ButtonGroupItemVariants = VariantProps<typeof buttonGroupItem>;
+export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    shape: {
+        round: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    shape: {
+        round: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    shape: {
+        round: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const buttonGroupItem: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    checkIcon: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,51 @@
+import { tv } from 'tailwind-variants';
+export const buttonGroup = tv({
+    slots: {
+        root: 'inline-flex overflow-hidden border border-md-sys-color-outline'
+    },
+    variants: {
+        orientation: {
+            horizontal: { root: 'flex-row' },
+            vertical: { root: 'flex-col h-auto w-auto' }
+        },
+        shape: {
+            round: { root: 'rounded-full' },
+            square: { root: 'rounded-lg' }
+        },
+        size: {
+            xs: { root: 'h-8' },
+            sm: { root: 'h-10' },
+            md: { root: 'h-14' },
+            lg: { root: 'h-24' }
+        }
+    },
+    compoundVariants: [
+        {
+            orientation: 'vertical',
+            class: { root: 'h-auto w-auto rounded-2xl' }
+        }
+    ],
+    defaultVariants: {
+        orientation: 'horizontal',
+        shape: 'round',
+        size: 'sm'
+    }
+});
+export const buttonGroupItem = tv({
+    slots: {
+        base: 'layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 px-4 md-sys-typescale-label-large text-md-sys-color-on-surface outline-none transition-colors disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-secondary-container data-[state=on]:text-md-sys-color-on-secondary-container',
+        checkIcon: 'size-[18px] text-[18px]',
+        icon: 'size-[18px] text-[18px]'
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: '[&:not(:last-child)]:border-r [&:not(:last-child)]:border-md-sys-color-outline'
+            },
+            vertical: {
+                base: '[&:not(:last-child)]:border-b [&:not(:last-child)]:border-md-sys-color-outline'
+            }
+        }
+    },
+    defaultVariants: { orientation: 'horizontal' }
+});

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

@@ -0,0 +1,25 @@
+import type { IconProps } from '../../../utils/index.js';
+import type { Snippet } from 'svelte';
+import type { ButtonGroupItemVariants, ButtonGroupVariants } from './theme.js';
+export type ButtonGroupProps = ButtonGroupVariants & {
+    /** Whether only one item can be active at a time, or multiple. */
+    type: 'single' | 'multiple';
+    /** Currently selected value(s). @bindable */
+    value?: any;
+    onValueChange?: (value: any) => void;
+    disabled?: boolean;
+    loop?: boolean;
+    orientation?: 'horizontal' | 'vertical';
+    children?: Snippet;
+    class?: string;
+};
+export type ButtonGroupItemProps = ButtonGroupItemVariants & {
+    /** The value this item represents. */
+    value: string;
+    /** Text label displayed inside the button. */
+    label?: string;
+    /** Optional leading icon. Replaced by a check mark when selected. */
+    iconProps?: IconProps;
+    disabled?: boolean;
+    class?: string;
+};

package/dist/components/buttons/button-group/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+export * from './button-group/index.js';
 export * from './connected/index.js';
 export * from './theme.js';
 export * from './types.js';

package/dist/components/buttons/index.js

@@ -1,5 +1,6 @@
 // THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
 // folder re-exports (export everything from these folders)
+export * from './button-group/index.js';
 export * from './connected/index.js';
 // re-export TS/JS modules from this folder
 export * from './theme.js';

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

@@ -1,6 +1,5 @@
 import { type VariantProps } from 'tailwind-variants';
 export type ButtonVariants = VariantProps<typeof button>;
-export type ButtonGroupVariants = VariantProps<typeof buttonGroup>;
 export type FABVariants = VariantProps<typeof fab>;
 export type FABMenuVariants = VariantProps<typeof fabMenu>;
 export type ButtonMDVariants = VariantProps<typeof button>;
@@ -341,25 +340,6 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     base: string;
     icon: string;
 }, undefined, unknown, unknown, undefined>>;
-export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "inline-flex rounded-lg shadow-xs", {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, "inline-flex rounded-lg shadow-xs", unknown, unknown, undefined>>;
 export declare const fab: import("tailwind-variants").TVReturnType<{
     config: {
         primary: {

package/dist/components/buttons/theme.js

@@ -412,19 +412,6 @@ export const buttonIcon = tv({
         }
     ]
 });
-export const buttonGroup = tv({
-    base: 'inline-flex rounded-lg shadow-xs',
-    variants: {
-        size: {
-            sm: '',
-            md: '',
-            lg: ''
-        }
-    },
-    defaultVariants: {
-        size: 'md'
-    }
-});
 export const fab = tv({
     slots: {
         base: 'md-component-button-base relative z-50',

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

@@ -1,20 +1,7 @@
 import type { AnchorButtonAttributes, IconProps } from '../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { ButtonGroupVariants, ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABVariants } from './theme.js';
-export interface ButtonGroupProps extends ButtonGroupVariants, HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content of the button group.
-     * @example
-     * <ButtonGroup>
-     *   <Button>Action 1</Button>
-     *   <Button>Action 2</Button>
-     * </ButtonGroup>
-     */
-    children: Snippet;
-    /** Whether all buttons in the group are disabled. */
-    disabled?: boolean;
-}
+import type { ButtonIconVariants, ButtonMDVariants, FABMenuItemVariants, FABVariants } from './theme.js';
 export type HTMLButtonOrAnchorAttributes = HTMLButtonAttributes & HTMLAnchorAttributes;
 export type ButtonMDProps = ButtonMDVariants & AnchorButtonAttributes & {
     /**

package/dist/components/forms/toggle-group/ToggleGroup.svelte

@@ -1,9 +1,12 @@
 <!--
 @component
+@deprecated Use `ButtonGroup` instead. Google has removed segmented buttons
+from the Material Design 3 spec in favour of Button groups.
+
 Toggle group renders as M3 segmented buttons — a continuous pill of
 connected toggle items for filtering or mode selection.
 
-@see https://m3.material.io/components/segmented-buttons/overview
+@see https://m3.material.io/components/button-groups/overview
 -->
 <script lang="ts">
   import { ToggleGroup } from 'bits-ui';

package/dist/components/forms/toggle-group/ToggleGroup.svelte.d.ts

@@ -1,10 +1,13 @@
 import { ToggleGroup } from 'bits-ui';
 import type { ToggleGroupProps } from './types.js';
 /**
+ * @deprecated Use `ButtonGroup` instead. Google has removed segmented buttons
+ * from the Material Design 3 spec in favour of Button groups.
+ *
  * Toggle group renders as M3 segmented buttons — a continuous pill of
  * connected toggle items for filtering or mode selection.
  *
- * @see https://m3.material.io/components/segmented-buttons/overview
+ * @see https://m3.material.io/components/button-groups/overview
  */
 declare const ToggleGroup: import("svelte").Component<ToggleGroupProps, {}, "value">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;

package/dist/components/forms/toggle-group/ToggleGroupItem.svelte

@@ -1,7 +1,6 @@
 <!--
 @component
-A single segment within a ToggleGroup.
-Shows a leading check icon when selected, per M3 segmented button spec.
+@deprecated Use `ButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`.
 -->
 <script lang="ts">
   import { ToggleGroup } from 'bits-ui';

package/dist/components/forms/toggle-group/ToggleGroupItem.svelte.d.ts

@@ -1,8 +1,5 @@
 import type { ToggleGroupItemProps } from './types.js';
-/**
- * A single segment within a ToggleGroup.
- * Shows a leading check icon when selected, per M3 segmented button spec.
- */
+/** @deprecated Use `ButtonGroupItem` instead. Pair with the deprecated `ToggleGroup`. */
 declare const ToggleGroupItem: import("svelte").Component<ToggleGroupItemProps, {}, "">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

package/dist/components/forms/toggle-group/theme.d.ts

@@ -39,16 +39,16 @@ export declare const toggleGroupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
             checkIcon?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
             checkIcon?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -59,8 +59,8 @@ export declare const toggleGroupItem: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
-            icon?: import("tailwind-merge").ClassNameValue;
             checkIcon?: import("tailwind-merge").ClassNameValue;
+            icon?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/components/forms/toggle-group/types.d.ts

@@ -1,6 +1,7 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { ToggleGroupItemVariants, ToggleGroupVariants } from './theme.js';
+/** @deprecated Use `ButtonGroupProps` from `ButtonGroup` instead. */
 export type ToggleGroupProps = ToggleGroupVariants & {
     /** Whether only one item can be active at a time, or multiple. */
     type: 'single' | 'multiple';
@@ -13,6 +14,7 @@ export type ToggleGroupProps = ToggleGroupVariants & {
     children?: Snippet;
     class?: string;
 };
+/** @deprecated Use `ButtonGroupItemProps` from `ButtonGroupItem` instead. */
 export type ToggleGroupItemProps = ToggleGroupItemVariants & {
     /** The value this item represents. */
     value: string;

package/dist/components/nav/rail/Rail.svelte

@@ -9,6 +9,7 @@ Navigation rails provide access to primary destinations in apps when using table
 <script lang="ts">
   import { clickOutside } from '../../../actions/index.js';
   import clsx from 'clsx';
+  import { setContext } from 'svelte';
   import type { RailProps } from './types';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { rail } from './theme';
@@ -27,6 +28,8 @@ Navigation rails provide access to primary destinations in apps when using table
   }: RailProps = $props();
 
   const expanded = $derived(!collapsed);
+  const railCtx = { get collapsed() { return collapsed; } };
+  setContext('rail', railCtx);
   const { base, items, ghost, scrim } = $derived(rail({ expanded, anchor, rounded }));
   const railBaseClass = $derived(`${base({ class: clsx(className) })} rail-base`);
   const toggleClass = $derived(collapsed ? 'cursor-e-resize' : 'cursor-w-resize');

package/dist/components/nav/rail/RailItem.svelte

@@ -6,6 +6,7 @@ A single destination within a navigation rail.
 -->
 <script lang="ts">
   import { page } from '$app/state';
+  import { getContext } from 'svelte';
   import type { RailItemProps } from './types.js';
   import { railElement } from './theme.js';
   import { Icon, Layer } from '../../../utils/index.js';
@@ -20,11 +21,14 @@ A single destination within a navigation rail.
     class: className,
     selected,
     disabled,
-    collapsed = true,
+    collapsed: collapsedProp,
     iconProps,
     ...rest
   }: RailItemProps = $props();
 
+  const railCtx = getContext<{ collapsed: boolean } | undefined>('rail');
+  const collapsed = $derived(collapsedProp ?? railCtx?.collapsed ?? true);
+
   const isDisabled = $derived(!!disabled);
   const target = $derived(!isDisabled && external ? '_blank' : undefined);
   const rel = $derived(!isDisabled && external ? 'noopener noreferrer' : undefined);

package/dist/components/toolbar/Toolbar.svelte

@@ -31,8 +31,15 @@ Toolbar provides a horizontal (or vertical) container for grouped actions.
     ...restProps
   }: ToolbarProps = $props();
 
-  setContext('toolbar-color', color);
-  setContext('toolbar-orientation', orientation);
+  const toolbarCtx = {
+    get color() {
+      return color;
+    },
+    get orientation() {
+      return orientation;
+    }
+  };
+  setContext('toolbar', toolbarCtx);
 
   const cls = $derived(toolbar({ orientation, variant, color }));
 </script>

package/dist/components/toolbar/ToolbarButton.svelte

@@ -19,8 +19,9 @@ Color is inherited from the parent Toolbar via context.
     ...restProps
   }: ToolbarButtonProps = $props();
 
-  const color = getContext<ToolbarColor>('toolbar-color') ?? 'standard';
-  const { base, icon } = toolbarButton({ color });
+  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>('toolbar');
+  const color = $derived(toolbarCtx?.color ?? 'standard');
+  const { base, icon } = $derived(toolbarButton({ color }));
 </script>
 
 <Toolbar.Button {disabled} class={base({ class: clsx(className) })} {...restProps}>

package/dist/components/toolbar/ToolbarDivider.svelte

@@ -2,11 +2,12 @@
   import { getContext } from 'svelte';
   import { toolbar } from './theme.js';
 
-  const orientation = getContext<'horizontal' | 'vertical'>('toolbar-orientation') ?? 'horizontal';
-  const cls = toolbar({ orientation });
+  const toolbarCtx = getContext<{ color: string; orientation: 'horizontal' | 'vertical' } | undefined>('toolbar');
+  const orientation = $derived(toolbarCtx?.orientation ?? 'horizontal');
+  const cls = $derived(toolbar({ orientation }));
 
   // separator runs perpendicular to the toolbar flow
-  const ariaOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';
+  const ariaOrientation = $derived(orientation === 'horizontal' ? 'vertical' : 'horizontal');
 </script>
 
 <div class={cls.divider()} role="separator" aria-orientation={ariaOrientation}></div>

package/dist/components/toolbar/ToolbarDivider.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ToolbarDivider: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ToolbarDivider = InstanceType<typeof ToolbarDivider>;
+declare const ToolbarDivider: import("svelte").Component<Record<string, never>, {}, "">;
+type ToolbarDivider = ReturnType<typeof ToolbarDivider>;
 export default ToolbarDivider;

package/dist/components/toolbar/ToolbarGroupItem.svelte

@@ -21,8 +21,9 @@ Color is inherited from the parent Toolbar via context.
     ...restProps
   }: ToolbarGroupItemProps = $props();
 
-  const color = getContext<ToolbarColor>('toolbar-color') ?? 'standard';
-  const { base, icon } = toolbarGroupItem({ color });
+  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>('toolbar');
+  const color = $derived(toolbarCtx?.color ?? 'standard');
+  const { base, icon } = $derived(toolbarGroupItem({ color }));
 </script>
 
 <Toolbar.GroupItem {value} {disabled} class={base({ class: clsx(className) })} {...restProps}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "type": "module",
   "license": "MIT",
   "repository": {