@noxlovette/material 0.3.2 → 0.4.0

package/README.md

@@ -0,0 +1 @@
+# Google's Material Design System in Svelte

package/dist/actions/index.d.ts

@@ -3,3 +3,4 @@ export * from './floating.js';
 export * from './keyboard.js';
 export * from './portal.js';
 export * from './positionFloating.js';
+export * from './rovingFocusGroup.js';

package/dist/actions/index.js

@@ -3,3 +3,4 @@ export * from './floating.js';
 export * from './keyboard.js';
 export * from './portal.js';
 export * from './positionFloating.js';
+export * from './rovingFocusGroup.js';

package/dist/actions/rovingFocusGroup.d.ts

@@ -0,0 +1,20 @@
+export type RovingFocusGroupParams = {
+    /** CSS selector (relative to the node) matching the focusable candidates. */
+    candidateSelector: string;
+    /** Loop from the last candidate back to the first (and vice versa). */
+    loop?: boolean;
+    /** Disable the group without unmounting it (leaves existing tabindex/focus alone). */
+    enabled?: boolean;
+};
+/**
+ * Roving-tabindex keyboard navigation for a group of sibling elements (e.g. table rows,
+ * list items): only one candidate is ever a Tab stop, and ArrowDown/ArrowUp (plus the
+ * j/k vim aliases) move focus — and the roving tab stop — between candidates. Tab and
+ * Shift+Tab keep working natively since they only ever see the single active tabindex=0
+ * candidate. Modeled on bits-ui's RovingFocusGroup (packages/bits-ui/src/lib/internal/
+ * roving-focus-group.ts), adapted to a plain Svelte action instead of a headless class.
+ */
+export declare function rovingFocusGroup(node: HTMLElement, params: RovingFocusGroupParams): {
+    update(newParams: RovingFocusGroupParams): void;
+    destroy(): void;
+};

package/dist/actions/rovingFocusGroup.js

@@ -0,0 +1,82 @@
+const NEXT_KEYS = new Set(['ArrowDown', 'j']);
+const PREV_KEYS = new Set(['ArrowUp', 'k']);
+/**
+ * Roving-tabindex keyboard navigation for a group of sibling elements (e.g. table rows,
+ * list items): only one candidate is ever a Tab stop, and ArrowDown/ArrowUp (plus the
+ * j/k vim aliases) move focus — and the roving tab stop — between candidates. Tab and
+ * Shift+Tab keep working natively since they only ever see the single active tabindex=0
+ * candidate. Modeled on bits-ui's RovingFocusGroup (packages/bits-ui/src/lib/internal/
+ * roving-focus-group.ts), adapted to a plain Svelte action instead of a headless class.
+ */
+export function rovingFocusGroup(node, params) {
+    let p = params;
+    function candidates() {
+        return Array.from(node.querySelectorAll(p.candidateSelector));
+    }
+    function setup() {
+        if (!p.enabled)
+            return;
+        const items = candidates();
+        if (!items.length)
+            return;
+        const active = items.includes(document.activeElement)
+            ? document.activeElement
+            : items[0];
+        for (const item of items) {
+            item.tabIndex = item === active ? 0 : -1;
+        }
+    }
+    function handleFocusIn(event) {
+        if (!p.enabled)
+            return;
+        const items = candidates();
+        const target = event.target;
+        if (!items.includes(target))
+            return;
+        for (const item of items) {
+            item.tabIndex = item === target ? 0 : -1;
+        }
+    }
+    function handleKeydown(event) {
+        if (!p.enabled)
+            return;
+        const target = event.target;
+        const items = candidates();
+        const index = items.indexOf(target);
+        if (index === -1)
+            return;
+        let nextIndex;
+        if (NEXT_KEYS.has(event.key))
+            nextIndex = index + 1;
+        else if (PREV_KEYS.has(event.key))
+            nextIndex = index - 1;
+        else if (event.key === 'Home')
+            nextIndex = 0;
+        else if (event.key === 'End')
+            nextIndex = items.length - 1;
+        if (nextIndex === undefined)
+            return;
+        if (nextIndex < 0)
+            nextIndex = p.loop ? items.length - 1 : 0;
+        else if (nextIndex >= items.length)
+            nextIndex = p.loop ? 0 : items.length - 1;
+        const nextItem = items[nextIndex];
+        if (!nextItem || nextItem === target)
+            return;
+        event.preventDefault();
+        nextItem.focus();
+    }
+    setup();
+    node.addEventListener('keydown', handleKeydown);
+    node.addEventListener('focusin', handleFocusIn);
+    return {
+        update(newParams) {
+            p = newParams;
+            setup();
+        },
+        destroy() {
+            node.removeEventListener('keydown', handleKeydown);
+            node.removeEventListener('focusin', handleFocusIn);
+        }
+    };
+}

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

@@ -1,16 +1,16 @@
 export declare const badge: import("tailwind-variants").TVReturnType<{
     size: {
-        sm: string;
-        lg: string;
+        sm: "size-1.5 top-0 right-3";
+        lg: "h-3 min-w-3 p-1 -top-1 right-1";
     };
 }, undefined, "bg-md-sys-color-error text-md-sys-color-on-error  absolute rounded-full md-sys-typescale-label-small inline-flex items-center justify-center", {
     size: {
-        sm: string;
-        lg: string;
+        sm: "size-1.5 top-0 right-3";
+        lg: "h-3 min-w-3 p-1 -top-1 right-1";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     size: {
-        sm: string;
-        lg: string;
+        sm: "size-1.5 top-0 right-3";
+        lg: "h-3 min-w-3 p-1 -top-1 right-1";
     };
-}, undefined, "bg-md-sys-color-error text-md-sys-color-on-error  absolute rounded-full md-sys-typescale-label-small inline-flex items-center justify-center", unknown, unknown, undefined>>;
+}, undefined>>;

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

@@ -0,0 +1,83 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from '../Button.svelte';
+  import ButtonIcon from '../ButtonIcon.svelte';
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Buttons/Button Group',
+    component: ButtonGroup,
+    argTypes: {
+      orientation: {
+        control: 'select',
+        options: ['horizontal', 'vertical']
+      },
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl']
+      }
+    },
+    args: {
+      orientation: 'horizontal',
+      size: 'sm'
+    }
+  });
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <ButtonGroup orientation={args.orientation} size={args.size}>
+      <Button variant="tonal">Left</Button>
+      <Button variant="tonal">Center</Button>
+      <Button variant="tonal">Right</Button>
+    </ButtonGroup>
+  {/snippet}
+</Story>
+
+<Story name="Mixed Variants and Colors" asChild>
+  <div class="p-6">
+    <ButtonGroup size="sm">
+      <Button variant="outlined">Cancel</Button>
+      <Button variant="tonal" color="secondary">Save draft</Button>
+      <Button variant="filled" color="primary">Publish</Button>
+    </ButtonGroup>
+  </div>
+</Story>
+
+<Story name="Icon Toolbar" asChild>
+  <div class="flex flex-wrap gap-8 p-6">
+    <ButtonGroup size="sm">
+      <ButtonIcon variant="tonal" variation="toggle" iconProps={{ name: 'mic' }} />
+      <ButtonIcon variant="tonal" variation="toggle" iconProps={{ name: 'videocam' }} />
+      <ButtonIcon variant="tonal" iconProps={{ name: 'more_vert' }} />
+      <ButtonIcon variant="filled" color="error" iconProps={{ name: 'call_end' }} />
+    </ButtonGroup>
+  </div>
+</Story>
+
+<Story name="Sizes" asChild>
+  <div class="flex flex-wrap items-center gap-8 p-6">
+    <ButtonGroup size="xs">
+      <Button size="xs" variant="tonal">XS</Button>
+      <Button size="xs" variant="tonal">XS</Button>
+    </ButtonGroup>
+    <ButtonGroup size="md">
+      <Button size="md" variant="tonal">M</Button>
+      <Button size="md" variant="tonal">M</Button>
+    </ButtonGroup>
+    <ButtonGroup size="xl">
+      <Button size="xl" variant="tonal">XL</Button>
+      <Button size="xl" variant="tonal">XL</Button>
+    </ButtonGroup>
+  </div>
+</Story>
+
+<Story name="Vertical" asChild>
+  <div class="p-6">
+    <ButtonGroup orientation="vertical" size="sm">
+      <Button variant="tonal">Top</Button>
+      <Button variant="tonal">Middle</Button>
+      <Button variant="tonal">Bottom</Button>
+    </ButtonGroup>
+  </div>
+</Story>

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

@@ -0,0 +1,19 @@
+import ButtonGroup from './ButtonGroup.svelte';
+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 ButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonGroup = InstanceType<typeof ButtonGroup>;
+export default ButtonGroup;

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

@@ -1,49 +1,30 @@
 <!--
 @component
-A group of connected buttons for filtering or mode selection.
+A standard button group — an invisible container that adds spacing between
+buttons and lets them mix variants, colors, and widths freely. Pressing a
+button also nudges the width of its immediate neighbors, per the M3 spec.
 
-Replaces the deprecated ToggleGroup / segmented-buttons pattern.
+Buttons keep their own identity here; this is a plain layout wrapper around
+`Button` / `ButtonIcon` / `Toggle` children, not a selection primitive. For a
+single/multi-select segmented control, use `ConnectedButtonGroup` instead.
 
 @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);
+  const cls = $derived(buttonGroup({ orientation, size }));
 </script>
 
-<ToggleGroup.Root
-  {type}
-  bind:value
-  {onValueChange}
-  {disabled}
-  {loop}
-  {orientation}
-  class={cls.root({ class: clsx(className) })}
->
-  {@render children?.()}
-</ToggleGroup.Root>
+<div class={cls.root({ class: clsx(className) })} data-size={size} data-orientation={orientation}>
+  {@render children()}
+</div>

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

@@ -1,11 +1,15 @@
 import type { ButtonGroupProps } from './types.js';
 /**
- * A group of connected buttons for filtering or mode selection.
+ * A standard button group — an invisible container that adds spacing between
+ * buttons and lets them mix variants, colors, and widths freely. Pressing a
+ * button also nudges the width of its immediate neighbors, per the M3 spec.
  *
- * Replaces the deprecated ToggleGroup / segmented-buttons pattern.
+ * Buttons keep their own identity here; this is a plain layout wrapper around
+ * `Button` / `ButtonIcon` / `Toggle` children, not a selection primitive. For a
+ * single/multi-select segmented control, use `ConnectedButtonGroup` instead.
  *
  * @see https://m3.material.io/components/button-groups/overview
  */
-declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "value">;
+declare const ButtonGroup: import("svelte").Component<ButtonGroupProps, {}, "">;
 type ButtonGroup = ReturnType<typeof ButtonGroup>;
 export default ButtonGroup;

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

@@ -1,4 +1,3 @@
 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

@@ -1,4 +1,6 @@
+// THIS FILE IS AUTO-GENERATED BY scripts/generate-components-index.ts - DO NOT EDIT MANUALLY
+// re-export TS/JS modules from this folder
 export * from './theme.js';
 export * from './types.js';
+// default exports for components in this folder
 export { default as ButtonGroup } from './ButtonGroup.svelte';
-export { default as ButtonGroupItem } from './ButtonGroupItem.svelte';

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

@@ -1,6 +1,5 @@
 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: {
@@ -10,27 +9,12 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-    shape: {
-        round: {
-            root: string;
-        };
-        square: {
-            root: string;
-        };
-    };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
     };
 }, {
     root: string;
@@ -43,31 +27,16 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-    shape: {
-        round: {
-            root: string;
-        };
-        square: {
-            root: string;
-        };
-    };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
     };
 }, {
     root: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string;
@@ -76,68 +45,13 @@ export declare const buttonGroup: import("tailwind-variants").TVReturnType<{
             root: string;
         };
     };
-    shape: {
-        round: {
-            root: string;
-        };
-        square: {
-            root: string;
-        };
-    };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
+        xs: {};
+        sm: {};
+        md: {};
+        lg: {};
+        xl: {};
     };
 }, {
     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

@@ -1,51 +1,23 @@
 import { tv } from 'tailwind-variants';
 export const buttonGroup = tv({
     slots: {
-        root: 'inline-flex overflow-hidden border border-md-sys-color-outline'
+        root: 'md-btn-group-standard'
     },
     variants: {
         orientation: {
             horizontal: { root: 'flex-row' },
-            vertical: { root: 'flex-col h-auto w-auto' }
-        },
-        shape: {
-            round: { root: 'rounded-full' },
-            square: { root: 'rounded-lg' }
+            vertical: { root: 'flex-col' }
         },
         size: {
-            xs: { root: 'h-8' },
-            sm: { root: 'h-10' },
-            md: { root: 'h-14' },
-            lg: { root: 'h-24' }
+            xs: {},
+            sm: {},
+            md: {},
+            lg: {},
+            xl: {}
         }
     },
-    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

@@ -1,25 +1,14 @@
-import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
-import type { ButtonGroupItemVariants, ButtonGroupVariants } from './theme.js';
+import type { 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;
+    /** Layout direction of the buttons. */
     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;
+    /**
+     * Drives the gap between buttons and the press-squeeze amount applied to a
+     * pressed button's immediate neighbors. Match the size of the buttons inside.
+     */
+    size?: ButtonGroupVariants['size'];
+    /** The buttons in the group — `Button`, `ButtonIcon`, or `Toggle` components, mixed freely. */
+    children: Snippet;
     class?: string;
 };