@primitiv-ui/react 0.1.38 → 0.1.40

package/src/SegmentedControl/__tests__/SegmentedControl.ref-forwarding.test.tsx

@@ -1,45 +0,0 @@
-import { createRef } from "react";
-import { render, screen } from "@testing-library/react";
-
-import { SegmentedControl } from "../SegmentedControl";
-
-describe("SegmentedControl.Item ref forwarding", () => {
-  it("forwards the underlying button element to a consumer function ref", () => {
-    // Arrange
-    const received: (HTMLButtonElement | null)[] = [];
-    const functionRef = (node: HTMLButtonElement | null) => {
-      received.push(node);
-    };
-
-    // Act
-    render(
-      <SegmentedControl.Root aria-label="Mode">
-        <SegmentedControl.Item value="a" ref={functionRef}>
-          A
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    const button = screen.getByRole("radio", { name: "A" });
-    expect(received).toContain(button);
-  });
-
-  it("forwards the underlying button element to a consumer object ref", () => {
-    // Arrange
-    const objectRef = createRef<HTMLButtonElement>();
-
-    // Act
-    render(
-      <SegmentedControl.Root aria-label="Mode">
-        <SegmentedControl.Item value="a" ref={objectRef}>
-          A
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    const button = screen.getByRole("radio", { name: "A" });
-    expect(objectRef.current).toBe(button);
-  });
-});

package/src/SegmentedControl/__tests__/SegmentedControl.roving-tabindex.test.tsx

@@ -1,104 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { SegmentedControl } from "../SegmentedControl";
-
-describe("SegmentedControl roving tabindex", () => {
-  it("puts only the first segment in the tab sequence when nothing is selected", () => {
-    // Arrange & Act
-    render(
-      <SegmentedControl.Root aria-label="Mode">
-        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
-        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
-        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
-      "tabindex",
-      "0",
-    );
-    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-    expect(screen.getByRole("radio", { name: "C" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-  });
-
-  it("puts only the selected segment in the tab sequence when one is selected", () => {
-    // Arrange & Act
-    render(
-      <SegmentedControl.Root aria-label="Mode" defaultValue="b">
-        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
-        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
-        <SegmentedControl.Item value="c">C</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    expect(screen.getByRole("radio", { name: "A" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-    expect(screen.getByRole("radio", { name: "B" })).toHaveAttribute(
-      "tabindex",
-      "0",
-    );
-    expect(screen.getByRole("radio", { name: "C" })).toHaveAttribute(
-      "tabindex",
-      "-1",
-    );
-  });
-
-  it("moves the tab stop to a newly selected segment", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <SegmentedControl.Root aria-label="Mode">
-        <SegmentedControl.Item value="a">A</SegmentedControl.Item>
-        <SegmentedControl.Item value="b">B</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-    const a = screen.getByRole("radio", { name: "A" });
-    const b = screen.getByRole("radio", { name: "B" });
-    expect(a).toHaveAttribute("tabindex", "0");
-
-    // Act
-    await user.click(b);
-
-    // Assert
-    expect(a).toHaveAttribute("tabindex", "-1");
-    expect(b).toHaveAttribute("tabindex", "0");
-  });
-
-  it("tabs into the single home-base segment and not the others", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <>
-        <button type="button">Before</button>
-        <SegmentedControl.Root aria-label="Mode">
-          <SegmentedControl.Item value="a">A</SegmentedControl.Item>
-          <SegmentedControl.Item value="b">B</SegmentedControl.Item>
-          <SegmentedControl.Item value="c">C</SegmentedControl.Item>
-        </SegmentedControl.Root>
-        <button type="button">After</button>
-      </>,
-    );
-    screen.getByRole("button", { name: "Before" }).focus();
-
-    // Act
-    await user.tab();
-
-    // Assert: focus lands on the first segment (the home base)
-    expect(screen.getByRole("radio", { name: "A" })).toHaveFocus();
-
-    // Tabbing again escapes the group entirely — the others are tabindex -1.
-    await user.tab();
-    expect(screen.getByRole("button", { name: "After" })).toHaveFocus();
-  });
-});

package/src/SegmentedControl/__tests__/SegmentedControl.uncontrolled-state.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-import { SegmentedControl } from "../SegmentedControl";
-
-describe("SegmentedControl uncontrolled state", () => {
-  it("reflects defaultValue on mount", () => {
-    // Arrange & Act
-    render(
-      <SegmentedControl.Root aria-label="Mode" defaultValue="styled">
-        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
-        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Assert
-    expect(screen.getByRole("radio", { name: "Headless" })).toHaveAttribute(
-      "aria-checked",
-      "false",
-    );
-    expect(screen.getByRole("radio", { name: "Styled" })).toHaveAttribute(
-      "aria-checked",
-      "true",
-    );
-    expect(screen.getByRole("radio", { name: "Styled" })).toHaveAttribute(
-      "data-state",
-      "checked",
-    );
-  });
-
-  it("selects an item on click and un-selects the previous one", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    render(
-      <SegmentedControl.Root aria-label="Mode" defaultValue="headless">
-        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
-        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-    const headless = screen.getByRole("radio", { name: "Headless" });
-    const styled = screen.getByRole("radio", { name: "Styled" });
-    expect(headless).toHaveAttribute("aria-checked", "true");
-
-    // Act
-    await user.click(styled);
-
-    // Assert
-    expect(headless).toHaveAttribute("aria-checked", "false");
-    expect(styled).toHaveAttribute("aria-checked", "true");
-  });
-
-  it("fires onValueChange with the new value on every distinct selection", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(
-      <SegmentedControl.Root aria-label="Mode" onValueChange={onValueChange}>
-        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
-        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("radio", { name: "Headless" }));
-    await user.click(screen.getByRole("radio", { name: "Styled" }));
-
-    // Assert
-    expect(onValueChange).toHaveBeenNthCalledWith(1, "headless");
-    expect(onValueChange).toHaveBeenNthCalledWith(2, "styled");
-  });
-
-  it("does not re-fire onValueChange when the already-selected item is clicked again", async () => {
-    // Arrange
-    const user = userEvent.setup();
-    const onValueChange = vi.fn();
-    render(
-      <SegmentedControl.Root
-        aria-label="Mode"
-        defaultValue="headless"
-        onValueChange={onValueChange}
-      >
-        <SegmentedControl.Item value="headless">Headless</SegmentedControl.Item>
-        <SegmentedControl.Item value="styled">Styled</SegmentedControl.Item>
-      </SegmentedControl.Root>,
-    );
-
-    // Act
-    await user.click(screen.getByRole("radio", { name: "Headless" }));
-    await user.click(screen.getByRole("radio", { name: "Headless" }));
-
-    // Assert
-    expect(onValueChange).not.toHaveBeenCalled();
-  });
-});

package/src/SegmentedControl/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useSegmentedControlContext } from "./useSegmentedControlContext";
-export { useSegmentedControlRoot } from "./useSegmentedControlRoot";

package/src/SegmentedControl/hooks/useSegmentedControlContext.ts

@@ -1 +0,0 @@
-export { useSegmentedControlContext } from "../SegmentedControlContext";

package/src/SegmentedControl/hooks/useSegmentedControlRoot.ts

@@ -1,87 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-import { useCollection, useControllableState } from "../../hooks/index.ts";
-
-type UseSegmentedControlRootArgs = {
-  defaultValue?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-};
-
-type ItemMeta = {
-  element: HTMLButtonElement;
-  disabled: boolean;
-};
-
-export function useSegmentedControlRoot({
-  defaultValue,
-  value: controlledValue,
-  onValueChange,
-}: UseSegmentedControlRootArgs) {
-  const [value, setValue] = useControllableState<string>(
-    controlledValue,
-    defaultValue,
-    onValueChange,
-  );
-
-  const select = useCallback(
-    (next: string) => {
-      if (value === next) return;
-      setValue(next);
-    },
-    [value, setValue],
-  );
-
-  // Track registered item metadata in a ref (for focus handling) and their
-  // ordered values as state — required for the roving-tabindex home base.
-  // Disabled values are derived per render from itemsRef; any change that
-  // affects the set (mount, unmount, disabled toggle) re-runs the registrar
-  // effect, which updates the keys state and forces the recompute.
-  const {
-    register: registerItemBase,
-    itemsRef,
-    keys: itemValues,
-  } = useCollection<string, ItemMeta>();
-
-  const registerItem = useCallback(
-    (itemValue: string, element: HTMLButtonElement | null, disabled = false) => {
-      registerItemBase(itemValue, element ? { element, disabled } : null);
-    },
-    [registerItemBase],
-  );
-
-  const disabledValues = useMemo(
-    () =>
-      new Set(
-        Array.from(itemsRef.current.entries())
-          .filter(([, meta]) => meta.disabled)
-          .map(([v]) => v),
-      ),
-    // itemValues is a fresh array on every register call (new identity even
-    // when the keys are unchanged), so the memo re-runs whenever any item
-    // mounts, unmounts, or toggles disabled — exactly the trigger we want.
-    [itemValues, itemsRef],
-  );
-
-  const focusItem = useCallback(
-    (itemValue: string) => {
-      // `itemValue` is always sourced from `navigable` (the enabled subset of
-      // `itemValues`), and useCollection's register() writes `itemsRef` and
-      // the `itemValues` state together — so a value that appears here is
-      // guaranteed to already have a live entry in the map.
-      // Stryker disable next-line OptionalChaining: unreachable given that invariant.
-      itemsRef.current.get(itemValue)?.element.focus();
-    },
-    // Stryker disable next-line ArrayDeclaration: equivalent — itemsRef is a stable RefObject.
-    [itemsRef],
-  );
-
-  return {
-    value,
-    select,
-    registerItem,
-    itemValues,
-    disabledValues,
-    focusItem,
-  };
-}

package/src/SegmentedControl/index.ts

@@ -1,2 +0,0 @@
-export * from "./SegmentedControl";
-export * from "./types";

package/src/SegmentedControl/types.ts

@@ -1,138 +0,0 @@
-import { ComponentProps, ReactNode, Ref } from "react";
-
-/**
- * Layout axis of the control. `"horizontal"` (default) binds the
- * Arrow Left/Right pair; `"vertical"` binds Arrow Up/Down. Also
- * reflected as `aria-orientation` and `data-orientation` on the root.
- */
-export type SegmentedControlOrientation = "horizontal" | "vertical";
-
-/** Reading direction — swaps the horizontal arrow pair when `"rtl"`. */
-export type SegmentedControlReadingDirection = "ltr" | "rtl";
-
-/**
- * Shared base for both {@link SegmentedControlRootProps} variants — the
- * native `<div>` attributes (minus the component-owned `role` and the
- * narrowed `dir`) plus the `asChild` escape hatch, orientation, reading
- * direction, group-level `disabled`, and a typed `ref`.
- */
-export type SegmentedControlRootBaseProps = Omit<
-  ComponentProps<"div">,
-  "role" | "dir" | "defaultValue"
-> & {
-  /** The control's segments — {@link SegmentedControlItemProps | `SegmentedControl.Item`}
-   * elements. */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLDivElement`. */
-  ref?: Ref<HTMLDivElement>;
-  /**
-   * When `true`, Root delegates rendering to a single consumer-supplied
-   * element via the {@link Slot} pattern instead of the default `<div>`;
-   * `role="radiogroup"`, `aria-orientation`, `data-orientation`,
-   * `data-disabled`, `dir`, and remaining props are merged onto it.
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * Which arrow-key pair moves focus and selection through the segments,
-   * and the visual axis. `"horizontal"` binds Arrow Left/Right;
-   * `"vertical"` binds Arrow Up/Down. Reflected as `aria-orientation` and
-   * `data-orientation` on the root.
-   * @default "horizontal"
-   */
-  orientation?: SegmentedControlOrientation;
-  /**
-   * Reading direction. In `"rtl"` the horizontal arrow pair is swapped so
-   * Arrow Left moves forward. When omitted, it is inherited from the
-   * nearest {@link DirectionProvider}, falling back to `"ltr"`.
-   */
-  dir?: SegmentedControlReadingDirection;
-  /**
-   * Disables the entire control — every segment is non-interactive and
-   * excluded from arrow-key navigation, and `data-disabled=""` is set on
-   * the root. Individual segments can also be disabled via the Item's own
-   * `disabled` prop.
-   * @default false
-   */
-  disabled?: boolean;
-};
-
-/**
- * Uncontrolled variant of {@link SegmentedControlRootProps}: the component
- * owns the selected value. Pass `defaultValue` (or omit it); `onValueChange`
- * is optional and `value` is forbidden.
- */
-export type SegmentedControlRootUncontrolledProps =
-  SegmentedControlRootBaseProps & {
-    /** Value of the segment selected on first render. Omit for nothing
-     * selected on mount. */
-    defaultValue?: string;
-    /** Forbidden in uncontrolled mode — use `defaultValue` instead. */
-    value?: never;
-    /** Called with the new value whenever the selection changes. Optional
-     * in uncontrolled mode. */
-    onValueChange?: (value: string) => void;
-  };
-
-/**
- * Controlled variant of {@link SegmentedControlRootProps}: the parent owns
- * the selected value. Pass `value` and `onValueChange` together;
- * `defaultValue` is forbidden.
- */
-export type SegmentedControlRootControlledProps =
-  SegmentedControlRootBaseProps & {
-    /** Forbidden in controlled mode — use `value` instead. */
-    defaultValue?: never;
-    /** The currently selected value. Must be kept in sync by the parent
-     * via `onValueChange`. */
-    value: string;
-    /** Called with the new value whenever the selection changes. Required
-     * in controlled mode. */
-    onValueChange: (value: string) => void;
-  };
-
-/**
- * Props for {@link SegmentedControlRoot | `SegmentedControl.Root`}. A
- * discriminated union of {@link SegmentedControlRootUncontrolledProps} and
- * {@link SegmentedControlRootControlledProps}, so TypeScript accepts exactly
- * one state mode.
- */
-export type SegmentedControlRootProps =
-  | SegmentedControlRootUncontrolledProps
-  | SegmentedControlRootControlledProps;
-
-/**
- * Props for {@link SegmentedControlItem | `SegmentedControl.Item`} — the
- * segment button. `value` identifies the option; all native `<button>`
- * attributes (minus the component-owned `type`, `role`, `aria-checked`, and
- * `value`) plus the `asChild` escape hatch and a typed `ref` pass through.
- */
-export type SegmentedControlItemProps = Omit<
-  ComponentProps<"button">,
-  "type" | "role" | "aria-checked" | "value"
-> & {
-  /** Uniquely identifies this segment within the control and is reported to
-   * `onValueChange` / matched against Root's `value` when selected. Required. */
-  value: string;
-  /** The segment's visible content — typically its text label. */
-  children?: ReactNode;
-  /** Forwarded to the underlying `HTMLButtonElement`. */
-  ref?: Ref<HTMLButtonElement>;
-  /**
-   * Disables just this segment: forwards the native `disabled` attribute,
-   * removes it from arrow-key navigation and the roving-tabindex home base,
-   * and sets `data-disabled=""`. The whole control can also be disabled via
-   * Root's `disabled` prop.
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * When `true`, renders the single child element via the {@link Slot}
-   * pattern instead of the default `<button>`; ARIA, `data-state`,
-   * `data-disabled`, `tabIndex`, `onClick`, `onKeyDown`, `disabled`, and
-   * `ref` are merged onto it. A non-focusable child must be made focusable
-   * by the consumer.
-   * @default false
-   */
-  asChild?: boolean;
-};

package/src/Select/README.md

@@ -1,168 +0,0 @@
-# Select
-
-Headless **Select** — a single-select compound with two render paths chosen
-by the `native` prop:
-
-- **Rich** (`native={false}`, the default) — a fully-styleable Popover-API
-  listbox (`Select.Trigger` / `Select.Value` / `Select.Content` /
-  `Select.Item` / `Select.ItemIndicator`). Items carry arbitrary content
-  (icons, badges, indicators).
-- **Native** (`native={true}`) — a thin wrapper over a real `<select>` /
-  `<option>` / `<optgroup>` for flat, OS-native cases (mobile wheel pickers,
-  maximum-compatibility forms).
-
-Both modes share the same `value` / `onValueChange` / `disabled` / `name`
-(form) API. Zero styles ship.
-
-```tsx
-import { Select } from "@primitiv-ui/react";
-
-// Rich (default)
-<Select.Root value={framework} onValueChange={setFramework}>
-  <Select.Trigger>
-    <Select.Value placeholder="Pick a framework..." />
-  </Select.Trigger>
-  <Select.Content>
-    <Select.Item value="react">
-      <ReactIcon />
-      React
-      <Select.ItemIndicator>✓</Select.ItemIndicator>
-    </Select.Item>
-    <Select.Item value="vue">
-      <VueIcon />
-      Vue
-      <Select.ItemIndicator>✓</Select.ItemIndicator>
-    </Select.Item>
-  </Select.Content>
-</Select.Root>;
-```
-
-## Sub-components
-
-| Export                 | Rich element             | Native element | Notes                                          |
-| ---------------------- | ------------------------ | -------------- | ---------------------------------------------- |
-| `Select.Root`          | context boundary + hidden `<select>` | `<select>` | owns value + open state                        |
-| `Select.Trigger`       | `<button>`               | —              | `aria-haspopup="listbox"`, `aria-expanded`, `aria-controls`; `asChild` |
-| `Select.Value`         | `<span>`                 | —              | mirrors the selected item's content            |
-| `Select.Content`       | `<div role="listbox">` (`popover="auto"`) | — | keyboard nav; `asChild`                        |
-| `Select.Item`          | `<div role="option">`    | `<option>`     | `value` (required), `disabled`                 |
-| `Select.ItemIndicator` | `<span>`                 | —              | selected-only; `forceMount`, `asChild`         |
-| `Select.Group`         | `<div role="group">`     | `<optgroup>`   | `label` (required string)                      |
-| `Select.Separator`     | `<div role="separator">` | —              | rich-only divider; skipped by keyboard nav; `asChild` |
-| `Select.Placeholder`   | —                        | `<option value="" hidden disabled>` | native-only initial hint      |
-
-## State
-
-**Selection** — controlled (`value` + `onValueChange`) or uncontrolled
-(`defaultValue`, or omit for none), discriminated at the type level so only
-one shape is accepted. `onValueChange` receives the new value as a string.
-
-**Open** (rich only) — controlled (`open` + `onOpenChange`) or uncontrolled
-(`defaultOpen`). The trigger toggles it; selection, Escape, and light-dismiss
-close it.
-
-## Rich mode
-
-### Value mirroring
-
-`Select.Value` **automatically mirrors the selected `Select.Item`'s
-children** into the trigger — write the icon + label once, on the item, and
-it shows up in the closed trigger. `Select.ItemIndicator` is **excluded** from
-the mirror (the checkmark answers "which row is selected" — redundant on the
-trigger it already represents). `placeholder` shows when nothing is selected.
-
-The exclusion works **through your own wrappers**: the mirror doesn't test the
-element's type (a wrapper component would be opaque to that, and a styled layer
-always wraps), it publishes its intent through context and each indicator opts
-itself out — at any nesting depth, `forceMount` included. Every other child
-carries through untouched, so a trailing badge on the selected item shows up in
-the trigger too; style it there if it needs different spacing from the row.
-
-### Item indicator
-
-`Select.ItemIndicator`, nested in a `Select.Item`, renders **only when that
-item is selected** and exposes `data-state="checked" | "unchecked"`. Pass
-`forceMount` to keep it in the DOM (as `unchecked`) for CSS enter/exit
-animation.
-
-### Keyboard
-
-While the listbox is open:
-
-| Key                     | Behaviour                                          |
-| ----------------------- | -------------------------------------------------- |
-| `ArrowDown` / `ArrowUp` | Move focus to next / previous option (wraps)       |
-| `Home` / `End`          | First / last option                                |
-| `Enter` / `Space`       | Select the focused option and close                |
-| `Escape`                | Close and return focus to the trigger              |
-| printable character     | Typeahead — focus the next option matching prefix  |
-
-Disabled options are skipped by arrows and typeahead. On open, focus moves to
-the selected option (or the first enabled one).
-
-### Popup placement
-
-`Select.Content` uses the native Popover API (`popover="auto"`) for the top
-layer and light-dismiss — no Portal, no positioning JS. Consumers place the
-popup themselves via CSS (the component ships no anchor positioning).
-
-## Native mode
-
-Pass `native` to render a real `<select>`. `Select.Item` becomes an
-`<option>` — keeping **only its string/number children** as the option text
-and **dropping element children** (icons, indicators don't render). An
-icon-only item with no text renders an empty, unlabelled `<option>`.
-
-```tsx
-<Select.Root native defaultValue="apple" aria-label="Pick a fruit">
-  <Select.Placeholder>Choose a fruit...</Select.Placeholder>
-  <Select.Group label="Fruits">
-    <Select.Item value="apple">Apple</Select.Item>
-    <Select.Item value="banana">Banana</Select.Item>
-  </Select.Group>
-</Select.Root>
-```
-
-`Select.Placeholder` (native-only) renders `<option value="" disabled hidden>`.
-When present with no `value`/`defaultValue`, Root infers `defaultValue=""` so
-the placeholder is the initial selection; pair with `required` for native form
-validation. `Select.Group` renders `<optgroup label>`.
-
-## Forms
-
-Pass `name` and place the Select in a `<form>`. In native mode the `<select>`
-submits directly; in rich mode Root renders a visually-hidden native
-`<select name>` that carries the value, so submission works identically. Pair
-with `required` for browser validation.
-
-## Field integration
-
-Inside a [`<Field.Root>`](../Field/README.md), `Select.Root` reads
-`FieldContext` and inherits `id`, `aria-describedby`, `aria-invalid`,
-`disabled`, and `required` (consumer props win). In native mode these apply to
-the `<select>`; in rich mode `disabled` / `required` / `name` flow to the
-hidden form `<select>`.
-
-## `asChild`
-
-- `Select.Root` (native mode) — delegate to a styled `<select>` wrapper.
-- `Select.Trigger` / `Select.Content` / `Select.ItemIndicator` (rich mode) —
-  compose the merged props onto a consumer element.
-
-## Styling hooks
-
-| Attribute       | Values                          | Set on                 |
-| --------------- | ------------------------------- | ---------------------- |
-| `aria-expanded` | `"true"` / `"false"`            | `Select.Trigger`       |
-| `aria-selected` | `"true"` / `"false"`            | rich `Select.Item`     |
-| `data-state`    | `"checked"` / `"unchecked"`     | rich `Select.Item`, `Select.ItemIndicator` |
-| `data-disabled` | `""` (present when disabled)    | rich `Select.Item`, native `Select.Root` |
-| `data-placeholder` | `""` (present while nothing is selected) | `Select.Value` |
-
-`data-placeholder` is what a styled layer keys the muted placeholder colour
-off — it disappears the moment an item's content is mirrored into the trigger.
-
-## Future work
-
-A Combobox with filtering is planned — see
-[Future work](../../../../docs/select-future-work.md).