@colixsystems/widget-sdk 0.247.0 → 0.248.0

package/dist/index.d.ts

@@ -2460,6 +2460,106 @@ export const Grid: (props: {
   accessibilityLabel?: string;
 }) => any;
 
+/**
+ * `required` on a control that frames its own label (`<TextField>`,
+ * `<Select>`, `<RadioGroup>`, `<PeoplePicker>`, `<FileUpload>`, `<FormField>`).
+ */
+export interface FieldRequiredProps {
+  /**
+   * Draws a mark after a text label and adds the app's "Required" to the
+   * control's spoken name. It does not validate: pass `error` yourself.
+   */
+  required?: boolean;
+}
+
+/**
+ * A form laid out in width tiers from its own measured width, capped near
+ * 1000px and centred: its fields one to a line when narrow, two at medium and
+ * `columns` (three for `"auto"`) when wide. A `<FormField>` or a control that
+ * frames its own label (`<TextField>`, `<Select>`, `<RadioGroup>`,
+ * `<PeoplePicker>`, `<FileUpload>`) is one field; a multiline field, a `<FormField span="full">`,
+ * a `<FieldRow>`, a `<FormSection>`, a `<FormActions>` and anything else take
+ * the whole line. Children are read directly, not through a fragment.
+ *
+ * @example
+ *   <Form>
+ *     <FormSection title="Your details">
+ *       <FieldRow>
+ *         <TextField label="First name" value={first} onChangeText={setFirst} />
+ *         <TextField label="Last name" value={last} onChangeText={setLast} />
+ *       </FieldRow>
+ *       <TextField label="Email" required value={email} onChangeText={setEmail} />
+ *       <FormField label="Colour"><SwatchPicker value={colour} onChange={setColour} /></FormField>
+ *       <TextField label="Notes" multiline value={notes} onChangeText={setNotes} />
+ *     </FormSection>
+ *     <FormActions>
+ *       <Button variant="secondary" title="Cancel" onPress={cancel} />
+ *       <Button title="Save" onPress={save} />
+ *     </FormActions>
+ *   </Form>
+ */
+export const Form: (props: {
+  children?: ReactNode;
+  /** The most fields to a line when wide, 1–3. Default "auto" (three). */
+  columns?: "auto" | 1 | 2 | 3;
+  /** The cap the form centres within. Default 1000; `null` for none. */
+  maxWidth?: number | null;
+  /** Between fields and lines; `"md"` when unset. */
+  gap?: GridGap;
+  /** The form's outer box; padding here stays out of the measured width. */
+  style?: any;
+  testID?: string;
+  /** Names the form as one group to a screen reader. */
+  accessibilityLabel?: string;
+}) => any;
+
+/** Short related fields on one line (up to three); stacked when narrow. */
+export const FieldRow: (props: {
+  children?: ReactNode;
+  gap?: GridGap;
+  style?: any;
+  testID?: string;
+}) => any;
+
+/** A titled group of fields, laid out in the same columns as its form. */
+export const FormSection: (props: {
+  /** A heading for screen readers too. */
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  gap?: GridGap;
+  style?: any;
+  testID?: string;
+}) => any;
+
+/**
+ * The form's buttons in normal flow after its fields: the secondary first,
+ * the primary last. A row at the trailing edge at medium and wide; a
+ * full-width stack in the same order when narrow.
+ */
+export const FormActions: (props: {
+  children?: ReactNode;
+  style?: any;
+  testID?: string;
+}) => any;
+
+/**
+ * A label, required mark, helper and error round any control. A control that
+ * frames its own label is handed them instead (a prop it sets itself wins,
+ * `disabled={false}` included), so one label is drawn; `testID` goes to that
+ * control, or to a wrapper round it when it has its own. Any other child is
+ * framed here: on the web it is named as a group described by the note; on a
+ * device the one child takes the label (with "Required") as its name and the
+ * note as its hint, unless it names itself.
+ */
+export const FormField: (props: FormControlProps & FieldRequiredProps & {
+  children?: ReactNode;
+  /** Take the form's whole line. */
+  span?: "full";
+  /** The frame round the control. */
+  style?: any;
+}) => any;
+
 /** Pass-through options for `useGeolocation().getCurrentPosition(...)`. */
 export interface GeolocationOptions {
   enableHighAccuracy?: boolean;
@@ -3899,6 +3999,97 @@ export const EmptyState: (props: {
   children?: ReactNode;
 }) => any;
 
+/** One column of a `<DataTable>`. */
+export interface DataTableColumn<Row = Record<string, any>> {
+  /** The record field the column shows, and the key its sort names. */
+  key: string;
+  /** The header label, and the label beside the value in the card layouts. Defaults to `key`. */
+  label?: ReactNode;
+  /** The column's share of the row width; the header uses the same. Defaults to 1. */
+  flex?: number;
+  align?: "left" | "center" | "right";
+  /** The narrowest the column may get, in pixels. Defaults to 0. */
+  minWidth?: number;
+  /** Makes the header a sort button. */
+  sortable?: boolean;
+  /** The cell's content; a string or number is drawn as the cell's text. Return `undefined` for the default. */
+  render?: (row: Row, column: DataTableColumn<Row>) => ReactNode;
+}
+
+/** The order a `<DataTable>` shows: one column, ascending or descending. */
+export interface DataTableSort {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+/**
+ * A list of records laid out for its own measured width, on the web Player and
+ * the native export alike: stacked label/value cards when narrow, one card per
+ * row at medium (the first column as the title, the rest on one line), and
+ * aligned columns under a sticky header when wide. Its rows are `<List>` /
+ * `<ListRow>` and its header `<ListHeader>`, styled by the theme's Lists
+ * settings (and Cards for the card layouts); it adds no theme scope.
+ *
+ * Sorting: a sortable header is a 44px button named by its column and
+ * described by its sort, and a change of sort is announced once, on both
+ * hosts. With `onSortChange` the widget orders the rows itself (a server
+ * sort: re-query with the new sort) and the table draws `rows` as given;
+ * without it the table sorts them, a `Date` value as a date. `sort` makes the
+ * order controlled, `defaultSort` sets where an uncontrolled table starts; a
+ * controlled `sort` without `onSortChange` is display-only, its headers plain
+ * labels. The card layouts offer the same sort from a menu above the cards.
+ * The sticky header is filled with the rows' Lists background, else the
+ * theme surface.
+ *
+ * @example
+ *   const [sort, setSort] = useState({ key: "name", direction: "asc" });
+ *   const query = useStableQuery(() => ({ sort: { field: sort.key, dir: sort.direction } }));
+ *   const { data, loading } = useDatastoreQuery(tableId, query);
+ *   <DataTable
+ *     columns={[
+ *       { key: "name", label: "Name", flex: 2, sortable: true },
+ *       { key: "status", label: "Status", render: (row) => <Badge label={row.status} /> },
+ *       { key: "total", label: "Total", align: "right", sortable: true },
+ *     ]}
+ *     rows={data}
+ *     loading={loading}
+ *     sort={sort}
+ *     onSortChange={setSort}
+ *     onRowPress={(row) => open(row.id)}
+ *   />
+ */
+export const DataTable: <Row = Record<string, any>>(
+  props: ListRowTokens & {
+    columns: Array<DataTableColumn<Row> | string>;
+    rows: Row[];
+    /** The field that keys each row. Defaults to "id". */
+    keyField?: string;
+    /** Every cell's content where its column has no `render`; return `undefined` for the default. */
+    renderCell?: (row: Row, column: DataTableColumn<Row>) => ReactNode;
+    /** Makes every row a button. */
+    onRowPress?: (row: Row) => void;
+    /** The order shown, controlled. */
+    sort?: DataTableSort | null;
+    /** Where an uncontrolled table's order starts. */
+    defaultSort?: DataTableSort;
+    /** Called with the new order; the widget then orders `rows` itself. */
+    onSortChange?: (sort: DataTableSort) => void;
+    /** The rows' scroll box height, in pixels. Defaults to 480. */
+    maxHeight?: number;
+    /** Placeholder rows while `rows` is still empty. */
+    loading?: boolean;
+    /** The empty state's title and message; the message defaults to "No results". */
+    emptyTitle?: ReactNode;
+    emptyMessage?: ReactNode;
+    /** The words a sort is spoken with, in the widget's language. */
+    sortLabels?: { sort?: string; ascending?: string; descending?: string };
+    /** The table's outer box; padding here stays out of the measured width. */
+    style?: any;
+    testID?: string;
+    accessibilityLabel?: string;
+  },
+) => any;
+
 /**
  * Themed status pill: a record's state (Active, Paid, Overdue) beside the
  * thing it describes. The label always renders; the tone only tints it.
@@ -4192,7 +4383,7 @@ export interface FormFieldOverrides {
  * @example
  *   <TextField label="Name" value={name} onChangeText={setName} placeholder="Your name" />
  */
-export const TextField: (props: FormControlProps & FormFieldOverrides & {
+export const TextField: (props: FormControlProps & FieldRequiredProps & FormFieldOverrides & {
   multiline?: boolean;
   style?: any;
   /** The box around a labelled field. */
@@ -4283,6 +4474,7 @@ export interface SelectSearchProps<V extends string | number = string | number>
 
 /** What every `<Select>` takes, in either mode. */
 export type SelectBaseProps<V extends string | number = string | number> = FormControlProps &
+  FieldRequiredProps &
   FormFieldOverrides &
   SelectSearchProps<V> & {
     /**
@@ -4404,6 +4596,80 @@ export const PeoplePicker: (
     ),
 ) => any;
 
+/** One `<FilterBar>` facet: a dropdown of `options` under `key` in the value. */
+export interface FilterBarFacet<V extends string | number = string | number> {
+  key: string;
+  label: string;
+  options: Array<SelectOption<V>>;
+  /** Several values at once; the facet's value is then a list. */
+  multiple?: boolean;
+  /** Type to narrow the options, as `<Select searchable>`. */
+  searchable?: boolean;
+}
+
+/** The applied filters: each facet's value, or a list for a `multiple` one. */
+export type FilterBarValue = Record<string, string | number | Array<string | number>>;
+
+/**
+ * Search plus facet filters that lay themselves out for their own measured
+ * width. Medium and wide: one toolbar row of a `<SearchField>`, a compact
+ * `<Select>` per facet ("Status: Any") and the sort. Narrow, or a row whose
+ * dropdowns do not fit: the search field and one "Filters · n" button opening
+ * the facets in a `<Modal>` sheet, where nothing applies until Apply. At every
+ * width each applied facet is a removable `<Chip>` beneath, with a "Clear all".
+ *
+ * `onChange` gets the whole next value once per edit, with a cleared facet's
+ * key removed; `onQueryChange` gets the trimmed query once typing pauses
+ * (`queryDebounceMs`, default 250) and at once on clear or submit. Both are
+ * controlled, so seed `query` and `value` from route params or
+ * `useWidgetRoute`. "Clear all" resets the facets and the query. The search
+ * field shows only with `onQueryChange`. Copy props default to English.
+ *
+ * @example
+ *   <FilterBar query={q} onQueryChange={setQ} value={filters} onChange={setFilters}
+ *     facets={[{ key: "status", label: "Status", options: [{ value: "open", label: "Open" }] }]}
+ *     sort={{ options: [{ value: "new", label: "Newest" }], value: sortBy, onChange: setSortBy }} />
+ */
+export const FilterBar: (props: {
+  query?: string;
+  onQueryChange?: (query: string) => void;
+  /** The pause, in ms, before typed text is reported. Default 250. */
+  queryDebounceMs?: number;
+  facets: FilterBarFacet[];
+  value?: FilterBarValue | null;
+  onChange?: (next: FilterBarValue) => void;
+  /** One more dropdown; sorting is never shown as a chip. */
+  sort?: {
+    options: Array<SelectOption>;
+    value?: string | number | null;
+    onChange: (value: string | number) => void;
+    /** Default "Sort". */
+    label?: string;
+  };
+  /** Default "Search". */
+  searchPlaceholder?: string;
+  /** A facet with nothing picked. Default "Any". */
+  anyText?: string;
+  /** The narrow button and the sheet's title. Default "Filters". */
+  filtersText?: string;
+  /** Spoken after the button's name; `{count}` is the number applied. Default "{count} active". */
+  activeCountText?: string | ((count: number) => string);
+  /** Default "Clear all". */
+  clearAllText?: string;
+  /** Default "Apply". */
+  applyText?: string;
+  /** Empties the sheet's facets and puts its sort on the first option. Default "Clear". */
+  clearText?: string;
+  /** Names the chip group. Default "Active filters". */
+  activeFiltersText?: string;
+  /** A chip's remove control; `{label}` is the chip. Default "Remove {label}". */
+  removeText?: string | ((label: string) => string);
+  closeAccessibilityLabel?: string;
+  /** The outer box; its padding is not counted into the measured width. */
+  style?: any;
+  testID?: string;
+}) => any;
+
 /**
  * Space-key activation for a control whose role is not a button: on the web a
  * `Pressable` answers Space only for a button. Native ignores `onKeyDown`.
@@ -4476,7 +4742,7 @@ export interface RadioOption<V extends string | number = string | number> {
  *     options={[{ value: "standard", label: "Standard" }, { value: "express", label: "Express" }]} />
  */
 export const RadioGroup: <V extends string | number = string | number>(
-  props: FormControlProps & {
+  props: FormControlProps & FieldRequiredProps & {
     options: Array<RadioOption<V>>;
     value?: V | null;
     /** Called when a different option is picked. */
@@ -4731,8 +4997,8 @@ export const FilePicker: ((props: {
 /**
  * Themed file chooser on `<FilePicker>`: a button (the `button` scope) in the
  * input field (the `muted` scope), the chosen files with their size and a
- * remove control, and the form controls' `label` / `helper` / `error` /
- * `disabled`. On the web a file can also be dropped onto the field; native
+ * remove control, and the form controls' `label` / `required` / `helper` /
+ * `error` / `disabled`. On the web a file can also be dropped onto the field; native
  * has no file drop, so the button is the control there. A file `accept` rules
  * out is not added and shows an error. It uploads nothing: upload in
  * `onPick` with `useFilestoreUpload` and pass `uploading` while it runs, which
@@ -4745,7 +5011,7 @@ export const FilePicker: ((props: {
  *     files={photos} onFilesChange={setPhotos}
  *     onPick={(picked) => Promise.all(picked.map((f) => upload(f))).then(() => setPhotos([]))} />
  */
-export const FileUpload: (props: FormControlProps & {
+export const FileUpload: (props: FormControlProps & FieldRequiredProps & {
   accept?: string;
   /** A new pick joins the list instead of replacing the file. Default false. */
   multiple?: boolean;
@@ -4890,6 +5156,107 @@ export const Tooltip: (props: {
   children: ReactNode;
 }) => any;
 
+/**
+ * The words `<SortableList>` and `<Board>` show and announce. `{item}`,
+ * `{position}`, `{total}` and `{column}` are filled in; a blank entry keeps
+ * the English default.
+ */
+export interface SortableLabels {
+  /** The handle's name and its options' title. Default "Move {item}". */
+  handle?: string;
+  hint?: string;
+  moveUp?: string;
+  moveDown?: string;
+  moveToTop?: string;
+  moveToBottom?: string;
+  /** Default "Move to {column}". */
+  moveToColumn?: string;
+  /** Default "{item} moved to position {position} of {total}". */
+  moved?: string;
+  /** Default "{item} moved to {column}, position {position}". */
+  movedToColumn?: string;
+}
+
+/**
+ * A list the user reorders by dragging a row's grip handle, on both hosts.
+ * The rows are `<ListRow>`s in the theme's `list` scope. A tap or Enter on
+ * the handle opens its move options, the arrow keys move a focused handle on
+ * the web, and a screen reader is offered the same moves as actions.
+ * `onReorder` runs once per real change; a drag that changes nothing springs
+ * back and calls nothing.
+ *
+ * @example
+ *   <SortableList
+ *     items={steps}
+ *     onReorder={(next) => setSteps(next)}
+ *     renderItem={({ item }) => <Text>{item.title}</Text>}
+ *   />
+ */
+export function SortableList<T>(props: {
+  items: T[];
+  onReorder?: (nextItems: T[], move: { from: number; to: number; item: T }) => void;
+  /** A row's content; with none the item's title, name or label shows. */
+  renderItem?: (row: { item: T; index: number; dragging: boolean }) => ReactNode;
+  /** Default: the item's `id`, then `key`, then its position. */
+  keyExtractor?: (item: T, index: number) => string | number;
+  /** The name a move announces. Default: its `title`, `name` or `label`. */
+  getItemLabel?: (item: T) => string;
+  /** Read on every render; a row it refuses shows no handle. Default true. */
+  canDrag?: boolean | ((item: T) => boolean);
+  /** "card" draws each row as the app's card. Default "plain". */
+  variant?: "plain" | "card";
+  labels?: SortableLabels;
+  style?: any;
+  testID?: string;
+  accessibilityLabel?: string;
+}): any;
+
+/** One `<Board>` column: the key `getColumn` returns, and its heading. */
+export interface BoardColumn {
+  key: string | number;
+  title: string;
+}
+
+/**
+ * Cards the user moves between columns (a kanban, a pipeline) by dragging a
+ * card's grip handle, on both hosts. Each card is the app's `<Card>`. The one
+ * column a held card is over takes the theme's soft primary, with a line
+ * where it will land; a narrow board scrolls its columns sideways, and by
+ * itself while a card is held at its edge. Move options, arrow keys and
+ * screen-reader actions move a card without dragging.
+ *
+ * @example
+ *   <Board
+ *     columns={[{ key: "todo", title: "To do" }, { key: "done", title: "Done" }]}
+ *     items={rows}
+ *     getColumn={(row) => row.status}
+ *     onMove={(row, { toColumn }) => move(row, toColumn)}
+ *     renderCard={({ item }) => <Text>{item.title}</Text>}
+ *   />
+ */
+export function Board<T>(props: {
+  columns: BoardColumn[];
+  items: T[];
+  /** The key of the column an item belongs in; an unknown key hides it. */
+  getColumn: (item: T) => string | number;
+  /** `index` is its place in the target column. */
+  onMove?: (item: T, move: { fromColumn: string | number; toColumn: string | number; index: number }) => void;
+  /** A card's content; with none the item's title, name or label shows. */
+  renderCard?: (card: { item: T; index: number; column: string | number; dragging: boolean }) => ReactNode;
+  keyExtractor?: (item: T, index: number) => string | number;
+  getItemLabel?: (item: T) => string;
+  /** Read on every render; a card it refuses shows no handle. Default true. */
+  canDrag?: boolean | ((item: T) => boolean);
+  /** False when cards keep no order of their own. Default true. */
+  reorderInColumn?: boolean;
+  /** A column's width when a narrow board scrolls sideways. Default 280. */
+  columnWidth?: number;
+  labels?: SortableLabels;
+  style?: any;
+  testID?: string;
+  accessibilityLabel?: string;
+}): any;
+
 /**
  * Themed collapsible sections. The surface comes from the theme's `card`
  * scope and the headers and dividers from its `list` scope, so every

package/dist/index.js

@@ -114,6 +114,8 @@ export {
 } from "./container-width.js";
 // Balanced lines of cells sized from the grid's own measured width.
 export { Grid } from "./grid.js";
+// A form laid out in width tiers: fields, paired rows, sections, actions.
+export { Form, FieldRow, FormSection, FormActions, FormField } from "./form.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks. Each ships in a per-platform file
 // (./clipboard.js / .native.js, ./toast.js / .native.js); index.js picks
 // the web variant and index.native.js picks the native variant.
@@ -239,6 +241,8 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, ListHeader, EmptyState } from "./list.js";
+// A record list in three width tiers: stacked cards, cards, sticky-header columns.
+export { DataTable } from "./data-table.js";
 // Themed detail parts; the stock Badge/Avatar/Progress/Stat/Divider wrap these.
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.js";
 export { initialsFor } from "./initials.js";
@@ -284,6 +288,8 @@ export { Select } from "./select.js";
 export { SearchField } from "./search-field.js";
 // A searchable `<Select>` of users, groups or one table's records.
 export { PeoplePicker } from "./people-picker.js";
+// Search plus facet dropdowns, one toolbar row or a sheet by width.
+export { FilterBar } from "./filter-bar.js";
 // Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
 export { RadioGroup } from "./radio-group.js";
 // Space for a control whose role is not a button; a no-op on native.
@@ -307,6 +313,8 @@ export { chartColors } from "./chart-tokens.js";
 export { FileUpload } from "./file-upload.js";
 // Anchored actions, content and labels; follow the theme's `popover` scope.
 export { Menu, Popover, Tooltip } from "./popover.js";
+// Rows reordered and cards moved between columns, by drag or by move options.
+export { SortableList, Board } from "./sortable.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/index.native.js

@@ -114,6 +114,8 @@ export {
 } from "./container-width.js";
 // Balanced lines of cells sized from the grid's own measured width.
 export { Grid } from "./grid.native.js";
+// A form laid out in width tiers: fields, paired rows, sections, actions.
+export { Form, FieldRow, FormSection, FormActions, FormField } from "./form.native.js";
 // REQ-WSDK-PLATFORM §6 — Tier A hooks (native variants).
 export { useClipboard, ClipboardError } from "./clipboard.native.js";
 export { useToast } from "./toast.native.js";
@@ -232,6 +234,8 @@ export {
 export { insertAtCaret, pushRecentEmoji } from "./emoji-picker-tokens.js";
 // Themed list building blocks; rows follow the theme's `list` scope.
 export { List, ListRow, ListHeader, EmptyState } from "./list.native.js";
+// A record list in three width tiers: stacked cards, cards, sticky-header columns.
+export { DataTable } from "./data-table.native.js";
 // Themed detail parts; the stock Badge/Avatar/Progress/Stat/Divider wrap these.
 export { Badge, Avatar, Progress, Stat, Divider } from "./detail-parts.native.js";
 export { initialsFor } from "./initials.js";
@@ -277,6 +281,8 @@ export { Select } from "./select.native.js";
 export { SearchField } from "./search-field.native.js";
 // A searchable `<Select>` of users, groups or one table's records.
 export { PeoplePicker } from "./people-picker.native.js";
+// Search plus facet dropdowns, one toolbar row or a sheet by width.
+export { FilterBar } from "./filter-bar.native.js";
 // Pick one of a short visible list; `muted` scope, or `tabs` when segmented.
 export { RadioGroup } from "./radio-group.native.js";
 // Space for a control whose role is not a button; a no-op on native.
@@ -300,6 +306,8 @@ export { chartColors } from "./chart-tokens.js";
 export { FileUpload } from "./file-upload.native.js";
 // Anchored actions, content and labels; follow the theme's `popover` scope.
 export { Menu, Popover, Tooltip } from "./popover.native.js";
+// Rows reordered and cards moved between columns, by drag or by move options.
+export { SortableList, Board } from "./sortable.native.js";
 // The semantic text tiers, shared with the built-in widgets.
 export {
   textRoleStyle,

package/dist/menu-view.js

@@ -140,8 +140,11 @@ export function makeMenu(rn, AnchoredSurface) {
       null,
       triggerWith(trigger, {
         anchorRef,
-        onOpen: () => setOpen(true),
-        extraProps: { "aria-haspopup": "menu", "aria-expanded": open },
+        // An empty menu never opens: expanded with nothing shown misleads a reader.
+        onOpen: () => {
+          if (list.length > 0) setOpen(true);
+        },
+        extraProps: { "aria-haspopup": "menu", "aria-expanded": open && list.length > 0 },
       }),
       h(
         AnchoredSurface,

package/dist/people-picker-view.js

@@ -31,6 +31,7 @@ import {
   settleLookup,
   unresolvedIds,
 } from "./people-picker-logic.js";
+import { DRAWS_FIELD_FRAME } from "./form-control-logic.js";
 
 const h = React.createElement;
 const NO_ROWS = Object.freeze([]);
@@ -243,5 +244,7 @@ export function makePeoplePicker(rn) {
   });
 
   PeoplePicker.displayName = "PeoplePicker";
+  // Its `<Select>` frames the label, so `required` passes straight through.
+  PeoplePicker[DRAWS_FIELD_FRAME] = true;
   return PeoplePicker;
 }

package/dist/radio-group-view.js

@@ -6,11 +6,12 @@
 // an icon or a tab role. This one has the radio role and the app's look.
 
 import React from "react";
-import { useHostTheme } from "./hooks.js";
+import { useHostSharedText, useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
 import { CHECKBOX_SIZE, CONTROL_MIN_TARGET, focusHaloStyle } from "./form-control-tokens.js";
 import {
+  DRAWS_FIELD_FRAME,
   errorMessage,
   hasNote,
   isShown,
@@ -165,11 +166,13 @@ export function makeRadioGroup(rn) {
       helper,
       error,
       disabled = false,
+      required = false,
       accessibilityLabel,
       style,
       containerStyle,
       ...rest
     } = props;
+    const requiredWord = useHostSharedText("required", "Required");
     const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
     const t = resolveRadioGroupTokens(theme);
     const kind = radioGroupVariant(variant);
@@ -236,7 +239,7 @@ export function makeRadioGroup(rn) {
         ...rest,
         ref,
         accessibilityRole: "radiogroup",
-        accessibilityLabel: spokenLabel(accessibilityLabel, label),
+        accessibilityLabel: spokenLabel(accessibilityLabel, label, required ? requiredWord : null),
         "aria-disabled": disabled,
         ...(invalid ? { "aria-invalid": true } : null),
         ...(noted ? { "aria-describedby": noteId } : null),
@@ -252,11 +255,12 @@ export function makeRadioGroup(rn) {
     if (!framed) return group;
     return h(
       FieldFrame,
-      { t, label, helper, error: errorMessage(error), disabled, noteId, style: containerStyle },
+      { t, label, helper, error: errorMessage(error), disabled, required, noteId, style: containerStyle },
       group,
     );
   });
 
   RadioGroup.displayName = "RadioGroup";
+  RadioGroup[DRAWS_FIELD_FRAME] = true;
   return RadioGroup;
 }

package/dist/select-view.js

@@ -10,7 +10,7 @@
 // it is held, or each pause in typing asks `onSearch` / async `options`.
 
 import React from "react";
-import { useHostTheme } from "./hooks.js";
+import { useHostSharedText, useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
 import { TEXT_FIELD_TOKEN_NAMES } from "./text-field-tokens.js";
@@ -22,6 +22,7 @@ import {
   selectedOption,
 } from "./form-control-tokens.js";
 import {
+  DRAWS_FIELD_FRAME,
   errorMessage,
   hasNote,
   isShown,
@@ -347,6 +348,7 @@ export function makeSelect(rn) {
       helper,
       error,
       disabled = false,
+      required = false,
       accessibilityLabel,
       closeAccessibilityLabel,
       style,
@@ -374,6 +376,7 @@ export function makeSelect(rn) {
       else rest[key] = own;
     }
     const t = resolveFormControlTokens(theme, overrides);
+    const requiredWord = useHostSharedText("required", "Required");
     const [open, setOpen] = React.useState(false);
     // Null until the person ticks something: an untouched sheet follows `values`.
     const [ownDraft, setDraft] = React.useState(null);
@@ -406,7 +409,7 @@ export function makeSelect(rn) {
     const draft = ownDraft === null ? valueList(values) : ownDraft;
     const invalid = isShown(error);
     const sheetTitle = isShown(title) ? title : isText(label) ? label : undefined;
-    const name = spokenLabel(accessibilityLabel, label);
+    const name = spokenLabel(accessibilityLabel, label, required ? requiredWord : null);
     const shown = current ? current.label : placeholder;
     const spokenChoice = multiple
       ? picked.length > 0
@@ -453,6 +456,7 @@ export function makeSelect(rn) {
         helper,
         error: errorMessage(error),
         disabled,
+        required,
         noteId,
         onLabelPress: () => focusNode(triggerRef.current),
         style: containerStyle,
@@ -572,6 +576,7 @@ export function makeSelect(rn) {
   });
 
   Select.displayName = "Select";
+  Select[DRAWS_FIELD_FRAME] = true;
   return Select;
 }