@noxlovette/material 0.5.1 → 0.6.0

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

@@ -1,19 +1,24 @@
 import { tv } from 'tailwind-variants';
+/*
+ * Standard button group, per https://m3.material.io/components/button-groups/specs: an invisible
+ * container that spaces its buttons so each keeps a 48dp target (18/12/8/8/8dp for XS–XL).
+ * Pressing a button widens it by 15% and its neighbours give that width back (ButtonGroup.svelte).
+ */
 export const buttonGroup = tv({
     slots: {
-        root: 'md-btn-group-standard'
+        root: 'inline-flex w-max flex-nowrap'
     },
     variants: {
         orientation: {
-            horizontal: { root: 'flex-row' },
-            vertical: { root: 'flex-col' }
+            horizontal: { root: 'flex-row items-center' },
+            vertical: { root: 'w-auto flex-col items-stretch' }
         },
         size: {
-            xs: {},
-            sm: {},
-            md: {},
-            lg: {},
-            xl: {}
+            xs: { root: 'gap-[1.125rem]' },
+            sm: { root: 'gap-spacing-150' },
+            md: { root: 'gap-spacing-100' },
+            lg: { root: 'gap-spacing-100' },
+            xl: { root: 'gap-spacing-100' }
         }
     },
     defaultVariants: {

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

@@ -1,14 +1,20 @@
 import type { Snippet } from 'svelte';
-import type { ButtonGroupVariants } from './theme.js';
-export type ButtonGroupProps = ButtonGroupVariants & {
-    /** Layout direction of the buttons. */
+import type { ButtonSize } from '../theme.js';
+export type ButtonGroupProps = {
+    /** @default 'horizontal' */
     orientation?: 'horizontal' | 'vertical';
     /**
-     * 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.
+     * The size of the buttons inside. Sets the space between them: 18, 12, 8, 8 and 8dp for XS to
+     * XL, so each keeps a 48dp target.
+     * @default 'sm'
+     */
+    size?: ButtonSize;
+    /**
+     * `Button`s, `Toggle`s and `ButtonIcon`s, mixed freely. Avoid `text` buttons and `standard`
+     * icon buttons, which have no container to change shape.
      */
-    size?: ButtonGroupVariants['size'];
-    /** The buttons in the group — `Button`, `ButtonIcon`, or `Toggle` components, mixed freely. */
     children: Snippet;
+    /** Accessible name, when the group needs one (it gets `role="group"`). */
+    'aria-label'?: string;
     class?: string;
 };

package/dist/components/buttons/connected/ConnectedButtonGroup.mdx

@@ -0,0 +1,43 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ConnectedStories from './ConnectedButtonGroup.stories.svelte';
+
+<Meta of={ConnectedStories} />
+
+<Title />
+
+<Subtitle>Connected button groups show related options, one or several selected.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/button-groups/specs) ·
+`import { ConnectedButtonGroup, ConnectedButtonGroupItem } from '@noxlovette/material';`
+
+<Canvas of={ConnectedStories.Playground} />
+
+<Controls of={ConnectedStories.Playground} />
+
+## When to use
+
+For a small set of related options that change what the page shows, such as Walk, Bike, Drive.
+It replaces M3's segmented button. For separate actions, use `ButtonGroup`.
+`type="single"` keeps one item selected; `type="multiple"` allows several.
+
+## Colour and shape
+
+Items are toggle buttons in the group's `variant`: filled (default), tonal, outlined or
+elevated, with the same unselected and selected colours as `Toggle`. Selection shows through
+colour and shape, not a check mark:
+
+- Items sit 2dp apart. The outer corners are fully round, or the inner size with
+  `shape="square"`.
+- Inner corners are 8dp (16dp at L, 20dp at XL), tighten while pressed, and round out fully on
+  the selected item. Neighbours never change.
+
+<Canvas of={ConnectedStories.ColourStyles} />
+
+<Canvas of={ConnectedStories.SizesAndShapes} />
+
+## Accessibility
+
+Name the group with `aria-label`, and give icon-only items an `aria-label`. Arrow keys move
+between items; Space and Enter select. XS and S items are at least 48dp wide.
+
+<Canvas of={ConnectedStories.MultiSelectIcons} />

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte

@@ -3,29 +3,22 @@
   import ConnectedButtonGroup from './ConnectedButtonGroup.svelte';
   import ConnectedButtonGroupItem from './ConnectedButtonGroupItem.svelte';
 
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+  const variants = ['filled', 'tonal', 'outlined', 'elevated'] as const;
+
   const { Story } = defineMeta({
     title: 'Buttons/Connected Button Group',
     component: ConnectedButtonGroup,
     argTypes: {
-      type: {
-        control: 'select',
-        options: ['single', 'multiple']
-      },
-      orientation: {
-        control: 'select',
-        options: ['horizontal', 'vertical']
-      },
-      shape: {
-        control: 'select',
-        options: ['round', 'square']
-      },
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl']
-      }
+      type: { control: 'inline-radio', options: ['single', 'multiple'] },
+      variant: { control: 'select', options: variants },
+      orientation: { control: 'inline-radio', options: ['horizontal', 'vertical'] },
+      shape: { control: 'inline-radio', options: ['round', 'square'] },
+      size: { control: 'select', options: sizes }
     },
     args: {
       type: 'single',
+      variant: 'filled',
       orientation: 'horizontal',
       shape: 'round',
       size: 'sm'
@@ -33,86 +26,75 @@
   });
 </script>
 
+<script lang="ts">
+  let mode = $state('bike');
+  let format = $state<string[]>(['bold']);
+</script>
+
 <Story name="Playground">
   {#snippet template(args)}
     <ConnectedButtonGroup
-      type={args.type}
-      orientation={args.orientation}
-      shape={args.shape}
-      size={args.size}
-      value="left"
+      {...args}
+      value={args.type === 'multiple' ? [] : 'walk'}
+      aria-label="Travel mode"
     >
+      <ConnectedButtonGroupItem value="walk" label="Walk" iconProps={{ name: 'directions_walk' }} />
+      <ConnectedButtonGroupItem value="bike" label="Bike" iconProps={{ name: 'directions_bike' }} />
       <ConnectedButtonGroupItem
-        value="left"
-        label="Left"
-        iconProps={{ name: 'format_align_left' }}
-      />
-      <ConnectedButtonGroupItem
-        value="center"
-        label="Center"
-        iconProps={{ name: 'format_align_center' }}
-      />
-      <ConnectedButtonGroupItem
-        value="right"
-        label="Right"
-        iconProps={{ name: 'format_align_right' }}
+        value="drive"
+        label="Drive"
+        iconProps={{ name: 'directions_car' }}
       />
     </ConnectedButtonGroup>
   {/snippet}
 </Story>
 
-<Story name="Multi-select" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="multiple" value={['bold']}>
-      <ConnectedButtonGroupItem value="bold" label="Bold" iconProps={{ name: 'format_bold' }} />
+<Story name="Colour styles" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-md flex-col">
+    {#each variants as variant (variant)}
+      <ConnectedButtonGroup type="single" {variant} bind:value={mode} aria-label="Travel mode">
+        <ConnectedButtonGroupItem value="walk" label="Walk" />
+        <ConnectedButtonGroupItem value="bike" label="Bike" />
+        <ConnectedButtonGroupItem value="drive" label="Drive" />
+      </ConnectedButtonGroup>
+    {/each}
+  </div>
+</Story>
+
+<Story name="Multi-select icons" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col items-start">
+    <ConnectedButtonGroup type="multiple" bind:value={format} class="w-auto" aria-label="Format">
+      <ConnectedButtonGroupItem
+        value="bold"
+        aria-label="Bold"
+        iconProps={{ name: 'format_bold' }}
+      />
       <ConnectedButtonGroupItem
         value="italic"
-        label="Italic"
+        aria-label="Italic"
         iconProps={{ name: 'format_italic' }}
       />
       <ConnectedButtonGroupItem
         value="underline"
-        label="Underline"
+        aria-label="Underline"
         iconProps={{ name: 'format_underlined' }}
       />
     </ConnectedButtonGroup>
   </div>
 </Story>
 
-<Story name="Icon Only" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" value="list">
-      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>
-
-<Story name="Square Shape" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" shape="square" value="list">
-      <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>
-
-<Story name="Sizes" asChild>
-  <div class="flex flex-col gap-6 p-6">
-    {#each ['xs', 'sm', 'md', 'lg', 'xl'] as const as size (size)}
-      <ConnectedButtonGroup type="single" {size} value="list">
-        <ConnectedButtonGroupItem value="list" iconProps={{ name: 'view_list' }} />
-        <ConnectedButtonGroupItem value="grid" iconProps={{ name: 'grid_view' }} />
-      </ConnectedButtonGroup>
+<Story name="Sizes and shapes" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex max-w-xl flex-col">
+    {#each sizes as size (size)}
+      <div class="gap-spacing-200 flex">
+        {#each ['round', 'square'] as const as shape (shape)}
+          <ConnectedButtonGroup type="single" {size} {shape} value="b">
+            <ConnectedButtonGroupItem value="a" label="A" />
+            <ConnectedButtonGroupItem value="b" label="B" />
+            <ConnectedButtonGroupItem value="c" label="C" />
+          </ConnectedButtonGroup>
+        {/each}
+      </div>
     {/each}
   </div>
 </Story>
-
-<Story name="Vertical" asChild>
-  <div class="p-6">
-    <ConnectedButtonGroup type="single" orientation="vertical" value="list">
-      <ConnectedButtonGroupItem value="list" label="List" iconProps={{ name: 'view_list' }} />
-      <ConnectedButtonGroupItem value="grid" label="Grid" iconProps={{ name: 'grid_view' }} />
-    </ConnectedButtonGroup>
-  </div>
-</Story>

package/dist/components/buttons/connected/ConnectedButtonGroup.stories.svelte.d.ts

@@ -1,19 +1,4 @@
 import ConnectedButtonGroup from './ConnectedButtonGroup.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 ConnectedButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ConnectedButtonGroup = InstanceType<typeof ConnectedButtonGroup>;
+declare const ConnectedButtonGroup: import("svelte").Component<Record<string, never>, {}, "">;
+type ConnectedButtonGroup = ReturnType<typeof ConnectedButtonGroup>;
 export default ConnectedButtonGroup;

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte

@@ -1,9 +1,9 @@
 <!--
 @component
-A connected button group — the M3 replacement for the deprecated segmented
-button. Items sit in a shared pill (or square) shape with a small gap between
-them; selecting or pressing an item changes only that item's own shape and
-color, never its neighbors'.
+A connected button group, M3's replacement for the segmented button: toggle buttons 2dp apart
+in one shared shape, for related options such as Walk, Bike, Drive. Selecting an item rounds it
+out and gives it the selected colours; pressing tightens its inner corners. Neighbours never
+change.
 
 @see https://m3.material.io/components/button-groups/overview
 -->
@@ -21,9 +21,11 @@ color, never its neighbors'.
     disabled = false,
     loop = true,
     orientation = 'horizontal',
+    variant = 'filled',
     shape = 'round',
     size = 'sm',
     children,
+    'aria-label': ariaLabel,
     class: className
   }: ConnectedButtonGroupProps = $props();
 
@@ -35,6 +37,15 @@ color, never its neighbors'.
     },
     get shape() {
       return shape;
+    },
+    get variant() {
+      return variant;
+    },
+    get type() {
+      return type;
+    },
+    get value() {
+      return value;
     }
   });
 </script>
@@ -46,6 +57,7 @@ color, never its neighbors'.
   {disabled}
   {loop}
   {orientation}
+  aria-label={ariaLabel}
   class={cls.root({ class: clsx(className) })}
 >
   {@render children?.()}

package/dist/components/buttons/connected/ConnectedButtonGroup.svelte.d.ts

@@ -1,9 +1,9 @@
 import type { ConnectedButtonGroupProps } from './types.js';
 /**
- * A connected button group — the M3 replacement for the deprecated segmented
- * button. Items sit in a shared pill (or square) shape with a small gap between
- * them; selecting or pressing an item changes only that item's own shape and
- * color, never its neighbors'.
+ * A connected button group, M3's replacement for the segmented button: toggle buttons 2dp apart
+ * in one shared shape, for related options such as Walk, Bike, Drive. Selecting an item rounds it
+ * out and gives it the selected colours; pressing tightens its inner corners. Neighbours never
+ * change.
  *
  * @see https://m3.material.io/components/button-groups/overview
  */

package/dist/components/buttons/connected/ConnectedButtonGroupItem.svelte

@@ -1,14 +1,15 @@
 <!--
 @component
-A single item within a ConnectedButtonGroup. Selection is communicated through
-shape (round collapsing toward square) and color, matching the M3 spec — not
-through an overlaid check icon.
+One item of a `ConnectedButtonGroup`: a toggle button. Selection shows through its colour and
+shape (it rounds out), not a check mark.
 -->
 <script lang="ts">
   import { ToggleGroup } from 'bits-ui';
   import clsx from 'clsx';
   import { getContext } from 'svelte';
   import { Icon, Layer } from '../../../utils/index.js';
+  import { buttonColor, buttonElevation } from '../theme.js';
+  import { connectedCorners, shapeMorph } from '../shapeMorph.js';
   import { connectedButtonGroupItem } from './theme.js';
   import type { ConnectedButtonGroupCtx, ConnectedButtonGroupItemProps } from './types.js';
 
@@ -17,18 +18,44 @@ through an overlaid check icon.
     label,
     iconProps,
     disabled = false,
+    'aria-label': ariaLabel,
     class: className
   }: ConnectedButtonGroupItemProps = $props();
 
+  let ref = $state<HTMLElement | null>(null);
+  $effect(() => (ref ? shapeMorph(ref, connectedCorners) : undefined));
+
   const ctx = getContext<ConnectedButtonGroupCtx | undefined>('connectedButtonGroup');
-  const size = $derived(ctx?.size ?? 'sm');
-  const shape = $derived(ctx?.shape ?? 'round');
-  const { base, icon } = $derived(connectedButtonGroupItem({ size, shape }));
+  const variant = $derived(ctx?.variant ?? 'filled');
+  const selected = $derived(
+    ctx?.type === 'multiple'
+      ? Array.isArray(ctx.value) && ctx.value.includes(value)
+      : ctx?.value === value
+  );
+  const cls = $derived(
+    connectedButtonGroupItem({ size: ctx?.size ?? 'sm', shape: ctx?.shape ?? 'round' })
+  );
 </script>
 
-<ToggleGroup.Item {value} {disabled} class={base({ class: clsx(className) })}>
+<ToggleGroup.Item
+  bind:ref
+  {value}
+  {disabled}
+  aria-label={ariaLabel}
+  class={cls.base({
+    class: clsx(
+      buttonColor({ variant, state: selected ? 'selected' : 'unselected' }),
+      buttonElevation[variant],
+      className
+    )
+  })}
+>
   {#if iconProps}
-    <Icon {...iconProps} class={icon()} />
+    <Icon
+      fill={selected ? 1 : 0}
+      {...iconProps}
+      class={cls.icon({ class: clsx(iconProps.class) })}
+    />
   {/if}
   {#if label}
     <span>{label}</span>

package/dist/components/buttons/connected/ConnectedButtonGroupItem.svelte.d.ts

@@ -1,8 +1,7 @@
 import type { ConnectedButtonGroupItemProps } from './types.js';
 /**
- * A single item within a ConnectedButtonGroup. Selection is communicated through
- * shape (round collapsing toward square) and color, matching the M3 spec — not
- * through an overlaid check icon.
+ * One item of a `ConnectedButtonGroup`: a toggle button. Selection shows through its colour and
+ * shape (it rounds out), not a check mark.
  */
 declare const ConnectedButtonGroupItem: import("svelte").Component<ConnectedButtonGroupItemProps, {}, "">;
 type ConnectedButtonGroupItem = ReturnType<typeof ConnectedButtonGroupItem>;

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

@@ -38,19 +38,24 @@ export declare const connectedButtonGroup: import("tailwind-variants").TVReturnT
 export declare const connectedButtonGroupItem: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -62,24 +67,29 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, undefined, {
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -91,24 +101,29 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     size: {
         xs: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         sm: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-250 text-[20px]";
         };
         md: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-300 text-[24px]";
         };
         lg: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-400 text-[32px]";
         };
         xl: {
-            base: string;
+            base: string[];
+            icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
@@ -120,6 +135,6 @@ export declare const connectedButtonGroupItem: import("tailwind-variants").TVRet
         };
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }>>;

package/dist/components/buttons/connected/theme.js

@@ -1,7 +1,15 @@
 import { tv } from 'tailwind-variants';
+import { buttonBase, buttonSizes } from '../theme.js';
+/*
+ * Connected button group, per https://m3.material.io/components/button-groups/specs: toggle
+ * buttons 2dp apart that share one outline shape. Items take the button's measurements for their
+ * size. Corners (`.md-btn-connected` in styles/component.css): inner corners --cbg-inner, then
+ * --cbg-pressed while pressed and fully round while selected; outer corners --cbg-outer, fully
+ * round or, for the square shape, the inner size. XS and S items are at least 48dp wide.
+ */
 export const connectedButtonGroup = tv({
     slots: {
-        root: 'flex w-full items-stretch gap-0.5'
+        root: 'flex w-full items-stretch gap-spacing-25'
     },
     variants: {
         orientation: {
@@ -15,19 +23,34 @@ export const connectedButtonGroup = tv({
 });
 export const connectedButtonGroupItem = tv({
     slots: {
-        base: 'md-btn-connected layer-container state-layer relative inline-flex min-w-12 flex-1 items-center justify-center gap-2 bg-md-sys-color-surface-container-high px-4 md-sys-typescale-label-large text-md-sys-color-on-surface-variant outline-none disabled:cursor-not-allowed disabled:opacity-38 data-[state=on]:bg-md-sys-color-primary data-[state=on]:text-md-sys-color-on-primary',
-        icon: 'size-[18px] text-[18px]'
+        base: [buttonBase, 'md-btn-connected min-w-spacing-600 flex-1'],
+        icon: 'shrink-0'
     },
     variants: {
         size: {
-            xs: { base: 'h-8 [--cbg-inner:0.25rem]' },
-            sm: { base: 'h-10 [--cbg-inner:0.5rem]' },
-            md: { base: 'h-14 [--cbg-inner:0.5rem]' },
-            lg: { base: 'h-24 [--cbg-inner:1rem]' },
-            xl: { base: 'h-34 [--cbg-inner:1.25rem]' }
+            xs: {
+                base: [buttonSizes.xs.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.xs.icon
+            },
+            sm: {
+                base: [buttonSizes.sm.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.sm.icon
+            },
+            md: {
+                base: [buttonSizes.md.base, '[--cbg-inner:0.5rem] [--cbg-pressed:0.25rem]'],
+                icon: buttonSizes.md.icon
+            },
+            lg: {
+                base: [buttonSizes.lg.base, '[--cbg-inner:1rem] [--cbg-pressed:0.75rem]'],
+                icon: buttonSizes.lg.icon
+            },
+            xl: {
+                base: [buttonSizes.xl.base, '[--cbg-inner:1.25rem] [--cbg-pressed:1rem]'],
+                icon: buttonSizes.xl.icon
+            }
         },
         shape: {
-            round: { base: '[--cbg-outer:9999px]' },
+            round: { base: '[--cbg-outer:var(--btn-round)]' },
             square: { base: '[--cbg-outer:var(--cbg-inner)]' }
         }
     },