@noxlovette/material 0.5.1 → 0.6.1

package/dist/components/containers/list/List.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import clsx from 'clsx';
+  import { list } from './theme.js';
+  import { setListContext } from './context.js';
+  import type { ListProps } from './types.js';
+
+  let { variant = 'standard', class: className, children, ...restProps }: ListProps = $props();
+
+  setListContext({
+    get variant() {
+      return variant;
+    }
+  });
+</script>
+
+<ul class={list({ variant, class: clsx(className) })} {...restProps}>
+  {@render children?.()}
+</ul>

package/dist/components/containers/list/List.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ListProps } from './types.js';
+declare const List: import("svelte").Component<ListProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/containers/list/ListItem.mdx

@@ -0,0 +1,100 @@
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from '@storybook/addon-docs/blocks';
+import * as ListStories from './ListItem.stories.svelte';
+import List from './List.svelte';
+
+<Meta of={ListStories} />
+
+<Title />
+
+<Subtitle>Lists are continuous, vertical indexes of text and images.</Subtitle>
+
+[M3 spec](https://m3.material.io/components/lists/specs) ·
+`import { List, ListItem, listMedia } from '@noxlovette/material';`
+
+<Canvas of={ListStories.Playground} />
+
+<Controls of={ListStories.Playground} />
+
+## `List` and `ListItem`
+
+Put `ListItem`s in a `List`. `List` renders the `<ul>` and chooses the look for every item in it:
+
+- **`standard`** (default): items sit on the page's `surface`.
+- **`segmented`**: each item is its own segment, 2dp apart, with 16dp outer corners on the first
+  and last. This is a visual choice only; behaviour is the same.
+
+A `ListItem` outside a `List` renders as a standard item.
+
+<ArgTypes of={List} />
+
+<Canvas of={ListStories.Segmented} />
+
+## What the item is
+
+The props decide the element, so each item has one action:
+
+| Props               | Element             | Use for                                                                |
+| ------------------- | ------------------- | ---------------------------------------------------------------------- |
+| `href`              | `<a>`               | Navigation. `selected` sets `aria-current="page"`.                     |
+| `onclick`           | `<button>`          | An action. `selected` sets `aria-pressed`.                             |
+| `label`             | `<label>`           | An item that toggles the checkbox, radio or switch in it.              |
+| `children` (nested) | `<button>` + region | An expandable item; see below.                                         |
+| none                | `<div>`             | Static content. With `role="option"`, `selected` sets `aria-selected`. |
+
+`disabled` removes a link's `href` and disables a button.
+
+## Line counts
+
+One, two or three lines give 56, 72 and 88dp minimum heights. `lines` is worked out from
+`overline` and `supporting` unless you set it. At three lines, leading and trailing content align
+to the top.
+
+<Canvas of={ListStories.LineCounts} />
+
+## Leading media
+
+The `leading` slot holds **one** element that is narrower than the text. Size it with the
+`listMedia` helper so it matches the spec:
+
+| Media             | Size                      | How                                         |
+| ----------------- | ------------------------- | ------------------------------------------- |
+| Icon              | 20dp                      | `<Icon size="sm">`                          |
+| Avatar            | 40dp circle               | `class={listMedia({ kind: 'avatar' })}`     |
+| Image             | 56×56dp, 8dp corners      | `class={listMedia({ kind: 'image' })}`      |
+| Video thumbnail   | 100×56dp, 8dp corners     | `class={listMedia({ kind: 'video' })}`      |
+| Large video       | 114×64dp, 8dp corners     | `class={listMedia({ kind: 'videoLarge' })}` |
+| Selection control | checkbox, radio or switch | with `label` on the item                    |
+
+Decorative media gets `alt=""`: the headline is the item's accessible name.
+
+<Canvas of={ListStories.LeadingMedia} />
+
+## Trailing content
+
+`trailing` takes an icon (20dp), an icon button, or a selection control. `trailingText` is for
+short text such as a count, a time or a shortcut. Don't put a selection control at both ends of
+the same item, and keep interactive trailing content at a 48dp target.
+
+<Canvas of={ListStories.MultiAction} />
+
+## Expand
+
+Giving a `ListItem` `children` makes it expandable. The item becomes a button with a trailing
+chevron, `aria-expanded` and `aria-controls`. The nested items are `inert` while collapsed. Bind
+`expanded` to control it.
+
+<Canvas of={ListStories.Expand} />
+
+## States
+
+`selected` fills the item with `secondary-container` and rounds it to 16dp. `disabled` drops the
+content to 38%. Hover, focus and press tints come from the shared state layer. The keyboard focus
+ring is drawn inside the item, so segments don't overlap.
+
+<Canvas of={ListStories.Disabled} />
+
+## Where this differs from the tokens
+
+- Segmented items use `surface-container`. The token says `surface`, but the spec's figures show
+  the segments on a tinted container.
+- A selected, disabled item keeps a 12% container. The token says 38%, which reads as enabled.

package/dist/components/containers/list/ListItem.stories.svelte

@@ -1,100 +1,235 @@
 <script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import ListItem from './ListItem.svelte';
+  import List from './List.svelte';
+  import { listMedia } from './theme.js';
   import Icon from '../../../utils/icon/Icon.svelte';
+  import Avatar from '../../misc/Avatar.svelte';
+  import ButtonIcon from '../../buttons/ButtonIcon.svelte';
 
   const { Story } = defineMeta({
-    title: 'Containers/List Item',
+    title: 'Containers/List',
     component: ListItem,
     argTypes: {
       headline: { control: 'text' },
       overline: { control: 'text' },
       supporting: { control: 'text' },
-      selected: { control: 'boolean' }
+      trailingText: { control: 'text' },
+      selected: { control: 'boolean' },
+      disabled: { control: 'boolean' }
     },
     args: {
       headline: 'Headline',
       overline: '',
       supporting: '',
-      selected: false
+      trailingText: '',
+      selected: false,
+      disabled: false
     }
   });
+
+  const tracks = ['Blue in Green', 'So What', 'Freddie Freeloader', 'All Blues'];
+</script>
+
+<script lang="ts">
+  let single = $state(1);
+  let settings = $state(0);
+  let photosExpanded = $state(true);
 </script>
 
 <Story name="Playground">
   {#snippet template(args)}
-    <ul class="w-80">
+    <List class="w-80">
       <ListItem
         headline={args.headline}
         overline={args.overline}
         supporting={args.supporting}
+        trailingText={args.trailingText}
         selected={args.selected}
-      />
-    </ul>
+        disabled={args.disabled}
+        onclick={() => {}}
+      >
+        {#snippet leading()}
+          <Icon name="star" size="sm" />
+        {/snippet}
+      </ListItem>
+    </List>
   {/snippet}
 </Story>
 
-<Story name="One Line" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" />
-  </ul>
+<Story name="Standard" asChild>
+  <List class="w-80">
+    {#each tracks as track, i (track)}
+      <ListItem
+        headline={track}
+        trailingText="⌘{i + 1}"
+        selected={single === i}
+        onclick={() => (single = i)}
+      >
+        {#snippet leading()}
+          <Icon name="music_note" size="sm" />
+        {/snippet}
+      </ListItem>
+    {/each}
+  </List>
 </Story>
 
-<Story name="Two Line" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" supporting="Supporting text that describes the item" />
-  </ul>
+<Story name="Segmented" asChild>
+  <div class="bg-md-sys-color-surface p-spacing-200 w-96">
+    <List variant="segmented">
+      {#each ['Wi-Fi', 'Bluetooth', 'Notifications', 'Display'] as label, i (label)}
+        <ListItem
+          headline={label}
+          supporting="Supporting text"
+          selected={settings === i}
+          onclick={() => (settings = i)}
+        >
+          {#snippet leading()}
+            <Icon name="settings" size="sm" />
+          {/snippet}
+          {#snippet trailing()}
+            <Icon name="chevron_right" size="sm" />
+          {/snippet}
+        </ListItem>
+      {/each}
+    </List>
+  </div>
 </Story>
 
-<Story name="Three Line" asChild>
-  <ul class="w-80">
+<Story name="Line counts" asChild>
+  <List variant="segmented" class="w-96">
+    <ListItem headline="One line" />
+    <ListItem headline="Two lines" supporting="Supporting text that describes the item" />
     <ListItem
       overline="Overline"
-      headline="Headline"
-      supporting="Supporting text that spans up to two lines before it gets clipped"
-    />
-  </ul>
+      headline="Three lines"
+      supporting="At 88dp and taller, leading and trailing content align to the top"
+      trailingText="100+"
+    >
+      {#snippet leading()}
+        <Icon name="inbox" size="sm" />
+      {/snippet}
+    </ListItem>
+  </List>
 </Story>
 
-<Story name="With Leading Icon" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" supporting="Supporting text">
+<Story name="Leading media" asChild>
+  <List variant="segmented" class="w-96">
+    <ListItem headline="Icon" supporting="20dp, <Icon size=&quot;sm&quot;>">
+      {#snippet leading()}
+        <Icon name="folder" size="sm" />
+      {/snippet}
+    </ListItem>
+    <ListItem headline="Avatar" supporting="40dp circle">
+      {#snippet leading()}
+        <Avatar seed="Ada" alt="" class={listMedia({ kind: 'avatar' })} />
+      {/snippet}
+    </ListItem>
+    <ListItem headline="Image" supporting="56dp, 8dp corners">
+      {#snippet leading()}
+        <div
+          class="{listMedia({
+            kind: 'image'
+          })} from-md-sys-color-primary to-md-sys-color-tertiary bg-linear-to-br"
+          aria-hidden="true"
+        ></div>
+      {/snippet}
+    </ListItem>
+    <ListItem headline="Video" supporting="100×56dp, 8dp corners">
+      {#snippet leading()}
+        <div
+          class="{listMedia({
+            kind: 'video'
+          })} from-md-sys-color-secondary to-md-sys-color-primary bg-linear-to-br"
+          aria-hidden="true"
+        ></div>
+      {/snippet}
+    </ListItem>
+    <ListItem headline="Large video" supporting="114×64dp, 8dp corners">
       {#snippet leading()}
-        <Icon name="folder" />
+        <div
+          class="{listMedia({
+            kind: 'videoLarge'
+          })} from-md-sys-color-tertiary to-md-sys-color-secondary bg-linear-to-br"
+          aria-hidden="true"
+        ></div>
       {/snippet}
     </ListItem>
-  </ul>
+  </List>
 </Story>
 
-<Story name="With Trailing and Badge" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" supporting="Supporting text" badge={3}>
+<Story name="Multi-action" asChild>
+  <List class="w-96">
+    {#each tracks as track (track)}
+      <li class="flex items-center">
+        <ListItem asChild headline={track} onclick={() => {}}>
+          {#snippet leading()}
+            <Icon name="music_note" size="sm" />
+          {/snippet}
+        </ListItem>
+        <ButtonIcon
+          variant="standard"
+          iconProps={{ name: 'more_vert' }}
+          aria-label="More for {track}"
+        />
+      </li>
+    {/each}
+  </List>
+</Story>
+
+<Story name="Expand" asChild>
+  <List variant="segmented" class="w-96">
+    <ListItem headline="Photos" supporting="3 albums" bind:expanded={photosExpanded}>
       {#snippet leading()}
-        <Icon name="inbox" />
+        <Icon name="image" size="sm" />
       {/snippet}
-      {#snippet trailing()}
-        <Icon name="chevron_right" />
+      <ListItem headline="Holidays" href="#" />
+      <ListItem headline="Family" href="#" />
+      <ListItem headline="Screenshots" href="#" />
+    </ListItem>
+    <ListItem headline="Documents" supporting="2 folders">
+      {#snippet leading()}
+        <Icon name="folder" size="sm" />
       {/snippet}
+      <ListItem headline="Work" href="#" />
+      <ListItem headline="Personal" href="#" />
     </ListItem>
-  </ul>
+    <ListItem headline="Downloads" href="#">
+      {#snippet leading()}
+        <Icon name="download" size="sm" />
+      {/snippet}
+    </ListItem>
+  </List>
 </Story>
 
-<Story name="Selected" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" supporting="Supporting text" selected>
+<Story name="Disabled" asChild>
+  <List variant="segmented" class="w-80">
+    <ListItem headline="Enabled" supporting="Supporting text" onclick={() => {}} />
+    <ListItem headline="Disabled" supporting="Supporting text" disabled onclick={() => {}}>
+      {#snippet leading()}
+        <Icon name="wifi" size="sm" />
+      {/snippet}
+    </ListItem>
+    <ListItem
+      headline="Disabled, selected"
+      supporting="Supporting text"
+      disabled
+      selected
+      onclick={() => {}}
+    >
       {#snippet leading()}
-        <Icon name="check_circle" />
+        <Icon name="wifi" size="sm" />
       {/snippet}
     </ListItem>
-  </ul>
+  </List>
 </Story>
 
-<Story name="As Link" asChild>
-  <ul class="w-80">
-    <ListItem headline="Headline" supporting="Navigates on click" href="#">
+<Story name="Badge" asChild>
+  <List class="w-80">
+    <ListItem headline="Inbox" supporting="Supporting text" badge={3} href="#">
       {#snippet leading()}
-        <Icon name="link" />
+        <Icon name="inbox" size="sm" />
       {/snippet}
     </ListItem>
-  </ul>
+  </List>
 </Story>

package/dist/components/containers/list/ListItem.stories.svelte.d.ts

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

package/dist/components/containers/list/ListItem.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { Layer } from '../../../utils/index.js';
+  import { Icon, Layer } from '../../../utils/index.js';
   import clsx from 'clsx';
-  import { listiem } from './theme.js';
+  import { listItem } from './theme.js';
+  import { getListContext } from './context.js';
   import type { ListitemProps } from './types.js';
   import Badge from '../../badge/Badge.svelte';
 
@@ -11,19 +12,78 @@
     headline = '',
     supporting = '',
     trailing,
+    trailingText,
     badge,
     selected,
+    disabled = false,
+    children,
+    expanded = $bindable(false),
     class: className,
     asChild = false,
     lines = overline && supporting ? 3 : overline || supporting ? 2 : 1,
     ...restProps
   }: ListitemProps = $props();
 
-  const cls = $derived(listiem({ lines, selected }));
-  const baseCls = $derived(cls.base({ class: clsx(className) }));
+  const uid = $props.id();
+  const ctx = getListContext();
+
+  const rest = $derived(restProps as Record<string, unknown>);
+  const expandable = $derived(!!children);
+  // Expandable items are always a button; otherwise the props pick the element.
+  const tag = $derived(
+    expandable || 'onclick' in rest
+      ? 'button'
+      : 'label' in rest
+        ? 'label'
+        : rest.href != null && rest.href !== ''
+          ? 'a'
+          : 'div'
+  );
+  const isOption = $derived(rest.role === 'option');
+  const interactive = $derived(!disabled && (tag !== 'div' || isOption));
+
+  const cls = $derived(
+    listItem({
+      lines,
+      selected: !!selected,
+      disabled,
+      interactive,
+      variant: ctx?.variant ?? 'standard',
+      expanded: expandable ? expanded : undefined
+    })
+  );
+
+  const attrs = $derived.by(() => {
+    const { label: _, href, onclick, ...extra } = rest;
+    const a: Record<string, unknown> = { ...extra };
+    if (tag === 'button') {
+      a.type = 'button';
+      a.disabled = disabled;
+      a.onclick = (e: MouseEvent) => {
+        (onclick as ((e: MouseEvent) => void) | undefined)?.(e);
+        if (expandable && !e.defaultPrevented) expanded = !expanded;
+      };
+      if (expandable) {
+        a['aria-expanded'] = expanded;
+        a['aria-controls'] = `${uid}-nested`;
+      } else if (selected !== undefined && !isOption) a['aria-pressed'] = selected;
+    } else if (tag === 'a') {
+      // A disabled link has no href, so it's not focusable or followable.
+      if (disabled) {
+        a.role = 'link';
+        a['aria-disabled'] = true;
+      } else a.href = href;
+      if (selected) a['aria-current'] = 'page';
+    } else if (disabled) a['aria-disabled'] = true;
+    if (isOption) a['aria-selected'] = !!selected;
+    return a;
+  });
 </script>
 
 {#snippet content()}
+  {#if interactive}
+    <Layer />
+  {/if}
   {#if leading}
     <div class={cls.leading()}>
       {@render leading()}
@@ -38,54 +98,49 @@
       <p class={cls.supporting()}>{supporting}</p>
     {/if}
   </div>
-  {#if trailing || badge !== undefined}
-    <div class={clsx(cls.trailing(), 'relative overflow-visible')}>
-      {#if trailing}
-        {@render trailing()}
+  {#if trailing || trailingText || badge !== undefined || expandable}
+    <div class={cls.trailing()}>
+      {#if trailingText}
+        <span class={cls.trailingText()}>{trailingText}</span>
       {/if}
+      {@render trailing?.()}
       {#if badge !== undefined}
         <Badge
           size={badge === true ? 'sm' : 'lg'}
           number={badge === true ? undefined : (badge as number)}
+          standalone
         />
       {/if}
+      {#if expandable}
+        <span class={cls.expandIcon()} aria-hidden="true">
+          <Icon name="keyboard_arrow_down" size="sm" />
+        </span>
+      {/if}
     </div>
   {/if}
 {/snippet}
 
-{#snippet action()}
-  {#if 'label' in restProps}
-    {@const { label: _, ...extra } = restProps}
-    <label class={baseCls} {...extra}>
-      <Layer />
-      {@render content()}
-    </label>
-  {:else if 'onclick' in restProps}
-    <button type="button" class={baseCls} {...restProps}>
-      <Layer />
-      {@render content()}
-    </button>
-  {:else if 'href' in restProps && restProps.href != null && restProps.href !== ''}
-    {@const { href, ...extra } = restProps as typeof restProps & {
-      href?: string | null;
-    }}
-    <a class={baseCls} {href} {...extra}>
-      <Layer />
-      {@render content()}
-    </a>
-  {:else}
-    {@const { href: _, ...extra } = restProps as Record<string, unknown>}
-    <div class={baseCls} {...extra}>
-      <Layer />
-      {@render content()}
+{#snippet item()}
+  <svelte:element this={tag} class={cls.base({ class: clsx(className) })} {...attrs}>
+    {@render content()}
+  </svelte:element>
+  {#if children}
+    <div class={cls.region()} inert={!expanded}>
+      <div class={cls.regionInner()}>
+        <ul id="{uid}-nested" class={cls.nested()}>
+          {@render children()}
+        </ul>
+      </div>
     </div>
   {/if}
 {/snippet}
 
-{#if asChild}
-  {@render action()}
+{#if asChild && !expandable}
+  {@render item()}
+{:else if asChild}
+  <div class={cls.group()}>{@render item()}</div>
 {:else}
-  <li>
-    {@render action()}
+  <li class={expandable ? cls.group() : undefined}>
+    {@render item()}
   </li>
 {/if}

package/dist/components/containers/list/ListItem.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ListitemProps } from './types.js';
-declare const ListItem: import("svelte").Component<ListitemProps, {}, "">;
+declare const ListItem: import("svelte").Component<ListitemProps, {}, "expanded">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/dist/components/containers/list/context.d.ts

@@ -0,0 +1,6 @@
+type ListContext = {
+    readonly variant: 'standard' | 'segmented';
+};
+export declare const setListContext: (ctx: ListContext) => ListContext;
+export declare const getListContext: () => ListContext | undefined;
+export {};

package/dist/components/containers/list/context.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('list');
+export const setListContext = (ctx) => setContext(KEY, ctx);
+export const getListContext = () => getContext(KEY);

package/dist/components/containers/list/index.d.ts

@@ -1,3 +1,4 @@
 export * from './theme.js';
 export * from './types.js';
+export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';

package/dist/components/containers/list/index.js

@@ -3,4 +3,5 @@
 export * from './theme.js';
 export * from './types.js';
 // default exports for components in this folder
+export { default as List } from './List.svelte';
 export { default as ListItem } from './ListItem.svelte';