@windmorph/react 0.0.0-stage → 0.1.1

package/dist/components/icon-button/icon-button-tokens.js

@@ -0,0 +1,215 @@
+import { color, corner, defineComponentTokens, px } from "../../tokens/component.js";
+//#region src/components/icon-button/icon-button-tokens.ts
+const container = { property: "background-color" };
+const icon = { property: "color" };
+const selectedContainer = {
+	property: "background-color",
+	state: "selected"
+};
+const selectedIcon = {
+	property: "color",
+	state: "selected"
+};
+const unselectedContainer = {
+	property: "background-color",
+	state: "unselected"
+};
+const unselectedIcon = {
+	property: "color",
+	state: "unselected"
+};
+const roundShape = { property: "border-top-left-radius" };
+const squareShape = {
+	property: "border-top-left-radius",
+	state: "selected"
+};
+/** The standard and outlined icon colour: the existing contract, then `on-surface-variant`. */
+const contractIconColor = `var(--md-comp-icon-button-icon-color, ${color("on-surface-variant")})`;
+/** The private parts a variant without its own token takes from its resting colours. */
+const followsResting = {
+	"unselected-container-color": "transparent",
+	"unselected-icon-color": "var(--_md-comp-icon-button-icon-color)"
+};
+/** The six colour tokens of a variant with a container and a full toggle set. */
+function toggleColors(compose, colors) {
+	return {
+		"container-color": {
+			value: colors.container,
+			description: "The container.",
+			compose: `${compose}.ContainerColor`,
+			paints: container
+		},
+		"icon-color": {
+			value: colors.icon,
+			description: "The icon.",
+			compose: `${compose}.Color`,
+			paints: icon
+		},
+		"selected-container-color": {
+			value: colors.selectedContainer,
+			description: "The container of a selected toggle.",
+			compose: `${compose}.SelectedContainerColor`,
+			paints: selectedContainer
+		},
+		"selected-icon-color": {
+			value: colors.selectedIcon,
+			description: "The icon of a selected toggle.",
+			compose: `${compose}.ToggleSelectedColor`,
+			paints: selectedIcon
+		},
+		"unselected-container-color": {
+			value: colors.unselectedContainer,
+			description: "The container of an unselected toggle.",
+			compose: `${compose}.UnselectedContainerColor`,
+			paints: unselectedContainer
+		},
+		"unselected-icon-color": {
+			value: colors.unselectedIcon,
+			description: "The icon of an unselected toggle.",
+			compose: `${compose}.ToggleUnselectedColor`,
+			paints: unselectedIcon
+		}
+	};
+}
+/** A size's round and square corners; round is full, capped at half the height. */
+function shapes(compose, square) {
+	return {
+		"container-shape-round": {
+			value: corner("full"),
+			description: "The round shape: full corners, at most half the height.",
+			compose: `${compose}.ContainerShapeRound`,
+			paints: roundShape
+		},
+		"container-shape-square": {
+			value: square,
+			description: "The square shape, which a selected round toggle also takes.",
+			compose: `${compose}.ContainerShapeSquare`,
+			paints: squareShape
+		}
+	};
+}
+/**
+* The tokens of {@link IconButton}: `--md-comp-icon-button-<variant>-<part>` per variant
+* and `--md-comp-icon-button-<size>-container-shape-<round|square>` per size. The standard
+* and outlined icon colours fall back to `--md-comp-icon-button-icon-color`.
+*/
+const iconButtonTokenSet = defineComponentTokens({
+	name: "md-comp-icon-button",
+	tokens: {},
+	scopes: {
+		variant: {
+			standard: {
+				prefix: "md-comp-icon-button-standard",
+				tokens: {
+					"icon-color": {
+						value: contractIconColor,
+						description: "The icon, and an unselected toggle’s. Falls back to `--md-comp-icon-button-icon-color`.",
+						compose: "StandardIconButtonTokens.Color",
+						paints: icon
+					},
+					"selected-icon-color": {
+						value: color("primary"),
+						description: "The icon of a selected toggle.",
+						compose: "StandardIconButtonTokens.SelectedColor",
+						paints: selectedIcon
+					}
+				},
+				fixed: {
+					...followsResting,
+					"container-color": "transparent",
+					"outline-color": "transparent",
+					"selected-container-color": "transparent"
+				}
+			},
+			filled: {
+				prefix: "md-comp-icon-button-filled",
+				tokens: toggleColors("FilledIconButtonTokens", {
+					container: color("primary"),
+					icon: color("on-primary"),
+					selectedContainer: color("primary"),
+					selectedIcon: color("on-primary"),
+					unselectedContainer: color("surface-container"),
+					unselectedIcon: color("on-surface-variant")
+				}),
+				fixed: { "outline-color": "transparent" }
+			},
+			tonal: {
+				prefix: "md-comp-icon-button-tonal",
+				tokens: toggleColors("FilledTonalIconButtonTokens", {
+					container: color("secondary-container"),
+					icon: color("on-secondary-container"),
+					selectedContainer: color("secondary"),
+					selectedIcon: color("on-secondary"),
+					unselectedContainer: color("secondary-container"),
+					unselectedIcon: color("on-secondary-container")
+				}),
+				fixed: { "outline-color": "transparent" }
+			},
+			outlined: {
+				prefix: "md-comp-icon-button-outlined",
+				tokens: {
+					"outline-color": {
+						value: color("outline-variant"),
+						description: "The outline.",
+						compose: "OutlinedIconButtonTokens.OutlineColor",
+						paints: { property: "border-top-color" }
+					},
+					"icon-color": {
+						value: contractIconColor,
+						description: "The icon, and an unselected toggle’s. Falls back to `--md-comp-icon-button-icon-color`.",
+						compose: "OutlinedIconButtonTokens.Color",
+						paints: icon
+					},
+					"selected-container-color": {
+						value: color("inverse-surface"),
+						description: "The container of a selected toggle, which has no outline.",
+						compose: "OutlinedIconButtonTokens.SelectedContainerColor",
+						paints: selectedContainer
+					},
+					"selected-icon-color": {
+						value: color("inverse-on-surface"),
+						description: "The icon of a selected toggle.",
+						compose: "OutlinedIconButtonTokens.SelectedColor",
+						paints: selectedIcon
+					}
+				},
+				fixed: {
+					...followsResting,
+					"container-color": "transparent"
+				}
+			}
+		},
+		size: {
+			xs: {
+				prefix: "md-comp-icon-button-xsmall",
+				tokens: shapes("XSmallIconButtonTokens", corner("medium")),
+				fixed: { "half-height": px(16) }
+			},
+			sm: {
+				prefix: "md-comp-icon-button-small",
+				tokens: shapes("SmallIconButtonTokens", corner("medium")),
+				fixed: { "half-height": px(20) }
+			},
+			md: {
+				prefix: "md-comp-icon-button-medium",
+				tokens: shapes("MediumIconButtonTokens", corner("large")),
+				fixed: { "half-height": px(28) }
+			},
+			lg: {
+				prefix: "md-comp-icon-button-large",
+				tokens: shapes("LargeIconButtonTokens", corner("extra-large")),
+				fixed: { "half-height": px(48) }
+			},
+			xl: {
+				prefix: "md-comp-icon-button-xlarge",
+				tokens: shapes("XLargeIconButtonTokens", corner("extra-large")),
+				fixed: { "half-height": px(68) }
+			}
+		}
+	},
+	derived: { "container-shape-round-capped": "min(var(--_md-comp-icon-button-container-shape-round), var(--_md-comp-icon-button-half-height))" }
+});
+//#endregion
+export { iconButtonTokenSet };
+
+//# sourceMappingURL=icon-button-tokens.js.map

package/dist/components/icon-button/icon-button-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button-tokens.js","names":[],"sources":["../../../src/components/icon-button/icon-button-tokens.ts"],"sourcesContent":["import {\n  color,\n  corner,\n  defineComponentTokens,\n  px,\n  type ComponentToken,\n  type TokenPaints,\n  type TokenValue,\n} from '../../tokens/component';\n\n/*\n * IconButton's component tokens, M3 Expressive's `md.comp.icon-button.<variant>.*` and\n * `md.comp.icon-button.<size>.*` names (checked against m3.material.io's token tables,\n * 2026-10-14), with Compose's defaults. `icon-button-styles.ts` reads one private variable\n * per part; the root's `data-variant` and `data-size` pick the public names and defaults.\n *\n * The standard and outlined icon colours fall back to `--md-comp-icon-button-icon-color`\n * (M3's baseline `md.comp.icon-button.icon.color`), the existing contract that app bars,\n * search bars and vibrant toolbars set to `currentColor` and dialogs' close buttons set to\n * `on-surface`. A toggle's unselected colours default to M3's own values; where M3 has no\n * unselected token for a variant (standard and outlined), the unselected part follows the\n * resting one. Hover, focus, pressed and disabled values, the pressed shape, outline widths,\n * widths and sizes stay classes.\n */\n\nconst container: TokenPaints = { property: 'background-color' };\nconst icon: TokenPaints = { property: 'color' };\nconst selectedContainer: TokenPaints = { property: 'background-color', state: 'selected' };\nconst selectedIcon: TokenPaints = { property: 'color', state: 'selected' };\n// An unselected toggle has no attribute of its own, so the probe story marks its instance.\nconst unselectedContainer: TokenPaints = { property: 'background-color', state: 'unselected' };\nconst unselectedIcon: TokenPaints = { property: 'color', state: 'unselected' };\nconst roundShape: TokenPaints = { property: 'border-top-left-radius' };\n// A selected round toggle takes the square shape, so that's where the square token shows.\nconst squareShape: TokenPaints = { property: 'border-top-left-radius', state: 'selected' };\n\n/** The standard and outlined icon colour: the existing contract, then `on-surface-variant`. */\nconst contractIconColor = `var(--md-comp-icon-button-icon-color, ${color('on-surface-variant')})`;\n\n/** The private parts a variant without its own token takes from its resting colours. */\nconst followsResting = {\n  'unselected-container-color': 'transparent',\n  'unselected-icon-color': 'var(--_md-comp-icon-button-icon-color)',\n} as const;\n\n/** The six colour tokens of a variant with a container and a full toggle set. */\nfunction toggleColors(\n  compose: string,\n  colors: {\n    container: TokenValue;\n    icon: TokenValue;\n    selectedContainer: TokenValue;\n    selectedIcon: TokenValue;\n    unselectedContainer: TokenValue;\n    unselectedIcon: TokenValue;\n  },\n) {\n  return {\n    'container-color': {\n      value: colors.container,\n      description: 'The container.',\n      compose: `${compose}.ContainerColor`,\n      paints: container,\n    },\n    'icon-color': {\n      value: colors.icon,\n      description: 'The icon.',\n      compose: `${compose}.Color`,\n      paints: icon,\n    },\n    'selected-container-color': {\n      value: colors.selectedContainer,\n      description: 'The container of a selected toggle.',\n      compose: `${compose}.SelectedContainerColor`,\n      paints: selectedContainer,\n    },\n    'selected-icon-color': {\n      value: colors.selectedIcon,\n      description: 'The icon of a selected toggle.',\n      compose: `${compose}.ToggleSelectedColor`,\n      paints: selectedIcon,\n    },\n    'unselected-container-color': {\n      value: colors.unselectedContainer,\n      description: 'The container of an unselected toggle.',\n      compose: `${compose}.UnselectedContainerColor`,\n      paints: unselectedContainer,\n    },\n    'unselected-icon-color': {\n      value: colors.unselectedIcon,\n      description: 'The icon of an unselected toggle.',\n      compose: `${compose}.ToggleUnselectedColor`,\n      paints: unselectedIcon,\n    },\n  } satisfies Record<string, ComponentToken>;\n}\n\n/** A size's round and square corners; round is full, capped at half the height. */\nfunction shapes(compose: string, square: TokenValue) {\n  return {\n    'container-shape-round': {\n      value: corner('full'),\n      description: 'The round shape: full corners, at most half the height.',\n      compose: `${compose}.ContainerShapeRound`,\n      paints: roundShape,\n    },\n    'container-shape-square': {\n      value: square,\n      description: 'The square shape, which a selected round toggle also takes.',\n      compose: `${compose}.ContainerShapeSquare`,\n      paints: squareShape,\n    },\n  } satisfies Record<string, ComponentToken>;\n}\n\n/**\n * The tokens of {@link IconButton}: `--md-comp-icon-button-<variant>-<part>` per variant\n * and `--md-comp-icon-button-<size>-container-shape-<round|square>` per size. The standard\n * and outlined icon colours fall back to `--md-comp-icon-button-icon-color`.\n */\nexport const iconButtonTokenSet = defineComponentTokens({\n  name: 'md-comp-icon-button',\n  tokens: {},\n  scopes: {\n    variant: {\n      standard: {\n        prefix: 'md-comp-icon-button-standard',\n        tokens: {\n          'icon-color': {\n            value: contractIconColor,\n            description:\n              'The icon, and an unselected toggle’s. Falls back to `--md-comp-icon-button-icon-color`.',\n            compose: 'StandardIconButtonTokens.Color',\n            paints: icon,\n          },\n          'selected-icon-color': {\n            value: color('primary'),\n            description: 'The icon of a selected toggle.',\n            compose: 'StandardIconButtonTokens.SelectedColor',\n            paints: selectedIcon,\n          },\n        },\n        fixed: {\n          ...followsResting,\n          'container-color': 'transparent',\n          'outline-color': 'transparent',\n          'selected-container-color': 'transparent',\n        },\n      },\n      filled: {\n        prefix: 'md-comp-icon-button-filled',\n        tokens: toggleColors('FilledIconButtonTokens', {\n          container: color('primary'),\n          icon: color('on-primary'),\n          selectedContainer: color('primary'),\n          selectedIcon: color('on-primary'),\n          unselectedContainer: color('surface-container'),\n          unselectedIcon: color('on-surface-variant'),\n        }),\n        fixed: { 'outline-color': 'transparent' },\n      },\n      tonal: {\n        prefix: 'md-comp-icon-button-tonal',\n        tokens: toggleColors('FilledTonalIconButtonTokens', {\n          container: color('secondary-container'),\n          icon: color('on-secondary-container'),\n          selectedContainer: color('secondary'),\n          selectedIcon: color('on-secondary'),\n          unselectedContainer: color('secondary-container'),\n          unselectedIcon: color('on-secondary-container'),\n        }),\n        fixed: { 'outline-color': 'transparent' },\n      },\n      outlined: {\n        prefix: 'md-comp-icon-button-outlined',\n        tokens: {\n          'outline-color': {\n            value: color('outline-variant'),\n            description: 'The outline.',\n            compose: 'OutlinedIconButtonTokens.OutlineColor',\n            paints: { property: 'border-top-color' },\n          },\n          'icon-color': {\n            value: contractIconColor,\n            description:\n              'The icon, and an unselected toggle’s. Falls back to `--md-comp-icon-button-icon-color`.',\n            compose: 'OutlinedIconButtonTokens.Color',\n            paints: icon,\n          },\n          'selected-container-color': {\n            value: color('inverse-surface'),\n            description: 'The container of a selected toggle, which has no outline.',\n            compose: 'OutlinedIconButtonTokens.SelectedContainerColor',\n            paints: selectedContainer,\n          },\n          'selected-icon-color': {\n            value: color('inverse-on-surface'),\n            description: 'The icon of a selected toggle.',\n            compose: 'OutlinedIconButtonTokens.SelectedColor',\n            paints: selectedIcon,\n          },\n        },\n        fixed: { ...followsResting, 'container-color': 'transparent' },\n      },\n    },\n    size: {\n      xs: {\n        prefix: 'md-comp-icon-button-xsmall',\n        tokens: shapes('XSmallIconButtonTokens', corner('medium')),\n        fixed: { 'half-height': px(16) },\n      },\n      sm: {\n        prefix: 'md-comp-icon-button-small',\n        tokens: shapes('SmallIconButtonTokens', corner('medium')),\n        fixed: { 'half-height': px(20) },\n      },\n      md: {\n        prefix: 'md-comp-icon-button-medium',\n        tokens: shapes('MediumIconButtonTokens', corner('large')),\n        fixed: { 'half-height': px(28) },\n      },\n      lg: {\n        prefix: 'md-comp-icon-button-large',\n        tokens: shapes('LargeIconButtonTokens', corner('extra-large')),\n        fixed: { 'half-height': px(48) },\n      },\n      xl: {\n        prefix: 'md-comp-icon-button-xlarge',\n        tokens: shapes('XLargeIconButtonTokens', corner('extra-large')),\n        fixed: { 'half-height': px(68) },\n      },\n    },\n  },\n  derived: {\n    // Full corners stop at half the height, so the press morph interpolates smoothly.\n    'container-shape-round-capped':\n      'min(var(--_md-comp-icon-button-container-shape-round), var(--_md-comp-icon-button-half-height))',\n  },\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,265 @@
+import { Density } from "../../tokens/density.js";
+import { RootDOMProps } from "../../utils/root-props.js";
+import { ListDividers, ListVariant } from "./list-styles.js";
+import { CSSProperties, JSX, ReactElement, ReactNode, Ref } from "react";
+import { Key } from "react-aria";
+//#region src/components/list/List.d.ts
+/** Props of a {@link ListItem}; the React `key` identifies it for `onAction` and selection. */
+export interface ListItemProps {
+  /** The headline. */
+  children: ReactNode;
+  /** A short line above the headline. */
+  overline?: ReactNode;
+  /** One or two lines below the headline. */
+  supportingText?: ReactNode;
+  /** Leading content: an icon, an avatar, a `ListItemImage` or `ListItemVideo`, or a control. */
+  leading?: ReactNode;
+  /** Trailing content: an icon, short text or a control (in an interactive list it gets focus with ← / →). */
+  trailing?: ReactNode;
+  /**
+   * Makes the item a link. In a list without `onAction` or `selectionMode` the item is a
+   * real `<a>`: its own Tab stop, with the browser's link menu and modified clicks, routed
+   * through a `RouterProvider` (such as `NextRouterProvider`) on a plain click.
+   */
+  href?: string;
+  /** Marks the link item for the page being shown: `aria-current="page"` and the selected colours. */
+  current?: boolean;
+  /** A link item's target; `_blank` adds `rel="noopener noreferrer"` unless `rel` is given. */
+  target?: string;
+  /** A link item's `rel`, e.g. `"nofollow"`. */
+  rel?: string;
+  /** Downloads the link item's file instead of opening it (optionally with a file name). */
+  download?: boolean | string;
+  /** Plain-text version of the headline, for type-ahead and announcements. */
+  textValue?: string;
+  /** Accessible name when the headline isn't plain text. */
+  'aria-label'?: string;
+  /** Classes for the item, merged after `classNames.item`; consumer classes win. */
+  className?: string;
+  /**
+   * Makes the whole item a switch or a checkbox (Compose's toggleable `ListItem`): pressing
+   * anywhere on it toggles it, and it is one control for assistive tech. Not in lists with
+   * `onAction`, links or `selectionMode`. Left out, the item is a plain row.
+   */
+  control?: 'switch' | 'checkbox';
+  /** Whether a switch or checkbox item is on (controlled). */
+  checked?: boolean;
+  /** Whether a switch or checkbox item starts on (uncontrolled). */
+  defaultChecked?: boolean;
+  /** Called when a switch or checkbox item is toggled. */
+  onCheckedChange?: (checked: boolean) => void;
+  /** Where the switch, checkbox or radio button sits, at the start or end of the row. @default "start", or "end" for a switch */
+  controlPlacement?: ControlPlacement;
+  /** A radio list item's value, or the value a switch or checkbox item posts with its form. */
+  value?: string;
+  /** The form field name of a switch or checkbox item. */
+  name?: string;
+  /** Disables the item. @default false */
+  disabled?: boolean;
+  /**
+   * Aligns the content; by default it is centred, and top-aligned in three-line items.
+   * @default "center", or "top" in three-line items
+   */
+  verticalAlignment?: 'center' | 'top';
+  /** Shows ✓ and ✕ in a switch item's thumb. @default false */
+  switchIcons?: boolean;
+  /** The most lines the headline shows, then "…". Left out, the list's `headlineLines` applies. */
+  headlineLines?: LineLimit;
+  /**
+   * The most lines the supporting text shows, then "…". Left out, the list's
+   * `supportingTextLines` applies.
+   */
+  supportingTextLines?: LineLimit;
+  /**
+   * Nested `ListItem`s (each with its own `key`): the item expands and collapses to show
+   * them, in a folder-like way (M3's expand interaction). It ends with a chevron, and → / ←
+   * expand and collapse it.
+   */
+  childItems?: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
+}
+/** How many lines a text shows before it ends with "…"; the full text stays in the DOM. */
+export type LineLimit = 1 | 2 | 3;
+type ControlPlacement = 'start' | 'end';
+/**
+ * An item of a {@link List}. Like React Stately's collection `Item`, the list reads its
+ * props; identify it with a React `key`.
+ */
+export declare const ListItem: (props: ListItemProps) => JSX.Element;
+/** Props of a {@link ListSection}: a subheader, or a name when it shows none. */
+export type ListSectionProps = {
+  /** `ListItem` elements, each with its own `key`. */
+  children: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];
+  /** Classes for the section, merged after `classNames.section`; consumer classes win. */
+  className?: string;
+} & ({
+  /** The subheader shown above the section's items, which names the group. */
+  title: ReactNode;
+  /** Accessible name for the group, instead of the subheader's text. */
+  'aria-label'?: string;
+} | {
+  title?: undefined;
+  /** Accessible name for the group when it shows no subheader. */
+  'aria-label': string;
+});
+/**
+ * A labelled group of items in a {@link List}, under a subheader (`title`). Identify it with
+ * a React `key`, like its items. Arrow keys move across sections as through one list.
+ * Sections go in static, action (grid) and selection (list box) lists, not in radio lists
+ * or lists with `childItems`.
+ *
+ * @example
+ * <List aria-label="Settings" onAction={open}>
+ *   <ListSection key="network" title="Network">
+ *     <ListItem key="wifi">Wi‑Fi</ListItem>
+ *   </ListSection>
+ * </List>
+ */
+export declare const ListSection: (props: ListSectionProps) => JSX.Element;
+export interface ListClassNames {
+  /** The root list element, merged with `className`. */
+  root?: string;
+  /** Each `ListSection`'s wrapper (its subheader and items). */
+  section?: string;
+  /** Each `ListSection`'s subheader. */
+  subheader?: string;
+  /** Each item. */
+  item?: string;
+  /** Each item's leading content (icon, avatar, media or control). */
+  leading?: string;
+  /** Each item's text column (overline, headline and supporting text). */
+  text?: string;
+  /** Each item's overline. */
+  overline?: string;
+  /** Each item's headline. */
+  headline?: string;
+  /** Each item's supporting text. */
+  supportingText?: string;
+  /** Each item's trailing content. */
+  trailing?: string;
+  /** The drawn switch, checkbox or radio button of an item that is one. */
+  control?: string;
+  /** The check that marks a selected item in a list with `selectionMode`. */
+  selectionIndicator?: string;
+  /** The chevron button that expands an item with nested items. */
+  expandButton?: string;
+  /** Every `ListItemImage` and `ListItemVideo` in the list (to round them, say). */
+  media?: string;
+}
+type Naming = {
+  /** Accessible name for the list (a list has no visible label of its own). */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the list, such as a heading above it. */
+  'aria-labelledby': string;
+};
+type ListChild = ReactElement<ListItemProps> | ReactElement<ListSectionProps>;
+interface ListOwnProps extends RootDOMProps {
+  /** The root element's id. */
+  id?: string;
+  /** Flush items, or separate items 2px apart with rounded group corners. @default "standard" */
+  variant?: ListVariant;
+  /** `ListItem` elements, or `ListSection`s of them. */
+  children: ListChild | ListChild[];
+  /** Called when an item is pressed or Enter is pressed on it. Makes the list interactive. */
+  onAction?: (key: Key) => void;
+  /** Whether items can be selected: none, one or several. @default "none" */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /** The keys of the selected items (controlled). */
+  selectedKeys?: 'all' | Iterable<Key>;
+  /** The keys of the items selected at first (uncontrolled). */
+  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  /** Called with the selected keys when the selection changes. */
+  onSelectionChange?: (keys: Set<Key> | 'all') => void;
+  /**
+   * The last selected item can be deselected, leaving none. `false` keeps at least one item
+   * selected. @default true
+   */
+  deselectable?: boolean;
+  /** The keys of items that can't be pressed or selected. */
+  disabledKeys?: Iterable<Key>;
+  /**
+   * The selected item of a radio list (Compose's single-selection `ListItem`): with `value`,
+   * `defaultValue` or `onChange`, the list is a radio group whose items are radio
+   * buttons, each with a `value`.
+   */
+  value?: string | null;
+  /** The radio list's initially selected item value (uncontrolled). */
+  defaultValue?: string;
+  /** Called with the chosen item's value when a radio list's selection changes. */
+  onChange?: (value: string) => void;
+  /** The form field name of a radio list. */
+  name?: string;
+  /** A radio list needs a choice before its form submits. @default false */
+  required?: boolean;
+  /** Disables every item. @default false */
+  disabled?: boolean;
+  /** Where a radio list's radio buttons sit, at the start or end of each row. @default "start" */
+  controlPlacement?: ControlPlacement;
+  /**
+   * M3's dividers between items: `full` width, or `inset` 16dp from each side. Standard
+   * lists only (segmented items are already apart). Left out, there are no dividers.
+   */
+  dividers?: ListDividers;
+  /**
+   * Selected items show a check at their end besides their colour, so selection never
+   * relies on colour alone (M3 lists accessibility). @default true
+   */
+  selectionIndicator?: boolean;
+  /**
+   * Web density, `0` to `-3` (M3: a list "can adjust margins, spacing, or density"): each step
+   * takes 4px off every item (one line 56px at 0, 44px at -3; two lines 72 → 60px; three
+   * lines 88 → 76px; items grown by an image or avatar too) and off section subheaders, and
+   * the controls inside items follow. Left out, the list takes the density of the nearest
+   * `ThemeProvider` or `ThemeScope`. Prefer setting it there, from a setting, since M3 makes
+   * density the reader's choice.
+   * @default 0
+   */
+  density?: Density;
+  /** The expanded items of a list with `childItems` (controlled). */
+  expandedKeys?: Iterable<Key>;
+  /** The items expanded at first (uncontrolled). */
+  defaultExpandedKeys?: Iterable<Key>;
+  /** Called with the expanded keys when an item expands or collapses. */
+  onExpandedChange?: (keys: Set<Key>) => void;
+  /** The most lines each item's headline shows, then "…". M3: one or two. Left out, no limit. */
+  headlineLines?: LineLimit;
+  /**
+   * The most lines each item's supporting text shows, then "…". M3: one in a two-line item,
+   * two in a three-line item. Left out, no limit.
+   */
+  supportingTextLines?: LineLimit;
+  /** Ref to the root element: a `<ul>`, or a `<div>` grid or listbox when interactive. */
+  ref?: Ref<HTMLElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: ListClassNames;
+  /** `data-*` attributes go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+export type ListProps = ListOwnProps & Naming;
+/**
+ * M3 Expressive list: items with a headline, optional overline and supporting text, and
+ * leading and trailing content, flush (standard) or segmented into rounded groups.
+ *
+ * With `selectionMode` it is a list box of options (`listbox` / `option`), and selected items
+ * show a check. With `onAction` or links it is an interactive grid list, where ← / → reach
+ * trailing controls. Items with `childItems` expand and collapse (a tree grid). Interactive
+ * items get state layers and morph their corners on hover, focus, press and selection, and
+ * ↑ / ↓ move between them, wrapping at the ends. Otherwise it is a plain `ul`.
+ *
+ * Items can lead with M3's image or video thumbnail (`ListItemImage`, `ListItemVideo`),
+ * limit their lines (`headlineLines`, `supportingTextLines`), and standard lists can draw
+ * `dividers`.
+ *
+ * @example
+ * <List variant="segmented" aria-label="Settings" onAction={open}>
+ *   <ListItem key="wifi" leading={<WifiIcon />} supportingText="Connected">Wi‑Fi</ListItem>
+ *   <ListItem key="bluetooth" leading={<BluetoothIcon />}>Bluetooth</ListItem>
+ * </List>
+ */
+export declare function List({ density, ...props }: ListProps): JSX.Element;
+//#endregion
+//# sourceMappingURL=List.d.ts.map