@cdx-ui/components 0.3.3 → 0.3.4

package/coverage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 92.9%"><title>coverage: 92.9%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">92.9%</text><text x="835" y="150" fill-opacity=".3" textLength="370">92.9%</text></g><text x="835" y="140" textLength="370">92.9%</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 93.1%"><title>coverage: 93.1%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">93.1%</text><text x="835" y="150" fill-opacity=".3" textLength="370">93.1%</text></g><text x="835" y="140" textLength="370">93.1%</text></g></g></svg>

package/docs/components/color-field/content.md

@@ -53,7 +53,7 @@ Owns standalone text and color state or edits the shared value when nested in `C
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `value?` | `Color` | — | — |
 | `defaultValue?` | `Color` | — | — |
@@ -79,7 +79,7 @@ Provides the styled input shell and optional slots.
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `asChild?` | `boolean` | — | — |
 | `fullWidth?` | `boolean` | — | — |

package/docs/components/content.md

@@ -14,12 +14,12 @@
 - [Currency Input](https://design.candescent.com/docs/components/currency-input/content.md) — A calculator-style monetary input that formats digits as currency while the user types.
 - [Field](https://design.candescent.com/docs/components/field/content.md) — A form-control wrapper that coordinates labels, supporting text, validation messages, and shared state.
 - [Form](https://design.candescent.com/docs/components/form/content.md) — A container that spaces related fields vertically and renders a form on web or a view on native.
-- [Input Field](https://design.candescent.com/docs/components/input/content.md) — A single-line text entry with optional label, helper text, and adornments.
+- [Input](https://design.candescent.com/docs/components/input/content.md) — A single-line text entry with optional label, helper text, and adornments.
 - [Menu](https://design.candescent.com/docs/components/menu/content.md) — Menus present actions or selectable options in an anchored overlay or a standalone list surface.
-- [OTP Input Field](https://design.candescent.com/docs/components/otp-input/content.md) — A controlled multi-cell input for one-time passwords and verification codes.
+- [OTP Input](https://design.candescent.com/docs/components/otp-input/content.md) — A controlled multi-cell input for one-time passwords and verification codes.
 - [Radio](https://design.candescent.com/docs/components/radio/content.md) — A radio group is an input control that allows the user to select a single option from a set of mutually exclusive options.
 - [Range Calendar](https://design.candescent.com/docs/components/range-calendar/content.md) — A two-tap day grid for selecting a start and end date, with a continuous range band, month navigation, and a year picker.
-- [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one option from a dropdown list.
+- [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one or more options from a dropdown list.
 - [Textarea](https://design.candescent.com/docs/components/textarea/content.md) — A multi-line text entry for longer free-form content.
 - [Slider](https://design.candescent.com/docs/components/slider/content.md) — A control for selecting a numeric value along a track.
 - [Color Picker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
@@ -58,7 +58,7 @@
 - [Avatar](https://design.candescent.com/docs/components/avatar/content.md) — A visual representation of a user or entity, displayed as an image, initials, or fallback icon.
 - [Carousel](https://design.candescent.com/docs/components/carousel/content.md) — A swipeable, paginated carousel for promotional banners, onboarding, and card browsing. Wraps react-native-reanimated-carousel with token-styled Pagination and Prev/Next nav button compounds plus useCarousel hook.
 - [Divider](https://design.candescent.com/docs/components/divider/content.md) — A horizontal or vertical separator for grouping related content, with an optional inline label.
-- [FDIC Digital Sign](https://design.candescent.com/docs/components/insurance-disclosure/content.md) — Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding.
+- [Insurance Disclosure](https://design.candescent.com/docs/components/insurance-disclosure/content.md) — Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding.
 - [Icon](https://design.candescent.com/docs/components/icon/content.md) — A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support.
 - [Image](https://design.candescent.com/docs/components/image/content.md) — Displays local or remote images across native and web platforms.
 - [List Item](https://design.candescent.com/docs/components/list-item/content.md) — A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows.

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

@@ -74,7 +74,7 @@ Root of the compound. Owns the value, `mode`, and `locale`, and provides `varian
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | When true (the default), the group stretches to fill its container; when false, it hugs the segments. |
 | `labels?` | `Partial<DateComponentLabels>` | — | Overrides the accessible labels announced for each segment. |
@@ -101,7 +101,7 @@ Input chrome that surrounds the segments, sharing `Input`'s outline styling. Add
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | — |
 

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

@@ -80,7 +80,7 @@ Root of the compound. Owns the value, `granularity`, `hour12`, and `locale`, and
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `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` | — | — |
@@ -109,7 +109,7 @@ Input chrome that surrounds the segments, shared with [`DateField.Group`](https:
 | `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` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | — |
 | `key?` | `React.Key \| null` | — | — |

package/docs/components/input/content.md

@@ -1,4 +1,4 @@
-# Input Field (https://design.candescent.com/docs/components/input)
+# Input (https://design.candescent.com/docs/components/input)
 
 Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-input--default)
 
@@ -22,6 +22,24 @@ export default function InputBasicDemo() {
 }
 ```
 
+## Subtle
+
+Use `variant="subtle"` for a filled, borderless field on a surface that already frames it, such as a search field at the top of a popover or sheet. Focus, invalid, disabled, and read-only states stay visible in both variants.
+
+```tsx
+import { Input } from '@cdx-ui/components';
+import { Search } from '@cdx-ui/icons';
+
+export default function InputSubtleDemo() {
+  return (
+    <Input variant="subtle">
+      <Input.Icon as={Search} />
+      <Input.Field accessibilityLabel="Search teams" placeholder="Search teams" />
+    </Input>
+  );
+}
+```
+
 ## Sizes
 
 ```tsx
@@ -266,7 +284,7 @@ The root shell that lays out the field alongside optional slots and icons, and p
 | `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the shell's own styles. |
 | `children?` | `ReactNode` | — | Shell content — typically `Input.Field` plus optional `Input.Slot`/`Input.Icon`. |
 | `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
-| `variant?` | `'outline'` | `'outline'` | Visual style variant. |
+| `variant?` | `'outline' \| 'subtle'` | `'outline'` | Visual style variant. `outline` is a bordered field on the page surface; `subtle` is a filled, borderless field for dense or nested surfaces such as a search field in a popup. |
 | `size?` | `'default' \| 'small'` | `'default'` | Height, padding, and field font size. |
 | `isInvalid?` | `boolean` | — | If true, the input will indicate an error. |
 | `isDisabled?` | `boolean` | — | If true, the input will be disabled. |

package/docs/components/input/design.md

@@ -1,4 +1,4 @@
-# Input Field — Design (https://design.candescent.com/docs/components/input)
+# Input — Design (https://design.candescent.com/docs/components/input)
 
 ## Usage
 

package/docs/components/insurance-disclosure/content.md

@@ -1,4 +1,4 @@
-# FDIC Digital Sign (https://design.candescent.com/docs/components/insurance-disclosure)
+# Insurance Disclosure (https://design.candescent.com/docs/components/insurance-disclosure)
 
 Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8550-3291), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/domain-insurancedisclosure--default)
 

package/docs/components/otp-input/content.md

@@ -1,4 +1,4 @@
-# OTP Input Field (https://design.candescent.com/docs/components/otp-input)
+# OTP Input (https://design.candescent.com/docs/components/otp-input)
 
 Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5653-5035), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-otpinput--default)
 
@@ -298,7 +298,7 @@ Styled cell chrome built on `Input`. Inherits variant and size from the parent `
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `React.ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `isInvalid?` | `boolean` | — | — |
 | `isReadOnly?` | `boolean` | — | — |

package/docs/components/select/content.md

@@ -107,6 +107,120 @@ export default function SelectWithFieldDemo() {
 }
 ```
 
+## Multiple selection
+
+Set `type="multiple"` to let users pick several options. `value` becomes a `string[]`, each press toggles an option and keeps the dropdown open, and every toggle calls `onValueChange` with the full array. Add `Select.ItemControl` for a leading checkbox. Without custom children, `Select.Value` shows the selected labels on one line.
+
+```tsx
+import { useState } from 'react';
+import { Field, Select } from '@cdx-ui/components';
+import { teams } from './_data';
+
+export default function SelectMultipleDemo() {
+  const [teamIds, setTeamIds] = useState<string[]>([]);
+
+  return (
+    <Field className="w-full" isRequired>
+      <Field.Label>Assign teams</Field.Label>
+      <Select type="multiple" items={teams} value={teamIds} onValueChange={setTeamIds} isRequired>
+        <Select.Trigger>
+          <Select.Value placeholder="Select teams">
+            {({ isPlaceholder, selectedItems }) =>
+              isPlaceholder ? null : `${selectedItems.length} teams selected`
+            }
+          </Select.Value>
+        </Select.Trigger>
+        <Select.Content>
+          {teams.map((team) => (
+            <Select.Item key={team.value} value={team.value}>
+              <Select.ItemControl />
+              <Select.ItemLabel>{team.label}</Select.ItemLabel>
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
+      <Field.Helper>Each change applies immediately.</Field.Helper>
+    </Field>
+  );
+}
+```
+
+## With search
+
+Add `Select.Search` as the first child of `Select.Content` to build a searchable select, the pattern other libraries call an autocomplete. Typing filters the options in both `single` and `multiple` mode, and `Select.Empty` shows when nothing matches. Selected options that the query hides stay selected and still count in `Select.Value`. The default filter is a case- and accent-insensitive "contains" on each option's `label`; pass `filter` to replace it, or control `inputValue` and `onInputChange` to swap `items` for server results. The query clears when the dropdown closes.
+
+In `Select.Content` on iOS and Android, the search input renders inside the anchored dropdown and the on-screen keyboard can cover the options. Use `Select.BottomSheet` for native search.
+
+```tsx
+import { useState } from 'react';
+import { Field, Select } from '@cdx-ui/components';
+import { teams } from './_data';
+
+export default function SelectWithSearchDemo() {
+  const [teamIds, setTeamIds] = useState<string[]>([]);
+
+  return (
+    <Field className="w-full" isRequired>
+      <Field.Label>Assign teams</Field.Label>
+      <Select type="multiple" items={teams} value={teamIds} onValueChange={setTeamIds}>
+        <Select.Trigger>
+          <Select.Value placeholder="Select teams you want to assign to this user">
+            {({ isPlaceholder, selectedItems }) =>
+              isPlaceholder ? null : `${String(selectedItems.length)} teams selected`
+            }
+          </Select.Value>
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Search placeholder="Search Teams" accessibilityLabel="Search teams" />
+          {teams.map((t) => (
+            <Select.Item key={t.value} value={t.value} disabled={t.disabled}>
+              <Select.ItemControl />
+              <Select.ItemLabel>{t.label}</Select.ItemLabel>
+            </Select.Item>
+          ))}
+          <Select.Empty>No teams found</Select.Empty>
+        </Select.Content>
+      </Select>
+    </Field>
+  );
+}
+```
+
+## Bottom sheet
+
+Use `Select.BottomSheet` in place of `Select.Content` to present the options in a sheet that slides up from the bottom — the preferred surface on native, especially with `Select.Search`. It takes the same children: `Select.Search`, the options, and `Select.Empty`. The sheet keeps the search input and the results above the on-screen keyboard, and swiping it down, pressing the backdrop, or pressing Android back closes it without changing the value. On web it renders the same dropdown as `Select.Content`, so one composition serves every platform. On native it requires `BottomSheet.Provider` at the app root.
+
+```tsx
+import { useState } from 'react';
+import { Field, Select } from '@cdx-ui/components';
+import { teams } from './_data';
+
+export default function SelectBottomSheetDemo() {
+  const [teamIds, setTeamIds] = useState<string[]>([]);
+
+  return (
+    <Field className="w-full">
+      <Field.Label>Assign teams</Field.Label>
+      <Select type="multiple" items={teams} value={teamIds} onValueChange={setTeamIds}>
+        <Select.Trigger>
+          <Select.Value placeholder="Select teams" />
+        </Select.Trigger>
+        <Select.BottomSheet>
+          <Select.Search placeholder="Search Teams" accessibilityLabel="Search teams" />
+          {teams.map((t) => (
+            <Select.Item key={t.value} value={t.value} disabled={t.disabled}>
+              <Select.ItemControl />
+              <Select.ItemLabel>{t.label}</Select.ItemLabel>
+            </Select.Item>
+          ))}
+          <Select.Empty>No teams found</Select.Empty>
+        </Select.BottomSheet>
+      </Select>
+    </Field>
+  );
+}
+```
+
 ## Custom trigger
 
 Set `asChild` on `Select.Trigger` to use a Forge pressable such as `Button`, `IconButton`, or `Chip`. Use the trigger and item `indicator` props to replace their default icons, or pass `null` to suppress an indicator.
@@ -145,7 +259,7 @@ export default function SelectCustomTriggerDemo() {
 
 ## Custom value display
 
-Pass children to `Select.Value` to replace the default label. Read the selected option from your own state, and render the placeholder by leaving the children empty when nothing is selected.
+Pass children to `Select.Value` to replace the default label. Read the selected option from your own state, and render the placeholder by leaving the children empty when nothing is selected. A function child receives `isPlaceholder`, `selectedItems`, and `selectedText`; return `null` to fall back to the default.
 
 ```tsx
 import { useState } from 'react';
@@ -295,7 +409,7 @@ export default function SelectPlacementDemo() {
 
 ### Select
 
-The root manages the selected value, open state, options, and form-control state.
+The root manages the selected value, open state, options, and form-control state. `type` sets the selection mode: `single` (the default) takes a `string` value, and `multiple` takes a `string[]`, where an empty array means no selection.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -303,18 +417,23 @@ The root manages the selected value, open state, options, and form-control state
 | `children?` | `ReactNode` | — | — |
 | `variant?` | `'outline' \| null` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
-| `items` | `SelectItemData[]` | — | Options used to resolve `Select.Value` labels and drive keyboard navigation. Render matching `Select.Item` elements inside `Select.Content`. |
-| `value?` | `string` | — | — |
-| `defaultValue?` | `string` | — | — |
-| `onValueChange?` | `((value: string) => void)` | — | — |
-| `isOpen?` | `boolean` | — | Controlled open state. Use `defaultOpen` for the uncontrolled variant. |
+| `type?` | `'single' \| 'multiple'` | — | — |
+| `value?` | `string \| string[]` | — | — |
+| `defaultValue?` | `string \| string[]` | — | — |
+| `onValueChange?` | `((value: string) => void) \| ((value: string[]) => void)` | — | — |
+| `items?` | `SelectItemData[]` | — | — |
+| `isOpen?` | `boolean` | — | — |
 | `defaultOpen?` | `boolean` | — | — |
 | `onOpenChange?` | `((open: boolean) => void)` | — | — |
 | `disabled?` | `boolean` | — | — |
 | `isRequired?` | `boolean` | — | — |
 | `isInvalid?` | `boolean` | — | — |
 | `isReadOnly?` | `boolean` | — | — |
-| `native?` | `boolean` | — | Prevents `Select.Content` from rendering. Reserved for native picker integration. |
+| `native?` | `boolean` | — | — |
+| `inputValue?` | `string` | — | — |
+| `defaultInputValue?` | `string` | — | — |
+| `onInputChange?` | `((inputValue: string) => void)` | — | — |
+| `filter?` | `SelectFilter` | — | — |
 
 Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
 
@@ -361,12 +480,12 @@ Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
 
 ### Select.Value
 
-Displays the label from `items` that matches the selected value, or the placeholder when no value is selected.
+Displays the label from `items` that matches the selected value, or the placeholder when no value is selected. In multiple mode it shows the selected labels joined with commas, truncated to one line. A function child receives `{ isPlaceholder, selectedItems, selectedText }`.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
-| `children?` | `ReactNode` | — | — |
+| `children?` | `ReactNode \| ((state: SelectValueRenderProps) => ReactNode)` | — | Replaces the default display. A function child receives the selection state; return `null` or `undefined` to fall back to the default (placeholder or `selectedText`). |
 | `asChild?` | `boolean` | — | — |
 | `placeholder?` | `string` | — | — |
 
@@ -394,7 +513,7 @@ Inherits all `ForgeIconProps` (react-native-svg `SvgProps` plus `filled` and `si
 
 ### Select.Content
 
-Dropdown panel that positions itself around the trigger, scrolls long option lists, and closes when dismissed.
+Dropdown panel that positions itself around the trigger, scrolls long option lists, and closes when dismissed. Dismissing never changes the value.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -406,12 +525,65 @@ Dropdown panel that positions itself around the trigger, scrolls long option lis
 | `crossOffset?` | `number` | — | Cross-axis adjustment from the aligned dropdown position in pixels. Defaults to 0. |
 | `enteringAnimation?` | `EntryOrExitLayoutType` | — | Enter animation for the dropdown. Defaults to a 150ms fade. |
 | `exitingAnimation?` | `EntryOrExitLayoutType` | — | Exit animation for the dropdown. Defaults to a 100ms fade. |
+| `dismissAccessibilityLabel?` | `string` | `'Dismiss'` | Accessible name of the visually hidden button that lets screen-reader users close the popup on web. |
 
 Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
 
+### Select.BottomSheet
+
+Presents the options in a bottom sheet on iOS and Android, in place of `Select.Content`. Compose exactly one of `Select.Content` or `Select.BottomSheet` per select. It sorts its direct children into the same regions as `Select.Content`: `Select.Search` stays above the scrolling options and `Select.Empty` follows them. On web it renders the `Select.Content` dropdown, and `dismissAccessibilityLabel` names its hidden dismiss button. With `Select.Search`, keyboard avoidance applies to the default search input; an `asChild` input does not move the sheet.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the sheet body's own styles. |
+| `children?` | `ReactNode` | — | `Select.Search`, `Select.Item` elements, and `Select.Empty`, as in `Select.Content`. |
+| `asChild?` | `boolean` | — | Render the consumer's child as the sheet body, skipping the region split. |
+| `dismissAccessibilityLabel?` | `string` | `'Dismiss'` | Accessible name of the visually hidden dismiss button on web, where the surface is the `Select.Content` dropdown. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+| Attribute    | Values                | Description                     |
+| ------------ | --------------------- | ------------------------------- |
+| `data-slot`  | `select-bottom-sheet` | Sheet body on native            |
+| `data-state` | `open`                | Present while the sheet is open |
+
+### Select.Search
+
+A search input for the top of `Select.Content` or `Select.BottomSheet`, with a leading search icon. Its query filters the options through the root `filter`, and it takes focus when the dropdown opens on web. Place it as a direct child of the surface; a wrapped `Select.Search` is not recognized and renders among the options.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the search container's own styles. |
+| `children?` | `ReactNode` | — | The text input to render when `asChild` is set. Otherwise not rendered. |
+| `asChild?` | `boolean` | — | Merge the search wiring onto the single child text input instead of rendering the default `Input` with a search icon. |
+| `variant?` | `'outline' \| 'subtle'` | `'subtle'` | `Input` variant of the default search field. Ignored when `asChild` is set. |
+| `getResultCountLabel?` | `((count: number) => string)` | — | Text the polite live region announces when the result count changes, such as `"3 results"` (the English default). When nothing matches, the `Select.Empty` text is announced instead. |
+
+Inherits [`TextInputProps`](https://reactnative.dev/docs/textinput#props) except `value`, `defaultValue`, and `onChangeText`, which the root owns through `inputValue`, `defaultInputValue`, and `onInputChange`.
+
+| Attribute   | Values          | Description      |
+| ----------- | --------------- | ---------------- |
+| `data-slot` | `select-search` | Search container |
+
+### Select.Empty
+
+Content shown below the options only when no option matches the query. Plain text children are styled to match the options. Place it as a direct child of `Select.Content` or `Select.BottomSheet`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the empty state's own styles. |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+| Attribute   | Values         | Description |
+| ----------- | -------------- | ----------- |
+| `data-slot` | `select-empty` | Empty state |
+
 ### Select.Item
 
-An individual option. Its `value` must match an entry in the root `items` array. The `indicator` prop replaces the default selected-item checkmark, and `indicator={null}` suppresses it.
+An individual option. Its `value` must match an entry in the root `items` array. Disable an option with `disabled` here or on its `items` entry. The `indicator` prop replaces the default selected-item checkmark, and `indicator={null}` suppresses it. The default checkmark is omitted when the item contains a `Select.ItemControl`.
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
@@ -419,7 +591,7 @@ An individual option. Its `value` must match an entry in the root `items` array.
 | `children?` | `ReactNode` | — | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
 | `disabled?` | `boolean` | — | Whether the press behavior is disabled. |
 | `asChild?` | `boolean` | — | — |
-| `indicator?` | `ReactNode` | — | Replaces the default selected-item checkmark. The replacement is rendered only while the item is selected. Pass `null` to suppress the indicator. |
+| `indicator?` | `ReactNode` | — | Replaces the default selected-item checkmark. The replacement is rendered only while the item is selected. Pass `null` to suppress the indicator. The default checkmark is omitted when the item contains a `Select.ItemControl`. |
 | `value` | `string` | — | — |
 | `isHovered?` | `boolean` | — | — |
 | `isActive?` | `boolean` | — | — |
@@ -452,22 +624,49 @@ Text label rendered inside a `Select.Item`.
 
 Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
 
+### Select.ItemControl
+
+A leading checkbox that mirrors the item's selected state. It is presentational: the option itself carries the selected state for assistive technology.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the control's own styles. |
+| `children?` | `ReactNode` | — | The element to render when `asChild` is set. Otherwise not rendered. |
+| `asChild?` | `boolean` | — | Render the consumer's child element in place of the default checkbox glyph. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+| Attribute      | Values                | Description     |
+| -------------- | --------------------- | --------------- |
+| `data-slot`    | `select-item-control` | Checkbox glyph  |
+| `data-checked` | `true` \| `false`     | Selection state |
+
 ## Anatomy
 
-| `data-slot`         | Element                       |
-| ------------------- | ----------------------------- |
-| `select`            | Root container                |
-| `select-trigger`    | Dropdown trigger              |
-| `select-value`      | Selected label or placeholder |
-| `select-icon`       | Dropdown indicator            |
-| `select-content`    | Dropdown panel                |
-| `select-item`       | Option                        |
-| `select-item-label` | Option label                  |
+| `data-slot`           | Element                       |
+| --------------------- | ----------------------------- |
+| `select`              | Root container                |
+| `select-trigger`      | Dropdown trigger              |
+| `select-value`        | Selected label or placeholder |
+| `select-icon`         | Dropdown indicator            |
+| `select-content`      | Dropdown panel                |
+| `select-bottom-sheet` | Sheet body (native)           |
+| `select-search`       | Search input                  |
+| `select-empty`        | No-results message            |
+| `select-item`         | Option                        |
+| `select-item-label`   | Option label                  |
+| `select-item-control` | Option checkbox               |
 
 ## Accessibility
 
-The trigger uses `role="combobox"` with `aria-haspopup="listbox"`, reflects open, required, invalid, and read-only state, and points to the dropdown content. The content uses `role="listbox"` and each item uses `role="option"` with selected and disabled state.
+The trigger uses `role="combobox"` with `aria-haspopup="listbox"`, reflects open, required, invalid, and read-only state, and points to the dropdown content. The content uses `role="listbox"` and each item uses `role="option"` with selected and disabled state. In multiple mode the listbox sets `aria-multiselectable="true"`, and `Select.ItemControl` is hidden from assistive technology.
 
 Compose with `Field.Label` for a visible associated label. When no visible label is present, provide `accessibilityLabel` on `Select`.
 
-On web, Enter, Space, Arrow Down, or Arrow Up opens the dropdown. Arrow keys, Home, and End move through enabled options; Enter or Space selects; Escape closes; and Tab closes while continuing focus navigation.
+With `Select.Search`, the dropdown becomes a `role="dialog"` named by the field label that contains the search input (`role="searchbox"`) and the `role="listbox"`. The trigger keeps `aria-haspopup="listbox"`. On web, focus stays in the search input while Arrow Up and Arrow Down move the highlight through the visible, enabled options, announced through `aria-activedescendant`. Enter selects and closes, or toggles in multiple mode, and Space types a space. The highlight moves to the first match each time the query changes, and a polite live region announces the number of results, or the `Select.Empty` text when nothing matches. Escape and Tab close the dropdown, keep the value, and clear the query. Inside a `Drawer`, closing returns focus to the trigger and leaves the drawer open.
+
+On web, Enter, Space, Arrow Down, or Arrow Up opens the dropdown. Arrow keys, Home, and End move through enabled options; Enter or Space selects and closes, or toggles in multiple mode; Escape closes; and Tab closes while continuing focus navigation. Focus returns to the trigger when the dropdown closes.
+
+Screen-reader users can close the dropdown without a keyboard. On web, a visually hidden button labelled by `dismissAccessibilityLabel` on `Select.Content` closes it. On iOS, the VoiceOver escape gesture closes it, and on Android the back button does. Closing never changes the value.
+
+In `Select.BottomSheet` on iOS and Android, VoiceOver and TalkBack move through the search input and each option directly, with no virtual focus, and each option announces its selected state. The sheet takes the same role and name as the dropdown. The VoiceOver escape gesture, Android back, a swipe down, and the backdrop close it, keep the value, and clear the query.

package/docs/components/text/content.md

@@ -124,6 +124,103 @@ export default function TextItalicDemo() {
 }
 ```
 
+## Nested
+
+Place a `Text` inside another text element to style part of a sentence. A nested `Text` inherits `color`, `size`, `weight` and the font family from its parent, and each prop it sets overrides only that one.
+
+```tsx
+import { Box, Text } from '@cdx-ui/components';
+
+export default function TextNestedDemo() {
+  return (
+    <Box className="gap-4">
+      <Text color="secondary" size="lg" weight="medium">
+        Inherits everything: <Text>Your statement is ready to download.</Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="medium">
+        Overrides color only: <Text color="danger">Your payment is past due.</Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="medium">
+        Overrides size and weight:{' '}
+        <Text size="sm" weight="bold">
+          Your statement is ready to download.
+        </Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="bold">
+        Overrides size only, keeps bold: <Text size="sm">Your statement is ready to download.</Text>
+      </Text>
+    </Box>
+  );
+}
+```
+
+### Inside text slots
+
+The same inheritance applies inside `Heading` and text slots such as `Button.Label` and `Alert.Description`, so emphasis follows the surrounding component's styles.
+
+```tsx
+import { Alert, Box, Button, Heading, Text } from '@cdx-ui/components';
+
+export default function TextNestedSlotsDemo() {
+  return (
+    <Box className="gap-4">
+      <Heading size="sm">
+        Inside a Heading: <Text color="action">Savings goals</Text>
+      </Heading>
+      <Button>
+        <Button.Label>
+          Inside Button.Label: <Text weight="bold">Transfer</Text>
+        </Button.Label>
+      </Button>
+      <Alert severity="info">
+        <Alert.Description>
+          Inside Alert.Description: <Text weight="semibold">Transfers settle by 5 p.m.</Text>
+        </Alert.Description>
+      </Alert>
+    </Box>
+  );
+}
+```
+
+### Inline emphasis
+
+Combine nested `Text` elements to highlight amounts, statuses and links within running copy.
+
+```tsx
+import { Box, Text } from '@cdx-ui/components';
+
+export default function TextNestedInlineDemo() {
+  return (
+    <Box className="gap-3">
+      <Text>
+        Your available balance is <Text weight="bold">$2,481.16</Text>, up{' '}
+        <Text color="success" weight="semibold">
+          $120.00
+        </Text>{' '}
+        since yesterday.
+      </Text>
+      <Text color="secondary" size="sm">
+        Posted <Text weight="medium">Oct 14</Text> · Pending{' '}
+        <Text color="warning" italic>
+          2 transactions
+        </Text>
+      </Text>
+      <Text size="sm" color="tertiary">
+        By continuing you agree to the{' '}
+        <Text color="action" weight="medium">
+          Terms of Service
+        </Text>{' '}
+        and{' '}
+        <Text color="action" weight="medium">
+          Privacy Policy
+        </Text>
+        .
+      </Text>
+    </Box>
+  );
+}
+```
+
 ## API
 
 ### Text