@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/list/list-styles.d.ts

@@ -0,0 +1,375 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/list/list-styles.d.ts
+/** Variant definitions for {@link List}; extend them to add variants. */
+export declare const listStyles: import("tailwind-variants").TVReturnType<{
+  variant: {
+    standard: {};
+    segmented: {
+      root: string;
+      group: string;
+      reveal: string;
+    };
+  };
+  interactive: {
+    true: {
+      item: string[];
+    };
+    false: {};
+  };
+  lines: {
+    1: {
+      item: string;
+      cell: string;
+    };
+    2: {
+      item: string;
+      cell: string;
+    };
+    3: {
+      item: string;
+      cell: string;
+    };
+  };
+  dividers: {
+    none: {};
+    full: {
+      item: string[];
+    };
+    inset: {
+      item: string[];
+    };
+  };
+  headlineLines: {
+    1: {
+      headline: string;
+    };
+    2: {
+      headline: string;
+    };
+    3: {
+      headline: string;
+    };
+  };
+  supportingTextLines: {
+    1: {
+      supporting: string;
+    };
+    2: {
+      supporting: string;
+    };
+    3: {
+      supporting: string;
+    };
+  };
+  nested: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  titled: {
+    true: {};
+    false: {};
+  };
+  align: {
+    center: {
+      item: string;
+      cell: string;
+    };
+    top: {
+      item: string;
+      cell: string;
+    };
+  };
+}, {
+  root: string;
+  section: string;
+  subheader: string;
+  group: string;
+  item: string[];
+  cell: string;
+  leading: string[];
+  text: string;
+  overline: string[];
+  headline: string[];
+  supporting: string[];
+  trailing: string[];
+  selectionIndicator: string[];
+  expand: string[];
+  reveal: string[];
+  revealClip: string;
+  control: string;
+  raised: string;
+  link: string;
+}, undefined, {
+  variant: {
+    standard: {};
+    segmented: {
+      root: string;
+      group: string;
+      reveal: string;
+    };
+  };
+  interactive: {
+    true: {
+      item: string[];
+    };
+    false: {};
+  };
+  lines: {
+    1: {
+      item: string;
+      cell: string;
+    };
+    2: {
+      item: string;
+      cell: string;
+    };
+    3: {
+      item: string;
+      cell: string;
+    };
+  };
+  dividers: {
+    none: {};
+    full: {
+      item: string[];
+    };
+    inset: {
+      item: string[];
+    };
+  };
+  headlineLines: {
+    1: {
+      headline: string;
+    };
+    2: {
+      headline: string;
+    };
+    3: {
+      headline: string;
+    };
+  };
+  supportingTextLines: {
+    1: {
+      supporting: string;
+    };
+    2: {
+      supporting: string;
+    };
+    3: {
+      supporting: string;
+    };
+  };
+  nested: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  titled: {
+    true: {};
+    false: {};
+  };
+  align: {
+    center: {
+      item: string;
+      cell: string;
+    };
+    top: {
+      item: string;
+      cell: string;
+    };
+  };
+}, {
+  root: string;
+  section: string;
+  subheader: string;
+  group: string;
+  item: string[];
+  cell: string;
+  leading: string[];
+  text: string;
+  overline: string[];
+  headline: string[];
+  supporting: string[];
+  trailing: string[];
+  selectionIndicator: string[];
+  expand: string[];
+  reveal: string[];
+  revealClip: string;
+  control: string;
+  raised: string;
+  link: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: {
+    standard: {};
+    segmented: {
+      root: string;
+      group: string;
+      reveal: string;
+    };
+  };
+  interactive: {
+    true: {
+      item: string[];
+    };
+    false: {};
+  };
+  lines: {
+    1: {
+      item: string;
+      cell: string;
+    };
+    2: {
+      item: string;
+      cell: string;
+    };
+    3: {
+      item: string;
+      cell: string;
+    };
+  };
+  dividers: {
+    none: {};
+    full: {
+      item: string[];
+    };
+    inset: {
+      item: string[];
+    };
+  };
+  headlineLines: {
+    1: {
+      headline: string;
+    };
+    2: {
+      headline: string;
+    };
+    3: {
+      headline: string;
+    };
+  };
+  supportingTextLines: {
+    1: {
+      supporting: string;
+    };
+    2: {
+      supporting: string;
+    };
+    3: {
+      supporting: string;
+    };
+  };
+  nested: {
+    true: {
+      item: string;
+    };
+    false: {};
+  };
+  titled: {
+    true: {};
+    false: {};
+  };
+  align: {
+    center: {
+      item: string;
+      cell: string;
+    };
+    top: {
+      item: string;
+      cell: string;
+    };
+  };
+}, {
+  root: string;
+  section: string;
+  subheader: string;
+  group: string;
+  item: string[];
+  cell: string;
+  leading: string[];
+  text: string;
+  overline: string[];
+  headline: string[];
+  supporting: string[];
+  trailing: string[];
+  selectionIndicator: string[];
+  expand: string[];
+  reveal: string[];
+  revealClip: string;
+  control: string;
+  raised: string;
+  link: string;
+}>>;
+/**
+ * The variants of {@link listStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type ListStyleProps = VariantProps<typeof listStyles>;
+export type ListVariant = NonNullable<ListStyleProps['variant']>;
+export type ListDividers = Exclude<NonNullable<ListStyleProps['dividers']>, 'none'>;
+/** Variant definitions for `ListItemImage`, `ListItemVideo` and `ListItemAvatar` (M3's leading media). */
+export declare const listMediaStyles: import("tailwind-variants").TVReturnType<{
+  kind: {
+    image: {
+      frame: string;
+    };
+    video: {
+      frame: string;
+    };
+    avatar: {
+      frame: string;
+    };
+  };
+  size: {
+    sm: {};
+    lg: {};
+  };
+}, {
+  frame: string[];
+  badge: string[];
+  duration: string;
+}, undefined, {
+  kind: {
+    image: {
+      frame: string;
+    };
+    video: {
+      frame: string;
+    };
+    avatar: {
+      frame: string;
+    };
+  };
+  size: {
+    sm: {};
+    lg: {};
+  };
+}, {
+  frame: string[];
+  badge: string[];
+  duration: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    image: {
+      frame: string;
+    };
+    video: {
+      frame: string;
+    };
+    avatar: {
+      frame: string;
+    };
+  };
+  size: {
+    sm: {};
+    lg: {};
+  };
+}, {
+  frame: string[];
+  badge: string[];
+  duration: string;
+}>>;
+//#endregion
+//# sourceMappingURL=list-styles.d.ts.map

package/dist/components/list/list-styles.js

@@ -0,0 +1,220 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/list/list-styles.ts
+/** Variant definitions for {@link List}; extend them to add variants. */
+const listStyles = tv({
+	slots: {
+		root: "m-0 flex list-none flex-col p-0 outline-none",
+		section: "flex flex-col",
+		subheader: "flex min-h-[calc(48px+var(--md-sys-density,0)*4px)] items-center ps-[16px] pe-[16px] text-title-small text-on-surface-variant",
+		group: "m-0 flex list-none flex-col p-0",
+		item: [
+			"group/list-item flex ps-[16px] pe-[16px] pt-[calc(10px+var(--md-sys-density,0)*2px)] pb-[calc(10px+var(--md-sys-density,0)*2px)] text-start outline-none",
+			"bg-[var(--_md-comp-list-container-color)] data-selected:bg-[var(--_md-comp-list-list-item-selected-container-color)]",
+			"[--m3-transition-property:border-radius,background-color,color]",
+			"[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-effects-default-duration)]",
+			"[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-effects-default-easing)]",
+			"[--m3-transition-delay:0s,0s,0s]"
+		],
+		cell: "grid w-full grid-cols-[auto_minmax(0,1fr)_auto]",
+		leading: [
+			"col-start-1 me-[12px] flex items-center gap-x-[12px] text-title-medium text-[color:var(--_md-comp-list-list-item-leading-icon-color)] [&>svg]:size-[20px]",
+			"group-data-selected/list-item:text-on-secondary-container",
+			"group-data-disabled/list-item:text-on-surface/38"
+		],
+		text: "col-start-2 flex min-w-0 flex-col",
+		overline: [
+			"text-label-small text-[color:var(--_md-comp-list-list-item-overline-color)]",
+			"group-data-selected/list-item:text-on-secondary-container",
+			"group-data-disabled/list-item:text-on-surface/38"
+		],
+		headline: [
+			"text-body-large text-[color:var(--_md-comp-list-list-item-label-text-color)]",
+			"group-data-selected/list-item:text-on-secondary-container",
+			"group-data-disabled/list-item:text-on-surface/38"
+		],
+		supporting: [
+			"text-body-medium text-[color:var(--_md-comp-list-list-item-supporting-text-color)]",
+			"group-data-selected/list-item:text-on-secondary-container",
+			"group-data-disabled/list-item:text-on-surface/38"
+		],
+		trailing: [
+			"col-start-3 ms-[12px] flex items-center gap-x-[12px] text-label-small text-[color:var(--_md-comp-list-list-item-trailing-icon-color)] [&>svg]:size-[20px]",
+			"group-data-selected/list-item:text-on-secondary-container",
+			"group-data-disabled/list-item:text-on-surface/38"
+		],
+		selectionIndicator: [
+			"inline-flex size-[20px] shrink-0 items-center justify-center opacity-0 [&>svg]:size-full",
+			"group-data-selected/list-item:opacity-100 group-data-selected/list-item:text-on-secondary-container",
+			"transition-opacity duration-(--md-sys-motion-spring-effects-fast-duration) ease-(--md-sys-motion-spring-effects-fast-easing)"
+		],
+		expand: [
+			"relative inline-flex size-[24px] shrink-0 cursor-pointer items-center justify-center rounded-full",
+			"state-layer [&>svg]:size-[20px] [&>svg]:fill-current",
+			"[&>svg]:transition-transform [&>svg]:duration-(--md-sys-motion-spring-spatial-fast-duration) [&>svg]:ease-(--md-sys-motion-spring-spatial-fast-easing)",
+			"group-aria-expanded/list-item:[&>svg]:rotate-180 motion-reduce:[&>svg]:transition-none",
+			"data-disabled:cursor-default"
+		],
+		reveal: [
+			"grid grid-rows-[1fr] opacity-100",
+			"[transition-property:grid-template-rows,opacity] motion-reduce:[transition-property:opacity]",
+			"[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]",
+			"motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"motion-safe:data-appear:starting:grid-rows-[0fr] data-appear:starting:opacity-0",
+			"motion-safe:data-exiting:grid-rows-[0fr] data-exiting:opacity-0",
+			"data-exiting:[overflow-anchor:none]"
+		],
+		revealClip: "flex min-h-0 flex-col overflow-hidden",
+		control: "group/control inline-flex shrink-0 items-center justify-center",
+		raised: "pointer-events-none relative z-1 [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto",
+		link: "outline-none after:absolute after:inset-0 after:content-['']"
+	},
+	variants: {
+		variant: {
+			standard: {},
+			segmented: {
+				root: "gap-[2px] [&[role=treegrid]]:gap-0",
+				group: "gap-[2px]",
+				reveal: "not-first:[&>*>*]:mt-[2px]"
+			}
+		},
+		interactive: {
+			true: { item: [
+				"cursor-pointer state-layer focus-ring-inset select-none",
+				"data-disabled:cursor-default",
+				"data-[shape=rest]:rounded-corner-extra-small",
+				"data-[shape=hovered]:rounded-corner-medium",
+				"data-[shape=active]:rounded-corner-large"
+			] },
+			false: {}
+		},
+		lines: {
+			1: {
+				item: "min-h-[calc(56px+var(--md-sys-density,0)*4px)] items-center",
+				cell: "items-center"
+			},
+			2: {
+				item: "min-h-[calc(72px+var(--md-sys-density,0)*4px)] items-center",
+				cell: "items-center"
+			},
+			3: {
+				item: "min-h-[calc(88px+var(--md-sys-density,0)*4px)] items-start",
+				cell: "items-start"
+			}
+		},
+		dividers: {
+			none: {},
+			full: { item: [
+				"relative after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-outline-variant after:content-['']",
+				"data-[position=last]:after:hidden data-[position=only]:after:hidden",
+				"[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:after:hidden",
+				"[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:after:hidden",
+				"forced-colors:after:bg-[GrayText] forced-colors:after:forced-color-adjust-none"
+			] },
+			inset: { item: [
+				"relative after:pointer-events-none after:absolute after:inset-x-[16px] after:bottom-0 after:h-px after:bg-outline-variant after:content-['']",
+				"data-[position=last]:after:hidden data-[position=only]:after:hidden",
+				"[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:after:hidden",
+				"[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:after:hidden",
+				"forced-colors:after:bg-[GrayText] forced-colors:after:forced-color-adjust-none"
+			] }
+		},
+		headlineLines: {
+			1: { headline: "line-clamp-1" },
+			2: { headline: "line-clamp-2" },
+			3: { headline: "line-clamp-3" }
+		},
+		supportingTextLines: {
+			1: { supporting: "line-clamp-1" },
+			2: { supporting: "line-clamp-2" },
+			3: { supporting: "line-clamp-3" }
+		},
+		nested: {
+			true: { item: "ps-[calc(16px+var(--m3-list-level,0)*16px)]" },
+			false: {}
+		},
+		titled: {
+			true: {},
+			false: {}
+		},
+		align: {
+			center: {
+				item: "items-center",
+				cell: "items-center"
+			},
+			top: {
+				item: "items-start",
+				cell: "items-start"
+			}
+		}
+	},
+	compoundVariants: [{
+		variant: "segmented",
+		titled: false,
+		class: { section: "not-first:pt-[16px]" }
+	}, {
+		variant: "segmented",
+		class: { item: [
+			"data-[shape=rest]:rounded-corner-extra-small",
+			"data-[shape=rest]:data-[position=first]:rounded-t-corner-large",
+			"data-[shape=rest]:data-[position=last]:rounded-b-corner-large",
+			"data-[shape=rest]:data-[position=only]:rounded-corner-large",
+			"data-[shape=rest]:[&[data-list-entry]:where(:first-child,[data-slot=section]+*)]:rounded-t-corner-large",
+			"data-[shape=rest]:[[data-list-entry]:where(:first-child,[data-slot=section]+*)>&]:rounded-t-corner-large",
+			"data-[shape=rest]:[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:rounded-b-corner-large",
+			"data-[shape=rest]:[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:rounded-b-corner-large"
+		] }
+	}],
+	defaultVariants: {
+		variant: "standard",
+		interactive: false,
+		lines: 1,
+		dividers: "none"
+	}
+});
+/** Variant definitions for `ListItemImage`, `ListItemVideo` and `ListItemAvatar` (M3's leading media). */
+const listMediaStyles = tv({
+	slots: {
+		frame: [
+			"relative flex shrink-0 items-center justify-center overflow-hidden",
+			"bg-secondary-container text-on-secondary-container [&>svg]:size-[24px] [&>svg]:fill-current",
+			"[&>img]:size-full [&>img]:object-cover",
+			"group-data-disabled/list-item:opacity-38"
+		],
+		badge: [
+			"absolute flex size-[24px] items-center justify-center rounded-full",
+			"bg-inverse-surface/70 text-inverse-on-surface [&>svg]:size-[16px] [&>svg]:fill-current",
+			"forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]"
+		],
+		duration: "absolute end-[4px] bottom-[4px] rounded-corner-extra-small bg-inverse-surface/80 px-[4px] text-label-small text-inverse-on-surface"
+	},
+	variants: {
+		kind: {
+			image: { frame: "size-[56px] rounded-corner-small" },
+			video: { frame: "rounded-corner-small" },
+			avatar: { frame: "size-[40px] rounded-full bg-primary-container text-title-medium text-on-primary-container" }
+		},
+		size: {
+			sm: {},
+			lg: {}
+		}
+	},
+	compoundVariants: [{
+		kind: "video",
+		size: "sm",
+		class: { frame: "h-[56px] w-[100px]" }
+	}, {
+		kind: "video",
+		size: "lg",
+		class: { frame: "h-[64px] w-[114px]" }
+	}],
+	defaultVariants: {
+		kind: "image",
+		size: "sm"
+	}
+});
+//#endregion
+export { listMediaStyles, listStyles };
+
+//# sourceMappingURL=list-styles.js.map

package/dist/components/list/list-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-styles.js","names":[],"sources":["../../../src/components/list/list-styles.ts"],"sourcesContent":["import { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow the M3 Expressive list spec (m3.material.io) with Compose Material 3's\n * Expressive list tokens (ListItem.kt's interactive overloads, SegmentedListItem,\n * ListItemDefaults, ListTokens' `*Expressive*` values; 2026-10-13).\n *\n * Item: 16px start / end and 10px top / bottom padding, 12px between leading content, the\n * text and trailing content. The 12px belongs to the leading and trailing cells (rendered\n * only when present), so a text-only item's text spans 16px to 16px. At least 56px tall with one line, 72px with two (overline or\n * supporting text) and 88px with three (both), where content aligns to the top. Headline\n * `body-large` `on-surface`; supporting text `body-medium`, overline `label-small`, leading\n * and trailing content `on-surface-variant` (trailing text `label-small`, 20px icons). Selected\n * items show a trailing check as a second cue besides colour. Selected items\n * are `secondary-container` with `on-secondary-container` content; disabled content is\n * `on-surface` 38%.\n *\n * Shape (interactive items): 4px at rest, 12px hovered, 16px focused, selected or pressed,\n * morphing on the fast spatial spring; colours change on the default effects spring.\n * Segmented lists put 2px between items and round the outer corners of the first and last\n * items to 16px at rest. Static items in a standard list have no corners.\n *\n * Leading images are 56dp squares and video thumbnails 100 × 56dp (small) or 114 × 64dp\n * (large), all with 8dp corners; avatars are 40dp circles in `primary-container`\n * (`ListMedia.tsx`). The item grows to fit them. Expandable items indent their nested items\n * 16dp per level and end with a chevron that turns over on the fast spatial spring; their\n * nested items open and close their height on the default spatial spring while fading on\n * the default effects spring (only the fade under reduced motion). Dividers (standard lists) are 1px of\n * `outline-variant` on the item's bottom edge, full width or 16dp in from each side, drawn\n * by its `::after` (the state layer uses its background), never under the last item.\n *\n * Web density (`--md-sys-density`, 0 to -3; M3: a list \"can adjust margins, spacing, or\n * density\"): each step takes 2px off the padding above and below an item (10 → 4px) and 4px off\n * its minimum height (56 → 44px, 72 → 60px, 88 → 76px), so items that media make taller lose\n * 4px a step too, as in Material Components Web's list density (every item height 4px a step).\n * Section subheaders lose 4px a step (48 → 36px). Items are stacked rows, so dense ones keep\n * non-overlapping full-row targets above WCAG 2.5.8's 24px, and the expand chevron's target is\n * at most a one-line item's height.\n *\n * Sections (`ListSection`) put a subheader above their items: 48dp tall, `title-small`\n * `on-surface-variant`, 16dp from each side. The M3 spec defines no list subheader, so this\n * follows the deprecated navigation drawer's section headline. Items take their position\n * (segmented corners, dividers) within their section.\n *\n * Item colours come from the list's component tokens (`list-tokens.ts`,\n * `--md-comp-list-list-item-*`): the root and each item carry `data-tokens=\"md-comp-list\"`\n * and `data-variant`. A consumer class still wins in `cn()`.\n *\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link List}; extend them to add variants. */\nexport const listStyles = tv({\n  slots: {\n    root: 'm-0 flex list-none flex-col p-0 outline-none',\n    // A `ListSection`: its subheader, then its items' group.\n    section: 'flex flex-col',\n    // The M3 spec has no list subheader; this follows the deprecated navigation drawer's\n    // section headline (`title-small`, `on-surface-variant`), on a 48dp row with the items'\n    // 16dp side padding, so its text lines up with the headlines below it.\n    subheader:\n      'flex min-h-[calc(48px+var(--md-sys-density,0)*4px)] items-center ps-[16px] pe-[16px] text-title-small text-on-surface-variant',\n    group: 'm-0 flex list-none flex-col p-0',\n    item: [\n      'group/list-item flex ps-[16px] pe-[16px] pt-[calc(10px+var(--md-sys-density,0)*2px)] pb-[calc(10px+var(--md-sys-density,0)*2px)] text-start outline-none',\n      'bg-[var(--_md-comp-list-container-color)] data-selected:bg-[var(--_md-comp-list-list-item-selected-container-color)]',\n      '[--m3-transition-property:border-radius,background-color,color]',\n      '[--m3-transition-duration:var(--md-sys-motion-spring-spatial-fast-duration),var(--md-sys-motion-spring-effects-default-duration),var(--md-sys-motion-spring-effects-default-duration)]',\n      '[--m3-transition-easing:var(--md-sys-motion-spring-spatial-fast-easing),var(--md-sys-motion-spring-effects-default-easing),var(--md-sys-motion-spring-effects-default-easing)]',\n      '[--m3-transition-delay:0s,0s,0s]',\n    ],\n    // The item's content grid (the grid cell of an interactive item).\n    cell: 'grid w-full grid-cols-[auto_minmax(0,1fr)_auto]',\n    leading: [\n      'col-start-1 me-[12px] flex items-center gap-x-[12px] text-title-medium text-[color:var(--_md-comp-list-list-item-leading-icon-color)] [&>svg]:size-[20px]',\n      'group-data-selected/list-item:text-on-secondary-container',\n      'group-data-disabled/list-item:text-on-surface/38',\n    ],\n    text: 'col-start-2 flex min-w-0 flex-col',\n    overline: [\n      'text-label-small text-[color:var(--_md-comp-list-list-item-overline-color)]',\n      'group-data-selected/list-item:text-on-secondary-container',\n      'group-data-disabled/list-item:text-on-surface/38',\n    ],\n    headline: [\n      'text-body-large text-[color:var(--_md-comp-list-list-item-label-text-color)]',\n      'group-data-selected/list-item:text-on-secondary-container',\n      'group-data-disabled/list-item:text-on-surface/38',\n    ],\n    supporting: [\n      'text-body-medium text-[color:var(--_md-comp-list-list-item-supporting-text-color)]',\n      'group-data-selected/list-item:text-on-secondary-container',\n      'group-data-disabled/list-item:text-on-surface/38',\n    ],\n    trailing: [\n      'col-start-3 ms-[12px] flex items-center gap-x-[12px] text-label-small text-[color:var(--_md-comp-list-list-item-trailing-icon-color)] [&>svg]:size-[20px]',\n      'group-data-selected/list-item:text-on-secondary-container',\n      'group-data-disabled/list-item:text-on-surface/38',\n    ],\n    // The check a selected item shows besides its colour (M3: two cues for selection).\n    selectionIndicator: [\n      'inline-flex size-[20px] shrink-0 items-center justify-center opacity-0 [&>svg]:size-full',\n      'group-data-selected/list-item:opacity-100 group-data-selected/list-item:text-on-secondary-container',\n      'transition-opacity duration-(--md-sys-motion-spring-effects-fast-duration) ease-(--md-sys-motion-spring-effects-fast-easing)',\n    ],\n    // An expandable item's chevron: a button (out of the Tab order) with a 48px target.\n    expand: [\n      'relative inline-flex size-[24px] shrink-0 cursor-pointer items-center justify-center rounded-full',\n      'state-layer [&>svg]:size-[20px] [&>svg]:fill-current',\n      '[&>svg]:transition-transform [&>svg]:duration-(--md-sys-motion-spring-spatial-fast-duration) [&>svg]:ease-(--md-sys-motion-spring-spatial-fast-easing)',\n      'group-aria-expanded/list-item:[&>svg]:rotate-180 motion-reduce:[&>svg]:transition-none',\n      'data-disabled:cursor-default',\n    ],\n    // A tree row's wrapper: nested rows open and close their height (grid rows 0fr ↔ 1fr)\n    // on the default spatial spring and fade on the default effects spring; under reduced\n    // motion they only fade.\n    reveal: [\n      'grid grid-rows-[1fr] opacity-100',\n      '[transition-property:grid-template-rows,opacity] motion-reduce:[transition-property:opacity]',\n      '[transition-duration:var(--md-sys-motion-spring-spatial-default-duration),var(--md-sys-motion-spring-effects-default-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing),var(--md-sys-motion-spring-effects-default-easing)]',\n      // Reduced motion: the fade alone, still on the default effects spring.\n      'motion-reduce:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      'motion-reduce:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      // The height opens and closes only with motion: under reduced motion a leaving row\n      // stays open and fades where it is (with no height transition, a closed height would\n      // apply in the first frame and hide the fade).\n      'motion-safe:data-appear:starting:grid-rows-[0fr] data-appear:starting:opacity-0',\n      'motion-safe:data-exiting:grid-rows-[0fr] data-exiting:opacity-0',\n      // A closing row is never the scroll anchor: the browser would pick it (its top stays\n      // put) and let a row pressed below it slide up by its height. The pressed row is held\n      // in place by the tree itself when the anchor is above it (2026-10-17).\n      'data-exiting:[overflow-anchor:none]',\n    ],\n    // Lets the row's height close to nothing inside the reveal.\n    revealClip: 'flex min-h-0 flex-col overflow-hidden',\n    // The drawn checkbox, radio button or switch of an item that is one. Decorative: the\n    // item is the control, so the drawing only follows its state attributes.\n    control: 'group/control inline-flex shrink-0 items-center justify-center',\n    // A link item's leading and trailing content: above the link's overlay, but only its\n    // controls take the pointer, so a press anywhere else reaches the link.\n    raised:\n      'pointer-events-none relative z-1 [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto',\n    // A link item's anchor: its overlay covers the item, so the whole item is the link.\n    link: \"outline-none after:absolute after:inset-0 after:content-['']\",\n  },\n  variants: {\n    variant: {\n      // Item colours are tokens: a standard item is see-through, so it takes its\n      // container's colour (a sheet, a card); a segmented item is `surface`.\n      standard: {},\n      segmented: {\n        // A tree's 2px gaps are inside each row's reveal (above every row but the first), so\n        // a closing row takes its gap with it: a gap left between rows of no height would\n        // shift what follows by 2px per row as the ghosts are removed, and the browser's\n        // scroll anchoring then scrolled the page by as much (2026-10-17).\n        root: 'gap-[2px] [&[role=treegrid]]:gap-0',\n        group: 'gap-[2px]',\n        reveal: 'not-first:[&>*>*]:mt-[2px]',\n      },\n    },\n    interactive: {\n      true: {\n        item: [\n          'cursor-pointer state-layer focus-ring-inset select-none',\n          'data-disabled:cursor-default',\n          // One shape state at a time (see `data-shape`), so no two rules compete.\n          'data-[shape=rest]:rounded-corner-extra-small',\n          'data-[shape=hovered]:rounded-corner-medium',\n          'data-[shape=active]:rounded-corner-large',\n        ],\n      },\n      false: {},\n    },\n    lines: {\n      1: {\n        item: 'min-h-[calc(56px+var(--md-sys-density,0)*4px)] items-center',\n        cell: 'items-center',\n      },\n      2: {\n        item: 'min-h-[calc(72px+var(--md-sys-density,0)*4px)] items-center',\n        cell: 'items-center',\n      },\n      3: {\n        item: 'min-h-[calc(88px+var(--md-sys-density,0)*4px)] items-start',\n        cell: 'items-start',\n      },\n    },\n    dividers: {\n      none: {},\n      full: {\n        item: [\n          \"relative after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-outline-variant after:content-['']\",\n          'data-[position=last]:after:hidden data-[position=only]:after:hidden',\n          // A plain list's item is last in its group by structure too, so the server's HTML\n          // is right before the list learns where its sections are (see \\`segmented\\`).\n          '[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:after:hidden',\n          '[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:after:hidden',\n          'forced-colors:after:bg-[GrayText] forced-colors:after:forced-color-adjust-none',\n        ],\n      },\n      inset: {\n        item: [\n          \"relative after:pointer-events-none after:absolute after:inset-x-[16px] after:bottom-0 after:h-px after:bg-outline-variant after:content-['']\",\n          'data-[position=last]:after:hidden data-[position=only]:after:hidden',\n          // A plain list's item is last in its group by structure too, so the server's HTML\n          // is right before the list learns where its sections are (see \\`segmented\\`).\n          '[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:after:hidden',\n          '[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:after:hidden',\n          'forced-colors:after:bg-[GrayText] forced-colors:after:forced-color-adjust-none',\n        ],\n      },\n    },\n    // How many lines a headline or supporting text shows (the `text` slot's children).\n    headlineLines: {\n      1: { headline: 'line-clamp-1' },\n      2: { headline: 'line-clamp-2' },\n      3: { headline: 'line-clamp-3' },\n    },\n    supportingTextLines: {\n      1: { supporting: 'line-clamp-1' },\n      2: { supporting: 'line-clamp-2' },\n      3: { supporting: 'line-clamp-3' },\n    },\n    // Nested items of an expandable list, indented 16dp per level (`--m3-list-level`).\n    nested: {\n      true: { item: 'ps-[calc(16px+var(--m3-list-level,0)*16px)]' },\n      false: {},\n    },\n    // Whether a section shows a subheader.\n    titled: { true: {}, false: {} },\n    // Overrides the alignment that follows from the line count.\n    align: {\n      center: { item: 'items-center', cell: 'items-center' },\n      top: { item: 'items-start', cell: 'items-start' },\n    },\n  },\n  compoundVariants: [\n    // Segmented sections without a subheader stand 16dp apart, so each reads as its own group.\n    { variant: 'segmented', titled: false, class: { section: 'not-first:pt-[16px]' } },\n    // Segmented lists round the outer corners of the group at rest (static items too).\n    // A plain list's items (\\`data-list-entry\\`, the item or the \\`li\\` holding it) also take\n    // them from their place among their siblings: a group starts at the first child or after\n    // a section and ends at the last child or before one. The list learns which entries are\n    // sections only once it renders on the client, so without these the server's HTML would\n    // show loose items next to a section with square corners until hydration.\n    {\n      variant: 'segmented',\n      class: {\n        item: [\n          'data-[shape=rest]:rounded-corner-extra-small',\n          'data-[shape=rest]:data-[position=first]:rounded-t-corner-large',\n          'data-[shape=rest]:data-[position=last]:rounded-b-corner-large',\n          'data-[shape=rest]:data-[position=only]:rounded-corner-large',\n          'data-[shape=rest]:[&[data-list-entry]:where(:first-child,[data-slot=section]+*)]:rounded-t-corner-large',\n          'data-[shape=rest]:[[data-list-entry]:where(:first-child,[data-slot=section]+*)>&]:rounded-t-corner-large',\n          'data-[shape=rest]:[&[data-list-entry]:where(:last-child,:has(+[data-slot=section]))]:rounded-b-corner-large',\n          'data-[shape=rest]:[[data-list-entry]:where(:last-child,:has(+[data-slot=section]))>&]:rounded-b-corner-large',\n        ],\n      },\n    },\n  ],\n  defaultVariants: { variant: 'standard', interactive: false, lines: 1, dividers: 'none' },\n});\n\n/**\n * The variants of {@link listStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type ListStyleProps = VariantProps<typeof listStyles>;\nexport type ListVariant = NonNullable<ListStyleProps['variant']>;\nexport type ListDividers = Exclude<NonNullable<ListStyleProps['dividers']>, 'none'>;\n\n/** Variant definitions for `ListItemImage`, `ListItemVideo` and `ListItemAvatar` (M3's leading media). */\nexport const listMediaStyles = tv({\n  slots: {\n    // 8dp corners (M3 Expressive's `corner-small`), the image cropped to fill, faded with a\n    // disabled item. The tonal fill shows behind a fallback icon.\n    frame: [\n      'relative flex shrink-0 items-center justify-center overflow-hidden',\n      'bg-secondary-container text-on-secondary-container [&>svg]:size-[24px] [&>svg]:fill-current',\n      '[&>img]:size-full [&>img]:object-cover',\n      'group-data-disabled/list-item:opacity-38',\n    ],\n    badge: [\n      'absolute flex size-[24px] items-center justify-center rounded-full',\n      'bg-inverse-surface/70 text-inverse-on-surface [&>svg]:size-[16px] [&>svg]:fill-current',\n      'forced-colors:border forced-colors:border-solid forced-colors:border-[CanvasText]',\n    ],\n    duration:\n      'absolute end-[4px] bottom-[4px] rounded-corner-extra-small bg-inverse-surface/80 px-[4px] text-label-small text-inverse-on-surface',\n  },\n  variants: {\n    kind: {\n      image: { frame: 'size-[56px] rounded-corner-small' },\n      video: { frame: 'rounded-corner-small' },\n      // A 40dp circle in `primary-container`, its initials `title-medium`.\n      avatar: {\n        frame:\n          'size-[40px] rounded-full bg-primary-container text-title-medium text-on-primary-container',\n      },\n    },\n    size: {\n      sm: {},\n      lg: {},\n    },\n  },\n  compoundVariants: [\n    { kind: 'video', size: 'sm', class: { frame: 'h-[56px] w-[100px]' } },\n    { kind: 'video', size: 'lg', class: { frame: 'h-[64px] w-[114px]' } },\n  ],\n  defaultVariants: { kind: 'image', size: 'sm' },\n});\n"],"mappings":";;;AAoDA,MAAa,aAAa,GAAG;CAC3B,OAAO;EACL,MAAM;EAEN,SAAS;EAIT,WACE;EACF,OAAO;EACP,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,MAAM;EACN,SAAS;GACP;GACA;GACA;EACF;EACA,MAAM;EACN,UAAU;GACR;GACA;GACA;EACF;EACA,UAAU;GACR;GACA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;EACF;EACA,UAAU;GACR;GACA;GACA;EACF;EAEA,oBAAoB;GAClB;GACA;GACA;EACF;EAEA,QAAQ;GACN;GACA;GACA;GACA;GACA;EACF;EAIA,QAAQ;GACN;GACA;GACA;GACA;GAEA;GACA;GAIA;GACA;GAIA;EACF;EAEA,YAAY;EAGZ,SAAS;EAGT,QACE;EAEF,MAAM;CACR;CACA,UAAU;EACR,SAAS;GAGP,UAAU,CAAC;GACX,WAAW;IAKT,MAAM;IACN,OAAO;IACP,QAAQ;GACV;EACF;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IAEA;IACA;IACA;GACF,EACF;GACA,OAAO,CAAC;EACV;EACA,OAAO;GACL,GAAG;IACD,MAAM;IACN,MAAM;GACR;GACA,GAAG;IACD,MAAM;IACN,MAAM;GACR;GACA,GAAG;IACD,MAAM;IACN,MAAM;GACR;EACF;EACA,UAAU;GACR,MAAM,CAAC;GACP,MAAM,EACJ,MAAM;IACJ;IACA;IAGA;IACA;IACA;GACF,EACF;GACA,OAAO,EACL,MAAM;IACJ;IACA;IAGA;IACA;IACA;GACF,EACF;EACF;EAEA,eAAe;GACb,GAAG,EAAE,UAAU,eAAe;GAC9B,GAAG,EAAE,UAAU,eAAe;GAC9B,GAAG,EAAE,UAAU,eAAe;EAChC;EACA,qBAAqB;GACnB,GAAG,EAAE,YAAY,eAAe;GAChC,GAAG,EAAE,YAAY,eAAe;GAChC,GAAG,EAAE,YAAY,eAAe;EAClC;EAEA,QAAQ;GACN,MAAM,EAAE,MAAM,8CAA8C;GAC5D,OAAO,CAAC;EACV;EAEA,QAAQ;GAAE,MAAM,CAAC;GAAG,OAAO,CAAC;EAAE;EAE9B,OAAO;GACL,QAAQ;IAAE,MAAM;IAAgB,MAAM;GAAe;GACrD,KAAK;IAAE,MAAM;IAAe,MAAM;GAAc;EAClD;CACF;CACA,kBAAkB,CAEhB;EAAE,SAAS;EAAa,QAAQ;EAAO,OAAO,EAAE,SAAS,sBAAsB;CAAE,GAOjF;EACE,SAAS;EACT,OAAO,EACL,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF,CACF;CACA,iBAAiB;EAAE,SAAS;EAAY,aAAa;EAAO,OAAO;EAAG,UAAU;CAAO;AACzF,CAAC;;AAWD,MAAa,kBAAkB,GAAG;CAChC,OAAO;EAGL,OAAO;GACL;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;EACF;EACA,UACE;CACJ;CACA,UAAU;EACR,MAAM;GACJ,OAAO,EAAE,OAAO,mCAAmC;GACnD,OAAO,EAAE,OAAO,uBAAuB;GAEvC,QAAQ,EACN,OACE,4FACJ;EACF;EACA,MAAM;GACJ,IAAI,CAAC;GACL,IAAI,CAAC;EACP;CACF;CACA,kBAAkB,CAChB;EAAE,MAAM;EAAS,MAAM;EAAM,OAAO,EAAE,OAAO,qBAAqB;CAAE,GACpE;EAAE,MAAM;EAAS,MAAM;EAAM,OAAO,EAAE,OAAO,qBAAqB;CAAE,CACtE;CACA,iBAAiB;EAAE,MAAM;EAAS,MAAM;CAAK;AAC/C,CAAC"}

package/dist/components/list/list-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/list/list-tokens.d.ts
+/** The tokens of {@link List}: `--md-comp-list-list-item-<part>`. */
+export declare const listTokenSet: ComponentTokenSet<"list-item-label-text-color" | "list-item-supporting-text-color" | "list-item-overline-color" | "list-item-leading-icon-color" | "list-item-trailing-icon-color" | "list-item-selected-container-color">;
+//#endregion
+//# sourceMappingURL=list-tokens.d.ts.map