@cdx-ui/components 0.2.2 → 0.2.4

package/docs/components/date-time-field/content.md

@@ -0,0 +1,157 @@
+# Date Time Field (https://design.candescent.com/docs/components/date-time-field)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11787-10754)
+
+`DateTimeField` is a segmented input for typing a date and time together. Values are `DateTimeId` strings — local ISO with no timezone, e.g. `2026-07-28T10:01`. Its `granularity` controls which time segments appear, and `hour12` toggles the AM/PM segment.
+
+```tsx
+import { DateTimeField } from '@cdx-ui/components';
+```
+
+## Basic
+
+Wrap `DateTimeField.Input` in `DateTimeField.Group` and render each segment with a `DateTimeField.Segment`. Control the value with `value` and `onValueChange`. Empty segments show localized placeholders until the user types.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeField } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimeFieldBasicDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <DateTimeField
+      value={value}
+      onValueChange={setValue}
+      granularity="minute"
+      hour12
+      aria-label="Appointment"
+      className="w-full max-w-xs"
+    >
+      <DateTimeField.Group>
+        <DateTimeField.Input>
+          {(segment) => <DateTimeField.Segment segment={segment} />}
+        </DateTimeField.Input>
+      </DateTimeField.Group>
+    </DateTimeField>
+  );
+}
+```
+
+## 24-hour clock
+
+Set `hour12` to `false` to enter the time on a 24-hour clock, which drops the AM/PM segment.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeField } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimeField24HourDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <DateTimeField
+      value={value}
+      onValueChange={setValue}
+      granularity="minute"
+      hour12={false}
+      aria-label="Appointment"
+      className="w-full max-w-xs"
+    >
+      <DateTimeField.Group>
+        <DateTimeField.Input>
+          {(segment) => <DateTimeField.Segment segment={segment} />}
+        </DateTimeField.Input>
+      </DateTimeField.Group>
+    </DateTimeField>
+  );
+}
+```
+
+## API
+
+### DateTimeField
+
+Root of the compound. Owns the value, `granularity`, `hour12`, and `locale`, and provides styling context to `DateTimeField.Group`. It composes the segmented parts of `DatePicker`'s sibling [`DateField`](https://design.candescent.com/docs/components/date-field/content.md) with time segments.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `variant?` | `'outline' \| null` | — | — |
+| `size?` | `'default' \| 'small' \| null` | — | — |
+| `fullWidth?` | `boolean` | — | When true (the default), the group stretches to fill its container; when false, it hugs the segments. |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `DateTimeId` | — | — |
+| `defaultValue?` | `DateTimeId` | — | — |
+| `onValueChange?` | `((value: DateTimeId) => void)` | — | Called with the new `DateTimeId`, or `undefined` when the field is cleared. |
+| `granularity?` | `'day' \| 'hour' \| 'minute' \| 'second'` | — | — |
+| `locale?` | `string` | — | — |
+| `hour12?` | `boolean` | — | Force a 12- or 24-hour clock. Defaults to the locale's convention when omitted. |
+| `labels?` | `Partial<DateComponentLabels>` | — | — |
+| `isDisabled?` | `boolean` | — | — |
+| `isReadOnly?` | `boolean` | — | — |
+| `isInvalid?` | `boolean` | — | — |
+| `isRequired?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### DateTimeField.Group
+
+Input chrome that surrounds the segments, shared with [`DateField.Group`](https://design.candescent.com/docs/components/date-field/content.md). Add a trailing `DateTimeField.Suffix` inside it for a picker trigger.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `variant?` | `'outline' \| null` | — | — |
+| `size?` | `'default' \| 'small' \| null` | — | — |
+| `fullWidth?` | `boolean` | — | — |
+| `key?` | `React.Key \| null` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### DateTimeField.Input
+
+Renders the editable segments. Pass a render function as `children` that returns a `DateTimeField.Segment` for each segment.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children` | `(segment: import("@cdx-ui/formatters").DateSegment) => ReactNode` | — | — |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `key?` | `React.Key \| null` | — | — |
+
+### DateTimeField.Segment
+
+A single editable or literal segment, yielded to the `DateTimeField.Input` render function so a specific segment type can be styled.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `segment` | `DateSegment` | — | — |
+| `key?` | `React.Key \| null` | — | — |
+
+### DateTimeField.Suffix
+
+Trailing content inside `DateTimeField.Group`, typically a picker trigger icon, shared with [`DateField.Suffix`](https://design.candescent.com/docs/components/date-field/content.md). Set `asChild` to render a custom trigger element in its place.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `asChild?` | `boolean` | — | — |
+| `key?` | `React.Key \| null` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Accessibility
+
+Give the field an accessible name with `aria-label` or by pairing it with `Field.Label`; the root carries no label of its own. Each segment is individually focusable and editable with the keyboard. While `isDisabled` or `isReadOnly`, segments do not accept edits.

package/docs/components/date-time-list/content.md

@@ -0,0 +1,105 @@
+# Date Time List (https://design.candescent.com/docs/components/date-time-list)
+
+`DateTimeList` presents a date and time as scrollable wheel columns. Values are `DateTimeId` strings — local ISO with no timezone, e.g. `2026-07-28T10:01`. It renders its columns from `granularity` and `hour12`, or you can compose `DateTimeList.DateColumn`, `DateTimeList.TimeColumn`, and `DateTimeList.PeriodColumn` explicitly.
+
+```tsx
+import { DateTimeList } from '@cdx-ui/components';
+```
+
+## Basic
+
+Control the value with `value` and `onValueChange`. With no children, `DateTimeList` renders the columns implied by `granularity` and `hour12` — a date column, time columns, and an AM/PM column.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeList } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimeListBasicDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <DateTimeList
+      value={value}
+      onValueChange={setValue}
+      granularity="minute"
+      hour12
+      aria-label="Appointment"
+      className="w-full max-w-xs"
+    />
+  );
+}
+```
+
+## Explicit columns
+
+Compose `DateTimeList.DateColumn`, `DateTimeList.TimeColumn`, and `DateTimeList.PeriodColumn` as children to control which columns render and in what order.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeList } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimeListColumnsDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <DateTimeList
+      value={value}
+      onValueChange={setValue}
+      granularity="minute"
+      hour12
+      aria-label="Appointment"
+      className="w-full max-w-xs"
+    >
+      <DateTimeList.DateColumn />
+      <DateTimeList.TimeColumn />
+      <DateTimeList.PeriodColumn />
+    </DateTimeList>
+  );
+}
+```
+
+## API
+
+### DateTimeList
+
+Root of the compound. Owns the selected value, `granularity`, `hour12`, and `locale`, and renders the wheel columns. It is the standalone surface that [`DateTimePicker`](https://design.candescent.com/docs/components/date-time-picker/content.md) presents through `DateTimePicker.List`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `DateTimeId` | — | — |
+| `defaultValue?` | `DateTimeId` | — | — |
+| `onValueChange?` | `((value: DateTimeId) => void)` | — | — |
+| `onUserInteract?` | `(() => void)` | — | — |
+| `granularity?` | `'day' \| 'hour' \| 'minute' \| 'second'` | — | — |
+| `locale?` | `string` | — | — |
+| `hour12?` | `boolean` | — | Force a 12- or 24-hour clock. Defaults to the locale's convention when omitted. |
+| `disabled?` | `boolean` | — | — |
+| `minValue?` | `DateTimeId` | — | Earliest selectable date-time. Dates before it are hidden; times are clamped. Build with `dateTimeId(...)`. |
+| `maxValue?` | `DateTimeId` | — | Latest selectable date-time. Dates after it are hidden; times are clamped. Build with `dateTimeId(...)`. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### DateTimeList.DateColumn
+
+The scrollable column of dates. By default the wheel spans ±90 days around today; when the
+selected date falls outside that window, the list recenters on the selected date so controlled
+values remain visible and selected. Takes no own props.
+
+### DateTimeList.TimeColumn
+
+The scrollable time columns. Renders an hour column, plus minute and second columns when `granularity` includes them. Takes no own props.
+
+### DateTimeList.PeriodColumn
+
+The AM/PM column, meaningful only when `hour12` is set. Takes no own props.
+
+## Accessibility
+
+Give the list an accessible name with `aria-label` or by pairing it with `Field.Label`. Each column is a list of pressable options that report their selected state, so a value can be chosen by scrolling the wheel or by activating an option directly. While `disabled`, the columns do not accept changes.

package/docs/components/date-time-picker/content.md

@@ -0,0 +1,272 @@
+# Date Time Picker (https://design.candescent.com/docs/components/date-time-picker)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-datetimepicker--dialog)
+
+`DateTimePicker` pairs a segmented `DateTimeField` with a scroll-wheel `DateTimeList` and coordinates the surface that presents it. Values are `DateTimeId` strings — local ISO with no timezone, e.g. `2026-07-28T10:01`.
+
+```tsx
+import { DateTimeField, DateTimePicker, DateTimeList, Field } from '@cdx-ui/components';
+```
+
+## Basic
+
+Because the date and time field is editable, keep the `DateTimePicker.Trigger` around the suffix icon only, so typing in the field does not open the columns. Then present the columns — `DateTimePicker.Popover` anchors to the field and is the preferred surface on web. For surface-driven selection with no typing, you can instead wrap the whole `DateTimeField.Group` in the trigger, as [DateRangePicker](https://design.candescent.com/docs/components/date-range-picker/content.md) and [MonthPicker](https://design.candescent.com/docs/components/month-picker/content.md) do.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeField, DateTimePicker, Field } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimePickerBasicDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <Field className="w-full max-w-xs">
+      <DateTimePicker value={value} onValueChange={setValue} granularity="minute" hour12>
+        <Field.Label>Appointment</Field.Label>
+        <DateTimeField.Group fullWidth>
+          <DateTimeField.Input>
+            {(segment) => <DateTimeField.Segment segment={segment} />}
+          </DateTimeField.Input>
+          <DateTimeField.Suffix>
+            <DateTimePicker.Trigger>
+              <DateTimePicker.TriggerIndicator />
+            </DateTimePicker.Trigger>
+          </DateTimeField.Suffix>
+        </DateTimeField.Group>
+        <DateTimePicker.Popover>
+          <DateTimePicker.List aria-label="Appointment" />
+        </DateTimePicker.Popover>
+      </DateTimePicker>
+    </Field>
+  );
+}
+```
+
+## Dialog
+
+Use `DateTimePicker.Dialog` to present the columns in a modal surface.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeField, DateTimePicker, Field } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimePickerDialogDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <Field className="w-full max-w-xs">
+      <DateTimePicker value={value} onValueChange={setValue} granularity="minute" hour12>
+        <Field.Label>Appointment</Field.Label>
+        <DateTimeField.Group fullWidth>
+          <DateTimeField.Input>
+            {(segment) => <DateTimeField.Segment segment={segment} />}
+          </DateTimeField.Input>
+          <DateTimeField.Suffix>
+            <DateTimePicker.Trigger>
+              <DateTimePicker.TriggerIndicator />
+            </DateTimePicker.Trigger>
+          </DateTimeField.Suffix>
+        </DateTimeField.Group>
+        <DateTimePicker.Dialog>
+          <DateTimePicker.List aria-label="Appointment" />
+        </DateTimePicker.Dialog>
+      </DateTimePicker>
+    </Field>
+  );
+}
+```
+
+## Bottom sheet
+
+Use `DateTimePicker.BottomSheet` to present the columns in a sheet that slides up from the bottom — the preferred surface on native. It wires open state only, so compose `BottomSheet.Header` and `BottomSheet.Content` as its children.
+
+```tsx
+import { useState } from 'react';
+import { BottomSheet, DateTimeField, DateTimePicker, Field } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+import { PickerBottomSheetFrame } from './_frame';
+
+export default function DateTimePickerBottomSheetDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <PickerBottomSheetFrame>
+      <Field className="w-full max-w-xs">
+        <DateTimePicker
+          value={value}
+          onValueChange={setValue}
+          isOpen={open}
+          onOpenChange={setOpen}
+          granularity="minute"
+          hour12
+        >
+          <Field.Label>Appointment</Field.Label>
+          <DateTimeField.Group fullWidth>
+            <DateTimeField.Input>
+              {(segment) => <DateTimeField.Segment segment={segment} />}
+            </DateTimeField.Input>
+            <DateTimeField.Suffix>
+              <DateTimePicker.Trigger>
+                <DateTimePicker.TriggerIndicator />
+              </DateTimePicker.Trigger>
+            </DateTimeField.Suffix>
+          </DateTimeField.Group>
+          <DateTimePicker.BottomSheet>
+            <BottomSheet.Header title="Select date and time" onClose={() => setOpen(false)} />
+            <BottomSheet.Content>
+              <DateTimePicker.List aria-label="Appointment" />
+            </BottomSheet.Content>
+          </DateTimePicker.BottomSheet>
+        </DateTimePicker>
+      </Field>
+    </PickerBottomSheetFrame>
+  );
+}
+```
+
+## Standalone
+
+`DateTimePicker` has no inline surface. When the field and columns share the screen, render a `DateTimeList` on its own — it renders its columns from `granularity` and `hour12`, or you can compose `DateTimeList.DateColumn`, `DateTimeList.TimeColumn`, and `DateTimeList.PeriodColumn` explicitly.
+
+```tsx
+import { useState } from 'react';
+import { DateTimeList } from '@cdx-ui/components';
+import type { DateTimeId } from '@cdx-ui/formatters';
+
+export default function DateTimePickerStandaloneDemo() {
+  const [value, setValue] = useState<DateTimeId | undefined>();
+
+  return (
+    <DateTimeList
+      className="w-full max-w-xs"
+      value={value}
+      onValueChange={setValue}
+      granularity="minute"
+      hour12
+      aria-label="Appointment"
+    >
+      <DateTimeList.DateColumn />
+      <DateTimeList.TimeColumn />
+      <DateTimeList.PeriodColumn />
+    </DateTimeList>
+  );
+}
+```
+
+## Custom trigger
+
+Set `asChild` on `DateTimePicker.Trigger` to open the columns from a custom pressable such as an `IconButton`, keeping the segmented field for direct entry. The trigger merges its press and expanded-state accessibility props onto the child.
+
+```tsx
+import { Box, DateTimeField, DateTimePicker, Field, IconButton } from '@cdx-ui/components';
+import { Schedule } from '@cdx-ui/icons';
+
+export default function DateTimePickerCustomTriggerDemo() {
+  return (
+    <Field className="w-full max-w-xs">
+      <DateTimePicker granularity="minute" hour12>
+        <Field.Label>Appointment</Field.Label>
+        <Box className="flex-row items-center gap-2">
+          <DateTimeField.Group fullWidth>
+            <DateTimeField.Input>
+              {(segment) => <DateTimeField.Segment segment={segment} />}
+            </DateTimeField.Input>
+          </DateTimeField.Group>
+          <DateTimePicker.Trigger asChild>
+            <IconButton as={Schedule} variant="ghost" accessibilityLabel="Open time picker" />
+          </DateTimePicker.Trigger>
+        </Box>
+        <DateTimePicker.Popover>
+          <DateTimePicker.List aria-label="Appointment" />
+        </DateTimePicker.Popover>
+      </DateTimePicker>
+    </Field>
+  );
+}
+```
+
+## API
+
+### DateTimePicker
+
+Root of the compound. Owns the selected value, open state, `granularity`, `hour12`, `locale`, and `labels`, and provides `DateTimeField` styling context to the field. Compose exactly one presentation surface — `DateTimePicker.Popover`, `DateTimePicker.Dialog`, or `DateTimePicker.BottomSheet` — per picker.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `DateTimeId` | — | — |
+| `defaultValue?` | `DateTimeId` | — | — |
+| `onValueChange?` | `((value: DateTimeId) => void)` | — | Called with the new `DateTimeId`, or `undefined` when the selection is cleared. |
+| `isOpen?` | `boolean` | — | Controlled open state. Use `defaultOpen` for the uncontrolled variant. |
+| `defaultOpen?` | `boolean` | — | — |
+| `onOpenChange?` | `((open: boolean) => void)` | — | — |
+| `isDisabled?` | `boolean` | — | — |
+| `isReadOnly?` | `boolean` | — | — |
+| `isInvalid?` | `boolean` | — | — |
+| `isRequired?` | `boolean` | — | — |
+| `minValue?` | `DateTimeId` | — | Earliest selectable date-time, applied to the scroll list. Build with `dateTimeId(...)`. |
+| `maxValue?` | `DateTimeId` | — | Latest selectable date-time, applied to the scroll list. Build with `dateTimeId(...)`. |
+| `name?` | `string` | — | — |
+| `locale?` | `string` | — | — |
+| `labels?` | `Partial<DateComponentLabels>` | — | — |
+| `granularity?` | `'day' \| 'hour' \| 'minute' \| 'second'` | — | Which field segments and list columns to show, from coarsest (`day`) to finest (`second`). |
+| `hour12?` | `boolean` | — | Force a 12-hour clock (AM/PM column) or a 24-hour clock. Defaults to the locale's convention when omitted. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### DateTimePicker.Trigger
+
+Toggles the presentation surface and announces its expanded state. For an editable field, wrap only the `DateTimePicker.TriggerIndicator` inside a `DateTimeField.Suffix`; for surface-driven selection, wrap the whole `DateTimeField.Group` so the entire field is the tap target. Its accessible name defaults to the picker's `openDateTimePicker` label. Set `asChild` to merge its press and accessibility props onto a custom interactive child — for example an `IconButton` — instead of rendering the default pressable.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `asChild?` | `boolean` | — | Merge press / a11y props onto the single child instead of rendering a `Pressable`. Use when the trigger should be another interactive host (e.g. `IconButton`). For a larger field hit target, prefer wrapping `DateField.Group` as children without `asChild` so the outer `Pressable` covers the whole input chrome. |
+| `key?` | `React.Key \| null` | — | — |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### DateTimePicker.TriggerIndicator
+
+Renders the clock icon inside `DateTimePicker.Trigger`. Takes no props.
+
+### DateTimePicker.List
+
+Renders the picker's `DateTimeList`, wired to the shared value, `granularity`, `hour12`, and `locale`. Accepts all `DateTimeList` props except those the picker controls (`value`, `onValueChange`, `granularity`, `hour12`, and `locale`).
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
+| `asChild?` | `boolean` | — | — |
+| `defaultValue?` | `DateTimeId` | — | — |
+| `disabled?` | `boolean` | — | — |
+| `key?` | `React.Key \| null` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### DateTimePicker.Popover
+
+Presents the columns in an anchored popover, positioned above or below the field based on available space. Wires the surface's open state and renders its children.
+
+### DateTimePicker.Dialog
+
+Presents the columns in a modal dialog. Wires the surface's open state and renders its children.
+
+### DateTimePicker.BottomSheet
+
+Presents the columns in a bottom sheet, the preferred surface on native. It wires open state only — compose `BottomSheet.Header` and `BottomSheet.Content` (or any sheet layout) as its children.
+
+## Accessibility
+
+Give the picker an accessible name with `Field.Label` or `aria-label`, and pass `aria-label` to `DateTimePicker.List` to name the columns. `DateTimePicker.Trigger` announces the localized `openDateTimePicker` label, which `labels` can override. Each column is a list of pressable options that report their selected state, so a value can be chosen by scrolling or by activating an option directly. While `disabled`, the trigger does not open a surface.