@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/select.json

@@ -0,0 +1,1179 @@
+{
+  "family": "select",
+  "ui": "select",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Picks one option from a popup list."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "variant": [
+      "outline",
+      "subtle",
+      "plain"
+    ],
+    "side": [
+      "bottom",
+      "top",
+      "inline-start",
+      "inline-end",
+      "left",
+      "right"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "width": [
+      "anchor",
+      "content"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "strategy": [
+      "absolute",
+      "fixed"
+    ],
+    "multiple": [
+      true,
+      false
+    ],
+    "clearable": [
+      true,
+      false
+    ],
+    "loop": [
+      true,
+      false
+    ],
+    "search": [
+      true,
+      false
+    ],
+    "highlightMatch": [
+      true,
+      false
+    ],
+    "typeahead": [
+      true,
+      false
+    ],
+    "closeOnSelect": [
+      true,
+      false
+    ],
+    "closeOnEscape": [
+      true,
+      false
+    ],
+    "closeOnOutsidePress": [
+      true,
+      false
+    ],
+    "flip": [
+      true,
+      false
+    ],
+    "shift": [
+      true,
+      false
+    ],
+    "hideWhenDetached": [
+      true,
+      false
+    ],
+    "portal": [
+      true,
+      false
+    ],
+    "fullWidth": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ],
+    "readOnly": [
+      true,
+      false
+    ],
+    "required": [
+      true,
+      false
+    ],
+    "invalid": [
+      true,
+      false
+    ],
+    "loading": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "select": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "side": "bottom",
+        "align": "start",
+        "width": "content",
+        "mount": "active",
+        "strategy": "absolute",
+        "multiple": false,
+        "clearable": false,
+        "loop": false,
+        "search": false,
+        "highlightMatch": true,
+        "typeahead": true,
+        "closeOnSelect": true,
+        "closeOnEscape": true,
+        "closeOnOutsidePress": true,
+        "flip": true,
+        "shift": true,
+        "hideWhenDetached": true,
+        "portal": true,
+        "fullWidth": true,
+        "disabled": false,
+        "readOnly": false,
+        "required": false,
+        "invalid": false,
+        "loading": false,
+        "sideOffset": 4,
+        "alignOffset": 0,
+        "collisionPadding": 8,
+        "typeaheadTimeout": 500
+      },
+      "capabilities": [
+        "selection",
+        "value",
+        "open",
+        "current",
+        "size",
+        "appearance",
+        "placement",
+        "content",
+        "fullWidth",
+        "disabled",
+        "loading",
+        "readOnly",
+        "required",
+        "invalid",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "disabled",
+        "readonly",
+        "invalid",
+        "required",
+        "loading",
+        "selected",
+        "current"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "value",
+        "arrow",
+        "busy",
+        "tags",
+        "summary",
+        "clear",
+        "positioner",
+        "content",
+        "search",
+        "search-icon",
+        "search-input",
+        "list",
+        "chosen",
+        "group",
+        "group-label",
+        "item",
+        "indicator",
+        "icon",
+        "label",
+        "match",
+        "description",
+        "separator",
+        "empty",
+        "status",
+        "placeholder"
+      ]
+    }
+  },
+  "docs": {
+    "select": {
+      "imports": {
+        "source": "import { Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, SelectValue } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, rendered by SelectTrigger",
+          "required": true,
+          "purpose": "The frame, carrying data-ui=\"select\". It draws the border, the shadow, the focus ring and every state, as the text field frame does: a focus ring can only be drawn by an ancestor of the focused element."
+        },
+        {
+          "part": "trigger",
+          "element": "button with role=\"combobox\"",
+          "required": true,
+          "purpose": "The button with role=\"combobox\". It fills the frame, keeps DOM focus for the whole interaction, and carries aria-expanded, aria-controls and aria-activedescendant. Inside a field it carries the field’s control id, so a press on the label focuses it."
+        },
+        {
+          "part": "value",
+          "element": "span, rendered by SelectValue",
+          "required": true,
+          "purpose": "What the control shows: the chosen label, a summary of several, or the placeholder. It carries data-placeholder while nothing is chosen, and data-unmatched when a value has no known label."
+        },
+        {
+          "part": "arrow",
+          "element": "span",
+          "required": true,
+          "purpose": "The chevron, a Glyph inside an Icon box, turned over while the list is open. It sits against the end of the frame and takes no pointer events, so a press on it reaches the trigger."
+        },
+        {
+          "part": "busy",
+          "element": "span",
+          "required": false,
+          "purpose": "The spinner, drawn in place of the chevron while loading is set. It carries data-ui=\"spinner\", so its ring comes from the spinner stylesheet."
+        },
+        {
+          "part": "tags",
+          "element": "span",
+          "required": false,
+          "purpose": "The chosen values of a multiple select, one tag each, laid over the trigger rather than inside it: a remove button inside a button would be a control inside a control. Tags that do not fit collapse into one +N tag."
+        },
+        {
+          "part": "summary",
+          "element": "span",
+          "required": false,
+          "purpose": "The text a multiple select shows under 120 pixels instead of tags, such as ‘3 selected’. It sits inside the value, so it names the trigger whichever of the two is drawn, and it is visually hidden rather than removed while the tags are shown."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "The clear button. It is drawn while clearable is set and something is chosen, as a sibling of the trigger rather than a child: a focusable element inside a combobox would be a widget inside a widget."
+        },
+        {
+          "part": "positioner",
+          "element": "div, rendered by SelectContent",
+          "required": true,
+          "purpose": "The layer, portalled to the end of the document. It carries data-ui=\"select\" again, because a stylesheet cannot reach the portalled list through the root. The positioner writes its position on this element, and this element scales and fades."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"listbox\", or role=\"dialog\" under search",
+          "required": true,
+          "purpose": "The list surface. It defines the three columns every option uses, is bounded by the height the positioner reports, and scrolls inside it. With search it becomes a dialog that holds the search field and the list, because a listbox may hold only options and groups."
+        },
+        {
+          "part": "search",
+          "element": "div, drawn only under search",
+          "required": false,
+          "purpose": "The search row, fixed at the top of the list so it stays in view while the results scroll. The control itself never takes typed text; a value the reader types belongs in a combobox."
+        },
+        {
+          "part": "search-icon",
+          "element": "span, aria-hidden",
+          "required": false,
+          "purpose": "The magnifier, a Glyph inside an Icon box. searchProps.icon replaces it, and null removes it."
+        },
+        {
+          "part": "search-input",
+          "element": "input with role=\"combobox\"",
+          "required": false,
+          "purpose": "The search field. It carries aria-controls naming the list, aria-autocomplete=\"list\" and aria-activedescendant, and holds DOM focus while the list is open, because a dialog popup does not support aria-activedescendant on the trigger."
+        },
+        {
+          "part": "list",
+          "element": "div with role=\"listbox\", drawn only under search",
+          "required": false,
+          "purpose": "The listbox inside the dialog when search is set. It scrolls under the fixed search row and defines the option columns in place of the surface."
+        },
+        {
+          "part": "chosen",
+          "element": "div, aria-hidden, drawn while several values are chosen",
+          "required": false,
+          "purpose": "Every chosen value of a multiple select, as tags at the top of the list. The control holds one line, so it may show three tags and a count; this band shows them all, wraps, and scrolls after two rows. It is aria-hidden and holds no buttons: without search focus never reaches the list, and with search Tab leaves the control, so a remove button here would answer only the pointer. A value is removed from its option or from its tag in the control."
+        },
+        {
+          "part": "match",
+          "element": "mark, the match part of the highlight family, whose root sits inside label",
+          "required": false,
+          "purpose": "The span of a label that the query matched, found with the same comparison the filter used. The mark comes from the highlight stylesheet and changes no metric of the surrounding text."
+        },
+        {
+          "part": "group",
+          "element": "div with role=\"group\"",
+          "required": false,
+          "purpose": "A run of options under a heading. It spans every column and inherits them, so its options align with the options outside it."
+        },
+        {
+          "part": "group-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The group’s heading. The group references it with aria-labelledby, as the listbox pattern requires of every option group."
+        },
+        {
+          "part": "item",
+          "element": "div with role=\"option\"",
+          "required": true,
+          "purpose": "One option, not a button: an option is not separately focusable, and a button would add a tab stop. data-current marks the highlight and data-selected the chosen option."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": true,
+          "purpose": "The check mark in the last column. Its box is reserved whether or not the mark is drawn, so rows do not shift as the highlight moves."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The artwork in the first column: an Icon holding a Glyph, or any element. It is separate from the check mark, which says whether the option is chosen."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The option’s text, and the only column that shrinks. It wraps to two lines and then truncates, with the whole text still in the DOM."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "A second line under the label, for detail the label has no room for."
+        },
+        {
+          "part": "separator",
+          "element": "div with role=\"separator\"",
+          "required": false,
+          "purpose": "A line between two runs of options. It is not focusable and not interactive."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The text the list shows when it holds no options: the empty message, or the empty prop of SelectContent."
+        },
+        {
+          "part": "status",
+          "element": "div with role=\"status\"",
+          "required": false,
+          "purpose": "The live region that announces the loading message, and the number of results while searching. It keeps the width of the list, so nothing shifts when the options arrive."
+        },
+        {
+          "part": "placeholder",
+          "element": "div",
+          "required": false,
+          "purpose": "Three rows the height of an option, drawn with the skeleton stylesheet while loading is set. They are hidden from assistive technology, because the status row announces the wait."
+        }
+      ],
+      "api": [
+        {
+          "name": "search",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Puts a search field at the top of the list. The list becomes a dialog, DOM focus moves into the search field, and typeahead turns off."
+        },
+        {
+          "name": "searchValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The search query. Passing it makes the query controlled. It is never the selection."
+        },
+        {
+          "name": "defaultSearchValue",
+          "type": "string",
+          "defaultValue": "''",
+          "appliesTo": "Select",
+          "description": "The query an uncontrolled search field starts with. Read once."
+        },
+        {
+          "name": "filter",
+          "type": "((label: string, query: string) => boolean) | null",
+          "defaultValue": "createFilter",
+          "appliesTo": "Select",
+          "description": "Decides whether an option matches the query. Unset uses a locale-sensitive contains that ignores case and accents. null turns filtering off, for a list a server has already filtered. A function replaces the comparison."
+        },
+        {
+          "name": "highlightMatch",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the span of a label that matched the query is marked."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The BCP 47 language the default filter compares in. Defaults to the language in force."
+        },
+        {
+          "name": "searchProps",
+          "type": "SelectSearchProps",
+          "defaultValue": "—",
+          "appliesTo": "SelectContent",
+          "description": "Props for the search field: every native input attribute, icon, and render to replace the row around the field."
+        },
+        {
+          "name": "value",
+          "type": "string | string[] | null",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The chosen value, or values when multiple is set. Passing it makes the selection controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | string[] | null",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The value an uncontrolled select starts with, and the value a form reset restores. Read once."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "Whether the list is open. Passing it makes the open state controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Whether an uncontrolled select starts open."
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The highlighted option. Passing it makes the highlight controlled. The highlight is where the keyboard is, not what is chosen."
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The option an uncontrolled highlight starts on."
+        },
+        {
+          "name": "items",
+          "type": "SelectItems",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "Values with their labels, so the closed control can show the label of a value whose option has not been rendered. Options are rendered only while the list is open."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The name the value is submitted under. It renders a hidden native select, which FormData reads and a form reset restores."
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The id of the form the control belongs to, when it is not the enclosing form."
+        },
+        {
+          "name": "total",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "The size of the whole collection when only part of it is rendered. Options with position then carry aria-setsize and aria-posinset."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Select",
+          "description": "The step of the control scale. When unset, the select takes the size of its field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "Select",
+          "description": "How much frame the control draws: an outline, a filled subtle frame, or plain, with no frame at rest."
+        },
+        {
+          "name": "side",
+          "type": "'bottom' | 'top' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "bottom",
+          "appliesTo": "Select",
+          "description": "The edge of the control the list opens from."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "Select",
+          "description": "Where the list aligns along that edge."
+        },
+        {
+          "name": "width",
+          "type": "'anchor' | 'content'",
+          "defaultValue": "content",
+          "appliesTo": "Select",
+          "description": "content keeps the list at least as wide as the control and widens it to its longest option; anchor pins it to the width of the control."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Select",
+          "description": "When the list exists in the DOM: active while it is open, lazy from the first open on, eager from the start."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "Select",
+          "description": "The CSS position the positioner gives the list."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Allows several values. The value becomes an array, and the list stays open as options are chosen."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Draws a clear button once something is chosen."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Whether the arrow keys wrap from the last option to the first."
+        },
+        {
+          "name": "typeahead",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether typing the first letters of a label highlights the matching option. Off while search is set."
+        },
+        {
+          "name": "typeaheadTimeout",
+          "type": "number",
+          "defaultValue": "500",
+          "appliesTo": "Select",
+          "description": "How long typed letters keep building one search, in milliseconds."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether choosing an option closes the list. A multiple select stays open regardless."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether Escape closes the list."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether a press outside the list closes it."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the list may open on the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the list may slide along its edge to stay in view."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the list hides while its control is scrolled out of view."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the list renders at the end of the document instead of inside the control."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Select",
+          "description": "Whether the control fills its container. false sizes it to its widest value."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Disables the control and takes it out of the tab order. When unset, the select takes the state of its field."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Keeps the value visible and focusable and never opens the list. When unset, the select takes the state of its field."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Sets aria-required, and the required attribute of the hidden native select. When unset, the select takes the state of its field."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Sets aria-invalid and draws the border and the focus ring in the danger tone. When unset, the select takes the state of its field."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Select",
+          "description": "Shows the spinner, three placeholder rows and the loading message, and sets aria-busy on the listbox."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "Select",
+          "description": "The gap between the control and the list, in pixels."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Select",
+          "description": "How far the list shifts along its edge, in pixels."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "Select",
+          "description": "The distance the list keeps from the edges of the viewport, in pixels."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<SelectMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "Replaces any of the phrases the select writes: clear, remove ({label}), summary ({count}), search, searchPlaceholder, count ({count}), empty and loading. Phrases left out come from the language in force."
+        },
+        {
+          "name": "placeholder",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectValue",
+          "description": "What the control shows while nothing is chosen."
+        },
+        {
+          "name": "children",
+          "type": "(values, labels) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectValue",
+          "description": "A function of the chosen values and their labels that returns what the control shows, in place of the built-in summary."
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectContent",
+          "description": "Replaces the empty message for this list."
+        },
+        {
+          "name": "status",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectContent",
+          "description": "Replaces the loading message for this list."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SelectItem",
+          "description": "The option’s value: what is submitted and what a change request carries."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SelectItem",
+          "description": "Announces the option as unavailable, keeps it in the list, and skips it with every movement key."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectItem",
+          "description": "A second line under the label."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectItem",
+          "description": "An element for the first column, such as an Icon holding a Glyph."
+        },
+        {
+          "name": "textValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SelectItem",
+          "description": "The text typeahead and the filter match on, when the label is not plain text."
+        },
+        {
+          "name": "position",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "SelectItem",
+          "description": "The option’s one-based place in the whole collection, written as aria-posinset."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectGroup",
+          "description": "The group’s heading, which names the group through aria-labelledby."
+        }
+      ],
+      "composition": [
+        {
+          "name": "SelectDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once for every select below it. The words come from the language in force, set by SlottedProvider. A prop set on one select still wins."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "SelectTrigger, SelectContent",
+          "description": "Replaces the frame of SelectTrigger or the layer of SelectContent. The button and the listbox carry the role and the wiring, so they cannot be replaced."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<SelectHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Select",
+          "description": "A handle with focus(), open(), close(), focusSearch() and scrollToKey(value)."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLButtonElement>",
+          "defaultValue": "—",
+          "appliesTo": "SelectTrigger",
+          "description": "The button element."
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<…>",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Each part accepts the props of its own element. Your onClick, onKeyDown or aria-label reaches that element, and the select’s own handler runs alongside yours instead of replacing it."
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: string | string[] | null, request: ChangeRequest)",
+          "when": "Before the selection changes. request.reason is pointer, keyboard, clear, select or programmatic, and request.cancel() refuses the change. A form reset reports programmatic."
+        },
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest)",
+          "when": "Before the list opens or closes. request.reason tells a choice from a dismissal: select, escape, outsidePress, pointer, keyboard, dismiss, blur or programmatic."
+        },
+        {
+          "name": "onHighlightedValueChange",
+          "payload": "(value: string | null, request: ChangeRequest)",
+          "when": "Before the highlight moves. request.reason is pointer, keyboard or programmatic."
+        },
+        {
+          "name": "onSearchValueChange",
+          "payload": "(value: string, request: ChangeRequest)",
+          "when": "Before the query changes. request.reason is keyboard for typing, select when an option is chosen while the list stays open, and clear when Escape empties the field or the list empties it as it opens and closes."
+        }
+      ],
+      "accessibility": [
+        "The trigger is a button with role=\"combobox\", aria-haspopup=\"listbox\" and aria-expanded. The list is a listbox with an option for each row.",
+        "DOM focus stays on the trigger. aria-activedescendant names the highlighted option, which also carries data-current; chosen options carry aria-selected and data-selected. The highlight is where the keyboard is; the selection is what was chosen.",
+        "A disabled option carries aria-disabled, keeps its place in the list, and is skipped by every movement key, typeahead included.",
+        "Inside a field, the trigger carries the field’s control id, so a press on the label focuses it without opening the list. The trigger also takes the label through aria-labelledby, because the name a label gives a button does not reliably reach a button with role=\"combobox\". Outside a field, give SelectTrigger an aria-label.",
+        "With search, the list is a dialog that holds a search field and a listbox, the trigger sets aria-haspopup=\"dialog\", and focus moves into the search field while the list is open.",
+        "Tab chooses the highlighted option and moves focus on, as the APG select-only example specifies; a native select only closes. Escape closes without choosing."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-inner-size-lg",
+    "--slotted-control-inner-size-md",
+    "--slotted-control-inner-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-shadow-focus-geometry",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-xs",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-radius-lg",
+    "--slotted-radius-none",
+    "--slotted-select-action-active-background",
+    "--slotted-select-action-color",
+    "--slotted-select-action-hover-background",
+    "--slotted-select-action-size",
+    "--slotted-select-arrow-color",
+    "--slotted-select-background",
+    "--slotted-select-border-color",
+    "--slotted-select-color",
+    "--slotted-select-content-border-color",
+    "--slotted-select-content-padding-block",
+    "--slotted-select-content-padding-inline",
+    "--slotted-select-content-radius",
+    "--slotted-select-content-shadow",
+    "--slotted-select-content-text",
+    "--slotted-select-content-text-muted",
+    "--slotted-select-disabled-background",
+    "--slotted-select-disabled-border-color",
+    "--slotted-select-disabled-color",
+    "--slotted-select-highlight",
+    "--slotted-select-highlight-active",
+    "--slotted-select-highlight-ring",
+    "--slotted-select-hover-border-color",
+    "--slotted-select-icon-size-min",
+    "--slotted-select-invalid-border-color",
+    "--slotted-select-invalid-edge-width",
+    "--slotted-select-invalid-focus-ring-color",
+    "--slotted-select-item-radius",
+    "--slotted-select-measure",
+    "--slotted-select-open-border-color",
+    "--slotted-select-placeholder-color",
+    "--slotted-select-plain-hover-background",
+    "--slotted-select-radius",
+    "--slotted-select-readonly-background",
+    "--slotted-select-search-icon-color",
+    "--slotted-select-selected-color",
+    "--slotted-select-separator-color",
+    "--slotted-select-shadow",
+    "--slotted-select-subtle-background",
+    "--slotted-select-subtle-border-color",
+    "--slotted-select-subtle-hover-background",
+    "--slotted-select-surface",
+    "--slotted-shadow-md",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-5",
+    "--slotted-surface-raised",
+    "--slotted-surface-sunken",
+    "--slotted-target-comfortable",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-surface",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One select with every axis on it, driven by the controls under the canvas. Change size, variant and width and watch the control and its popup answer together.",
+      "language": "tsx",
+      "source": "<Select>\n  <SelectTrigger aria-label=\"Fruit\">\n    <SelectValue placeholder=\"Choose a fruit\" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"apple\">Apple</SelectItem>\n    <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n  </SelectContent>\n</Select>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "selection",
+      "title": "Controlled and uncontrolled",
+      "note": "The left one owns its own value; the right one hands it to the page, and the request carries the reason so a consumer can tell a press from a key.",
+      "language": "tsx",
+      "source": "<Select defaultValue=\"blueberry\">…</Select>;\n\n<Select value={fruit} onValueChange={(next, request) => setFruit(next, request.reason)}>\n  …\n</Select>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "placeholder",
+      "title": "Placeholder and unresolved values",
+      "note": "Nothing chosen shows the placeholder in the muted step. A value the collection cannot name shows the value itself, which is what an async list holds for one render.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst REASONS: SelectOption[] = [\n  { value: 'damaged', label: 'Arrived damaged' },\n  { value: 'wrong-item', label: 'Wrong item shipped' },\n  { value: 'not-needed', label: 'No longer needed' },\n];\n\nconst TERMS: SelectOption[] = [\n  { value: 'prepaid', label: 'Prepaid' },\n  { value: 'net-30', label: 'Net 30' },\n  { value: 'net-45', label: 'Net 45' },\n];\n\nexport default function SelectPlaceholder() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Return reason</FieldLabel>\n        <Select>\n          <SelectTrigger>\n            <SelectValue placeholder=\"Choose a reason\" />\n          </SelectTrigger>\n          <SelectContent>\n            {REASONS.map((reason) => (\n              <SelectItem key={reason.value} value={reason.value}>\n                {reason.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n      <Field>\n        <FieldLabel>Payment terms</FieldLabel>\n        <Select defaultValue=\"net-30\" items={TERMS}>\n          <SelectTrigger>\n            <SelectValue placeholder=\"Choose terms\" />\n          </SelectTrigger>\n          <SelectContent>\n            {TERMS.map((term) => (\n              <SelectItem key={term.value} value={term.value}>\n                {term.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "groups",
+      "title": "Groups, icons and descriptions",
+      "note": "Two named groups with a line between them. Every label starts on the same line whether or not its option carries artwork, because the column belongs to the list.",
+      "language": "tsx",
+      "source": "import { Fragment } from 'react';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  type SelectOptionGroup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst METHODS: SelectOptionGroup[] = [\n  {\n    label: 'Ground',\n    options: [\n      { value: 'ups-ground', label: 'UPS Ground' },\n      { value: 'fedex-ground', label: 'FedEx Ground' },\n    ],\n  },\n  {\n    label: 'Express',\n    options: [\n      { value: 'ups-2day', label: 'UPS 2nd Day Air' },\n      { value: 'fedex-overnight', label: 'FedEx Priority Overnight' },\n    ],\n  },\n  {\n    label: 'Freight',\n    options: [{ value: 'ltl', label: 'LTL freight, palletised' }],\n  },\n];\n\nexport default function SelectGroups() {\n  return (\n    <Field>\n      <FieldLabel>Shipping method</FieldLabel>\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a method\" />\n        </SelectTrigger>\n        <SelectContent>\n          {METHODS.map((group, index) => (\n            <Fragment key={group.label}>\n              {index > 0 ? <SelectSeparator /> : null}\n              <SelectGroup label={group.label}>\n                {group.options.map((method) => (\n                  <SelectItem key={method.value} value={method.value}>\n                    {method.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </Fragment>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "multiple",
+      "title": "Multiple selection",
+      "note": "The popup stays open as options are taken, and the control shows the first label and how many more. Space toggles without closing, which is the listbox pattern’s own model.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst TEAMS: SelectOption[] = [\n  { value: 'fulfilment', label: 'Fulfilment' },\n  { value: 'finance', label: 'Finance' },\n  { value: 'customer-care', label: 'Customer care' },\n  { value: 'purchasing', label: 'Purchasing' },\n  { value: 'returns', label: 'Returns desk' },\n];\n\nexport default function SelectMultiple() {\n  return (\n    <Field>\n      <FieldLabel>Notify teams</FieldLabel>\n      <Select multiple clearable defaultValue={['fulfilment', 'finance']} items={TEAMS}>\n        <SelectTrigger>\n          <SelectValue placeholder=\"No one is notified\" />\n        </SelectTrigger>\n        <SelectContent>\n          {TEAMS.map((team) => (\n            <SelectItem key={team.value} value={team.value}>\n              {team.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <FieldDescription>Each team gets an email when the order is delayed.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "Clearable",
+      "note": "The clear button appears only once something is chosen, and focus goes back to the control it belonged to rather than to the document.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst OWNERS: SelectOption[] = [\n  { value: 'avery', label: 'Avery Collins' },\n  { value: 'kenji', label: 'Kenji Watanabe' },\n  { value: 'lucia', label: 'Lucía Fernández' },\n  { value: 'ruth', label: 'Ruth Adeyemi' },\n];\n\nexport default function SelectClearable() {\n  return (\n    <Field>\n      <FieldLabel>Assignee</FieldLabel>\n      <Select clearable defaultValue=\"kenji\" items={OWNERS}>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Unassigned\" />\n        </SelectTrigger>\n        <SelectContent>\n          {OWNERS.map((owner) => (\n            <SelectItem key={owner.value} value={owner.value}>\n              {owner.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <FieldDescription>Clear the assignee to return the ticket to the queue.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "Sizes",
+      "note": "Three steps, and every one of them reads control geometry — so a select beside a text field of the same size is the same height to the pixel.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  type SelectSize,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst SIZES: { size: SelectSize; label: string }[] = [\n  { size: 'sm', label: 'Small' },\n  { size: 'md', label: 'Medium' },\n  { size: 'lg', label: 'Large' },\n];\n\nconst WAREHOUSES: SelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nexport default function SelectSizes() {\n  return (\n    <Stack gap={5}>\n      {SIZES.map((step) => (\n        <Field key={step.size}>\n          <FieldLabel>{step.label}</FieldLabel>\n          <Select size={step.size} defaultValue=\"RNO\" items={WAREHOUSES}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {WAREHOUSES.map((warehouse) => (\n                <SelectItem key={warehouse.value} value={warehouse.value}>\n                  {warehouse.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "Variants",
+      "note": "outline on the page, subtle where a form sinks into its card, and plain for a table cell that is only a control while it is being used.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  type SelectVariant,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst VARIANTS: { variant: SelectVariant; label: string }[] = [\n  { variant: 'outline', label: 'Outline' },\n  { variant: 'subtle', label: 'Subtle' },\n  { variant: 'plain', label: 'Plain' },\n];\n\nconst WAREHOUSES = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nexport default function SelectVariants() {\n  return (\n    <Stack gap={5}>\n      {VARIANTS.map((step) => (\n        <Field key={step.variant}>\n          <FieldLabel>{step.label}</FieldLabel>\n          <Select variant={step.variant}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Choose a warehouse\" />\n            </SelectTrigger>\n            <SelectContent>\n              {WAREHOUSES.map((warehouse) => (\n                <SelectItem key={warehouse.value} value={warehouse.value}>\n                  {warehouse.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Required, invalid, read-only and disabled side by side. Read-only keeps its value legible and refuses to open; disabled answers nothing at all.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst WAREHOUSES: SelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nexport default function SelectStates() {\n  return (\n    <Stack gap={5}>\n      <Field invalid required>\n        <FieldLabel>Return warehouse</FieldLabel>\n        <Select defaultValue=\"SAV\" items={WAREHOUSES}>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {WAREHOUSES.map((warehouse) => (\n              <SelectItem key={warehouse.value} value={warehouse.value}>\n                {warehouse.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <FieldError>Savannah does not accept returns. Choose Reno or Columbus.</FieldError>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Origin warehouse</FieldLabel>\n        <Select defaultValue=\"RNO\" items={WAREHOUSES}>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {WAREHOUSES.map((warehouse) => (\n              <SelectItem key={warehouse.value} value={warehouse.value}>\n                {warehouse.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <FieldDescription>Set when the order was picked.</FieldDescription>\n      </Field>\n      <Field disabled>\n        <FieldLabel>Transfer warehouse</FieldLabel>\n        <Select defaultValue=\"CMH\" items={WAREHOUSES}>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {WAREHOUSES.map((warehouse) => (\n              <SelectItem key={warehouse.value} value={warehouse.value}>\n                {warehouse.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <FieldDescription>Transfers open once the order is invoiced.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading-and-empty",
+      "title": "Loading and empty",
+      "note": "A popup with nothing in it opens onto a sentence rather than onto a two-pixel box, and a loading one keeps that measure so nothing jumps when the options land.",
+      "language": "tsx",
+      "source": "<Select loading>\n  <SelectContent status=\"Fetching teams…\">{options}</SelectContent>\n</Select>;\n\n<SelectContent empty=\"No teams yet\">{[]}</SelectContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-content",
+      "title": "Content the family did not choose",
+      "note": "A translated label, an unbroken identifier and a hundred options. The label clamps at two lines with the whole string still in the DOM, and the token breaks inside the option.",
+      "language": "tsx",
+      "source": "<SelectItem value=\"urn\">urn:acme:catalogue:9f2c41ab8de07c5511903fbe</SelectItem>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "search",
+      "title": "Searching a long list",
+      "note": "search opens the popup onto a field. The query filters the options, the span it matched is marked, and the count is announced. It is transient: it never becomes a value, it is emptied when an option is taken, and the control goes on showing the chosen label. Escape clears the query before it closes the popup, and Tab commits and leaves the control.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst COUNTRIES: SelectOption[] = [\n  { value: 'AR', label: 'Argentina' },\n  { value: 'AU', label: 'Australia' },\n  { value: 'AT', label: 'Austria' },\n  { value: 'BE', label: 'Belgium' },\n  { value: 'BR', label: 'Brazil' },\n  { value: 'CA', label: 'Canada' },\n  { value: 'CL', label: 'Chile' },\n  { value: 'CO', label: 'Colombia' },\n  { value: 'CI', label: 'Côte d’Ivoire' },\n  { value: 'DK', label: 'Denmark' },\n  { value: 'FI', label: 'Finland' },\n  { value: 'FR', label: 'France' },\n  { value: 'DE', label: 'Germany' },\n  { value: 'IE', label: 'Ireland' },\n  { value: 'IT', label: 'Italy' },\n  { value: 'JP', label: 'Japan' },\n  { value: 'MX', label: 'Mexico' },\n  { value: 'NL', label: 'Netherlands' },\n  { value: 'NZ', label: 'New Zealand' },\n  { value: 'NO', label: 'Norway' },\n  { value: 'PL', label: 'Poland' },\n  { value: 'PT', label: 'Portugal' },\n  { value: 'ES', label: 'Spain' },\n  { value: 'SE', label: 'Sweden' },\n  { value: 'CH', label: 'Switzerland' },\n  { value: 'TR', label: 'Türkiye' },\n  { value: 'GB', label: 'United Kingdom' },\n  { value: 'US', label: 'United States' },\n  { value: 'UY', label: 'Uruguay' },\n  { value: 'VN', label: 'Vietnam' },\n];\n\nexport default function SelectSearch() {\n  return (\n    <Field>\n      <FieldLabel>Ship-to country</FieldLabel>\n      <Select\n        search\n        defaultValue=\"US\"\n        items={COUNTRIES}\n        messages={{ searchPlaceholder: 'Filter countries' }}\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a country\" />\n        </SelectTrigger>\n        <SelectContent>\n          {COUNTRIES.map((country) => (\n            <SelectItem key={country.value} value={country.value}>\n              {country.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Placement and width",
+      "note": "The popup hangs from the start edge of its control. It is never narrower than the control and grows when an option needs more room, so a narrow control does not wrap its labels. width=\"anchor\" pins it to the width of the control.",
+      "language": "tsx",
+      "source": "import { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst PAGE_SIZES: SelectOption[] = [\n  { value: '25', label: '25 rows' },\n  { value: '50', label: '50 rows' },\n  { value: '100', label: '100 rows' },\n];\n\nconst SORTS: (SelectOption & { description: string })[] = [\n  { value: 'newest', label: 'Newest', description: 'Most recent order date first.' },\n  { value: 'total', label: 'Total', description: 'Largest order total first.' },\n  { value: 'ship-date', label: 'Ship date', description: 'Earliest promised ship date first.' },\n];\n\nexport default function SelectPlacement() {\n  return (\n    <Inline gap={3} justify=\"between\" align=\"center\">\n      <Select side=\"top\" fullWidth={false} defaultValue=\"25\" items={PAGE_SIZES}>\n        <SelectTrigger aria-label=\"Rows per page\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {PAGE_SIZES.map((size) => (\n            <SelectItem key={size.value} value={size.value}>\n              {size.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <Select align=\"end\" width=\"content\" fullWidth={false} defaultValue=\"newest\" items={SORTS}>\n        <SelectTrigger aria-label=\"Sort orders\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {SORTS.map((sort) => (\n            <SelectItem key={sort.value} value={sort.value} description={sort.description}>\n              {sort.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Focus never leaves the button: the arrows, Home, End and the page keys move aria-activedescendant, and typing jumps to the first option that begins with it.",
+      "language": "tsx",
+      "source": "<Select loop={false} typeahead typeaheadTimeout={500}>\n  …\n</Select>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "form",
+      "title": "In a form",
+      "note": "Inside a field, with a label, a description and an error. name renders a hidden native select, so a plain form submits and reset() restores.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { SubmitEvent } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst WAREHOUSES: SelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nconst CARRIERS: SelectOption[] = [\n  { value: 'ups', label: 'UPS Ground' },\n  { value: 'fedex', label: 'FedEx Ground' },\n  { value: 'usps', label: 'USPS Priority Mail' },\n];\n\nconst labelOf = (options: SelectOption[], value: FormDataEntryValue | null) =>\n  options.find((option) => option.value === value)?.label;\n\nexport default function SelectForm() {\n  const [missing, setMissing] = useState(false);\n  const [saved, setSaved] = useState<string | null>(null);\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const data = new FormData(event.currentTarget);\n    const warehouse = labelOf(WAREHOUSES, data.get('warehouse'));\n    const carrier = labelOf(CARRIERS, data.get('carrier'));\n    setMissing(warehouse === undefined);\n    setSaved(warehouse === undefined ? null : `Ships from ${warehouse} by ${carrier}.`);\n  };\n\n  const reset = () => {\n    setMissing(false);\n    setSaved(null);\n  };\n\n  return (\n    <form noValidate onSubmit={submit} onReset={reset}>\n      <Stack gap={5}>\n        <Field required invalid={missing ? true : undefined}>\n          <FieldLabel>Fulfilment warehouse</FieldLabel>\n          <Select name=\"warehouse\" items={WAREHOUSES} onValueChange={() => setMissing(false)}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Choose a warehouse\" />\n            </SelectTrigger>\n            <SelectContent>\n              {WAREHOUSES.map((warehouse) => (\n                <SelectItem key={warehouse.value} value={warehouse.value}>\n                  {warehouse.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          <FieldError live=\"polite\" reserve>\n            {missing ? 'Choose the warehouse that ships this order.' : ''}\n          </FieldError>\n        </Field>\n        <Field>\n          <FieldLabel>Carrier</FieldLabel>\n          <Select name=\"carrier\" defaultValue=\"ups\" items={CARRIERS}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {CARRIERS.map((carrier) => (\n                <SelectItem key={carrier.value} value={carrier.value}>\n                  {carrier.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </Field>\n        <Inline gap={3} align=\"center\">\n          <Button type=\"submit\">Save</Button>\n          <Button type=\"reset\" tone=\"secondary\" variant=\"outline\">\n            Reset\n          </Button>\n          {saved && (\n            <Text size=\"sm\" tone=\"muted\">\n              {saved}\n            </Text>\n          )}\n        </Inline>\n      </Stack>\n    </form>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "Defaults set once for a whole application, a summary the consumer writes, and the frame replaced with an element of their own through render.",
+      "language": "tsx",
+      "source": "<SelectDefaultsProvider size=\"sm\" variant=\"subtle\" width=\"anchor\">\n  <Select ref={handle}>\n    <SelectTrigger render={(props) => <label {...props} />}>\n      <SelectValue>{(values, labels) => labels.join(', ')}</SelectValue>\n    </SelectTrigger>\n    …\n  </Select>\n</SelectDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst WAREHOUSES = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nexport default function SelectBasic() {\n  return (\n    <Field>\n      <FieldLabel>Fulfilment warehouse</FieldLabel>\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a warehouse\" />\n        </SelectTrigger>\n        <SelectContent>\n          {WAREHOUSES.map((warehouse) => (\n            <SelectItem key={warehouse.value} value={warehouse.value}>\n              {warehouse.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <FieldDescription>New orders ship from this warehouse.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst SPEEDS = [\n  { value: 'ground', label: 'Ground', transit: '3–5 business days', price: '$8.40' },\n  { value: 'two-day', label: 'Two-day', transit: '2 business days', price: '$18.90' },\n  { value: 'overnight', label: 'Overnight', transit: 'Next business day', price: '$42.75' },\n];\n\nexport default function SelectControlled() {\n  const [speed, setSpeed] = useState('ground');\n  const chosen = SPEEDS.find((option) => option.value === speed);\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Delivery speed</FieldLabel>\n        <Select\n          value={speed}\n          items={SPEEDS}\n          onValueChange={(next) => {\n            if (typeof next === 'string') setSpeed(next);\n          }}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {SPEEDS.map((option) => (\n              <SelectItem key={option.value} value={option.value}>\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n      <span>\n        Arrives in {chosen?.transit}. Shipping: {chosen?.price}\n      </span>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectDefaultsProvider,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst OWNERS: SelectOption[] = [\n  { value: 'avery', label: 'Avery Collins' },\n  { value: 'kenji', label: 'Kenji Watanabe' },\n  { value: 'lucia', label: 'Lucía Fernández' },\n];\n\nconst SEGMENTS: SelectOption[] = [\n  { value: 'enterprise', label: 'Enterprise' },\n  { value: 'wholesale', label: 'Wholesale' },\n  { value: 'retail', label: 'Retail' },\n];\n\nexport default function SelectDefaults() {\n  return (\n    <SelectDefaultsProvider size=\"sm\" variant=\"subtle\" clearable>\n      <Stack gap={4}>\n        <Field>\n          <FieldLabel>Account owner</FieldLabel>\n          <Select defaultValue=\"lucia\" items={OWNERS}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Any owner\" />\n            </SelectTrigger>\n            <SelectContent>\n              {OWNERS.map((owner) => (\n                <SelectItem key={owner.value} value={owner.value}>\n                  {owner.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel>Segment</FieldLabel>\n          <Select defaultValue=\"wholesale\" items={SEGMENTS}>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Any segment\" />\n            </SelectTrigger>\n            <SelectContent>\n              {SEGMENTS.map((segment) => (\n                <SelectItem key={segment.value} value={segment.value}>\n                  {segment.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </Field>\n      </Stack>\n    </SelectDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst FORMATS: (SelectOption & { icon: GlyphName; description: string })[] = [\n  {\n    value: 'csv',\n    label: 'CSV',\n    icon: 'file-spreadsheet',\n    description: 'Opens in Excel and Google Sheets.',\n  },\n  {\n    value: 'pdf',\n    label: 'PDF',\n    icon: 'file-text',\n    description: 'Paginated, with the company letterhead.',\n  },\n  {\n    value: 'json',\n    label: 'JSON',\n    icon: 'file',\n    description: 'For an import into another system.',\n  },\n];\n\nexport default function SelectDescriptions() {\n  return (\n    <Field>\n      <FieldLabel>Export format</FieldLabel>\n      <Select defaultValue=\"csv\" items={FORMATS}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {FORMATS.map((format) => (\n            <SelectItem\n              key={format.value}\n              value={format.value}\n              description={format.description}\n              icon={\n                <Icon>\n                  <Glyph name={format.icon} />\n                </Icon>\n              }\n            >\n              {format.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled-options",
+      "title": "disabled-options.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst CARRIERS: { value: string; label: string; disabled?: boolean; description?: string }[] = [\n  { value: 'ups', label: 'UPS Ground' },\n  { value: 'fedex', label: 'FedEx Ground' },\n  {\n    value: 'dhl',\n    label: 'DHL Express',\n    disabled: true,\n    description: 'Account on hold until invoice INV-21462 is paid.',\n  },\n  { value: 'usps', label: 'USPS Priority Mail' },\n];\n\nexport default function SelectDisabledOptions() {\n  return (\n    <Field>\n      <FieldLabel>Carrier</FieldLabel>\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a carrier\" />\n        </SelectTrigger>\n        <SelectContent>\n          {CARRIERS.map((carrier) => (\n            <SelectItem\n              key={carrier.value}\n              value={carrier.value}\n              disabled={carrier.disabled ?? false}\n              description={carrier.description}\n            >\n              {carrier.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "empty.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Select, SelectContent, SelectTrigger, SelectValue } from '@slotted/react/select';\n\nexport default function SelectEmpty() {\n  return (\n    <Field>\n      <FieldLabel>Purchase order to receive</FieldLabel>\n      <Select messages={{ empty: 'No open purchase orders for Kiln & Co.' }}>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a purchase order\" />\n        </SelectTrigger>\n        <SelectContent />\n      </Select>\n      <FieldDescription>Only orders awaiting receipt are listed.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst SLOTS: SelectOption[] = [\n  { value: 'thu-am', label: 'Thursday, 8:00–12:00' },\n  { value: 'thu-pm', label: 'Thursday, 13:00–17:00' },\n  { value: 'fri-am', label: 'Friday, 8:00–12:00' },\n];\n\n/** Stands in for a request to the carrier's pickup API. */\nconst fetchSlots = () =>\n  new Promise<SelectOption[]>((resolve) => setTimeout(() => resolve(SLOTS), 1500));\n\nexport default function SelectLoading() {\n  const [slots, setSlots] = useState<SelectOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [loaded, setLoaded] = useState(false);\n\n  const load = async (open: boolean) => {\n    if (!open || loaded || loading) return;\n    setLoading(true);\n    setSlots(await fetchSlots());\n    setLoading(false);\n    setLoaded(true);\n  };\n\n  return (\n    <Field>\n      <FieldLabel>Pickup slot</FieldLabel>\n      <Select\n        loading={loading}\n        items={slots}\n        messages={{ loading: 'Fetching pickup slots…' }}\n        onOpenChange={(open) => void load(open)}\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Choose a slot\" />\n        </SelectTrigger>\n        <SelectContent>\n          {slots.map((slot) => (\n            <SelectItem key={slot.value} value={slot.value}>\n              {slot.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      <FieldDescription>Slots load from the carrier when the list opens.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-labels",
+      "title": "long-labels.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\n\nconst LISTINGS: SelectOption[] = [\n  {\n    value: 'mug-sage',\n    label: 'Stoneware mug, 12 oz, sage glaze, case of 24, for the autumn wholesale catalogue',\n  },\n  { value: 'mug-sku', label: 'SKU-NW-STONEWARE-MUG-12OZ-SAGE-GLAZE-CASE24-WHOLESALE' },\n  { value: 'tumbler', label: 'Glass tumbler, 8 oz' },\n];\n\nexport default function SelectLongLabels() {\n  return (\n    <Field>\n      <FieldLabel>Catalogue listing</FieldLabel>\n      <Select defaultValue=\"mug-sage\" items={LISTINGS}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          {LISTINGS.map((listing) => (\n            <SelectItem key={listing.value} value={listing.value}>\n              {listing.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "narrow",
+      "title": "narrow.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\n\nconst STATUSES: SelectOption[] = [\n  { value: 'open', label: 'Open' },\n  { value: 'on-hold', label: 'On hold' },\n  { value: 'shipped', label: 'Shipped' },\n];\n\nconst CHANNELS: SelectOption[] = [\n  { value: 'web', label: 'Web store' },\n  { value: 'marketplace', label: 'Marketplace' },\n  { value: 'wholesale', label: 'Wholesale' },\n  { value: 'phone', label: 'Phone orders' },\n];\n\nconst WAREHOUSES: SelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n];\n\nexport default function SelectNarrow() {\n  return (\n    <Stack gap={4} style={{ inlineSize: '7rem' }}>\n      <Field>\n        <FieldLabel>Status</FieldLabel>\n        <Select size=\"sm\" defaultValue=\"on-hold\" items={STATUSES}>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {STATUSES.map((status) => (\n              <SelectItem key={status.value} value={status.value}>\n                {status.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n      <Field>\n        <FieldLabel>Channels</FieldLabel>\n        <Select\n          size=\"sm\"\n          multiple\n          defaultValue={['web', 'marketplace', 'wholesale']}\n          items={CHANNELS}\n        >\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {CHANNELS.map((channel) => (\n              <SelectItem key={channel.value} value={channel.value}>\n                {channel.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n      <Field>\n        <FieldLabel>Warehouse</FieldLabel>\n        <Select size=\"sm\" width=\"content\" defaultValue=\"CMH\" items={WAREHOUSES}>\n          <SelectTrigger>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            {WAREHOUSES.map((warehouse) => (\n              <SelectItem key={warehouse.value} value={warehouse.value}>\n                {warehouse.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "status-filter",
+      "title": "status-filter.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  type SelectOption,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from '@slotted/react/select';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\nimport { Text } from '@slotted/react/typography';\n\nconst ORDERS = [\n  { id: 'SO-10482', customer: 'Harbor & Pine', status: 'open', total: '$1,240.00' },\n  { id: 'SO-10483', customer: 'Brightline Studio', status: 'on-hold', total: '$318.50' },\n  { id: 'SO-10484', customer: 'Northgate Labs', status: 'shipped', total: '$2,906.10' },\n  { id: 'SO-10485', customer: 'Verde Kitchen', status: 'delayed', total: '$86.00' },\n  { id: 'SO-10486', customer: 'Quill & Co.', status: 'shipped', total: '$540.25' },\n  { id: 'SO-10487', customer: 'Atlas Freight', status: 'open', total: '$1,912.00' },\n];\n\nconst STATUSES: (SelectOption & { icon: GlyphName })[] = [\n  { value: 'open', label: 'Open', icon: 'circle' },\n  { value: 'on-hold', label: 'On hold', icon: 'clock' },\n  { value: 'delayed', label: 'Delayed', icon: 'triangle-alert' },\n  { value: 'shipped', label: 'Shipped', icon: 'circle-check' },\n];\n\nconst ALL: SelectOption = { value: 'all', label: 'All statuses' };\nconst OPTIONS = [ALL, ...STATUSES];\n\nconst labelOf = (status: string) => STATUSES.find((option) => option.value === status)?.label;\n\nexport default function SelectStatusFilter() {\n  const [status, setStatus] = useState('all');\n  const rows = status === 'all' ? ORDERS : ORDERS.filter((order) => order.status === status);\n\n  return (\n    <Stack gap={3}>\n      <Inline gap={3} justify=\"between\" align=\"center\">\n        <Text size=\"sm\" tone=\"muted\">\n          {rows.length} of {ORDERS.length} orders\n        </Text>\n        <Select\n          size=\"sm\"\n          align=\"end\"\n          fullWidth={false}\n          value={status}\n          items={OPTIONS}\n          onValueChange={(next) => setStatus(typeof next === 'string' ? next : 'all')}\n        >\n          <SelectTrigger aria-label=\"Filter by status\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value={ALL.value}>{ALL.label}</SelectItem>\n            <SelectSeparator />\n            {STATUSES.map((option) => (\n              <SelectItem\n                key={option.value}\n                value={option.value}\n                icon={\n                  <Icon>\n                    <Glyph name={option.icon} />\n                  </Icon>\n                }\n              >\n                {option.label}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </Inline>\n      <Table columns={4}>\n        <TableContent aria-label=\"Orders\">\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader>Status</TableColumnHeader>\n              <TableColumnHeader numeric>Total</TableColumnHeader>\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {rows.map((order) => (\n              <TableRow key={order.id} value={order.id}>\n                <TableRowHeader>{order.id}</TableRowHeader>\n                <TableCell>{order.customer}</TableCell>\n                <TableCell>{labelOf(order.status)}</TableCell>\n                <TableCell numeric>{order.total}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}