@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/ListGroup.tsx

@@ -0,0 +1,857 @@
+import * as BaseUiMeter from '@base-ui/react/meter'
+import * as BaseUiRadio from '@base-ui/react/radio'
+import * as BaseUiRadioGroup from '@base-ui/react/radio-group'
+import { useRender } from '@base-ui/react/use-render'
+import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react'
+import type * as zyzz from 'zyzz'
+import { ChevronRight } from '../icons/ChevronRight.js'
+import { style, variants, vars } from '../zyzz.config.js'
+import * as RowDisabled from './internal/RowDisabled.js'
+import * as RowsSize from './internal/RowsSize.js'
+
+/**
+ * A stack of rows for the facts a person checks, the choices they tap, and short checklists.
+ * `ListGroup` renders `ListGroup.Root`. A row is a `button` when it has an `action` or `onClick`, any element
+ * passed to `render` (such as a link), a `label` around a radio when it has a `value`, and a plain
+ * `div` otherwise.
+ *
+ * - Name each group with a `ListGroup.Heading` placed right before it.
+ * - Write row text that names the destination, since the chevron is hidden from assistive
+ *   technology.
+ * - Avoid nesting buttons or links inside a pressable row.
+ * - Put rows that pick one option, each with a `value`, in a `ListGroup.RadioGroup`.
+ *
+ * @example
+ * <ListGroup.Heading>Fees</ListGroup.Heading>
+ * <ListGroup variant="boxed">
+ *   <ListGroup.Row>
+ *     <ListGroup.Label>Network fee</ListGroup.Label>
+ *     0.001 USDC
+ *   </ListGroup.Row>
+ * </ListGroup>
+ *
+ * @see {@link https://base-ui.com/react/utils/use-render | Base UI useRender}
+ * @see {@link https://base-ui.com/react/components/meter | Base UI Meter}
+ * @see {@link https://base-ui.com/react/components/radio | Base UI Radio}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ | WAI-ARIA APG Radio Group pattern}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role | MDN list role}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html | WCAG 2.2 Name, Role, Value}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html | WCAG 2.2 Target Size (Minimum)}
+ */
+export function ListGroup(props: ListGroup.Props) {
+  return <ListGroup.Root {...props} />
+}
+
+export namespace ListGroup {
+  export type Props = Root.Props
+
+  /**
+   * Lays out `AssetChip` elements in a row 4px apart, under a `ListGroup.Title` in
+   * `ListGroup.Info`, such as the assets that a network supports. It wraps onto more lines when
+   * the chips run out of room.
+   */
+  export function Chips(props: Chips.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.chips({ className, style: props.style, vars })} />
+  }
+
+  export namespace Chips {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.chips>
+  }
+
+  /** Secondary text under a `ListGroup.Title`, usually inside `ListGroup.Info`. */
+  export function Description(props: Description.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        {...attributes}
+        data-description=""
+        {...styles.description({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Description {
+    export type Props = ComponentPropsWithRef<'span'> &
+      zyzz.Props.Variants<typeof styles.description>
+  }
+
+  /**
+   * Names the group of rows that follows it, such as Fees or Contacts, with 8px below. Renders a
+   * `div`. Pass a heading element through `render`, such as `<h3 />`, when the group starts a
+   * section.
+   */
+  export function Heading(props: Heading.Props) {
+    const { className, ref, render, vars, ...attributes } = props
+
+    return useRender({
+      defaultTagName: 'div',
+      props: { ...attributes, ...styles.heading({ className, style: props.style, vars }) },
+      ref,
+      render,
+    })
+  }
+
+  export namespace Heading {
+    export type Props = useRender.ComponentProps<'div'> & zyzz.Props.Variants<typeof styles.heading>
+  }
+
+  /**
+   * A leading 16px icon in `content.tertiary`, such as the globe before a suggested prompt. It sets
+   * `aria-hidden`, so the row text carries the meaning.
+   */
+  export function Icon(props: Icon.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        aria-hidden="true"
+        {...attributes}
+        {...styles.icon({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Icon {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.icon>
+  }
+
+  /**
+   * Stacks a `ListGroup.Title` above a `ListGroup.Description`, beside a leading avatar or logo and a
+   * trailing control. A row that holds it pads 12px above and below. `large` sets a 16px title 2px
+   * above a monospace description, for the row that introduces a `boxed` group, such as a wallet
+   * above its address. Defaults to `size="medium"`.
+   */
+  export function Info(props: Info.Props) {
+    const { className, size, vars, ...attributes } = props
+
+    return (
+      <span
+        {...attributes}
+        data-info=""
+        {...styles.info({ className, size, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Info {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.info>
+  }
+
+  /** The key of a key-value row. It keeps its width and pushes the content after it to the end. */
+  export function Label(props: Label.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        {...attributes}
+        data-label=""
+        {...styles.label({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Label {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.label>
+  }
+
+  /**
+   * A 64px bar that fills to `value` between `min` (0) and `max` (100), followed by its value in
+   * a 112px column, so the bars of neighboring rows line up. It renders a Base UI `meter`, such as
+   * the share of a spending limit that an agent used.
+   *
+   * - Name it with `aria-label` or `aria-labelledby`, since the row title does not name it.
+   * - The visible value is hidden from assistive technology, which reads `aria-valuetext`. Pass
+   *   `getAriaValueText` to read the same text, such as `0.001 of 10 USDC`.
+   *
+   * @example
+   * <ListGroup.Row>
+   *   <AgentLogo agent="claude" />
+   *   <ListGroup.Info>
+   *     <ListGroup.Title>Claude</ListGroup.Title>
+   *   </ListGroup.Info>
+   *   <ListGroup.Meter aria-label="Spending limit used" value={66}>
+   *     6.60 USDC
+   *   </ListGroup.Meter>
+   * </ListGroup.Row>
+   */
+  export function Meter(props: Meter.Props) {
+    const { children, className, vars, ...attributes } = props
+
+    return (
+      <BaseUiMeter.Meter.Root
+        {...attributes}
+        {...styles.meter({ className, style: props.style, vars })}
+      >
+        <BaseUiMeter.Meter.Track {...styles.meterTrack()}>
+          <BaseUiMeter.Meter.Indicator {...styles.meterIndicator()} />
+        </BaseUiMeter.Meter.Track>
+        <BaseUiMeter.Meter.Value
+          {...(children !== undefined && { children: () => children })}
+          {...styles.meterValue()}
+        />
+      </BaseUiMeter.Meter.Root>
+    )
+  }
+
+  export namespace Meter {
+    export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.meter> &
+      Pick<
+        BaseUiMeter.Meter.Root.Props,
+        'format' | 'getAriaValueText' | 'locale' | 'max' | 'min' | 'value'
+      > & {
+        /** Visible value after the bar, such as an amount. Absent, it shows the percentage of the range. */
+        children?: ReactNode | undefined
+      }
+  }
+
+  /**
+   * Holds the selected `value` of the rows inside it, each a radio with its own `value`, in a
+   * `radiogroup` element. The rows stack 12px apart, each in its own bordered block. The group is
+   * one Tab stop, and arrow keys move focus and selection together. Pass the choices as a type
+   * argument, such as `ListGroup.RadioGroup<'maya' | 'acme'>`, to narrow `value`, `defaultValue`
+   * and `onValueChange`.
+   *
+   * - Name it with `aria-label` or `aria-labelledby`, phrased as the question it answers.
+   * - Each row's text becomes the accessible name of its radio.
+   *
+   * @example
+   * <ListGroup.RadioGroup aria-label="Account" defaultValue="maya">
+   *   <ListGroup.Row value="maya">
+   *     <ListGroup.Info>
+   *       <ListGroup.Title>Maya Rao</ListGroup.Title>
+   *       <ListGroup.Description>maya@studio.co</ListGroup.Description>
+   *     </ListGroup.Info>
+   *   </ListGroup.Row>
+   * </ListGroup.RadioGroup>
+   */
+  export function RadioGroup<const value extends string = string>(props: RadioGroup.Props<value>) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <BaseUiRadioGroup.RadioGroup
+        {...attributes}
+        {...styles.radioGroup({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace RadioGroup {
+    export type Props<value extends string = string> = Omit<
+      ComponentPropsWithRef<'div'>,
+      'defaultValue' | 'onChange'
+    > &
+      zyzz.Props.Variants<typeof styles.radioGroup> &
+      Pick<
+        BaseUiRadioGroup.RadioGroup.Props<NoInfer<value>>,
+        | 'defaultValue'
+        | 'disabled'
+        | 'form'
+        | 'inputRef'
+        | 'name'
+        | 'onValueChange'
+        | 'readOnly'
+        | 'required'
+        | 'value'
+      >
+  }
+
+  /**
+   * `variant` sets the container. `plain` rows have none and line up with the content around them.
+   * `boxed` rows sit in a bordered block with 16px sides and 8px above and below, and a row's
+   * hover fill reaches the border. `spaced` rows
+   * sit in the same block with 16px all round, 12px apart, with 14px text and no row padding.
+   *
+   * Rows are 36px with 12px text, which fits a 32px control. `dividers={false}` drops the line
+   * between rows, which `spaced` never draws. Variants default to `dividers`, `variant="plain"`.
+   * Inside a `Surface`, `plain` rows reach its edges and pad by its padding.
+   */
+  export function Root(props: Root.Props) {
+    const { className, dividers, variant, vars, ...attributes } = props
+
+    return (
+      <RowsSize.Context value>
+        <div
+          {...attributes}
+          data-list-group=""
+          data-variant={variant ?? 'plain'}
+          {...styles.root({ className, dividers, style: props.style, variant, vars })}
+        />
+      </RowsSize.Context>
+    )
+  }
+
+  export namespace Root {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.root>
+  }
+
+  /**
+   * Renders a button when pressable, a `label` around a radio when it has a `value`, or a link or
+   * other element through `render`. `ref` and attributes reach that element. Children sit 12px
+   * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row's hover
+   * fill covers the row, flush with its content. A static row that holds a control, such as a Copy
+   * `Button`, takes the same fill on hover and stays static, so the control is the only target.
+   * A `Select` in a row hugs its value at the row's end, in the row's type, 32px tall and without a
+   * fill of its own.
+   *
+   * A row with a `value` is a radio of the `ListGroup.RadioGroup` around it, in a 12px block with
+   * 16px sides. A press anywhere on the row selects it, and a 16px ring at its end shows the
+   * selection.
+   *
+   * @example
+   * <ListGroup>
+   *   <ListGroup.Row action="navigation" render={<a href="/activity" />}>
+   *     Activity
+   *   </ListGroup.Row>
+   * </ListGroup>
+   */
+  export function Row(props: Row.Props) {
+    const {
+      action = 'none',
+      children,
+      className,
+      disabled,
+      ref,
+      render,
+      value,
+      vars,
+      ...attributes
+    } = props
+    const element = (() => {
+      if (value !== undefined) return 'radio'
+      if (render !== undefined) return 'render'
+      if (action !== 'none' || attributes.onClick !== undefined) return 'button'
+      return 'static'
+    })()
+    const tag = (() => {
+      if (element === 'button') return 'button'
+      if (element === 'radio') return 'label'
+      return 'div'
+    })()
+
+    return useRender({
+      defaultTagName: tag,
+      props: {
+        ...attributes,
+        ...(element === 'button' && { disabled, type: 'button' }),
+        ...(disabled &&
+          (element === 'render' || element === 'static') && { 'aria-disabled': true }),
+        // A link or other rendered element has no `disabled` attribute, and the `label` of a radio
+        // row takes presses beside its disabled radio, so both ignore the press and keep it from the
+        // elements around them. A static row stops the press before it reaches its children, such
+        // as a router link, which handle it themselves.
+        ...(disabled && (element === 'radio' || element === 'render') && { onClick: ignore }),
+        ...(disabled && element === 'static' && { onClickCapture: ignore }),
+        ...styles.row({ className, style: props.style, vars }),
+        'data-action': action === 'none' || element === 'radio' ? undefined : action,
+        'data-disabled': disabled || undefined,
+        // A radio row draws its own border, so it never takes a divider.
+        'data-divider': element === 'radio' ? undefined : '',
+        'data-radio': element === 'radio' ? '' : undefined,
+        children: (
+          <>
+            {/* A disabled `fieldset` disables the native controls of a static row, which takes
+                them out of the Tab order and keeps the row's text perceivable. `Switch` and
+                `Checkbox` render a `span`, so they read the row's state from the context. */}
+            {element === 'static' ? (
+              <fieldset disabled={disabled} role="none" {...styles.content()}>
+                <RowDisabled.Context value={Boolean(disabled)}>{children}</RowDisabled.Context>
+              </fieldset>
+            ) : (
+              <span {...styles.content()}>{children}</span>
+            )}
+            {action === 'navigation' && element !== 'radio' && (
+              <ChevronRight {...styles.indicator()} />
+            )}
+            {element === 'radio' && (
+              <BaseUiRadio.Radio.Root disabled={disabled} value={value} {...styles.radio()} />
+            )}
+          </>
+        ),
+      },
+      ref,
+      // A radio row is the `label` of its radio, so another element cannot replace it.
+      render: element === 'radio' ? undefined : render,
+    })
+  }
+
+  export namespace Row {
+    export type Props = Omit<useRender.ComponentProps<'div'>, 'children'> &
+      zyzz.Props.Variants<typeof styles.row> & {
+        /**
+         * `navigation` shows a trailing chevron for a row that opens something, and makes the row a
+         * button unless `render` is set. A row with a `value` ignores it.
+         * @default 'none'
+         */
+        action?: 'navigation' | 'none' | undefined
+        /** Content of the row, laid out 12px apart. */
+        children?: ReactNode | undefined
+        /**
+         * Dims the row to 40% and disables it: a button row sets `disabled`, a radio row disables
+         * its radio and ignores presses, and any other row sets `aria-disabled` and ignores
+         * presses. A static row also disables the native controls inside it, such as a Copy
+         * `Button`, and every `Switch` and `Checkbox`, which leave the Tab order and ignore presses
+         * and input. Its children receive no presses, and its text stays readable.
+         * @default false
+         */
+        disabled?: boolean | undefined
+        /**
+         * Makes the row a radio of the `ListGroup.RadioGroup` around it, identified by this value.
+         * A radio row ignores `render`. Absent, the row is a button, a link or static content.
+         */
+        value?: string | undefined
+      }
+  }
+
+  /** Primary text of a row, usually inside `ListGroup.Info` above a `ListGroup.Description`. */
+  export function Title(props: Title.Props) {
+    const { className, vars, ...attributes } = props
+
+    return (
+      <span
+        {...attributes}
+        data-title=""
+        {...styles.title({ className, style: props.style, vars })}
+      />
+    )
+  }
+
+  export namespace Title {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.title>
+  }
+}
+
+/** Cancels a press on a disabled row and keeps it from the elements around the row. */
+function ignore(event: MouseEvent<HTMLElement>) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+namespace styles {
+  export const chips = variants(
+    { base: { columnGap: '4', display: 'flex', flexWrap: 'wrap', rowGap: '4' } },
+    { id: 'tds/web/list-group/chips' },
+  )
+
+  export const content = style(
+    {
+      alignItems: 'center',
+      // The content of a static row is a `fieldset`, whose border, margin, and padding are reset.
+      border: 'none !custom',
+      columnGap: '12',
+      display: 'flex',
+      flexGrow: '1 !custom',
+      margin: '0',
+      minWidth: '0',
+      padding: '0',
+      textAlign: 'start',
+      selectors: {
+        // A select in a row reads as the row's value: it hugs its value at the end in the row's
+        // type, fits the row's 32px control height, and draws no fill, since the row draws the
+        // hover. A disabled or invalid trigger keeps its own fill. Its box ends on the content
+        // edge, so it never overflows the container, and its chevron sits 8px inside its focus
+        // ring. `:is(*, :focus-visible)` outweighs the trigger's focus padding, so focus never moves
+        // the value. `Select.Trigger` marks itself, so text-input comboboxes keep their field and a
+        // trigger rendered as another element still matches.
+        '& [data-select-trigger][role="combobox"]:is(*, :focus-visible)': {
+          flex: '0 1 auto !custom',
+          font: 'inherit !custom',
+          height: '32',
+          letterSpacing: 'inherit !custom',
+          marginInlineStart: 'auto !custom',
+          minWidth: '0',
+          paddingInline: '8',
+          width: 'auto !custom',
+        },
+        '& [data-select-trigger]:not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
+          {
+            backgroundColor: 'transparent !custom',
+          },
+        '& [data-select-trigger] > [data-select-value]': { flex: '0 1 auto !custom' },
+      },
+    },
+    { id: 'tds/web/list-group/content' },
+  )
+
+  export const description = variants(
+    { base: { color: 'content.secondary', display: 'block', typography: 'body.b3' } },
+    { id: 'tds/web/list-group/description' },
+  )
+
+  export const heading = variants(
+    {
+      base: {
+        color: 'content.tertiary',
+        display: 'block',
+        margin: '0',
+        paddingBlockEnd: '8',
+        typography: 'body.b3Strong',
+      },
+    },
+    { id: 'tds/web/list-group/heading' },
+  )
+
+  export const icon = variants(
+    {
+      base: {
+        color: 'content.tertiary',
+        display: 'inline-flex',
+        flexShrink: '0 !custom',
+        fontSize: '16',
+        selectors: { '& > svg': { height: '16', width: '16' } },
+      },
+    },
+    { id: 'tds/web/list-group/icon' },
+  )
+
+  export const indicator = style(
+    { color: 'content.tertiary', flexShrink: '0 !custom', fontSize: '16' },
+    { id: 'tds/web/list-group/indicator' },
+  )
+
+  export const info = variants(
+    {
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: '1 !custom',
+        minWidth: '0',
+        rowGap: '4',
+      },
+      defaultVariants: { size: 'medium' },
+      variants: {
+        size: {
+          large: {
+            rowGap: '2',
+            selectors: {
+              '& > [data-description]': { typography: 'mono.m1' },
+              '& > [data-title]': { typography: 'body.b1Strong' },
+            },
+          },
+          medium: {},
+        },
+      },
+    },
+    { id: 'tds/web/list-group/info' },
+  )
+
+  export const label = variants(
+    {
+      base: {
+        color: 'content.secondary',
+        flexShrink: '0 !custom',
+        marginInlineEnd: 'auto !custom',
+      },
+    },
+    { id: 'tds/web/list-group/label' },
+  )
+
+  export const meter = variants(
+    { base: { alignItems: 'center', columnGap: '12', display: 'flex', flexShrink: '0 !custom' } },
+    { id: 'tds/web/list-group/meter' },
+  )
+
+  // Base UI sets the width inline. The track clips the square end of the used part.
+  export const meterIndicator = style(
+    {
+      backgroundColor: 'content.primary',
+      transitionDuration: '240',
+      transitionProperty: 'width',
+      transitionTimingFunction: 'spring',
+      '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none' },
+    },
+    { id: 'tds/web/list-group/meter-indicator' },
+  )
+
+  export const meterTrack = style(
+    {
+      backgroundColor: 'container.strong',
+      borderRadius: 'full',
+      cornerShape: 'round',
+      flexShrink: '0 !custom',
+      height: '4',
+      overflow: 'hidden',
+      width: '64',
+    },
+    { id: 'tds/web/list-group/meter-track' },
+  )
+
+  // The value column keeps 112px, so the bars of neighboring rows line up.
+  export const meterValue = style(
+    {
+      color: 'content.primary',
+      minWidth: '7rem !custom',
+      textAlign: 'end',
+      typography: 'body.b3',
+      whiteSpace: 'nowrap',
+    },
+    { id: 'tds/web/list-group/meter-value' },
+  )
+
+  // A 16px ring that thickens from 1.5px to 5px when checked. The row draws the focus ring.
+  export const radio = style(
+    {
+      borderRadius: 'full',
+      boxShadow: 'inset 0 0 0 1.5px currentColor !custom',
+      boxSizing: 'border-box',
+      color: 'line.secondary',
+      cornerShape: 'round',
+      display: 'block',
+      flexShrink: '0 !custom',
+      height: '16',
+      outline: 'none !custom',
+      transitionDuration: '160',
+      transitionProperty: 'box-shadow, color',
+      transitionTimingFunction: 'snappy',
+      width: '16',
+      selectors: {
+        '&[data-checked]': {
+          boxShadow: 'inset 0 0 0 5px currentColor !custom',
+          color: 'content.primary',
+        },
+      },
+      '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'color' },
+    },
+    { id: 'tds/web/list-group/radio' },
+  )
+
+  export const radioGroup = variants(
+    {
+      base: {
+        color: 'content.primary',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '12',
+        typography: 'body.b2',
+      },
+    },
+    { id: 'tds/web/list-group/radio-group' },
+  )
+
+  export const root = variants(
+    {
+      base: {
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        display: 'block',
+        typography: 'body.b3',
+        selectors: {
+          '& [data-divider]': { position: 'relative' },
+          '& [data-divider]::before': {
+            backgroundColor: 'line.secondary',
+            content: '"" !custom',
+            height: '1',
+            insetBlockStart: '0',
+            insetInline: '0',
+            pointerEvents: 'none',
+            position: 'absolute',
+          },
+          '& > [data-divider]:first-child::before': { display: 'none' },
+          // A title over a description pads 12px, which fits a 40px leading image.
+          '& [data-divider]:has([data-info])': { paddingBlock: '12' },
+          // A row with a meter pads 10px, which centers a 24px agent logo in 44px.
+          '& [data-divider]:has([role="meter"])': { paddingBlock: '10' },
+          // A hovered row's fill would otherwise sit between two visible separators.
+          '& [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled]):hover::before':
+            { display: 'none' },
+          '& [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled]):hover + [data-divider]::before':
+            { display: 'none' },
+        },
+      },
+      defaultVariants: { dividers: true, variant: 'plain' },
+      variants: {
+        dividers: {
+          false: { selectors: { '& [data-divider]::before': { display: 'none' } } },
+          true: {},
+        },
+        // The block keeps a 16px radius with 16px sides, below the usual one and a half times.
+        variant: {
+          boxed: {
+            backgroundColor: 'background.secondary',
+            borderColor: 'line.secondary',
+            borderRadius: 'sm',
+            borderStyle: 'solid',
+            borderWidth: 'regular',
+            isolation: 'isolate !custom',
+            paddingBlock: '8',
+            paddingInline: '16',
+            selectors: {
+              // A large title leads the group from the block's own top padding.
+              '& > [data-divider]:first-child:has([data-info][data-size="large"])': {
+                paddingBlockStart: '0',
+              },
+              // A row's fill is a layer behind the row that reaches the border across the block's
+              // 16px sides, and its 8px above the first row and below the last. The row keeps its
+              // place, and the fill rounds inside the border at the block's corners.
+              '& > [data-divider]::after': {
+                backgroundColor: 'transparent !custom',
+                content: '"" !custom',
+                insetBlock: '0',
+                insetInline: '-16',
+                position: 'absolute',
+                transitionDuration: '160',
+                transitionProperty: 'background-color',
+                transitionTimingFunction: 'snappy',
+                zIndex: '-1 !custom',
+              },
+              '& > [data-divider]:first-child::after': {
+                borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                insetBlockStart: '-8',
+              },
+              '& > [data-divider]:last-child::after': {
+                borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                insetBlockEnd: '-8',
+              },
+              '& > [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover::after':
+                { backgroundColor: 'container.regular' },
+              '& > [data-divider]:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active::after':
+                {
+                  backgroundColor: 'container.strong',
+                },
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+              selectors: { '& > [data-divider]::after': { transitionProperty: 'none' } },
+            },
+          },
+          plain: {},
+          spaced: {
+            backgroundColor: 'background.secondary',
+            borderColor: 'line.secondary',
+            borderRadius: 'sm',
+            borderStyle: 'solid',
+            borderWidth: 'regular',
+            display: 'flex',
+            flexDirection: 'column',
+            padding: '16',
+            rowGap: '12',
+            typography: 'body.b2',
+            selectors: {
+              '& [data-divider]::before': { display: 'none' },
+              '& [data-divider], & [data-divider]:is(:has([data-info]), :has([role="meter"]))': {
+                minHeight: '0',
+                paddingBlock: '0',
+              },
+            },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/list-group/root' },
+  )
+
+  // 36px, with block padding that leaves room for a 32px control.
+  export const row = variants(
+    {
+      base: {
+        alignItems: 'center',
+        backgroundColor: 'transparent !custom',
+        border: 'none !custom',
+        boxSizing: 'border-box',
+        color: 'inherit !custom',
+        columnGap: '12',
+        display: 'flex',
+        font: 'inherit !custom',
+        minHeight: '36',
+        outlineColor: 'transparent !custom',
+        outlineOffset: '0',
+        outlineStyle: 'solid !custom',
+        outlineWidth: '2',
+        paddingBlock: '2',
+        paddingInline: '0',
+        textAlign: 'start',
+        textDecoration: 'none !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, box-shadow, opacity, outline-color, outline-offset',
+        transitionTimingFunction: 'snappy',
+        width: '100% !custom',
+        selectors: {
+          // The row keeps Figma's List Row geometry, flush with its content, and its fill bleeds
+          // 12px past the content at each side. A shadow on each side draws the bleed: an outer
+          // shadow never paints under the row, so a translucent fill never doubles. A dialog body
+          // scrolls and clips at its 4px padding, so the bleed there is 4px, except in a surface,
+          // whose rows draw none. A boxed group draws the fill behind its rows. A static row that holds an enabled control takes the same fill
+          // on hover, without becoming pressable.
+          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not([data-radio])':
+            { borderRadius: 'xs' },
+          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio], [data-variant="boxed"] > *):hover':
+            {
+              backgroundColor: 'container.regular',
+              boxShadow: `-12px 0 0 0 ${vars.color.container.regular}, 12px 0 0 0 ${vars.color.container.regular} !custom`,
+            },
+          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled])': {
+            cursor: 'pointer',
+          },
+          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled], [data-variant="boxed"] > *):active':
+            {
+              backgroundColor: 'container.strong',
+              boxShadow: `-12px 0 0 0 ${vars.color.container.strong}, 12px 0 0 0 ${vars.color.container.strong} !custom`,
+            },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover':
+            {
+              boxShadow: `-4px 0 0 0 ${vars.color.container.regular}, 4px 0 0 0 ${vars.color.container.regular} !custom`,
+            },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active':
+            {
+              boxShadow: `-4px 0 0 0 ${vars.color.container.strong}, 4px 0 0 0 ${vars.color.container.strong} !custom`,
+            },
+          '&:is(a[href], button, [role="button"]):focus-visible': {
+            outlineColor: 'border.focus',
+            outlineOffset: '-2',
+          },
+          // A radio row is a bordered block whose border thickens when checked and focused, as
+          // Figma lays out its stroke, so the row grows by 1px a side for focus.
+          '&[data-radio]': {
+            backgroundColor: 'background.elevated',
+            borderColor: 'line.secondary',
+            borderRadius: 'xs',
+            borderStyle: 'solid',
+            borderWidth: 'regular',
+            cursor: 'pointer',
+            paddingBlock: '12',
+            paddingInline: '16',
+            transitionProperty: 'background-color, border-color, opacity, scale !custom',
+            userSelect: 'none',
+          },
+          '&[data-radio]:hover:not(:has(> [data-checked], > :focus-visible, > [data-disabled]))': {
+            borderColor: 'line.primary',
+          },
+          '&[data-radio]:has(> [data-checked])': {
+            borderColor: 'content.primary',
+            borderWidth: '1.5px !custom',
+          },
+          '&[data-radio]:has(> [data-checked]):hover:not(:has(> [data-disabled]))': {
+            backgroundColor: 'container.regular',
+          },
+          '&[data-radio]:has(> [role="radio"]:focus-visible)': {
+            borderColor: 'border.focus',
+            borderWidth: 'thick',
+          },
+          '&[data-radio]:active:not(:has(> [data-disabled]))': { scale: 'press' },
+          '&[data-disabled], &[data-radio]:has(> [data-disabled])': {
+            cursor: 'default',
+            opacity: 'disabled',
+          },
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+          transitionProperty: 'background-color, box-shadow, opacity, outline-color',
+          selectors: {
+            '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
+            '&[data-radio]:active': { scale: 'none !custom' },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/list-group/row' },
+  )
+
+  export const title = variants(
+    { base: { color: 'content.primary', display: 'block', typography: 'body.b2Strong' } },
+    { id: 'tds/web/list-group/title' },
+  )
+}