@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type InputHTMLAttributes,\n  type JSX,\n  type KeyboardEvent,\n  type LabelHTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useButton,\n  useCheckbox,\n  useFocusRing,\n  useGridList,\n  useGridListItem,\n  useGridListSection,\n  useHover,\n  useLink,\n  useListBox,\n  useListBoxSection,\n  useObjectRef,\n  useOption,\n  useRadio,\n  useRadioGroup,\n  useTree,\n  useTreeItem,\n  VisuallyHidden,\n  type AriaButtonProps,\n  type AriaCheckboxProps,\n  type AriaGridListProps,\n  type AriaListBoxOptions,\n  type AriaRadioGroupProps,\n  type AriaTreeOptions,\n  type Key,\n} from 'react-aria';\nimport {\n  useListState,\n  useRadioGroupState,\n  useToggleState,\n  useTreeState,\n  type ListState,\n  type Node,\n  type RadioGroupState,\n  type TreeState,\n} from 'react-stately';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport { preventHiddenInputScroll } from '../../primitives/hidden-input-focus';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { useM3Interaction } from '../../primitives/use-m3-interaction';\nimport { CheckboxBox } from '../checkbox/checkbox-box';\nimport { RadioRing } from '../radio/radio-ring';\nimport { CheckIcon, CloseIcon, SwitchThumb, thumbGeometry } from '../switch/switch-thumb';\nimport { switchStyles } from '../switch/switch-styles';\nimport { FOCUSABLE_DISABLED_OPTIONS } from '../../utils/focusable-disabled';\nimport { assertCollectionChildren } from '../../utils/assert-collection-children';\nimport { useKeepPressedInPlace } from '../../utils/keep-pressed-in-place';\nimport { useNearestReveal } from '../../utils/nearest-reveal';\nimport { cn } from '../../utils/cn';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { splitRootProps, type RootDOMProps } from '../../utils/root-props';\nimport { warnOnce } from '../../utils/warn-once';\nimport { listStyles, type ListDividers, type ListVariant } from './list-styles';\nimport { ListMediaContext } from './ListMedia';\n\n/** Props of a {@link ListItem}; the React `key` identifies it for `onAction` and selection. */\nexport interface ListItemProps {\n  /** The headline. */\n  children: ReactNode;\n  /** A short line above the headline. */\n  overline?: ReactNode;\n  /** One or two lines below the headline. */\n  supportingText?: ReactNode;\n  /** Leading content: an icon, an avatar, a `ListItemImage` or `ListItemVideo`, or a control. */\n  leading?: ReactNode;\n  /** Trailing content: an icon, short text or a control (in an interactive list it gets focus with ← / →). */\n  trailing?: ReactNode;\n  /**\n   * Makes the item a link. In a list without `onAction` or `selectionMode` the item is a\n   * real `<a>`: its own Tab stop, with the browser's link menu and modified clicks, routed\n   * through a `RouterProvider` (such as `NextRouterProvider`) on a plain click.\n   */\n  href?: string;\n  /** Marks the link item for the page being shown: `aria-current=\"page\"` and the selected colours. */\n  current?: boolean;\n  /** A link item's target; `_blank` adds `rel=\"noopener noreferrer\"` unless `rel` is given. */\n  target?: string;\n  /** A link item's `rel`, e.g. `\"nofollow\"`. */\n  rel?: string;\n  /** Downloads the link item's file instead of opening it (optionally with a file name). */\n  download?: boolean | string;\n  /** Plain-text version of the headline, for type-ahead and announcements. */\n  textValue?: string;\n  /** Accessible name when the headline isn't plain text. */\n  'aria-label'?: string;\n  /** Classes for the item, merged after `classNames.item`; consumer classes win. */\n  className?: string;\n  /**\n   * Makes the whole item a switch or a checkbox (Compose's toggleable `ListItem`): pressing\n   * anywhere on it toggles it, and it is one control for assistive tech. Not in lists with\n   * `onAction`, links or `selectionMode`. Left out, the item is a plain row.\n   */\n  control?: 'switch' | 'checkbox';\n  /** Whether a switch or checkbox item is on (controlled). */\n  checked?: boolean;\n  /** Whether a switch or checkbox item starts on (uncontrolled). */\n  defaultChecked?: boolean;\n  /** Called when a switch or checkbox item is toggled. */\n  onCheckedChange?: (checked: boolean) => void;\n  /** Where the switch, checkbox or radio button sits, at the start or end of the row. @default \"start\", or \"end\" for a switch */\n  controlPlacement?: ControlPlacement;\n  /** A radio list item's value, or the value a switch or checkbox item posts with its form. */\n  value?: string;\n  /** The form field name of a switch or checkbox item. */\n  name?: string;\n  /** Disables the item. @default false */\n  disabled?: boolean;\n  /**\n   * Aligns the content; by default it is centred, and top-aligned in three-line items.\n   * @default \"center\", or \"top\" in three-line items\n   */\n  verticalAlignment?: 'center' | 'top';\n  /** Shows ✓ and ✕ in a switch item's thumb. @default false */\n  switchIcons?: boolean;\n  /** The most lines the headline shows, then \"…\". Left out, the list's `headlineLines` applies. */\n  headlineLines?: LineLimit;\n  /**\n   * The most lines the supporting text shows, then \"…\". Left out, the list's\n   * `supportingTextLines` applies.\n   */\n  supportingTextLines?: LineLimit;\n  /**\n   * Nested `ListItem`s (each with its own `key`): the item expands and collapses to show\n   * them, in a folder-like way (M3's expand interaction). It ends with a chevron, and → / ←\n   * expand and collapse it.\n   */\n  childItems?: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];\n}\n\n/** How many lines a text shows before it ends with \"…\"; the full text stays in the DOM. */\nexport type LineLimit = 1 | 2 | 3;\n\ntype ControlPlacement = 'start' | 'end';\n\n/** A collection node as React Stately's collection builder reads it. */\ninterface ListItemNode {\n  type: 'item';\n  props?: ListItemProps;\n  rendered?: ReactNode;\n  textValue?: string;\n  'aria-label'?: string | undefined;\n  hasChildNodes?: boolean;\n  element?: ReactElement;\n  childNodes?: () => Iterable<ListItemNode>;\n}\n\n/**\n * A `ListItem` renders itself only in a plain or radio list, which hand it its place through\n * context. Interactive lists read its props through `getCollectionNode` and never render it.\n */\nfunction ListItemElement(props: ListItemProps): ReactNode {\n  const entry = useContext(ListEntryContext);\n  const radio = useContext(RadioListContext);\n  const plain = useContext(StaticListContext);\n  if (!entry) return null;\n  if (radio) return <RadioListItem item={props} radio={radio} position={entry.position} />;\n  if (plain) return <StaticListItem item={props} list={plain} entry={entry} />;\n  return null;\n}\n\n/**\n * Describes the item to React Stately's collection builder, as its `Item` does: the\n * headline is the item's content, and `childItems` are its nested items.\n */\nListItemElement.getCollectionNode = function* getCollectionNode(\n  props: ListItemProps,\n): Generator<ListItemNode> {\n  const rendered = props.children;\n  const textValue =\n    props.textValue || (typeof rendered === 'string' ? rendered : '') || props['aria-label'] || '';\n  // Once per page: the collection is rebuilt on every render of the list.\n  if (!textValue) {\n    warnOnce(\n      'list-item-text-value',\n      '[@windmorph/react] A ListItem whose headline is not plain text needs a textValue for type-ahead.',\n    );\n  }\n  const children = listItems(props.childItems);\n  yield {\n    type: 'item',\n    props,\n    rendered,\n    textValue,\n    'aria-label': props['aria-label'],\n    hasChildNodes: children.length > 0,\n    *childNodes() {\n      for (const element of children) yield { type: 'item', element };\n    },\n  };\n};\n\n/**\n * An item of a {@link List}. Like React Stately's collection `Item`, the list reads its\n * props; identify it with a React `key`.\n */\nexport const ListItem = ListItemElement as unknown as (props: ListItemProps) => JSX.Element;\n\n/** Props of a {@link ListSection}: a subheader, or a name when it shows none. */\nexport type ListSectionProps = {\n  /** `ListItem` elements, each with its own `key`. */\n  children: ReactElement<ListItemProps> | ReactElement<ListItemProps>[];\n  /** Classes for the section, merged after `classNames.section`; consumer classes win. */\n  className?: string;\n} & (\n  | {\n      /** The subheader shown above the section's items, which names the group. */\n      title: ReactNode;\n      /** Accessible name for the group, instead of the subheader's text. */\n      'aria-label'?: string;\n    }\n  | {\n      title?: undefined;\n      /** Accessible name for the group when it shows no subheader. */\n      'aria-label': string;\n    }\n);\n\n/** A collection node for a section, as React Stately's `Section` describes it. */\ninterface ListSectionNode {\n  type: 'section';\n  props: ListSectionProps;\n  rendered: ReactNode;\n  'aria-label'?: string | undefined;\n  hasChildNodes: true;\n  childNodes: () => Iterable<ListItemNode>;\n}\n\n/**\n * A `ListSection` renders itself only in a plain list: its subheader, and its items, each\n * told through context that it sits in this section and where. Interactive lists read it\n * through `getCollectionNode`. It never needs its type compared, so a section created in a\n * Server Component (whose type reaches the client as a lazy client reference) renders the\n * same as one created in the browser.\n */\nfunction ListSectionElement(props: ListSectionProps): ReactNode {\n  const entry = useContext(ListEntryContext);\n  const plain = useContext(StaticListContext);\n  if (useContext(RadioListContext)) {\n    throw new Error(\n      \"[@windmorph/react] List: a radio list can't hold ListSections. Use one radio list \" +\n        'per group, or a list with selectionMode=\"single\".',\n    );\n  }\n  const register = plain?.registerSection;\n  const index = entry?.index;\n  // Tells the list this entry is a section, so the loose items around it form their own\n  // groups. A layout effect, so the corrected corners are drawn before the first paint.\n  useLayoutEffect(() => {\n    if (register == null || index == null || entry?.inSection) return undefined;\n    return register(index);\n  }, [register, index, entry?.inSection]);\n  if (!plain || !entry) return null;\n  const items = listItems(props.children);\n  return (\n    <StaticSection section={props} variant={plain.variant} classNames={plain.classNames}>\n      {items.map((item, itemIndex) => (\n        <ListEntryContext\n          key={item.key ?? itemIndex}\n          value={{\n            index: itemIndex,\n            position: position(itemIndex, items.length),\n            inSection: true,\n            disabled: plain.isKeyDisabled(item.key),\n          }}\n        >\n          {item}\n        </ListEntryContext>\n      ))}\n    </StaticSection>\n  );\n}\n\n/** Describes the section to React Stately's collection builder, as its `Section` does. */\nListSectionElement.getCollectionNode = function* getCollectionNode(\n  props: ListSectionProps,\n): Generator<ListSectionNode> {\n  const children = listItems(props.children);\n  yield {\n    type: 'section',\n    props,\n    rendered: props.title,\n    'aria-label': props['aria-label'],\n    hasChildNodes: true,\n    *childNodes() {\n      for (const element of children) yield { type: 'item', element };\n    },\n  };\n};\n\n/**\n * A labelled group of items in a {@link List}, under a subheader (`title`). Identify it with\n * a React `key`, like its items. Arrow keys move across sections as through one list.\n * Sections go in static, action (grid) and selection (list box) lists, not in radio lists\n * or lists with `childItems`.\n *\n * @example\n * <List aria-label=\"Settings\" onAction={open}>\n *   <ListSection key=\"network\" title=\"Network\">\n *     <ListItem key=\"wifi\">Wi‑Fi</ListItem>\n *   </ListSection>\n * </List>\n */\nexport const ListSection = ListSectionElement as unknown as (\n  props: ListSectionProps,\n) => JSX.Element;\n\nexport interface ListClassNames {\n  /** The root list element, merged with `className`. */\n  root?: string;\n  /** Each `ListSection`'s wrapper (its subheader and items). */\n  section?: string;\n  /** Each `ListSection`'s subheader. */\n  subheader?: string;\n  /** Each item. */\n  item?: string;\n  /** Each item's leading content (icon, avatar, media or control). */\n  leading?: string;\n  /** Each item's text column (overline, headline and supporting text). */\n  text?: string;\n  /** Each item's overline. */\n  overline?: string;\n  /** Each item's headline. */\n  headline?: string;\n  /** Each item's supporting text. */\n  supportingText?: string;\n  /** Each item's trailing content. */\n  trailing?: string;\n  /** The drawn switch, checkbox or radio button of an item that is one. */\n  control?: string;\n  /** The check that marks a selected item in a list with `selectionMode`. */\n  selectionIndicator?: string;\n  /** The chevron button that expands an item with nested items. */\n  expandButton?: string;\n  /** Every `ListItemImage` and `ListItemVideo` in the list (to round them, say). */\n  media?: string;\n}\n\ntype Naming =\n  | {\n      /** Accessible name for the list (a list has no visible label of its own). */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the list, such as a heading above it. */\n      'aria-labelledby': string;\n    };\n\ntype ListChild = ReactElement<ListItemProps> | ReactElement<ListSectionProps>;\n\ninterface ListOwnProps extends RootDOMProps {\n  /** The root element's id. */\n  id?: string;\n  /** Flush items, or separate items 2px apart with rounded group corners. @default \"standard\" */\n  variant?: ListVariant;\n  /** `ListItem` elements, or `ListSection`s of them. */\n  children: ListChild | ListChild[];\n  /** Called when an item is pressed or Enter is pressed on it. Makes the list interactive. */\n  onAction?: (key: Key) => void;\n  /** Whether items can be selected: none, one or several. @default \"none\" */\n  selectionMode?: 'none' | 'single' | 'multiple';\n  /** The keys of the selected items (controlled). */\n  selectedKeys?: 'all' | Iterable<Key>;\n  /** The keys of the items selected at first (uncontrolled). */\n  defaultSelectedKeys?: 'all' | Iterable<Key>;\n  /** Called with the selected keys when the selection changes. */\n  onSelectionChange?: (keys: Set<Key> | 'all') => void;\n  /**\n   * The last selected item can be deselected, leaving none. `false` keeps at least one item\n   * selected. @default true\n   */\n  deselectable?: boolean;\n  /** The keys of items that can't be pressed or selected. */\n  disabledKeys?: Iterable<Key>;\n  /**\n   * The selected item of a radio list (Compose's single-selection `ListItem`): with `value`,\n   * `defaultValue` or `onChange`, the list is a radio group whose items are radio\n   * buttons, each with a `value`.\n   */\n  value?: string | null;\n  /** The radio list's initially selected item value (uncontrolled). */\n  defaultValue?: string;\n  /** Called with the chosen item's value when a radio list's selection changes. */\n  onChange?: (value: string) => void;\n  /** The form field name of a radio list. */\n  name?: string;\n  /** A radio list needs a choice before its form submits. @default false */\n  required?: boolean;\n  /** Disables every item. @default false */\n  disabled?: boolean;\n  /** Where a radio list's radio buttons sit, at the start or end of each row. @default \"start\" */\n  controlPlacement?: ControlPlacement;\n  /**\n   * M3's dividers between items: `full` width, or `inset` 16dp from each side. Standard\n   * lists only (segmented items are already apart). Left out, there are no dividers.\n   */\n  dividers?: ListDividers;\n  /**\n   * Selected items show a check at their end besides their colour, so selection never\n   * relies on colour alone (M3 lists accessibility). @default true\n   */\n  selectionIndicator?: boolean;\n  /**\n   * Web density, `0` to `-3` (M3: a list \"can adjust margins, spacing, or density\"): each step\n   * takes 4px off every item (one line 56px at 0, 44px at -3; two lines 72 → 60px; three\n   * lines 88 → 76px; items grown by an image or avatar too) and off section subheaders, and\n   * the controls inside items follow. Left out, the list takes the density of the nearest\n   * `ThemeProvider` or `ThemeScope`. Prefer setting it there, from a setting, since M3 makes\n   * density the reader's choice.\n   * @default 0\n   */\n  density?: Density;\n  /** The expanded items of a list with `childItems` (controlled). */\n  expandedKeys?: Iterable<Key>;\n  /** The items expanded at first (uncontrolled). */\n  defaultExpandedKeys?: Iterable<Key>;\n  /** Called with the expanded keys when an item expands or collapses. */\n  onExpandedChange?: (keys: Set<Key>) => void;\n  /** The most lines each item's headline shows, then \"…\". M3: one or two. Left out, no limit. */\n  headlineLines?: LineLimit;\n  /**\n   * The most lines each item's supporting text shows, then \"…\". M3: one in a two-line item,\n   * two in a three-line item. Left out, no limit.\n   */\n  supportingTextLines?: LineLimit;\n  /** Ref to the root element: a `<ul>`, or a `<div>` grid or listbox when interactive. */\n  ref?: Ref<HTMLElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: ListClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nexport type ListProps = ListOwnProps & Naming;\n\n/** What every item of a list reads from it. */\ninterface ListOptions {\n  headlineLines?: LineLimit | undefined;\n  supportingTextLines?: LineLimit | undefined;\n  dividers?: ListDividers | undefined;\n  selectionIndicator?: boolean | undefined;\n}\n\nconst ListOptionsContext = createContext<ListOptions>({});\n\n/**\n * M3 Expressive list: items with a headline, optional overline and supporting text, and\n * leading and trailing content, flush (standard) or segmented into rounded groups.\n *\n * With `selectionMode` it is a list box of options (`listbox` / `option`), and selected items\n * show a check. With `onAction` or links it is an interactive grid list, where ← / → reach\n * trailing controls. Items with `childItems` expand and collapse (a tree grid). Interactive\n * items get state layers and morph their corners on hover, focus, press and selection, and\n * ↑ / ↓ move between them, wrapping at the ends. Otherwise it is a plain `ul`.\n *\n * Items can lead with M3's image or video thumbnail (`ListItemImage`, `ListItemVideo`),\n * limit their lines (`headlineLines`, `supportingTextLines`), and standard lists can draw\n * `dividers`.\n *\n * @example\n * <List variant=\"segmented\" aria-label=\"Settings\" onAction={open}>\n *   <ListItem key=\"wifi\" leading={<WifiIcon />} supportingText=\"Connected\">Wi‑Fi</ListItem>\n *   <ListItem key=\"bluetooth\" leading={<BluetoothIcon />}>Bluetooth</ListItem>\n * </List>\n */\nexport function List({ density, ...props }: ListProps) {\n  const { headlineLines, supportingTextLines, dividers, selectionIndicator, classNames } = props;\n  if (dividers != null && props.variant === 'segmented') {\n    throw new Error(\n      '[@windmorph/react] List: dividers are for standard lists; segmented items are already apart.',\n    );\n  }\n  return (\n    <ListOptionsContext\n      value={{ headlineLines, supportingTextLines, dividers, selectionIndicator }}\n    >\n      <ListMediaContext value={classNames?.media}>\n        <ListBody {...props} {...densityAttribute(density)} />\n      </ListMediaContext>\n    </ListOptionsContext>\n  );\n}\n\nconst RADIO_ITEM_ERROR =\n  '[@windmorph/react] List: every item of a radio list (one with value, defaultValue or ' +\n  'onChange) needs a value, and none can have a control or an href.';\n\nconst CONTROL_ERROR =\n  \"[@windmorph/react] List: switch and checkbox items (control) can't be in a list with \" +\n  'onAction, links, selectionMode or childItems. Put them in their own list, or put a ' +\n  \"Switch in an item's trailing content.\";\n\nconst EXPANDABLE_SECTIONS_ERROR =\n  \"[@windmorph/react] List: a list with childItems can't hold ListSections; nest the \" +\n  'groups as expandable items instead.';\n\n/**\n * Picks the list's kind from its own props and its top-level entries' props; it never looks\n * at an entry's element type. A plain or radio list renders its entries, which place\n * themselves through context (`ListEntryContext`); an interactive list hands them to React\n * Stately's collection builder, which reads each through its `getCollectionNode`.\n */\nfunction ListBody(props: ListProps) {\n  const entries = listItems(props.children);\n  if (\n    props.value !== undefined ||\n    props.defaultValue !== undefined ||\n    props.onChange !== undefined\n  ) {\n    return <RadioList {...props} entries={entries} />;\n  }\n  const selectable = props.selectionMode != null && props.selectionMode !== 'none';\n  // A section has no `childItems`, so only a top-level item can make the list expandable;\n  // an item inside a section that has them refuses to render (EXPANDABLE_SECTIONS_ERROR).\n  const expandable = entries.some((entry) => listItems(entry.props.childItems).length > 0);\n  // Links alone don't make a grid list: they render as real anchors in a plain list.\n  const interactive = props.onAction != null || selectable || expandable;\n  if (!interactive) return <StaticList {...props} entries={entries} />;\n  return <InteractiveList {...props} expandable={expandable} />;\n}\n\nfunction itemLines(item: ListItemProps): 1 | 2 | 3 {\n  const extra = Number(item.overline != null) + Number(item.supportingText != null);\n  return extra === 2 ? 3 : extra === 1 ? 2 : 1;\n}\n\nfunction itemStylesOptions(\n  item: ListItemProps,\n  variant: ListVariant | undefined,\n  interactive: boolean,\n  options: ListOptions,\n) {\n  const headlineLines = item.headlineLines ?? options.headlineLines;\n  const supportingTextLines = item.supportingTextLines ?? options.supportingTextLines;\n  return {\n    variant,\n    interactive,\n    lines: itemLines(item),\n    ...(item.verticalAlignment && { align: item.verticalAlignment }),\n    ...(options.dividers && { dividers: options.dividers }),\n    ...(headlineLines && { headlineLines }),\n    ...(supportingTextLines && { supportingTextLines }),\n  };\n}\n\nfunction itemStyles(\n  item: ListItemProps,\n  variant: ListVariant | undefined,\n  interactive: boolean,\n  options: ListOptions,\n) {\n  return listStyles(itemStylesOptions(item, variant, interactive, options));\n}\n\n/**\n * The component tokens' hooks (`list-tokens.ts`), on a list's root and on each item, so an\n * item's own state (`data-selected`) picks its colours. On the root, any set the app passed\n * (`props`) follows the list's own.\n */\nfunction tokenAttributes(variant: ListVariant | undefined, props?: object) {\n  return {\n    'data-tokens': mergeDataTokens('md-comp-list', props),\n    'data-variant': variant ?? 'standard',\n  } as const;\n}\n\n/** An item's token hooks and its `data-slot`. */\nfunction itemAttributes(variant: ListVariant | undefined) {\n  return { ...tokenAttributes(variant), 'data-slot': 'item' } as const;\n}\n\nfunction position(index: number, count: number) {\n  if (count === 1) return 'only';\n  if (index === 0) return 'first';\n  return index === count - 1 ? 'last' : 'middle';\n}\n\ninterface ItemIds {\n  headline?: string;\n  overline?: string;\n  supporting?: string;\n}\n\nfunction ItemContent({\n  item,\n  styles,\n  classNames,\n  ids,\n  control,\n  controlPlacement,\n  headline,\n  sideClassName,\n  end,\n  textHidden,\n}: {\n  item: ListItemProps;\n  styles: ReturnType<typeof listStyles>;\n  classNames?: ListClassNames;\n  ids?: ItemIds;\n  control?: ReactNode;\n  controlPlacement?: ControlPlacement;\n  /** What the list adds after the trailing content: the selection check, the chevron. */\n  end?: ReactNode;\n  /** Wraps the headline (a link item's anchor). */\n  headline?: (children: ReactNode) => ReactNode;\n  /** Classes for the leading and trailing content (a link item raises its controls). */\n  sideClassName?: string;\n  /**\n   * Hides the text from assistive tech: a control item's input is already named and\n   * described by it, so it would be read twice.\n   */\n  textHidden?: boolean;\n}) {\n  const leading = controlPlacement === 'start' ? control : null;\n  const trailing = controlPlacement === 'end' ? control : end;\n  return (\n    <>\n      {(item.leading != null || leading != null) && (\n        <span\n          ref={(cell) => hideDecorativeIcons(cell)}\n          data-slot=\"leading\"\n          className={styles.leading({ class: cn(sideClassName, classNames?.leading) })}\n        >\n          {leading}\n          {item.leading}\n        </span>\n      )}\n      <span\n        aria-hidden={textHidden || undefined}\n        className={styles.text({ class: classNames?.text })}\n      >\n        {item.overline != null && (\n          <span\n            id={ids?.overline}\n            data-slot=\"overline\"\n            className={styles.overline({ class: classNames?.overline })}\n          >\n            {item.overline}\n          </span>\n        )}\n        <span\n          id={ids?.headline}\n          data-slot=\"headline\"\n          className={styles.headline({ class: classNames?.headline })}\n        >\n          {headline ? headline(item.children) : item.children}\n        </span>\n        {item.supportingText != null && (\n          <span\n            id={ids?.supporting}\n            data-slot=\"supporting\"\n            className={styles.supporting({ class: classNames?.supportingText })}\n          >\n            {item.supportingText}\n          </span>\n        )}\n      </span>\n      {(item.trailing != null || trailing != null) && (\n        <span\n          ref={(cell) => hideDecorativeIcons(cell)}\n          data-slot=\"trailing\"\n          className={styles.trailing({ class: cn(sideClassName, classNames?.trailing) })}\n        >\n          {item.trailing}\n          {trailing}\n        </span>\n      )}\n    </>\n  );\n}\n\n/**\n * Hides the bare icons of an item's leading or trailing content from assistive tech: an\n * `<svg>` child with no name of its own (`aria-label`, `aria-labelledby`, `role`, `<title>`)\n * is decorative, since the item's text names the item, and would otherwise be listed as an\n * unnamed image. A ref callback, so it also reaches icons that components render; it runs\n * on every render (no layout reads), so a replaced icon is hidden too.\n */\nfunction hideDecorativeIcons(cell: HTMLElement | null) {\n  if (!cell) return;\n  for (const svg of cell.querySelectorAll(':scope > svg')) {\n    if (\n      svg.hasAttribute('aria-label') ||\n      svg.hasAttribute('aria-labelledby') ||\n      svg.hasAttribute('role') ||\n      svg.querySelector(':scope > title')\n    ) {\n      continue;\n    }\n    svg.setAttribute('aria-hidden', 'true');\n  }\n}\n\n/** What a plain list hands its items and sections. */\ninterface StaticListValue {\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  /** Whether the item with this key is disabled by the list (`disabled`, `disabledKeys`). */\n  isKeyDisabled: (key: Key | null) => boolean;\n  /** Marks the top-level entry at `index` as a section; returns its cleanup. */\n  registerSection: (index: number) => () => void;\n}\n\nconst StaticListContext = createContext<StaticListValue | null>(null);\n\n/** Where an entry of a plain or radio list sits, from the list or section that renders it. */\ninterface ListEntry {\n  index: number;\n  /** Its position in its group (segmented corners, dividers). */\n  position: string;\n  /** Whether a `ListSection` holds it. */\n  inSection: boolean;\n  /** Whether the list disables it by its key. */\n  disabled: boolean;\n}\n\nconst ListEntryContext = createContext<ListEntry | null>(null);\n\n/**\n * The positions of a plain list's top-level entries: each run of items between sections is\n * its own group. Sections are known once they've told the list (`registerSection`); before\n * that (the server render and the first client render) every entry counts as an item.\n */\nfunction entryPositions(count: number, sections: ReadonlySet<number>): string[] {\n  const positions: string[] = [];\n  let start = 0;\n  for (let index = 0; index <= count; index += 1) {\n    if (index < count && !sections.has(index)) continue;\n    for (let item = start; item < index; item += 1) {\n      positions[item] = position(item - start, index - start);\n    }\n    if (index < count) positions[index] = 'only';\n    start = index + 1;\n  }\n  return positions;\n}\n\nfunction StaticList({\n  variant,\n  disabled,\n  classNames,\n  className,\n  style,\n  ref,\n  entries,\n  ...rest\n}: ListProps & { entries: ReactElement[] }) {\n  const { root: data } = splitRootProps(rest);\n  const rootTokens = tokenAttributes(variant, data);\n  const { 'aria-label': label, 'aria-labelledby': labelledBy } = rest as {\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n  };\n  const root = listStyles({ variant }).root({ class: cn(classNames?.root, className) });\n  const [sections, setSections] = useState<ReadonlySet<number>>(() => new Set());\n  const registerSection = useCallback((index: number) => {\n    setSections((current) => (current.has(index) ? current : new Set(current).add(index)));\n    return () =>\n      setSections((current) => {\n        const next = new Set(current);\n        next.delete(index);\n        return next;\n      });\n  }, []);\n  const disabledKeys = rest.disabledKeys;\n  const list = useMemo<StaticListValue>(() => {\n    const keys = new Set<Key>(disabledKeys ?? []);\n    return {\n      variant,\n      classNames,\n      isKeyDisabled: (key) => Boolean(disabled) || (key != null && keys.has(key)),\n      registerSection,\n    };\n  }, [variant, classNames, disabled, disabledKeys, registerSection]);\n  const positions = entryPositions(entries.length, sections);\n  return (\n    <ul\n      {...data}\n      {...rootTokens}\n      id={rest.id}\n      ref={ref as Ref<HTMLUListElement>}\n      style={style}\n      aria-label={label}\n      aria-labelledby={labelledBy}\n      onKeyDown={onLinkArrowKeys}\n      className={root}\n    >\n      <StaticListContext value={list}>\n        {entries.map((entry, index) => (\n          <ListEntryContext\n            key={entry.key ?? index}\n            value={{\n              index,\n              position: positions[index]!,\n              inSection: false,\n              disabled: list.isKeyDisabled(entry.key),\n            }}\n          >\n            {entry}\n          </ListEntryContext>\n        ))}\n      </StaticListContext>\n    </ul>\n  );\n}\n\n/** An item of a plain list: a link, a switch or checkbox, or a plain row. */\nfunction StaticListItem({\n  item,\n  list,\n  entry,\n}: {\n  item: ListItemProps;\n  list: StaticListValue;\n  entry: ListEntry;\n}) {\n  const options = useContext(ListOptionsContext);\n  if (entry.inSection && listItems(item.childItems).length > 0) {\n    throw new Error(EXPANDABLE_SECTIONS_ERROR);\n  }\n  const { variant, classNames } = list;\n  const isDisabled = Boolean(entry.disabled || item.disabled);\n  if (item.href != null) {\n    return (\n      <LinkItem\n        item={item}\n        variant={variant}\n        classNames={classNames}\n        position={entry.position}\n        isDisabled={isDisabled}\n      />\n    );\n  }\n  if (item.control != null) {\n    return (\n      <li data-list-entry=\"\">\n        <ToggleItem\n          item={item}\n          control={item.control}\n          variant={variant}\n          classNames={classNames}\n          position={entry.position}\n          listDisabled={isDisabled}\n        />\n      </li>\n    );\n  }\n  const styles = itemStyles(item, variant, false, options);\n  return (\n    <li\n      data-list-entry=\"\"\n      data-shape=\"rest\"\n      data-position={entry.position}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <span className={styles.cell()}>\n        <ItemContent item={item} styles={styles} classNames={classNames} />\n      </span>\n    </li>\n  );\n}\n\n/**\n * Arrow keys between a list's links (M3: \"navigate within the list using arrow keys\"):\n * ↑ / ↓ move focus to the previous or next link, wrapping at the ends, and Home / End to\n * the first and last. Each link stays a real anchor and a Tab stop; disabled items have no\n * link and are skipped.\n */\nfunction onLinkArrowKeys(event: KeyboardEvent<HTMLUListElement>) {\n  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;\n  if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) return;\n  const links = [\n    ...event.currentTarget.querySelectorAll<HTMLAnchorElement>('a[href][data-list-link]'),\n  ];\n  const index = links.indexOf(event.target as HTMLAnchorElement);\n  if (index === -1) return;\n  const last = links.length - 1;\n  const target =\n    event.key === 'Home'\n      ? 0\n      : event.key === 'End'\n        ? last\n        : event.key === 'ArrowDown'\n          ? index === last\n            ? 0\n            : index + 1\n          : index === 0\n            ? last\n            : index - 1;\n  event.preventDefault();\n  links[target]!.focus();\n}\n\n/** The collection's top-level nodes as groups: each section, and each run of items. */\nfunction groupNodes(collection: ListState<object>['collection']) {\n  const groups: { section: Node<object> | null; items: Node<object>[] }[] = [];\n  for (const node of collection) {\n    if (node.type === 'section') {\n      const items = [...collection.getChildren!(node.key)].filter((child) => child.type === 'item');\n      groups.push({ section: node, items });\n      continue;\n    }\n    const last = groups.at(-1);\n    if (last?.section === null) last.items.push(node);\n    else groups.push({ section: null, items: [node] });\n  }\n  return groups;\n}\n\n/** The name of a section's group: its `aria-label`, else its subheader. */\nfunction sectionNaming(section: { title?: ReactNode; 'aria-label'?: string }, headingId: string) {\n  return section['aria-label'] != null\n    ? { 'aria-label': section['aria-label'] }\n    : { 'aria-labelledby': headingId };\n}\n\n/** A section of a plain list: a subheader and a nested list named by it. */\nfunction StaticSection({\n  section,\n  variant,\n  classNames,\n  children,\n}: {\n  section: ListSectionProps;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  children: ReactNode;\n}) {\n  const headingId = useId();\n  const styles = listStyles({ variant, titled: section.title != null });\n  return (\n    <li\n      data-slot=\"section\"\n      className={styles.section({ class: cn(classNames?.section, section.className) })}\n    >\n      {section.title != null && (\n        <div id={headingId} className={styles.subheader({ class: classNames?.subheader })}>\n          {section.title}\n        </div>\n      )}\n      <ul {...sectionNaming(section, headingId)} className={styles.group()}>\n        {children}\n      </ul>\n    </li>\n  );\n}\n\ntype InteractiveKind = 'grid' | 'listbox' | 'tree';\n\nfunction InteractiveList(props: ListProps & { expandable: boolean }) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <CollectionList {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\n/** Material Symbols \"check\" and \"expand_more\" (Apache-2.0). */\nfunction CheckIcon20() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n    </svg>\n  );\n}\n\nfunction ExpandMoreIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\">\n      <path d=\"M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z\" />\n    </svg>\n  );\n}\n\n/**\n * A grid list (`onAction`, links), a list box (selection) or a tree grid (`childItems`),\n * from React Aria's collection hooks. Arrow keys wrap at the ends, as M3 asks.\n */\nfunction CollectionList({\n  expandable,\n  variant,\n  disabled,\n  deselectable = true,\n  classNames,\n  className,\n  style,\n  ref,\n  directionRef,\n  ...rest\n}: ListProps & { expandable: boolean; directionRef: (element: HTMLElement | null) => void }) {\n  const { root: data, rest: ariaProps } = splitRootProps(rest);\n  assertCollectionChildren(rest.children, 'List', 'ListItem elements');\n  const scan = useCollectionScan(rest.children);\n  if (scan.items.some((item) => item.control != null)) throw new Error(CONTROL_ERROR);\n  if (expandable && scan.sectioned) throw new Error(EXPANDABLE_SECTIONS_ERROR);\n  const selectable = rest.selectionMode != null && rest.selectionMode !== 'none';\n  // A selection list is a list box (M3: \"Container: List box · List item: Option\"); a list\n  // whose items also act or link keeps the grid list's separate actions.\n  const kind: InteractiveKind = expandable\n    ? 'tree'\n    : selectable && rest.onAction == null && !scan.items.some((item) => item.href != null)\n      ? 'listbox'\n      : 'grid';\n  const disabledKeys = new Set<Key>(rest.disabledKeys ?? []);\n  for (const [key, item] of scan.entries) {\n    if (disabled || item.disabled) disabledKeys.add(key);\n  }\n  const options = {\n    ...(ariaProps as unknown as AriaGridListProps<object>),\n    disabledKeys: disabledKeys.size > 0 ? disabledKeys : rest.disabledKeys,\n    disallowEmptySelection: !deselectable,\n    // Disabled items stay focusable (WAI-ARIA APG, \"Focusability of disabled controls\"); each row\n    // keeps only its focus handlers, so it can't be pressed, chosen, expanded or followed.\n    ...FOCUSABLE_DISABLED_OPTIONS,\n    shouldFocusWrap: true,\n  };\n  const root: CollectionRootProps = {\n    options,\n    listRef: ref,\n    directionRef,\n    data: { ...data, ...tokenAttributes(variant, data) },\n    style,\n    className: listStyles({ variant }).root({ class: cn(classNames?.root, className) }),\n    variant,\n    classNames,\n  };\n  if (kind === 'tree') return <TreeList {...root} />;\n  if (kind === 'listbox') return <ListBoxList {...root} />;\n  return <GridList {...root} />;\n}\n\ninterface CollectionRootProps {\n  options: AriaGridListProps<object> & { shouldFocusWrap: boolean };\n  listRef: Ref<HTMLElement> | undefined;\n  directionRef: (element: HTMLElement | null) => void;\n  data: Record<string, unknown>;\n  style?: CSSProperties | undefined;\n  className: string;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n}\n\nfunction GridList({\n  options,\n  listRef,\n  directionRef,\n  data,\n  style,\n  className,\n  variant,\n  classNames,\n}: CollectionRootProps) {\n  const rootRef = useObjectRef(listRef as Ref<HTMLDivElement>);\n  const state = useListState(options);\n  const { gridProps } = useGridList(options, state, rootRef);\n  // Arrow keys reveal a row at the nearest position, never centring the page on the list.\n  useNearestReveal(rootRef);\n  return (\n    <div\n      {...mergeProps(data, gridProps)}\n      ref={(element) => {\n        rootRef.current = element;\n        directionRef(element);\n      }}\n      style={style}\n      className={className}\n    >\n      {groupNodes(state.collection).map((group) => {\n        const rows = group.items.map((node, index) => (\n          <GridListRow\n            key={node.key}\n            node={node}\n            state={state}\n            variant={variant}\n            classNames={classNames}\n            position={position(index, group.items.length)}\n          />\n        ));\n        return group.section ? (\n          <GridListSection\n            key={group.section.key}\n            node={group.section}\n            state={state}\n            variant={variant}\n            classNames={classNames}\n          >\n            {rows}\n          </GridListSection>\n        ) : (\n          rows\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * A section of a grid list: a row group named by its subheader, a header row holding a row\n * header (React Aria's `GridListSection` structure), then the items' rows.\n */\nfunction GridListSection({\n  node,\n  state,\n  variant,\n  classNames,\n  children,\n}: {\n  node: Node<object>;\n  state: ListState<object>;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const section = node.props as ListSectionProps;\n  const { rowProps, rowHeaderProps, rowGroupProps } = useGridListSection(\n    { 'aria-label': section['aria-label'] },\n    state,\n    ref,\n  );\n  const styles = listStyles({ variant, titled: section.title != null });\n  return (\n    <div\n      {...rowGroupProps}\n      {...(section['aria-label'] != null && { 'aria-labelledby': undefined })}\n      ref={ref}\n      className={styles.section({ class: cn(classNames?.section, section.className) })}\n    >\n      {section.title != null && (\n        <div {...rowProps}>\n          <div {...rowHeaderProps} className={styles.subheader({ class: classNames?.subheader })}>\n            {section.title}\n          </div>\n        </div>\n      )}\n      <div role=\"presentation\" className={styles.group()}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/** Compose's shape precedence: pressed, then selected or focused (16px), then hovered (12px). */\nfunction shapeOf(state: {\n  isPressed: boolean;\n  isSelected: boolean;\n  isFocusVisible: boolean;\n  isHovered: boolean;\n  isDisabled: boolean;\n}) {\n  if ((state.isPressed && !state.isDisabled) || state.isSelected || state.isFocusVisible) {\n    return 'active';\n  }\n  return state.isHovered && !state.isDisabled ? 'hovered' : 'rest';\n}\n\n/** The check a selected item shows at its end, when the list selects and shows it. */\nfunction useSelectionCheck(\n  styles: ReturnType<typeof listStyles>,\n  selectable: boolean,\n  className: string | undefined,\n): ReactNode {\n  const { selectionIndicator = true } = useContext(ListOptionsContext);\n  if (!selectable || !selectionIndicator) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-selection-indicator=\"\"\n      className={styles.selectionIndicator({ class: className })}\n    >\n      <CheckIcon20 />\n    </span>\n  );\n}\n\nfunction GridListRow({\n  node,\n  state,\n  variant,\n  classNames,\n  position: itemPosition,\n}: {\n  node: Node<object>;\n  state: ListState<object>;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  position: string;\n}) {\n  const item = node.props as ListItemProps;\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    rowProps: ownRowProps,\n    gridCellProps,\n    descriptionProps,\n    isPressed,\n    isSelected,\n  } = useGridListItem({ node }, state, ref);\n  const isDisabled = state.disabledKeys.has(node.key);\n  const rowProps = isDisabled ? focusOnly(ownRowProps) : ownRowProps;\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { interactionProps, dataAttributes } = useM3Interaction({ isDisabled, isPressed }, ref);\n  const isFocusVisible = dataAttributes['data-focus-visible'] != null;\n  const shape = shapeOf({ isPressed, isSelected, isFocusVisible, isHovered, isDisabled });\n  const options = useContext(ListOptionsContext);\n  const styles = itemStyles(item, variant, true, options);\n  const check = useSelectionCheck(\n    styles,\n    state.selectionManager.selectionMode !== 'none',\n    classNames?.selectionIndicator,\n  );\n  return (\n    <div\n      {...mergeProps(rowProps, hoverProps, interactionProps)}\n      {...dataAttributes}\n      aria-disabled={isDisabled || undefined}\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-shape={shape}\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <div {...gridCellProps} className={styles.cell()}>\n        <ItemContent\n          item={item}\n          styles={styles}\n          classNames={classNames}\n          ids={{ supporting: descriptionProps.id }}\n          end={check}\n        />\n      </div>\n    </div>\n  );\n}\n\nconst FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * A disabled item's props: its role, ARIA, id, tab index and focus handlers, but no press, key\n * or pointer handlers, so it takes focus (APG) and does nothing else.\n */\nfunction focusOnly<T extends object>(props: T): T {\n  return Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => !/^on[A-Z]/.test(name) || name === 'onFocus' || name === 'onBlur',\n    ),\n  ) as T;\n}\n\n/** A list box of options: M3's single- and multi-select lists on the web. */\nfunction ListBoxList({\n  options,\n  listRef,\n  directionRef,\n  data,\n  style,\n  className,\n  variant,\n  classNames,\n}: CollectionRootProps) {\n  const rootRef = useObjectRef(listRef as Ref<HTMLDivElement>);\n  const listBoxOptions = options as unknown as AriaListBoxOptions<object>;\n  const state = useListState(listBoxOptions);\n  const { listBoxProps } = useListBox(listBoxOptions, state, rootRef);\n  useNearestReveal(rootRef);\n  return (\n    <div\n      {...mergeProps(data, listBoxProps)}\n      ref={(element) => {\n        rootRef.current = element;\n        directionRef(element);\n      }}\n      style={style}\n      className={className}\n    >\n      {groupNodes(state.collection).map((group) => {\n        const rows = group.items.map((node, index) => (\n          <OptionRow\n            key={node.key}\n            node={node}\n            state={state}\n            variant={variant}\n            classNames={classNames}\n            position={position(index, group.items.length)}\n          />\n        ));\n        return group.section ? (\n          <ListBoxSection\n            key={group.section.key}\n            node={group.section}\n            variant={variant}\n            classNames={classNames}\n          >\n            {rows}\n          </ListBoxSection>\n        ) : (\n          rows\n        );\n      })}\n    </div>\n  );\n}\n\n/** A section of a list box: a subheader and a group of options named by it. */\nfunction ListBoxSection({\n  node,\n  variant,\n  classNames,\n  children,\n}: {\n  node: Node<object>;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  children: ReactNode;\n}) {\n  const section = node.props as ListSectionProps;\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: section.title,\n    'aria-label': section['aria-label'],\n  });\n  const styles = listStyles({ variant, titled: section.title != null });\n  return (\n    <div\n      {...itemProps}\n      className={styles.section({ class: cn(classNames?.section, section.className) })}\n    >\n      {section.title != null && (\n        <div {...headingProps} className={styles.subheader({ class: classNames?.subheader })}>\n          {section.title}\n        </div>\n      )}\n      <div\n        {...groupProps}\n        {...(section['aria-label'] != null && { 'aria-labelledby': undefined })}\n        className={styles.group()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nfunction OptionRow({\n  node,\n  state,\n  variant,\n  classNames,\n  position: itemPosition,\n}: {\n  node: Node<object>;\n  state: ListState<object>;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  position: string;\n}) {\n  const item = node.props as ListItemProps;\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    optionProps: ownOptionProps,\n    isPressed,\n    isSelected,\n  } = useOption({ key: node.key }, state, ref);\n  const isDisabled = state.disabledKeys.has(node.key);\n  const optionProps = isDisabled\n    ? { ...focusOnly(ownOptionProps), 'aria-disabled': true }\n    : ownOptionProps;\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { interactionProps, dataAttributes } = useM3Interaction({ isDisabled, isPressed }, ref);\n  const isFocusVisible = dataAttributes['data-focus-visible'] != null;\n  const shape = shapeOf({ isPressed, isSelected, isFocusVisible, isHovered, isDisabled });\n  const options = useContext(ListOptionsContext);\n  const styles = itemStyles(item, variant, true, options);\n  const check = useSelectionCheck(styles, true, classNames?.selectionIndicator);\n  useEffect(() => {\n    if (process.env.NODE_ENV === 'production') return;\n    const nested = ref.current?.querySelector(FOCUSABLE);\n    if (nested) {\n      console.warn(\n        '[@windmorph/react] List: an item of a selection list is one option and must not hold ' +\n          'buttons, links or fields. Give the list onAction to keep separate trailing actions.',\n        nested,\n      );\n    }\n  });\n  return (\n    <div\n      {...mergeProps(optionProps, hoverProps, interactionProps)}\n      {...dataAttributes}\n      // Named by its content: the overline, headline, supporting and trailing text in the\n      // order they show, each read once. Naming it by the headline alone (React Aria's\n      // default) leaves visible text out of its name (WCAG 2.5.3), and describing it by the\n      // supporting text as well would read that twice. Select's options are named the same way.\n      aria-labelledby={undefined}\n      aria-describedby={undefined}\n      ref={ref}\n      data-selected={isSelected || undefined}\n      data-shape={shape}\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <span className={styles.cell()}>\n        <ItemContent item={item} styles={styles} classNames={classNames} end={check} />\n      </span>\n    </div>\n  );\n}\n\n/** A tree grid: items with `childItems` expand and collapse to show their nested items. */\nfunction TreeList({\n  options,\n  listRef,\n  directionRef,\n  data,\n  style,\n  className,\n  variant,\n  classNames,\n}: CollectionRootProps) {\n  const rootRef = useObjectRef(listRef as Ref<HTMLDivElement>);\n  // `options` carries the list's `expandedKeys`, `defaultExpandedKeys` and `onExpandedChange`.\n  const treeOptions = options as unknown as AriaTreeOptions<object> &\n    Pick<ListProps, 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange'>;\n  const state = useTreeState(treeOptions);\n  const { gridProps } = useTree(treeOptions, state, rootRef);\n  const rows = [...state.collection.getKeys()]\n    .map((key) => state.collection.getItem(key))\n    .filter((node): node is Node<object> => node?.type === 'item');\n  const { shown, onExited, version } = useRowPresence(rows);\n  // A press that opens an item while an open item above it folds keeps the pressed row\n  // where it was: the page scrolls by the folded height as the rows close.\n  const { capture, release } = useKeepPressedInPlace(\n    '[role=row]',\n    version,\n    shown.some((row) => row.exiting),\n  );\n  const reveal = listStyles({ variant });\n  return (\n    <div\n      {...mergeProps(data, gridProps, {\n        onPointerDownCapture: capture,\n        onKeyDownCapture: capture,\n        onPointerUpCapture: release,\n        onKeyUpCapture: release,\n        onClickCapture: (event: MouseEvent<HTMLDivElement>) => {\n          // A virtual click (assistive tech) presses with no pointer down before it.\n          if (event.detail === 0) capture(event);\n          release();\n        },\n      })}\n      ref={(element) => {\n        rootRef.current = element;\n        directionRef(element);\n      }}\n      style={style}\n      className={className}\n    >\n      {shown.map((row) => (\n        <TreeRowReveal\n          key={row.node.key}\n          row={row}\n          onExited={onExited}\n          className={reveal.reveal()}\n          clipClassName={reveal.revealClip()}\n        >\n          {row.exiting ? (\n            <TreeRowGhost\n              node={row.node}\n              selectable={state.selectionManager.selectionMode !== 'none'}\n              variant={variant}\n              classNames={classNames}\n              position={row.position}\n            />\n          ) : (\n            <TreeRow\n              node={row.node}\n              state={state}\n              variant={variant}\n              classNames={classNames}\n              position={row.position}\n            />\n          )}\n        </TreeRowReveal>\n      ))}\n    </div>\n  );\n}\n\n/** Whether the reader asks for reduced motion (read on a change, never on the server). */\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' &&\n  (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);\n\n/** A tree row as shown: live, opening in, or gone from the tree and closing. */\ninterface ShownRow {\n  node: Node<object>;\n  position: string;\n  /** Added after the tree first rendered (an item was expanded), so it opens in. */\n  appear: boolean;\n  /** No longer in the tree (its parent collapsed); shown until it has closed. */\n  exiting: boolean;\n}\n\n/**\n * The rows to render: the tree's visible rows, plus rows that just left it (a collapsed\n * item's nested rows) in their old place until their closing transition ends. Rows added\n * after the first render are marked to open in.\n */\nfunction useRowPresence(rows: Node<object>[]) {\n  const live = (node: Node<object>, index: number, appear: boolean): ShownRow => ({\n    node,\n    position: position(index, rows.length),\n    appear,\n    exiting: false,\n  });\n  const keys = rows.map((node) => node.key);\n  const [presence, setPresence] = useState(() => ({\n    keys,\n    shown: rows.map((node, index) => live(node, index, false)),\n  }));\n  let { shown } = presence;\n  // Follow the tree while rendering (no effect, no extra paint) whenever its rows change.\n  // A collection can be rebuilt with the same rows, so they're compared by key.\n  if (keys.length !== presence.keys.length || keys.some((key, i) => key !== presence.keys[i])) {\n    const indexOf = new Map(rows.map((node, index) => [node.key, index]));\n    const before = new Map(shown.map((row) => [row.node.key, row]));\n    const next: ShownRow[] = [];\n    let cursor = 0;\n    const takeUpTo = (end: number) => {\n      for (; cursor <= end; cursor += 1) {\n        const node = rows[cursor]!;\n        const previous = before.get(node.key);\n        next.push(live(node, cursor, previous ? previous.appear : true));\n      }\n    };\n    for (const row of shown) {\n      const index = indexOf.get(row.node.key);\n      if (index === undefined) next.push({ ...row, exiting: true });\n      else if (index >= cursor) takeUpTo(index);\n    }\n    takeUpTo(rows.length - 1);\n    // A switch under reduced motion (2026-10-17): when rows open while others leave, the\n    // leaving ones go at once instead of holding their height while they fade, and the\n    // opening ones appear at full height and fade in, so the rows below shift once, never\n    // twice. A lone fold still fades where it is.\n    const opening = next.some((row) => !row.exiting && !before.has(row.node.key));\n    shown =\n      opening && next.some((row) => row.exiting) && prefersReducedMotion()\n        ? next.filter((row) => !row.exiting)\n        : next;\n    setPresence({ keys, shown });\n  }\n  const onExited = useCallback(\n    (key: Key) =>\n      setPresence((current) => ({\n        ...current,\n        shown: current.shown.filter((row) => !(row.exiting && row.node.key === key)),\n      })),\n    [],\n  );\n  // Live rows render the tree's current nodes; leaving rows keep their last ones.\n  const current = new Map(rows.map((node) => [node.key, node]));\n  return {\n    shown: shown.map((row) => (row.exiting ? row : { ...row, node: current.get(row.node.key)! })),\n    onExited,\n    /** Changes whenever the rows shown change. */\n    version: presence,\n  };\n}\n\n/**\n * A tree row's wrapper, which opens its height and fades it in when the row appears, and\n * closes it when the row leaves, then lets it go. Nothing in a leaving row can be focused\n * or read.\n */\nfunction TreeRowReveal({\n  row,\n  onExited,\n  className,\n  clipClassName,\n  children,\n}: {\n  row: ShownRow;\n  onExited: (key: Key) => void;\n  className: string;\n  clipClassName: string;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { exiting, node } = row;\n  useEffect(() => {\n    if (!exiting) return;\n    // Wait for the closing transitions, if any run (none without CSS or with no motion).\n    const transitions = ref.current?.getAnimations?.() ?? [];\n    if (transitions.length === 0) {\n      onExited(node.key);\n      return;\n    }\n    let current = true;\n    void Promise.allSettled(transitions.map((transition) => transition.finished)).then(() => {\n      if (current) onExited(node.key);\n    });\n    return () => {\n      current = false;\n    };\n  }, [exiting, node.key, onExited]);\n  return (\n    <div\n      ref={ref}\n      data-appear={row.appear || undefined}\n      data-exiting={exiting || undefined}\n      inert={exiting || undefined}\n      className={className}\n    >\n      <div className={clipClassName}>{children}</div>\n    </div>\n  );\n}\n\n/** A leaving row's picture while it closes: the row at rest, hidden from assistive tech. */\nfunction TreeRowGhost({\n  node,\n  selectable,\n  variant,\n  classNames,\n  position: itemPosition,\n}: {\n  node: Node<object>;\n  selectable: boolean;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  position: string;\n}) {\n  const item = node.props as ListItemProps;\n  const options = useContext(ListOptionsContext);\n  const styles = listStyles({\n    ...itemStylesOptions(item, variant, true, options),\n    nested: node.level > 0,\n  });\n  const check = useSelectionCheck(styles, selectable, classNames?.selectionIndicator);\n  const chevron = node.hasChildNodes && (\n    <span className={styles.expand({ class: classNames?.expandButton })}>\n      <ExpandMoreIcon />\n    </span>\n  );\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{ '--m3-list-level': node.level } as CSSProperties}\n      data-shape=\"rest\"\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <div className={styles.cell()}>\n        <ItemContent\n          item={item}\n          styles={styles}\n          classNames={classNames}\n          end={\n            check || chevron ? (\n              <>\n                {check}\n                {chevron}\n              </>\n            ) : null\n          }\n        />\n      </div>\n    </div>\n  );\n}\n\ntype TreeCollection = TreeState<object>['collection'] & {\n  getChildren?: (key: Key) => Iterable<Node<object>>;\n};\n\n/**\n * React Aria's tree item reads a row's siblings (for `aria-posinset` and `aria-setsize`)\n * through `collection.getChildren` and each sibling's `nextKey`, which React Stately's\n * `TreeCollection` doesn't provide: its `nextKey` and `index` follow the visible rows, as\n * keyboard navigation needs. While the row's hook runs, this gives the collection the\n * nested items' own order, and the returned function restores it. React Aria keys its\n * per-list data by the state object, so the state itself has to be the one patched.\n */\nfunction withSiblingOrder(state: TreeState<object>, node: Node<object>) {\n  const collection = state.collection as TreeCollection;\n  const visibleItem = collection.getItem.bind(collection);\n  const siblingsOf = (parentKey: Key | null | undefined) =>\n    (parentKey == null ? [...collection] : [...(visibleItem(parentKey)?.childNodes ?? [])]).filter(\n      (sibling) => sibling.type === 'item',\n    );\n  const inSiblingOrder = (item: Node<object>): Node<object> => {\n    const siblings = siblingsOf(item.parentKey);\n    const index = siblings.findIndex((sibling) => sibling.key === item.key);\n    return { ...item, index, nextKey: siblings[index + 1]?.key ?? null };\n  };\n  collection.getItem = (key: Key) => {\n    const item = visibleItem(key);\n    return item ? inSiblingOrder(item) : null;\n  };\n  collection.getChildren = (key: Key) => siblingsOf(key).map(inSiblingOrder);\n  return {\n    node: inSiblingOrder(node),\n    restore: () => {\n      delete (collection as Partial<TreeCollection>).getItem;\n      delete collection.getChildren;\n    },\n  };\n}\n\nfunction ExpandButton({ props, className }: { props: AriaButtonProps; className: string }) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: props.isDisabled, isPressed },\n    ref,\n  );\n  return (\n    <button\n      {...mergeProps(buttonProps, interactionProps)}\n      {...dataAttributes}\n      ref={ref}\n      className={className}\n    >\n      {/* 48px, but never taller than a one-line item (44px at density -3), so it stays in its row. */}\n      <TouchTarget className=\"h-[min(48px,calc(56px+var(--md-sys-density,0)*4px))]\" />\n      <ExpandMoreIcon />\n    </button>\n  );\n}\n\nfunction TreeRow({\n  node,\n  state,\n  variant,\n  classNames,\n  position: itemPosition,\n}: {\n  node: Node<object>;\n  state: TreeState<object>;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  position: string;\n}) {\n  const item = node.props as ListItemProps;\n  const ref = useRef<HTMLDivElement>(null);\n  const siblingOrder = withSiblingOrder(state, node);\n  const { rowProps, gridCellProps, descriptionProps, expandButtonProps, isPressed, isSelected } =\n    useTreeItem({ node: siblingOrder.node, hasChildItems: node.hasChildNodes }, state, ref);\n  siblingOrder.restore();\n  const isDisabled = state.disabledKeys.has(node.key);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  const { interactionProps, dataAttributes } = useM3Interaction({ isDisabled, isPressed }, ref);\n  const isFocusVisible = dataAttributes['data-focus-visible'] != null;\n  const shape = shapeOf({ isPressed, isSelected, isFocusVisible, isHovered, isDisabled });\n  const options = useContext(ListOptionsContext);\n  const styles = listStyles({\n    ...itemStylesOptions(item, variant, true, options),\n    nested: node.level > 0,\n  });\n  const check = useSelectionCheck(\n    styles,\n    state.selectionManager.selectionMode !== 'none',\n    classNames?.selectionIndicator,\n  );\n  // Only a check or a chevron makes a trailing cell (and its 12px gap).\n  const end =\n    check != null || node.hasChildNodes ? (\n      <>\n        {check}\n        {node.hasChildNodes && (\n          <ExpandButton\n            props={{ ...expandButtonProps, isDisabled }}\n            className={styles.expand({ class: classNames?.expandButton })}\n          />\n        )}\n      </>\n    ) : null;\n  return (\n    <div\n      {...mergeProps(isDisabled ? focusOnly(rowProps) : rowProps, hoverProps, interactionProps)}\n      {...dataAttributes}\n      aria-disabled={isDisabled || undefined}\n      ref={ref}\n      style={{ '--m3-list-level': node.level } as CSSProperties}\n      data-selected={isSelected || undefined}\n      data-shape={shape}\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <div {...gridCellProps} className={styles.cell()}>\n        <ItemContent\n          item={item}\n          styles={styles}\n          classNames={classNames}\n          ids={{ supporting: descriptionProps.id }}\n          end={end}\n        />\n      </div>\n    </div>\n  );\n}\n\n/**\n * The items of an interactive list's collection, as React Stately's collection builder reads\n * them (each entry describes itself through `getCollectionNode`), top-level and in sections,\n * and whether it has sections. The list picks its kind and its disabled keys from these.\n */\nfunction useCollectionScan(children: ReactNode) {\n  const { collection } = useListState<object>({\n    children: children as AriaGridListProps<object>['children'],\n  });\n  return useMemo(() => {\n    const entries: [Key, ListItemProps][] = [];\n    let sectioned = false;\n    for (const node of collection) {\n      if (node.type === 'section') {\n        sectioned = true;\n        for (const child of collection.getChildren!(node.key)) {\n          if (child.type === 'item') entries.push([child.key, child.props as ListItemProps]);\n        }\n      } else if (node.type === 'item') {\n        entries.push([node.key, node.props as ListItemProps]);\n      }\n    }\n    return { entries, items: entries.map(([, item]) => item), sectioned };\n  }, [collection]);\n}\n\n/** Ids that name an item that is a control (its headline) and describe it (the rest). */\nfunction useItemIds(item: ListItemProps) {\n  const id = useId();\n  const ids: ItemIds = {\n    headline: `${id}-headline`,\n    ...(item.overline != null && { overline: `${id}-overline` }),\n    ...(item.supportingText != null && { supporting: `${id}-supporting` }),\n  };\n  const described = [ids.overline, ids.supporting].filter(Boolean).join(' ');\n  const naming =\n    item['aria-label'] != null\n      ? { 'aria-label': item['aria-label'] }\n      : { 'aria-labelledby': ids.headline };\n  return { ids, naming: { ...naming, ...(described && { 'aria-describedby': described }) } };\n}\n\ninterface ToggleItemProps {\n  item: ListItemProps;\n  control: 'switch' | 'checkbox';\n  variant?: ListVariant;\n  classNames?: ListClassNames;\n  position: string;\n  listDisabled?: boolean;\n}\n\n/** A switch or checkbox item: a visually hidden native input, the item as its label. */\nfunction ToggleItem({ item, control, listDisabled, ...view }: ToggleItemProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { ids, naming } = useItemIds(item);\n  const isDisabled = Boolean(listDisabled || item.disabled);\n  const options: AriaCheckboxProps = {\n    ...naming,\n    children: item.children,\n    isSelected: item.checked,\n    defaultSelected: item.defaultChecked,\n    onChange: item.onCheckedChange,\n    isDisabled,\n    name: item.name,\n    value: item.value,\n  };\n  const state = useToggleState(options);\n  const { inputProps, labelProps, isSelected, isPressed } = useCheckbox(options, state, inputRef);\n  return (\n    <ControlItem\n      {...view}\n      item={item}\n      ids={ids}\n      kind={control}\n      // A native checkbox with the switch role, as React Aria's `useSwitch` renders it.\n      inputProps={control === 'switch' ? { ...inputProps, role: 'switch' } : inputProps}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      isSelected={isSelected}\n      isDisabled={isDisabled}\n      isPressed={isPressed}\n      placement={item.controlPlacement ?? (control === 'switch' ? 'end' : 'start')}\n    />\n  );\n}\n\nfunction RadioList({\n  variant,\n  classNames,\n  className,\n  style,\n  ref,\n  value,\n  defaultValue,\n  onChange,\n  name,\n  required,\n  disabled,\n  controlPlacement = 'start',\n  entries,\n  ...rest\n}: ListProps & { entries: ReactElement[] }) {\n  const { root: data } = splitRootProps(rest);\n  const { 'aria-label': label, 'aria-labelledby': labelledBy } = rest as {\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n  };\n  const options: AriaRadioGroupProps = {\n    id: rest.id,\n    'aria-label': label,\n    'aria-labelledby': labelledBy,\n    value,\n    defaultValue,\n    onChange,\n    name,\n    isRequired: required,\n    isDisabled: disabled,\n  };\n  const state = useRadioGroupState(options);\n  const { radioGroupProps } = useRadioGroup(options, state);\n  return (\n    <div\n      {...mergeProps(data, radioGroupProps)}\n      {...tokenAttributes(variant, data)}\n      ref={ref as Ref<HTMLDivElement>}\n      style={style}\n      className={listStyles({ variant }).root({ class: cn(classNames?.root, className) })}\n    >\n      <RadioListContext value={{ state, variant, classNames, controlPlacement }}>\n        {entries.map((entry, index) => (\n          <ListEntryContext\n            key={entry.key ?? index}\n            value={{\n              index,\n              position: position(index, entries.length),\n              inSection: false,\n              disabled: false,\n            }}\n          >\n            {entry}\n          </ListEntryContext>\n        ))}\n      </RadioListContext>\n    </div>\n  );\n}\n\n/** What a radio list hands its items. */\ninterface RadioListValue {\n  state: RadioGroupState;\n  variant?: ListVariant | undefined;\n  classNames?: ListClassNames | undefined;\n  controlPlacement: ControlPlacement;\n}\n\nconst RadioListContext = createContext<RadioListValue | null>(null);\n\n/** An item of a radio list: a radio button with the item's `value`. */\nfunction RadioListItem({\n  item,\n  radio,\n  position: itemPosition,\n}: {\n  item: ListItemProps;\n  radio: RadioListValue;\n  position: string;\n}) {\n  if (item.value == null || item.control != null || item.href != null) {\n    throw new Error(RADIO_ITEM_ERROR);\n  }\n  return (\n    <RadioItem\n      item={item}\n      state={radio.state}\n      variant={radio.variant}\n      classNames={radio.classNames}\n      position={itemPosition}\n      placement={item.controlPlacement ?? radio.controlPlacement}\n    />\n  );\n}\n\nfunction RadioItem({\n  item,\n  state,\n  placement,\n  ...view\n}: {\n  item: ListItemProps;\n  state: RadioGroupState;\n  variant?: ListVariant;\n  classNames?: ListClassNames;\n  position: string;\n  placement: ControlPlacement;\n}) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { ids, naming } = useItemIds(item);\n  const { inputProps, labelProps, isSelected, isDisabled, isPressed } = useRadio(\n    { ...naming, children: item.children, value: item.value ?? '', isDisabled: item.disabled },\n    state,\n    inputRef,\n  );\n  return (\n    <ControlItem\n      {...view}\n      item={item}\n      ids={ids}\n      kind=\"radio\"\n      inputProps={inputProps}\n      inputRef={inputRef}\n      labelProps={labelProps}\n      isSelected={isSelected}\n      isDisabled={isDisabled}\n      isPressed={isPressed}\n      placement={placement}\n    />\n  );\n}\n\n/**\n * An item that is a switch, checkbox or radio button (Compose's toggleable and selectable\n * `ListItem`s): the item is the input's `<label>`, so pressing anywhere on it changes it,\n * with the list item's state layer, shapes and selected colours. The drawn control only\n * shows the state.\n */\nfunction ControlItem({\n  item,\n  ids,\n  kind,\n  inputProps,\n  inputRef,\n  labelProps,\n  isSelected,\n  isDisabled,\n  isPressed,\n  placement,\n  variant,\n  classNames,\n  position: itemPosition,\n}: {\n  item: ListItemProps;\n  ids: ItemIds;\n  kind: 'switch' | 'checkbox' | 'radio';\n  inputProps: InputHTMLAttributes<HTMLInputElement>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  labelProps: LabelHTMLAttributes<HTMLLabelElement>;\n  isSelected: boolean;\n  isDisabled: boolean;\n  isPressed: boolean;\n  placement: ControlPlacement;\n  variant?: ListVariant;\n  classNames?: ListClassNames;\n  position: string;\n}) {\n  const ref = useRef<HTMLLabelElement>(null);\n  const hiddenInputRef = useMemo(() => mergeRefs(inputRef, preventHiddenInputScroll), [inputRef]);\n  const { interactionProps, dataAttributes, state } = useM3Interaction(\n    { isDisabled, isPressed, isSelected, within: true },\n    ref,\n  );\n  // Compose's shape precedence: pressed, then selected or focused (16px), then hovered (12px).\n  const shape =\n    (isPressed && !isDisabled) || isSelected || state.isFocusVisible\n      ? 'active'\n      : state.isHovered && !isDisabled\n        ? 'hovered'\n        : 'rest';\n  const options = useContext(ListOptionsContext);\n  const styles = itemStyles(item, variant, true, options);\n  const controlState = {\n    'data-checked': isSelected || undefined,\n    'data-disabled': isDisabled || undefined,\n  };\n  return (\n    <label\n      {...mergeProps(labelProps, interactionProps)}\n      {...dataAttributes}\n      ref={ref}\n      data-shape={shape}\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn(classNames?.item, item.className) })}\n    >\n      <VisuallyHidden elementType=\"span\">\n        <input {...inputProps} ref={hiddenInputRef} />\n      </VisuallyHidden>\n      <span className={styles.cell()}>\n        <ItemContent\n          item={item}\n          styles={styles}\n          classNames={classNames}\n          ids={ids}\n          controlPlacement={placement}\n          textHidden\n          control={\n            <span\n              {...controlState}\n              aria-hidden=\"true\"\n              className={styles.control({ class: classNames?.control })}\n            >\n              {kind === 'radio' && <RadioRing />}\n              {kind === 'checkbox' && <CheckboxBox />}\n              {kind === 'switch' && <SwitchTrack selected={isSelected} icons={item.switchIcons} />}\n            </span>\n          }\n        />\n      </span>\n    </label>\n  );\n}\n\n/** A switch's track and thumb, at rest (the item, not the switch, takes the interaction). */\nfunction SwitchTrack({ selected, icons }: { selected: boolean; icons?: boolean }) {\n  const styles = switchStyles();\n  const icon = icons ? selected ? <CheckIcon /> : <CloseIcon /> : null;\n  const { size, center } = thumbGeometry(selected, false, Boolean(icon));\n  return (\n    <span\n      // The switch's component tokens, resolved on its track as on a Switch.\n      data-tokens=\"md-comp-switch\"\n      data-slot=\"track\"\n      className={styles.control()}\n      style={\n        { '--m3-thumb-size': `${size}px`, '--m3-thumb-center': `${center}px` } as CSSProperties\n      }\n    >\n      <SwitchThumb styles={styles} icon={icon} />\n    </span>\n  );\n}\n\n/**\n * The `ListItem` elements, flattened from arrays, with the keys they were given. `Children`\n * also unwraps lazy elements, which a server component's items can arrive as (Next's dev\n * server sends some that way), so they're never dropped from the server render.\n */\nfunction listItems(children: ReactNode): ReactElement<ListItemProps>[] {\n  const items: ReactElement<ListItemProps>[] = [];\n  Children.forEach(children, (node) => {\n    if (isValidElement<ListItemProps>(node)) items.push(node);\n  });\n  return items;\n}\n\n/**\n * A link item: the item holds a real `<a>` on its headline, whose overlay covers the whole\n * item, so the item is the link (the browser's link menu and modified clicks included)\n * while buttons in its leading or trailing content stay separate controls, never nested in\n * the link. The link is named by the headline and described by the overline and supporting\n * text. React Aria's `useLink` routes a plain click through the `RouterProvider`; a disabled\n * item has no `href`.\n */\nfunction LinkItem({\n  item,\n  variant,\n  classNames,\n  position: itemPosition,\n  isDisabled,\n}: {\n  item: ListItemProps;\n  variant?: ListVariant;\n  classNames?: ListClassNames;\n  position: string;\n  isDisabled: boolean;\n}) {\n  const itemRef = useRef<HTMLLIElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const { ids, naming } = useItemIds(item);\n  const href = isDisabled ? undefined : item.href;\n  const { linkProps, isPressed } = useLink(\n    { href, target: item.target, isDisabled, elementType: 'a' },\n    linkRef,\n  );\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const current = Boolean(item.current);\n  const { interactionProps, dataAttributes, state } = useM3Interaction(\n    { isDisabled, isPressed, isSelected: current },\n    itemRef,\n  );\n  // Compose's shape precedence: pressed, then selected or focused (16px), then hovered (12px).\n  const shape =\n    (isPressed && !isDisabled) || current || isFocusVisible\n      ? 'active'\n      : state.isHovered && !isDisabled\n        ? 'hovered'\n        : 'rest';\n  const options = useContext(ListOptionsContext);\n  const styles = itemStyles(item, variant, true, options);\n  const rel = item.rel ?? (item.target === '_blank' ? 'noopener noreferrer' : undefined);\n  return (\n    <li\n      {...interactionProps}\n      {...dataAttributes}\n      // The link's focus, not a control's in the trailing content, focuses the item.\n      data-focused={isFocusVisible || undefined}\n      data-focus-visible={isFocusVisible || undefined}\n      ref={itemRef}\n      data-list-entry=\"\"\n      data-shape={shape}\n      data-position={itemPosition}\n      {...itemAttributes(variant)}\n      className={styles.item({ class: cn('relative', classNames?.item, item.className) })}\n    >\n      <span className={styles.cell()}>\n        <ItemContent\n          item={item}\n          styles={styles}\n          classNames={classNames}\n          ids={ids}\n          sideClassName={styles.raised()}\n          headline={(children) => (\n            <a\n              {...mergeProps(linkProps, focusProps)}\n              {...naming}\n              ref={linkRef}\n              href={href}\n              target={item.target}\n              rel={rel}\n              download={item.download}\n              aria-current={current ? 'page' : undefined}\n              data-list-link=\"\"\n              className={styles.link()}\n            >\n              {children}\n            </a>\n          )}\n        />\n      </span>\n    </li>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,88 @@
+import { RootDOMProps } from "../../utils/root-props.js";
+import { CSSProperties, ReactNode, Ref } from "react";
+//#region src/components/list/ListMedia.d.ts
+/** The frame (`<span>`) takes the DOM attributes, as it takes `className`, `style` and `ref`. */
+type FrameDOMProps = RootDOMProps<HTMLSpanElement> & {
+  [data: `data-${string}`]: string | number | boolean | undefined;
+};
+interface MediaImageProps extends FrameDOMProps {
+  /** The image. Without it, or when it fails to load, `fallback` shows. */
+  src?: string | undefined;
+  /** What the image shows; `""` when the headline already says it. */
+  alt: string;
+  /** Image candidates for responsive loading, as `<img srcset>`. */
+  srcSet?: string | undefined;
+  /** The image's display sizes for `srcSet`, as `<img sizes>`. */
+  sizes?: string | undefined;
+  /**
+   * Replaces the `<img>`, such as a framework's image component; the frame still sizes it
+   * and crops it to fill.
+   */
+  children?: ReactNode;
+  /** Shown with no `src` or when the image fails: an icon on `secondary-container`. */
+  fallback?: ReactNode;
+  /** Classes for the frame, merged after `classNames.media`; consumer classes win. */
+  className?: string;
+  /** The frame's inline styles. */
+  style?: CSSProperties | undefined;
+  /** The frame's id. */
+  id?: string | undefined;
+  /** Ref to the frame (`<span>`). */
+  ref?: Ref<HTMLSpanElement> | undefined;
+}
+export type ListItemImageProps = MediaImageProps;
+export interface ListItemVideoProps extends MediaImageProps {
+  /** The video's length, in its corner ("2:41"). */
+  duration?: string;
+  /** M3's small (`sm`, 100 × 56dp) or large (`lg`, 114 × 64dp) thumbnail. @default "sm" */
+  size?: 'sm' | 'lg';
+}
+/**
+ * M3's leading image for a {@link ListItem}: a 56dp square with 8dp corners, cropped to
+ * fill, with a `fallback` (an icon) when there's no image or it fails to load. Change its
+ * shape with the list's `classNames.media` or `className`.
+ *
+ * @example
+ * <ListItem key="1" leading={<ListItemImage src={url} alt="" fallback={<ArticleIcon />} />}>
+ *   Dinner at our place
+ * </ListItem>
+ */
+export declare function ListItemImage({ className, style, id, ref, src, alt, srcSet, sizes, children, fallback, ...dom }: ListItemImageProps): import("react").JSX.Element;
+/**
+ * M3's leading video for a {@link ListItem}: the video's thumbnail (not a player) with 8dp
+ * corners, 100 × 56dp or 114 × 64dp (`size="lg"`), with a play badge and its `duration`
+ * in the corner. Pressing it is pressing the item.
+ */
+export declare function ListItemVideo({ className, style, id, ref, duration, size, src, alt, srcSet, sizes, children, fallback, ...dom }: ListItemVideoProps): import("react").JSX.Element;
+export interface ListItemAvatarProps extends FrameDOMProps {
+  /** The person's photo. Without it, or when it fails to load, `children` show. */
+  src?: string | undefined;
+  /** What the photo shows; `""` (the default) when the headline names the person. */
+  alt?: string;
+  /** Image candidates for responsive loading, as `<img srcset>`. */
+  srcSet?: string | undefined;
+  /** The image's display sizes for `srcSet`, as `<img sizes>`. */
+  sizes?: string | undefined;
+  /** Initials or an icon, shown with no `src` or when the photo fails; hidden from assistive tech. */
+  children?: ReactNode;
+  /** Classes for the avatar's circle; consumer classes win. */
+  className?: string;
+  /** The frame's inline styles. */
+  style?: CSSProperties | undefined;
+  /** The frame's id. */
+  id?: string | undefined;
+  /** Ref to the frame (`<span>`). */
+  ref?: Ref<HTMLSpanElement> | undefined;
+}
+/**
+ * M3's leading avatar for a {@link ListItem}: a 40dp circle in `primary-container` holding
+ * a photo, cropped to fill, or initials in `title-medium` `on-primary-container`.
+ *
+ * @example
+ * <ListItem key="alex" leading={<ListItemAvatar src={photo}>AL</ListItemAvatar>}>
+ *   Alex Lee
+ * </ListItem>
+ */
+export declare function ListItemAvatar({ className, style, id, ref, alt, children, src, srcSet, sizes, ...dom }: ListItemAvatarProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ListMedia.d.ts.map

package/dist/components/list/ListMedia.js

@@ -0,0 +1,132 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { listMediaStyles } from "./list-styles.js";
+import { createContext, useContext, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list/ListMedia.tsx
+/** What a {@link List} passes to the media in its items: `classNames.media`. */
+const ListMediaContext = createContext(void 0);
+function MediaImage({ src, alt, srcSet, sizes, children, fallback }) {
+	const [failed, setFailed] = useState(null);
+	if (children != null) return children;
+	if (src == null || failed === src) return fallback ?? null;
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		srcSet,
+		sizes,
+		loading: "lazy",
+		decoding: "async",
+		ref: (img) => {
+			if (img?.complete && img.naturalWidth === 0) img.decode().catch(() => setFailed(src));
+		},
+		onError: () => setFailed(src)
+	});
+}
+/**
+* M3's leading image for a {@link ListItem}: a 56dp square with 8dp corners, cropped to
+* fill, with a `fallback` (an icon) when there's no image or it fails to load. Change its
+* shape with the list's `classNames.media` or `className`.
+*
+* @example
+* <ListItem key="1" leading={<ListItemImage src={url} alt="" fallback={<ArticleIcon />} />}>
+*   Dinner at our place
+* </ListItem>
+*/
+function ListItemImage({ className, style, id, ref, src, alt, srcSet, sizes, children, fallback, ...dom }) {
+	const media = useContext(ListMediaContext);
+	const image = {
+		src,
+		alt,
+		srcSet,
+		sizes,
+		children,
+		fallback
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...dom,
+		style,
+		id,
+		ref,
+		className: listMediaStyles({ kind: "image" }).frame({ class: cn(media, className) }),
+		children: /* @__PURE__ */ jsx(MediaImage, { ...image })
+	});
+}
+/**
+* M3's leading video for a {@link ListItem}: the video's thumbnail (not a player) with 8dp
+* corners, 100 × 56dp or 114 × 64dp (`size="lg"`), with a play badge and its `duration`
+* in the corner. Pressing it is pressing the item.
+*/
+function ListItemVideo({ className, style, id, ref, duration, size = "sm", src, alt, srcSet, sizes, children, fallback, ...dom }) {
+	const media = useContext(ListMediaContext);
+	const styles = listMediaStyles({
+		kind: "video",
+		size
+	});
+	const image = {
+		src,
+		alt,
+		srcSet,
+		sizes,
+		children,
+		fallback
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		...dom,
+		style,
+		id,
+		ref,
+		className: styles.frame({ class: cn(media, className) }),
+		children: [
+			/* @__PURE__ */ jsx(MediaImage, { ...image }),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: styles.badge(),
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 -960 960 960",
+					children: /* @__PURE__ */ jsx("path", { d: "M320-200v-560l440 280-440 280Z" })
+				})
+			}),
+			duration != null && /* @__PURE__ */ jsx("span", {
+				className: styles.duration(),
+				children: duration
+			})
+		]
+	});
+}
+/**
+* M3's leading avatar for a {@link ListItem}: a 40dp circle in `primary-container` holding
+* a photo, cropped to fill, or initials in `title-medium` `on-primary-container`.
+*
+* @example
+* <ListItem key="alex" leading={<ListItemAvatar src={photo}>AL</ListItemAvatar>}>
+*   Alex Lee
+* </ListItem>
+*/
+function ListItemAvatar({ className, style, id, ref, alt = "", children, src, srcSet, sizes, ...dom }) {
+	const media = useContext(ListMediaContext);
+	const image = {
+		src,
+		srcSet,
+		sizes
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...dom,
+		style,
+		id,
+		ref,
+		className: listMediaStyles({ kind: "avatar" }).frame({ class: cn(media, className) }),
+		children: /* @__PURE__ */ jsx(MediaImage, {
+			...image,
+			alt,
+			fallback: children != null ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children
+			}) : null
+		})
+	});
+}
+//#endregion
+export { ListItemAvatar, ListItemImage, ListItemVideo, ListMediaContext };
+
+//# sourceMappingURL=ListMedia.js.map

package/dist/components/list/ListMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMedia.js","names":[],"sources":["../../../src/components/list/ListMedia.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport type { RootDOMProps } from '../../utils/root-props';\nimport { listMediaStyles } from './list-styles';\n\n/** What a {@link List} passes to the media in its items: `classNames.media`. */\nexport const ListMediaContext = createContext<string | undefined>(undefined);\n\n/** The frame (`<span>`) takes the DOM attributes, as it takes `className`, `style` and `ref`. */\ntype FrameDOMProps = RootDOMProps<HTMLSpanElement> & {\n  [data: `data-${string}`]: string | number | boolean | undefined;\n};\n\ninterface MediaImageProps extends FrameDOMProps {\n  /** The image. Without it, or when it fails to load, `fallback` shows. */\n  src?: string | undefined;\n  /** What the image shows; `\"\"` when the headline already says it. */\n  alt: string;\n  /** Image candidates for responsive loading, as `<img srcset>`. */\n  srcSet?: string | undefined;\n  /** The image's display sizes for `srcSet`, as `<img sizes>`. */\n  sizes?: string | undefined;\n  /**\n   * Replaces the `<img>`, such as a framework's image component; the frame still sizes it\n   * and crops it to fill.\n   */\n  children?: ReactNode;\n  /** Shown with no `src` or when the image fails: an icon on `secondary-container`. */\n  fallback?: ReactNode;\n  /** Classes for the frame, merged after `classNames.media`; consumer classes win. */\n  className?: string;\n  /** The frame's inline styles. */\n  style?: CSSProperties | undefined;\n  /** The frame's id. */\n  id?: string | undefined;\n  /** Ref to the frame (`<span>`). */\n  ref?: Ref<HTMLSpanElement> | undefined;\n}\n\nexport type ListItemImageProps = MediaImageProps;\n\nexport interface ListItemVideoProps extends MediaImageProps {\n  /** The video's length, in its corner (\"2:41\"). */\n  duration?: string;\n  /** M3's small (`sm`, 100 × 56dp) or large (`lg`, 114 × 64dp) thumbnail. @default \"sm\" */\n  size?: 'sm' | 'lg';\n}\n\ninterface ImageSource {\n  src?: string | undefined;\n  alt: string;\n  srcSet?: string | undefined;\n  sizes?: string | undefined;\n  children?: ReactNode;\n  fallback?: ReactNode;\n}\n\nfunction MediaImage({ src, alt, srcSet, sizes, children, fallback }: ImageSource) {\n  const [failed, setFailed] = useState<string | null>(null);\n  if (children != null) return children;\n  if (src == null || failed === src) return fallback ?? null;\n  return (\n    <img\n      src={src}\n      alt={alt}\n      srcSet={srcSet}\n      sizes={sizes}\n      loading=\"lazy\"\n      decoding=\"async\"\n      // An image that failed before hydration never fires `onError` here, so check on mount.\n      // `decode()` confirms it: an SVG with no size also has no natural width, yet decodes.\n      ref={(img) => {\n        if (img?.complete && img.naturalWidth === 0) {\n          img.decode().catch(() => setFailed(src));\n        }\n      }}\n      onError={() => setFailed(src)}\n    />\n  );\n}\n\n/**\n * M3's leading image for a {@link ListItem}: a 56dp square with 8dp corners, cropped to\n * fill, with a `fallback` (an icon) when there's no image or it fails to load. Change its\n * shape with the list's `classNames.media` or `className`.\n *\n * @example\n * <ListItem key=\"1\" leading={<ListItemImage src={url} alt=\"\" fallback={<ArticleIcon />} />}>\n *   Dinner at our place\n * </ListItem>\n */\nexport function ListItemImage({\n  className,\n  style,\n  id,\n  ref,\n  src,\n  alt,\n  srcSet,\n  sizes,\n  children,\n  fallback,\n  ...dom\n}: ListItemImageProps) {\n  const media = useContext(ListMediaContext);\n  const image = { src, alt, srcSet, sizes, children, fallback };\n  return (\n    <span\n      {...dom}\n      style={style}\n      id={id}\n      ref={ref}\n      className={listMediaStyles({ kind: 'image' }).frame({ class: cn(media, className) })}\n    >\n      <MediaImage {...image} />\n    </span>\n  );\n}\n\n/**\n * M3's leading video for a {@link ListItem}: the video's thumbnail (not a player) with 8dp\n * corners, 100 × 56dp or 114 × 64dp (`size=\"lg\"`), with a play badge and its `duration`\n * in the corner. Pressing it is pressing the item.\n */\nexport function ListItemVideo({\n  className,\n  style,\n  id,\n  ref,\n  duration,\n  size = 'sm',\n  src,\n  alt,\n  srcSet,\n  sizes,\n  children,\n  fallback,\n  ...dom\n}: ListItemVideoProps) {\n  const media = useContext(ListMediaContext);\n  const styles = listMediaStyles({ kind: 'video', size });\n  const image = { src, alt, srcSet, sizes, children, fallback };\n  return (\n    <span\n      {...dom}\n      style={style}\n      id={id}\n      ref={ref}\n      className={styles.frame({ class: cn(media, className) })}\n    >\n      <MediaImage {...image} />\n      <span aria-hidden=\"true\" className={styles.badge()}>\n        <svg viewBox=\"0 -960 960 960\">\n          <path d=\"M320-200v-560l440 280-440 280Z\" />\n        </svg>\n      </span>\n      {duration != null && <span className={styles.duration()}>{duration}</span>}\n    </span>\n  );\n}\n\nexport interface ListItemAvatarProps extends FrameDOMProps {\n  /** The person's photo. Without it, or when it fails to load, `children` show. */\n  src?: string | undefined;\n  /** What the photo shows; `\"\"` (the default) when the headline names the person. */\n  alt?: string;\n  /** Image candidates for responsive loading, as `<img srcset>`. */\n  srcSet?: string | undefined;\n  /** The image's display sizes for `srcSet`, as `<img sizes>`. */\n  sizes?: string | undefined;\n  /** Initials or an icon, shown with no `src` or when the photo fails; hidden from assistive tech. */\n  children?: ReactNode;\n  /** Classes for the avatar's circle; consumer classes win. */\n  className?: string;\n  /** The frame's inline styles. */\n  style?: CSSProperties | undefined;\n  /** The frame's id. */\n  id?: string | undefined;\n  /** Ref to the frame (`<span>`). */\n  ref?: Ref<HTMLSpanElement> | undefined;\n}\n\n/**\n * M3's leading avatar for a {@link ListItem}: a 40dp circle in `primary-container` holding\n * a photo, cropped to fill, or initials in `title-medium` `on-primary-container`.\n *\n * @example\n * <ListItem key=\"alex\" leading={<ListItemAvatar src={photo}>AL</ListItemAvatar>}>\n *   Alex Lee\n * </ListItem>\n */\nexport function ListItemAvatar({\n  className,\n  style,\n  id,\n  ref,\n  alt = '',\n  children,\n  src,\n  srcSet,\n  sizes,\n  ...dom\n}: ListItemAvatarProps) {\n  const media = useContext(ListMediaContext);\n  const image = { src, srcSet, sizes };\n  return (\n    <span\n      {...dom}\n      style={style}\n      id={id}\n      ref={ref}\n      className={listMediaStyles({ kind: 'avatar' }).frame({ class: cn(media, className) })}\n    >\n      <MediaImage\n        {...image}\n        alt={alt}\n        fallback={children != null ? <span aria-hidden=\"true\">{children}</span> : null}\n      />\n    </span>\n  );\n}\n"],"mappings":";;;;;;;AAeA,MAAa,mBAAmB,cAAkC,KAAA,CAAS;AAmD3E,SAAS,WAAW,EAAE,KAAK,KAAK,QAAQ,OAAO,UAAU,YAAyB;CAChF,MAAM,CAAC,QAAQ,aAAa,SAAwB,IAAI;CACxD,IAAI,YAAY,MAAM,OAAO;CAC7B,IAAI,OAAO,QAAQ,WAAW,KAAK,OAAO,YAAY;CACtD,OACE,oBAAC,OAAD;EACO;EACA;EACG;EACD;EACP,SAAQ;EACR,UAAS;EAGT,MAAM,QAAQ;GACZ,IAAI,KAAK,YAAY,IAAI,iBAAiB,GACxC,IAAI,OAAO,CAAC,CAAC,YAAY,UAAU,GAAG,CAAC;EAE3C;EACA,eAAe,UAAU,GAAG;CAC7B,CAAA;AAEL;;;;;;;;;;;AAYA,SAAgB,cAAc,EAC5B,WACA,OACA,IACA,KACA,KACA,KACA,QACA,OACA,UACA,UACA,GAAG,OACkB;CACrB,MAAM,QAAQ,WAAW,gBAAgB;CACzC,MAAM,QAAQ;EAAE;EAAK;EAAK;EAAQ;EAAO;EAAU;CAAS;CAC5D,OACE,oBAAC,QAAD;EACE,GAAI;EACG;EACH;EACC;EACL,WAAW,gBAAgB,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,SAAS,EAAE,CAAC;EAEnF,UAAA,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACpB,CAAA;AAEV;;;;;;AAOA,SAAgB,cAAc,EAC5B,WACA,OACA,IACA,KACA,UACA,OAAO,MACP,KACA,KACA,QACA,OACA,UACA,UACA,GAAG,OACkB;CACrB,MAAM,QAAQ,WAAW,gBAAgB;CACzC,MAAM,SAAS,gBAAgB;EAAE,MAAM;EAAS;CAAK,CAAC;CACtD,MAAM,QAAQ;EAAE;EAAK;EAAK;EAAQ;EAAO;EAAU;CAAS;CAC5D,OACE,qBAAC,QAAD;EACE,GAAI;EACG;EACH;EACC;EACL,WAAW,OAAO,MAAM,EAAE,OAAO,GAAG,OAAO,SAAS,EAAE,CAAC;EALzD,UAAA;GAOE,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;GACxB,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAW,OAAO,MAAM;IAC/C,UAAA,oBAAC,OAAD;KAAK,SAAQ;KACX,UAAA,oBAAC,QAAD,EAAM,GAAE,iCAAkC,CAAA;IACvC,CAAA;GACD,CAAA;GACL,YAAY,QAAQ,oBAAC,QAAD;IAAM,WAAW,OAAO,SAAS;IAAI,UAAA;GAAe,CAAA;EACrE;;AAEV;;;;;;;;;;AAgCA,SAAgB,eAAe,EAC7B,WACA,OACA,IACA,KACA,MAAM,IACN,UACA,KACA,QACA,OACA,GAAG,OACmB;CACtB,MAAM,QAAQ,WAAW,gBAAgB;CACzC,MAAM,QAAQ;EAAE;EAAK;EAAQ;CAAM;CACnC,OACE,oBAAC,QAAD;EACE,GAAI;EACG;EACH;EACC;EACL,WAAW,gBAAgB,EAAE,MAAM,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,GAAG,OAAO,SAAS,EAAE,CAAC;EAEpF,UAAA,oBAAC,YAAD;GACE,GAAI;GACC;GACL,UAAU,YAAY,OAAO,oBAAC,QAAD;IAAM,eAAY;IAAQ;GAAe,CAAA,IAAI;EAC3E,CAAA;CACG,CAAA;AAEV"}