@noxlovette/material 0.6.1 → 0.7.0

package/dist/attachments/drag.js

@@ -0,0 +1,217 @@
+import { on } from 'svelte/events';
+/* Pointer samples older than this don't count towards the release velocity. */
+const VELOCITY_WINDOW_MS = 100;
+/* How far a resting finger may wander during `touchDelay` before it counts as a scroll. */
+const TOUCH_SLOP = 8;
+/**
+ * Pointer dragging for an element: capture, a start threshold, a long-press delay on touch, and
+ * the release velocity. It moves nothing itself: `onMove` gets the pointer's offset and the
+ * caller positions things, typically with `resist` at the edges and a Motion spring on release.
+ *
+ * Options are read through a getter at event time, so changing them never tears down a drag in
+ * progress:
+ *
+ * ```svelte
+ * <div {@attach drag(() => ({ threshold: 4, onMove: (o) => (offset = o) }))}>…</div>
+ * ```
+ *
+ * After a drag the click that would follow the release is swallowed, so dragging a button
+ * doesn't also press it.
+ */
+export function drag(getOptions) {
+    return (node) => {
+        let phase = 'idle';
+        let pointerId = -1;
+        let origin = { x: 0, y: 0 };
+        let samples = [];
+        let touchTimer;
+        let suppressClick = false;
+        let unwatch;
+        const offsetOf = (event) => ({
+            x: event.clientX - origin.x,
+            y: event.clientY - origin.y
+        });
+        const record = (event) => {
+            samples.push({ x: event.clientX, y: event.clientY, t: event.timeStamp });
+            samples = samples.filter((sample) => event.timeStamp - sample.t <= VELOCITY_WINDOW_MS);
+        };
+        const velocity = () => {
+            const first = samples[0];
+            const last = samples[samples.length - 1];
+            const seconds = first && last ? (last.t - first.t) / 1000 : 0;
+            if (!seconds)
+                return { x: 0, y: 0 };
+            return { x: (last.x - first.x) / seconds, y: (last.y - first.y) / seconds };
+        };
+        const reset = () => {
+            clearTimeout(touchTimer);
+            unwatch?.();
+            unwatch = undefined;
+            phase = 'idle';
+            pointerId = -1;
+        };
+        const capture = () => {
+            try {
+                node.setPointerCapture(pointerId);
+            }
+            catch {
+                // Not an active pointer (a synthetic event, or one already gone): drag uncaptured.
+            }
+        };
+        const begin = (event) => {
+            clearTimeout(touchTimer);
+            touchTimer = undefined;
+            phase = 'dragging';
+            // Capturing only now, not on pointerdown: a capture from the start would retarget the
+            // click to this node, and a press that never became a drag would lose its click.
+            capture();
+            getOptions().onStart?.(event);
+        };
+        const finish = (v) => {
+            const wasDragging = phase === 'dragging';
+            if (node.hasPointerCapture?.(pointerId))
+                node.releasePointerCapture(pointerId);
+            reset();
+            if (!wasDragging)
+                return;
+            suppressClick = true;
+            // The click, if any, fires synchronously after pointerup; anything later is a new press.
+            setTimeout(() => (suppressClick = false));
+            getOptions().onEnd?.(v);
+        };
+        /*
+          The whole gesture, pending or dragging, is followed on the window rather than the node.
+          Capture alone isn't enough: moving the captured node in the DOM (a list reordering under the
+          drag) silently releases it, and then the release would land on some other element and never
+          end the drag. Plain listeners, not svelte/events' `on`: that defers pointer listeners to a
+          microtask, and these are added mid-gesture, so they must be live for the very next event.
+        */
+        const watch = () => {
+            const onMove = (event) => {
+                if (event.pointerId !== pointerId)
+                    return;
+                record(event);
+                if (phase === 'dragging') {
+                    // The button came up somewhere we didn't hear about (outside the window, uncaptured).
+                    if (event.pointerType === 'mouse' && event.buttons === 0)
+                        return finish(velocity());
+                    getOptions().onMove?.(offsetOf(event), event);
+                    return;
+                }
+                const { threshold = 0 } = getOptions();
+                const moved = Math.hypot(event.clientX - origin.x, event.clientY - origin.y);
+                if (event.pointerType === 'touch' && touchTimer !== undefined) {
+                    // Moved before the long press: it's a scroll, not a drag.
+                    if (moved > TOUCH_SLOP)
+                        reset();
+                    return;
+                }
+                if (moved >= threshold) {
+                    begin(event);
+                    getOptions().onMove?.(offsetOf(event), event);
+                }
+            };
+            const onUp = (event) => {
+                if (event.pointerId !== pointerId)
+                    return;
+                if (phase === 'dragging')
+                    finish(velocity());
+                else
+                    reset();
+            };
+            const onCancel = (event) => {
+                if (event.pointerId !== pointerId)
+                    return;
+                if (phase === 'dragging')
+                    finish({ x: 0, y: 0 });
+                else
+                    reset();
+            };
+            // Capture lost mid-drag (the node moved): take it back, so a release outside the browser
+            // window still reaches us.
+            const onLostCapture = (event) => {
+                if (phase === 'dragging' && event.pointerId === pointerId && node.isConnected)
+                    capture();
+            };
+            window.addEventListener('pointermove', onMove);
+            window.addEventListener('pointerup', onUp);
+            window.addEventListener('pointercancel', onCancel);
+            node.addEventListener('lostpointercapture', onLostCapture);
+            return () => {
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+                window.removeEventListener('pointercancel', onCancel);
+                node.removeEventListener('lostpointercapture', onLostCapture);
+            };
+        };
+        const offDown = on(node, 'pointerdown', (event) => {
+            if (phase !== 'idle' || !event.isPrimary || event.button !== 0)
+                return;
+            const { disabled, threshold = 0, touchDelay = 0 } = getOptions();
+            if (disabled)
+                return;
+            pointerId = event.pointerId;
+            origin = { x: event.clientX, y: event.clientY };
+            samples = [{ x: event.clientX, y: event.clientY, t: event.timeStamp }];
+            unwatch = watch();
+            if (event.pointerType === 'touch' && touchDelay > 0) {
+                phase = 'pending';
+                touchTimer = setTimeout(() => {
+                    touchTimer = undefined;
+                    begin(event);
+                }, touchDelay);
+                return;
+            }
+            if (threshold > 0) {
+                phase = 'pending';
+                return;
+            }
+            begin(event);
+        });
+        // A touch drag started by a long press: stop the page from scrolling under it. Needs a
+        // non-passive listener; touch-action can't be switched once the gesture has begun.
+        const offTouchMove = on(node, 'touchmove', (event) => {
+            if (phase === 'dragging')
+                event.preventDefault();
+        }, { passive: false });
+        // The long press would otherwise open the context menu or the text callout.
+        const offContextMenu = on(node, 'contextmenu', (event) => {
+            if (phase !== 'idle')
+                event.preventDefault();
+        });
+        const offClick = on(node, 'click', (event) => {
+            if (!suppressClick)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        }, { capture: true });
+        return () => {
+            reset();
+            offDown();
+            offTouchMove();
+            offContextMenu();
+            offClick();
+        };
+    };
+}
+/*
+  Share of the overshoot still applied at the edge, shrinking the further it's pulled. The
+  UIScrollView rubber-band constant; M3 has no token for this, tune by eye.
+*/
+const RUBBER_BAND = 0.55;
+/** Resisted overshoot: the further past the edge, the less it follows. */
+function rubberBand(overshoot, limit) {
+    return (1 - 1 / ((overshoot * RUBBER_BAND) / limit + 1)) * limit;
+}
+/**
+ * `value` clamped to `[min, max]` with rubber-banding instead of a wall: past an edge it keeps
+ * following the pointer, less and less. `size` is the scale of the resistance, usually the
+ * extent of the bounds on that axis.
+ */
+export function resist(value, min, max, size) {
+    if (value < min)
+        return min - rubberBand(min - value, size);
+    if (value > max)
+        return max + rubberBand(value - max, size);
+    return value;
+}

package/dist/attachments/index.d.ts

@@ -1 +1,2 @@
 export * from './clickOutside.js';
+export * from './drag.js';

package/dist/attachments/index.js

@@ -1 +1,2 @@
 export * from './clickOutside.js';
+export * from './drag.js';

package/dist/components/chips/Chip.mdx

@@ -20,12 +20,12 @@ import * as ChipStories from './Chip.stories.svelte';
 
 `variant` sets both the look and the element the chip renders:
 
-| Variant      | Use for                                                         | Renders                                                |
-| ------------ | --------------------------------------------------------------- | ------------------------------------------------------ |
-| `assist`     | A smart or automated action, like adding an event to a calendar | `<button>` (or `<a>` with `href`); icon tinted primary |
-| `filter`     | Filtering content by tags or descriptive words                  | A toggle; a checkmark replaces the icon when selected  |
-| `input`      | A piece of information the user entered (a contact, a value)    | A plain container; `onRemove` adds a remove button     |
-| `suggestion` | A generated suggestion that narrows intent                      | Like `assist`, without the tinted icon                 |
+| Variant      | Use for                                                         | Renders                                                            |
+| ------------ | --------------------------------------------------------------- | ------------------------------------------------------------------ |
+| `assist`     | A smart or automated action, like adding an event to a calendar | `<button>` (or `<a>` with `href`); icon tinted primary             |
+| `filter`     | Filtering content by tags or descriptive words                  | A toggle; a checkmark replaces the icon when selected              |
+| `input`      | A piece of information the user entered (a contact, a value)    | A container with a primary button; `onRemove` adds a remove button |
+| `suggestion` | A generated suggestion that narrows intent                      | Like `assist`; its label is on-surface-variant                     |
 
 `elevated` swaps the flat, outlined container for a shadowed one on every variant except `input`,
 which the spec keeps flat. For a static label with no interaction (a status or a count), use
@@ -41,6 +41,9 @@ which the spec keeps flat. For a static label with no interaction (a status or a
 
 <Canvas of={ChipStories.Input} />
 
+An `avatar` snippet replaces the leading icon and is clipped to a 24dp circle; it wins over
+`iconProps` when both are given.
+
 Render one input chip per entry, and remove the entry from your own array in `onRemove`:
 
 ```svelte
@@ -48,6 +51,7 @@ Render one input chip per entry, and remove the entry from your own array in `on
   <Chip
     variant="input"
     iconProps={{ name: 'person' }}
+    removeLabel="Remove {name}"
     onRemove={() => (recipients = recipients.filter((r) => r !== name))}
   >
     {name}
@@ -57,12 +61,21 @@ Render one input chip per entry, and remove the entry from your own array in `on
 
 <Canvas of={ChipStories.Suggestion} />
 
+## Sets of chips
+
+Lay several chips out with `ChipGroup` (8dp apart, wrapping). With `reorderable`, people can drag
+them into a new order, or move the focused one with Alt+Arrow; see Chips → Chip Group.
+
 ## Accessibility
 
 - **Roles.** Assist and suggestion chips are real buttons or links. Filter chips are toggles
-  whose `aria-pressed` reflects `selected`. An input chip's remove button is its own focusable
-  `<button>`, never nested inside another interactive element.
-- **Disabled.** Assist, filter and suggestion chips use the native `disabled` attribute. An input
-  chip's container is a `<div>`, so it gets `aria-disabled`, and its remove button a real
-  `disabled`.
+  whose `aria-pressed` reflects `selected`; `trailingIconProps` adds a decorative trailing icon,
+  e.g. `arrow_drop_down` for a chip that opens a menu. An input chip holds two sibling buttons:
+  its primary action (leading content and label, taking `onclick` and the rest props) and the
+  remove button, so neither nests inside the other. Backspace or Delete on the primary action
+  calls `onRemove`; give the remove button a `removeLabel` that names the item, and move focus
+  to a neighbour after removing.
+- **Disabled.** Every chip uses the native `disabled` attribute; an input chip sets it on both
+  of its buttons.
+- **Target size.** The remove icon is 18dp with a 48dp touch target around it.
 - **Contrast.** Every state pairs a container with its `on-*` role, so text keeps AA contrast.

package/dist/components/chips/Chip.stories.svelte

@@ -39,6 +39,7 @@
   <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="filter" bind:selected={filterSelected}>Filter chip</Chip>
     <Chip variant="filter" iconProps={{ name: 'star' }}>Starred</Chip>
+    <Chip variant="filter" trailingIconProps={{ name: 'arrow_drop_down' }}>Sort by</Chip>
     <Chip variant="filter" elevated selected>Elevated selected</Chip>
     <Chip variant="filter" disabled>Disabled</Chip>
   </div>
@@ -48,6 +49,15 @@
   <div class="gap-spacing-200 p-spacing-300 flex flex-wrap items-center">
     <Chip variant="input" iconProps={{ name: 'person' }} onRemove={() => {}}>Ada Lovelace</Chip>
     <Chip variant="input" onRemove={() => {}}>No avatar</Chip>
+    <Chip variant="input" onRemove={() => {}}>
+      {#snippet avatar()}
+        <span
+          class="bg-md-sys-color-primary text-md-sys-color-on-primary md-sys-typescale-label-small flex size-full items-center justify-center"
+          >GH</span
+        >
+      {/snippet}
+      Grace Hopper
+    </Chip>
     <Chip variant="input" selected iconProps={{ name: 'person' }} onRemove={() => {}}>Selected</Chip
     >
     <Chip variant="input" disabled iconProps={{ name: 'person' }} onRemove={() => {}}>Disabled</Chip

package/dist/components/chips/Chip.svelte

@@ -4,7 +4,9 @@ Chips help people enter information, make selections, filter content, or trigger
 
 - Assist: Represents a smart or automated action, such as adding an event to a calendar
 - Filter: Uses tags or descriptive words to filter content; supports a selected state
-- Input: Represents a discrete piece of information entered by a user, and can be removed
+- Input: Represents a discrete piece of information entered by a user, and can be removed. Its
+  primary action is a button of its own (focusable, pressable, `onclick`); Backspace or Delete on
+  it calls `onRemove`
 - Suggestion: Helps narrow a user's intent by presenting dynamically generated suggestions
 
 @see https://m3.material.io/components/chips/overview
@@ -15,7 +17,6 @@ Chips help people enter information, make selections, filter content, or trigger
   import { chip } from './theme.js';
   import clsx from 'clsx';
   import { Button, Toggle, type ButtonRootProps, type ToggleRootProps } from 'bits-ui';
-  import type { HTMLAttributes } from 'svelte/elements';
 
   let {
     children,
@@ -25,8 +26,10 @@ Chips help people enter information, make selections, filter content, or trigger
     onPressedChange,
     disabled = false,
     iconProps,
+    trailingIconProps,
     avatar,
     onRemove,
+    removeLabel = 'Remove',
     formaction,
     class: className,
     ...restProps
@@ -37,10 +40,37 @@ Chips help people enter information, make selections, filter content, or trigger
   const isSelected = $derived(variant === 'filter' || variant === 'input' ? selected : false);
   const showCheck = $derived(isFilter && selected);
 
-  const { base, icon, label, trailing, checkIcon } = $derived(
-    chip({ variant, elevated: isElevated, selected: isSelected, disabled })
+  const leadingKind = $derived(
+    showCheck ? 'icon' : avatar ? 'avatar' : iconProps ? 'icon' : 'none'
+  );
+  const removable = $derived(variant === 'input' && Boolean(onRemove));
+  const hasTrailingIcon = $derived(isFilter && Boolean(trailingIconProps));
+
+  const {
+    base,
+    icon,
+    avatar: avatarCls,
+    action,
+    label,
+    trailing,
+    checkIcon
+  } = $derived(
+    chip({
+      variant,
+      elevated: isElevated,
+      selected: isSelected,
+      leading: leadingKind,
+      trailing: removable || hasTrailingIcon,
+      disabled
+    })
   );
   const chipCls = $derived(base({ class: clsx(className) }));
+
+  function removeOnKey(e: KeyboardEvent) {
+    if (!onRemove || disabled || (e.key !== 'Backspace' && e.key !== 'Delete')) return;
+    e.preventDefault();
+    onRemove();
+  }
 </script>
 
 {#snippet leading()}
@@ -49,14 +79,15 @@ Chips help people enter information, make selections, filter content, or trigger
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       class={checkIcon()}
+      aria-hidden="true"
       fill="currentColor"
     >
       <path d="M9.55 18 3.85 12.3 5.275 10.875 9.55 15.15 18.725 5.975 20.15 7.4Z" />
     </svg>
   {:else if avatar}
-    {@render avatar()}
+    <span class={avatarCls()}>{@render avatar()}</span>
   {:else if iconProps}
-    <Icon size="xs" class={icon()} {...iconProps} />
+    <Icon size="sm" {...iconProps} class={icon({ class: clsx(iconProps.class) })} />
   {/if}
 {/snippet}
 
@@ -71,18 +102,28 @@ Chips help people enter information, make selections, filter content, or trigger
   >
     {@render leading()}
     <span class={label()}>{@render children()}</span>
+    {#if trailingIconProps}
+      <Icon
+        size="sm"
+        {...trailingIconProps}
+        class={icon({ class: ['text-current', clsx(trailingIconProps.class)] })}
+      />
+    {/if}
     <Layer />
   </Toggle.Root>
 {:else if variant === 'input'}
-  <div
-    class={chipCls}
-    data-cy="m3-chip"
-    aria-disabled={disabled}
-    data-disabled={disabled ? true : undefined}
-    {...restProps as HTMLAttributes<HTMLDivElement>}
-  >
-    {@render leading()}
-    <span class={label()}>{@render children()}</span>
+  <div class={chipCls} data-cy="m3-chip" data-disabled={disabled ? true : undefined}>
+    <Button.Root
+      {disabled}
+      class={action()}
+      data-chip-action
+      onkeydown={removeOnKey}
+      {...restProps as ButtonRootProps}
+    >
+      {@render leading()}
+      <span class={label()}>{@render children()}</span>
+      <Layer />
+    </Button.Root>
     {#if onRemove}
       <button
         type="button"
@@ -92,13 +133,12 @@ Chips help people enter information, make selections, filter content, or trigger
           e.stopPropagation();
           onRemove?.();
         }}
-        aria-label="Remove"
+        aria-label={removeLabel}
       >
-        <Icon size="xs" name="close" />
+        <Icon size="sm" name="close" class="size-[18px] text-[18px]" />
         <Layer />
       </button>
     {/if}
-    <Layer />
   </div>
 {:else}
   <Button.Root

package/dist/components/chips/Chip.svelte.d.ts

@@ -4,7 +4,9 @@ import type { ChipProps } from './types.js';
  *
  * - Assist: Represents a smart or automated action, such as adding an event to a calendar
  * - Filter: Uses tags or descriptive words to filter content; supports a selected state
- * - Input: Represents a discrete piece of information entered by a user, and can be removed
+ * - Input: Represents a discrete piece of information entered by a user, and can be removed. Its
+ * primary action is a button of its own (focusable, pressable, `onclick`); Backspace or Delete on
+ * it calls `onRemove`
  * - Suggestion: Helps narrow a user's intent by presenting dynamically generated suggestions
  *
  * @see https://m3.material.io/components/chips/overview

package/dist/components/chips/ChipGroup.stories.svelte

@@ -0,0 +1,73 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Chip from './Chip.svelte';
+  import ChipGroup from './ChipGroup.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Chips/Chip Group',
+    component: ChipGroup,
+    tags: ['autodocs']
+  });
+</script>
+
+<script lang="ts">
+  let people = $state([
+    'Ada Lovelace',
+    'Grace Hopper',
+    'Alan Turing',
+    'Katherine Johnson',
+    'Edsger Dijkstra'
+  ]);
+  let filters = $state([
+    { id: 'wifi', label: 'Wifi', selected: true },
+    { id: 'parking', label: 'Parking', selected: false },
+    { id: 'pool', label: 'Pool', selected: false },
+    { id: 'gym', label: 'Gym', selected: true },
+    { id: 'pets', label: 'Pets allowed', selected: false },
+    { id: 'breakfast', label: 'Breakfast', selected: false }
+  ]);
+  let tags = $state(['Design', 'Svelte', 'Motion', 'Accessibility']);
+</script>
+
+<Story name="Reorderable input chips" asChild>
+  <div class="p-spacing-300 max-w-md">
+    <ChipGroup bind:items={people} key={(name) => name} reorderable aria-label="Recipients">
+      {#snippet chip(name)}
+        <Chip
+          variant="input"
+          iconProps={{ name: 'person' }}
+          removeLabel="Remove {name}"
+          onRemove={() => (people = people.filter((p) => p !== name))}
+        >
+          {name}
+        </Chip>
+      {/snippet}
+    </ChipGroup>
+  </div>
+</Story>
+
+<Story name="Reorderable filter chips" asChild>
+  <div class="p-spacing-300 max-w-md">
+    <ChipGroup
+      bind:items={filters}
+      key={(f) => f.id}
+      itemLabel={(f) => f.label}
+      reorderable
+      aria-label="Amenities"
+    >
+      {#snippet chip(f)}
+        <Chip variant="filter" bind:selected={f.selected}>{f.label}</Chip>
+      {/snippet}
+    </ChipGroup>
+  </div>
+</Story>
+
+<Story name="Static set" asChild>
+  <div class="p-spacing-300 max-w-md">
+    <ChipGroup items={tags} key={(t) => t} aria-label="Topics">
+      {#snippet chip(tag)}
+        <Chip variant="assist">{tag}</Chip>
+      {/snippet}
+    </ChipGroup>
+  </div>
+</Story>

package/dist/components/chips/ChipGroup.stories.svelte.d.ts

@@ -0,0 +1,4 @@
+import ChipGroup from './ChipGroup.svelte';
+declare const ChipGroup: import("svelte").Component<Record<string, never>, {}, "">;
+type ChipGroup = ReturnType<typeof ChipGroup>;
+export default ChipGroup;