@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/buttons/Button.svelte

@@ -1,58 +1,62 @@
 <!--
 @component
-Buttons help people take actions, such as sending an email, sharing a document, or liking a comment.
+Buttons prompt most actions in a UI.
 
-- Filled: High emphasis
-- Tonal: Medium-high emphasis
-- Outlined: Medium emphasis
-- Text: Low emphasis
-- Elevated: High emphasis
+- Filled: final or unblocking actions (default)
+- Tonal: important actions a step below filled
+- Elevated: only to stand apart from a patterned background
+- Outlined: attention without being primary, or a way out of a flow
+- Text: optional actions
 
-@see https://m3.material.io/components/all-buttons
+For a two-state button use `Toggle`.
+
+@see https://m3.material.io/components/buttons/specs
 -->
 <script lang="ts">
-  import type { ButtonMDProps } from './types.js';
+  import type { ButtonProps } from './types.js';
   import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
-  import { button } from './theme.js';
+  import { button, buttonColor } from './theme.js';
   import clsx from 'clsx';
+  import { buttonCorners, shapeMorph } from './shapeMorph.js';
   import { Button, type ButtonRootProps } from 'bits-ui';
 
   let {
     children,
     iconProps,
     variant = 'filled',
-    color = 'default',
-    size = 'md',
+    size = 'sm',
     shape = 'round',
     disabled,
-    selected,
     formaction,
     loading,
     class: className,
     ...restProps
-  }: ButtonMDProps = $props();
+  }: ButtonProps = $props();
+
+  let ref = $state<HTMLElement | null>(null);
+  $effect(() => (ref ? shapeMorph(ref, buttonCorners) : undefined));
 
-  const { base, icon } = $derived(button({ variant, color, shape, size, selected }));
-  const btnCls = $derived(base({ class: clsx(className) }));
+  const cls = $derived(button({ variant, size, shape }));
+  const btnCls = $derived(
+    cls.base({ class: clsx(buttonColor({ variant, state: 'default' }), className) })
+  );
 </script>
 
 <Button.Root
+  bind:ref
   {disabled}
   {formaction}
   class={btnCls}
+  aria-busy={loading || undefined}
   data-cy="m3-button"
   {...restProps as ButtonRootProps}
 >
-  {#if iconProps}
-    {#if loading}
-      <LoadingIndicator container={variant === 'filled'} class={icon()} />
-    {:else}
-      <Icon class={icon()} {...iconProps} />
-      {@render children?.()}
-    {/if}
-  {:else if loading}
-    <LoadingIndicator container={variant === 'filled'} />
-  {:else}
+  {#if loading}
+    <LoadingIndicator center={false} class={cls.icon({ class: 'text-current' })} />
+  {:else if iconProps}
+    <Icon {...iconProps} class={cls.icon({ class: clsx(iconProps.class) })} />
+  {/if}
+  {#if !loading || iconProps}
     {@render children?.()}
   {/if}
   <Layer />

package/dist/components/buttons/Button.svelte.d.ts

@@ -1,16 +1,18 @@
-import type { ButtonMDProps } from './types.js';
+import type { ButtonProps } from './types.js';
 import { Button } from 'bits-ui';
 /**
- * Buttons help people take actions, such as sending an email, sharing a document, or liking a comment.
+ * Buttons prompt most actions in a UI.
  *
- * - Filled: High emphasis
- * - Tonal: Medium-high emphasis
- * - Outlined: Medium emphasis
- * - Text: Low emphasis
- * - Elevated: High emphasis
+ * - Filled: final or unblocking actions (default)
+ * - Tonal: important actions a step below filled
+ * - Elevated: only to stand apart from a patterned background
+ * - Outlined: attention without being primary, or a way out of a flow
+ * - Text: optional actions
  *
- * @see https://m3.material.io/components/all-buttons
+ * For a two-state button use `Toggle`.
+ *
+ * @see https://m3.material.io/components/buttons/specs
  */
-declare const Button: import("svelte").Component<ButtonMDProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/buttons/ButtonIcon.mdx

@@ -0,0 +1,52 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as IconStories from './ButtonIcon.stories.svelte';
+
+<Meta of={IconStories} />
+
+<Title />
+
+<Subtitle>Icon buttons help people take minor actions with one tap.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/icon-buttons/specs) ·
+`import { ButtonIcon } from '@noxlovette/material';`
+
+<Canvas of={IconStories.Playground} />
+
+<Controls of={IconStories.Playground} />
+
+## Colour styles
+
+`filled` (default), `tonal`, `outlined` and `standard`. `standard` has no container until it is
+hovered, focused or pressed; use it in app bars, text fields, sheets and other dense places.
+
+With `variation="toggle"`, the button has a selected state (`aria-pressed`, bindable `pressed`).
+Unselected, a filled toggle uses surface container; selected, each style takes its strong colour
+(primary, secondary, inverse surface, or a primary icon for standard). The icon fills while
+selected, and the resting shape swaps (round ↔ square).
+
+<Canvas of={IconStories.ColourStyles} />
+
+## Sizes and widths
+
+| `size` | Height | Icon | Narrow | Default | Wide  |
+| ------ | ------ | ---- | ------ | ------- | ----- |
+| `xs`   | 32dp   | 20dp | 28dp   | 32dp    | 40dp  |
+| `sm`   | 40dp   | 24dp | 32dp   | 40dp    | 52dp  |
+| `md`   | 56dp   | 24dp | 48dp   | 56dp    | 72dp  |
+| `lg`   | 96dp   | 32dp | 64dp   | 96dp    | 128dp |
+| `xl`   | 136dp  | 40dp | 104dp  | 136dp   | 184dp |
+
+`sm` is the default. XS and S keep a 48dp target area. Square corners are 12, 12, 16, 28 and
+28dp; pressed, both shapes tighten to 8, 8, 12, 16 and 16dp.
+
+<Canvas of={IconStories.SizesAndWidths} />
+
+## Accessibility
+
+An icon has no text, so give every icon button a name: `aria-label`, or `tooltipContent`, which
+shows on hover and focus and becomes the name when there is no `aria-label`.
+
+## Migrating
+
+`variant="text"` is now `variant="standard"`, the spec's name, and the default is now `filled`
+(it was `text`). `elevated`, `bare` and `color` are gone.

package/dist/components/buttons/ButtonIcon.stories.svelte

@@ -2,73 +2,97 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import ButtonIcon from './ButtonIcon.svelte';
 
+  const variants = ['filled', 'tonal', 'outlined', 'standard'] as const;
+  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+  const widths = ['narrow', 'default', 'wide'] as const;
+
   const { Story } = defineMeta({
     title: 'Buttons/Button Icon',
     component: ButtonIcon,
     argTypes: {
-      variant: {
-        control: 'select',
-        options: ['elevated', 'filled', 'tonal', 'outlined', 'text', 'bare']
-      },
-      color: {
-        control: 'select',
-        options: ['default', 'primary', 'secondary', 'tertiary', 'error']
-      },
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl']
-      },
-      width: {
-        control: 'select',
-        options: ['default', 'narrow', 'wide']
-      },
-      shape: {
-        control: 'select',
-        options: ['round', 'square']
-      },
-      variation: {
-        control: 'select',
-        options: ['default', 'toggle']
-      },
+      variant: { control: 'select', options: variants },
+      size: { control: 'select', options: sizes },
+      width: { control: 'inline-radio', options: widths },
+      shape: { control: 'inline-radio', options: ['round', 'square'] },
+      variation: { control: 'inline-radio', options: ['default', 'toggle'] },
       disabled: { control: 'boolean' },
-      loading: { control: 'boolean' },
-      tooltipContent: { control: 'text' }
+      loading: { control: 'boolean' }
     },
     args: {
-      variant: 'text',
-      color: 'primary',
-      size: 'md',
+      variant: 'filled',
+      size: 'sm',
       width: 'default',
       shape: 'round',
       variation: 'default',
       disabled: false,
       loading: false,
-      iconProps: { name: 'favorite' },
-      tooltipContent: 'Favorite'
+      tooltipContent: 'Favourite',
+      iconProps: { name: 'favorite' }
     }
   });
 </script>
 
-<Story name="Playground" />
+<Story name="Playground">
+  {#snippet template(args)}
+    <ButtonIcon {...args} iconProps={{ name: 'favorite' }} />
+  {/snippet}
+</Story>
+
+<Story name="Colour styles" asChild>
+  <div
+    class="gap-spacing-200 p-spacing-300 grid grid-cols-[repeat(3,auto)] items-center justify-start"
+  >
+    {#each variants as variant (variant)}
+      <ButtonIcon {variant} tooltipContent={variant} iconProps={{ name: 'settings' }} />
+      <ButtonIcon
+        {variant}
+        variation="toggle"
+        tooltipContent="{variant} toggle, unselected"
+        iconProps={{ name: 'bookmark' }}
+      />
+      <ButtonIcon
+        {variant}
+        variation="toggle"
+        pressed
+        tooltipContent="{variant} toggle, selected"
+        iconProps={{ name: 'bookmark' }}
+      />
+    {/each}
+  </div>
+</Story>
 
-<Story name="Variants" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
-    <ButtonIcon variant="elevated" color="primary" iconProps={{ name: 'favorite' }} />
-    <ButtonIcon variant="filled" color="primary" iconProps={{ name: 'favorite' }} />
-    <ButtonIcon variant="tonal" color="primary" iconProps={{ name: 'favorite' }} />
-    <ButtonIcon variant="outlined" color="primary" iconProps={{ name: 'favorite' }} />
-    <ButtonIcon variant="text" color="primary" iconProps={{ name: 'favorite' }} />
-    <ButtonIcon variant="bare" color="primary" iconProps={{ name: 'favorite' }} />
+<Story name="Sizes and widths" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex flex-col items-start">
+    <p class="md-sys-typescale-body-medium text-md-sys-color-on-surface-variant max-w-lg">
+      Per size: narrow, default and wide round buttons (fully round on their short side, so narrow
+      is a vertical pill and wide a horizontal one), then a filled square button.
+    </p>
+    {#each sizes as size (size)}
+      <div class="gap-spacing-200 flex items-center">
+        {#each widths as width (width)}
+          <ButtonIcon
+            {size}
+            {width}
+            variant="tonal"
+            tooltipContent="{size} {width}"
+            iconProps={{ name: 'edit' }}
+          />
+        {/each}
+        <ButtonIcon
+          {size}
+          shape="square"
+          tooltipContent="{size} square"
+          iconProps={{ name: 'edit' }}
+        />
+      </div>
+    {/each}
   </div>
 </Story>
 
-<Story name="Toggle" asChild>
-  <div class="flex flex-wrap items-center gap-4 p-6">
-    <ButtonIcon
-      variation="toggle"
-      variant="tonal"
-      iconProps={{ name: 'star' }}
-      tooltipContent="Star"
-    />
+<Story name="Disabled" asChild>
+  <div class="gap-spacing-200 p-spacing-300 flex">
+    {#each variants as variant (variant)}
+      <ButtonIcon {variant} disabled aria-label={variant} iconProps={{ name: 'delete' }} />
+    {/each}
   </div>
 </Story>

package/dist/components/buttons/ButtonIcon.svelte

@@ -1,29 +1,31 @@
 <!--
 @component
-Icon buttons help people take minor actions and are often used in app bars.
+Icon buttons help people take minor actions with one tap.
 
-- Standard: Low emphasis
-- Filled: High emphasis
-- Filled Tonal: Medium-high emphasis
-- Outlined: Medium emphasis
+- Filled: high emphasis (default)
+- Tonal: medium-high emphasis
+- Outlined: medium emphasis
+- Standard: low emphasis, no container at rest; for app bars, fields and dense layouts
 
-@see https://m3.material.io/components/icon-buttons/overview
+`variation="toggle"` makes a two-state icon button.
+
+@see https://m3.material.io/components/icon-buttons/specs
 -->
 <script lang="ts">
   import type { ButtonIconProps } from './types.js';
   import { Icon, LoadingIndicator, Layer } from '../../utils/index.js';
-  import { buttonIcon } from './theme.js';
+  import { buttonColor, buttonIcon } from './theme.js';
   import clsx from 'clsx';
+  import { buttonCorners, shapeMorph } from './shapeMorph.js';
   import Tooltip from '../forms/tooltip/Tooltip.svelte';
-  import { Button, Toggle, type ButtonRootProps } from 'bits-ui';
-  import type { ToggleRootProps } from 'bits-ui';
+  import { Button, Toggle, type ButtonRootProps, type ToggleRootProps } from 'bits-ui';
 
   let {
     iconProps,
-    variant = 'text',
-    color = 'default',
-    size = 'md',
+    variant = 'filled',
+    size = 'sm',
     shape = 'round',
+    width = 'default',
     variation = 'default',
     triggerClass = '',
     triggerSide = 'top',
@@ -32,61 +34,81 @@ Icon buttons help people take minor actions and are often used in app bars.
     formaction,
     tooltipContent,
     loading,
-    width = 'default',
-    pressed = false,
+    pressed = $bindable(false),
     onPressedChange,
     class: className,
     ...restProps
   }: ButtonIconProps = $props();
 
-  const selected = $derived(variation === 'toggle' ? pressed : undefined);
+  let ref = $state<HTMLElement | null>(null);
+  $effect(() => (ref ? shapeMorph(ref, buttonCorners) : undefined));
 
-  const { base, icon } = $derived(
-    buttonIcon({ variant, color, shape, variation, size, width, selected })
+  const toggle = $derived(variation === 'toggle');
+  const cls = $derived(buttonIcon({ variant, size, width, shape, selected: toggle && pressed }));
+  const colorCls = $derived(
+    buttonColor({
+      variant,
+      state: toggle ? (pressed ? 'selected' : 'unselected') : 'default'
+    })
   );
-
-  const btnCls = $derived(base({ class: clsx(className) }));
+  const label = $derived(restProps['aria-label'] ?? tooltipContent);
 </script>
 
-<Tooltip {triggerClass} variant="snack" supportingText={tooltipContent}>
+{#snippet content()}
+  {#if loading}
+    <LoadingIndicator center={false} class={cls.icon({ class: 'text-current' })} />
+  {:else}
+    <Icon
+      fill={toggle && pressed ? 1 : 0}
+      {...iconProps}
+      class={cls.icon({ class: clsx(iconProps.class) })}
+    />
+  {/if}
+  <Layer />
+{/snippet}
+
+<Tooltip
+  {triggerClass}
+  supportingText={tooltipContent}
+  contentProps={{ side: triggerSide, align: triggerAlign }}
+>
   {#snippet trigger({
-    class: triggerClass_,
+    class: tooltipTriggerClass,
     type: _tooltipType,
     onclick: _tooltipOnclick,
     ...triggerAttrs
   })}
-    {#if variation === 'toggle'}
+    {@const btnCls = cls.base({
+      class: clsx(colorCls, className, tooltipTriggerClass as string)
+    })}
+    {#if toggle}
       <Toggle.Root
+        bind:ref
         bind:pressed
         {onPressedChange}
         {disabled}
-        class={clsx(btnCls, triggerClass_ as string)}
+        class={btnCls}
+        aria-busy={loading || undefined}
         data-cy="m3-button-icon"
         {...restProps as ToggleRootProps}
         {...triggerAttrs}
+        aria-label={label}
       >
-        {#if loading}
-          <LoadingIndicator />
-        {:else}
-          <Icon class={icon()} {...iconProps} />
-          <Layer />
-        {/if}
+        {@render content()}
       </Toggle.Root>
     {:else}
       <Button.Root
+        bind:ref
         {disabled}
         {formaction}
-        class={clsx(btnCls, triggerClass_ as string)}
+        class={btnCls}
+        aria-busy={loading || undefined}
         data-cy="m3-button-icon"
         {...restProps as ButtonRootProps}
         {...triggerAttrs}
+        aria-label={label}
       >
-        {#if loading}
-          <LoadingIndicator />
-        {:else}
-          <Icon class={icon()} {...iconProps} />
-          <Layer />
-        {/if}
+        {@render content()}
       </Button.Root>
     {/if}
   {/snippet}

package/dist/components/buttons/ButtonIcon.svelte.d.ts

@@ -1,14 +1,16 @@
 import type { ButtonIconProps } from './types.js';
 /**
- * Icon buttons help people take minor actions and are often used in app bars.
+ * Icon buttons help people take minor actions with one tap.
  *
- * - Standard: Low emphasis
- * - Filled: High emphasis
- * - Filled Tonal: Medium-high emphasis
- * - Outlined: Medium emphasis
+ * - Filled: high emphasis (default)
+ * - Tonal: medium-high emphasis
+ * - Outlined: medium emphasis
+ * - Standard: low emphasis, no container at rest; for app bars, fields and dense layouts
  *
- * @see https://m3.material.io/components/icon-buttons/overview
+ * `variation="toggle"` makes a two-state icon button.
+ *
+ * @see https://m3.material.io/components/icon-buttons/specs
  */
-declare const ButtonIcon: import("svelte").Component<ButtonIconProps, {}, "">;
+declare const ButtonIcon: import("svelte").Component<ButtonIconProps, {}, "pressed">;
 type ButtonIcon = ReturnType<typeof ButtonIcon>;
 export default ButtonIcon;

package/dist/components/buttons/FAB.mdx

@@ -0,0 +1,84 @@
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as FABStories from './FAB.stories.svelte';
+
+<Meta of={FABStories} />
+
+<Title />
+
+<Subtitle>FABs help people take the primary action on a screen.</Subtitle>
+
+[FAB spec](https://m3.material.io/components/floating-action-button/specs) ·
+[Extended FAB spec](https://m3.material.io/components/extended-fab/specs) ·
+[FAB menu spec](https://m3.material.io/components/fab-menu/specs) ·
+`import { FAB, FABMenuItem } from '@noxlovette/material';`
+
+<Canvas of={FABStories.Playground} />
+
+<Controls of={FABStories.Playground} />
+
+## Sizes
+
+| `size`    | FAB  | Icon | Corners | Extended: label, padding, gap |
+| --------- | ---- | ---- | ------- | ----------------------------- |
+| `regular` | 56dp | 24dp | 16dp    | title medium, 16dp, 8dp       |
+| `medium`  | 80dp | 28dp | 20dp    | title large, 26dp, 12dp       |
+| `large`   | 96dp | 36dp | 28dp    | headline small, 28dp, 16dp    |
+| `small`   | 40dp | 24dp | 12dp    | none                          |
+
+`small` is the baseline small FAB, which M3 no longer recommends. FABs sit at elevation 3 and
+rise to 4 on hover. Keep 16dp from the window edges.
+
+<Canvas of={FABStories.Sizes} />
+
+## Colour
+
+`primary-container` (default), `secondary-container` and `tertiary-container`, or the stronger
+`primary`, `secondary` and `tertiary`. The state layer always takes the icon's colour.
+
+<Canvas of={FABStories.Colours} />
+
+## FAB and extended FAB
+
+Give the FAB a `label` and it becomes an extended FAB where there's room. The two transform
+into each other with the space available, so `expanded` is responsive:
+
+- **Default:** a FAB on compact windows, an extended FAB from medium windows up
+  (`{ small: false, medium: true }`).
+- **In a `Rail`:** a FAB while the rail is collapsed, an extended FAB while it's expanded.
+- **Your own:** pass `true`, `false`, or per-window values; toggle it to collapse the label
+  while the page scrolls.
+
+The label slides open and shut on the spatial spring. It also names the FAB for assistive
+technology when collapsed; a FAB without a label needs an `aria-label`.
+
+<Canvas of={FABStories.Extended} />
+
+<Canvas of={FABStories.Responsive} />
+
+## FAB menu
+
+`withMenu` opens up to six `FABMenuItem`s above the FAB, which springs into a 56dp round close
+button in the same top trailing corner. The close button is 56dp whatever the FAB's size, as
+M3 specifies, so a medium or large FAB shrinks into it. The items grow out of it one after
+another, nearest first. Items are 56dp pills 4dp apart, 8dp above the close
+button, in the FAB's colour set: a primary, secondary or tertiary close button with items in the
+matching container colour. The menu takes arrow keys, Escape and outside clicks.
+
+<Canvas of={FABStories.FabMenu} />
+
+## Container transform
+
+Pass a `surface` snippet and the FAB opens into it: the FAB's container grows from its corner
+into the surface and turns from the FAB's colour into the surface's, and the content fades in
+once it has room (M3's container transform, with a persistent container). It shrinks back on
+Escape, an outside click, or the snippet's `close()`, and focus returns to the FAB. Keep the
+FAB's icon in the surface, as on the "Compose new" row below, so the icon persists too.
+
+<Canvas of={FABStories.ContainerTransform} />
+
+## Migrating
+
+`config` is now `color`, with the Expressive names: the old `primary` is now `primary-container`
+(the default). `size` gains `medium`. `FABMenuItem` loses `variant`; items follow the FAB's
+colour. `expanded` now defaults to responsive instead of `false`, so a labelled FAB extends on
+wider windows; pass `expanded={false}` to keep the old behaviour.