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

package/dist/docs/combobox.json

@@ -0,0 +1,1235 @@
+{
+  "family": "combobox",
+  "ui": "combobox",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Text input that filters a list of options."
+  },
+  "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"
+    ],
+    "autocomplete": [
+      "none",
+      "list",
+      "both"
+    ],
+    "openOn": [
+      "input",
+      "focus",
+      "manual"
+    ],
+    "allowsCustomValue": [
+      true,
+      false
+    ],
+    "autoHighlight": [
+      true,
+      false
+    ],
+    "highlightMatch": [
+      true,
+      false
+    ],
+    "clearable": [
+      true,
+      false
+    ],
+    "loop": [
+      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": {
+    "combobox": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "side": "bottom",
+        "align": "start",
+        "width": "content",
+        "mount": "active",
+        "strategy": "absolute",
+        "autocomplete": "list",
+        "openOn": "input",
+        "allowsCustomValue": false,
+        "autoHighlight": false,
+        "highlightMatch": true,
+        "clearable": true,
+        "loop": false,
+        "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
+      },
+      "capabilities": [
+        "value",
+        "selection",
+        "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",
+        "input",
+        "trigger",
+        "arrow",
+        "busy",
+        "clear",
+        "positioner",
+        "content",
+        "group",
+        "group-label",
+        "item",
+        "indicator",
+        "icon",
+        "label",
+        "match",
+        "description",
+        "separator",
+        "empty",
+        "status",
+        "placeholder"
+      ]
+    }
+  },
+  "docs": {
+    "combobox": {
+      "imports": {
+        "source": "import { Combobox, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, rendered by ComboboxInput",
+          "required": true,
+          "purpose": "The visible frame, carrying data-ui=\"combobox\". It draws the border, the shadow, the focus ring and every state, from the same tokens as the text field and the select."
+        },
+        {
+          "part": "input",
+          "element": "input with role=\"combobox\"",
+          "required": true,
+          "purpose": "A native text input, so the caret, the selection, IME, autofill and every text-editing key behave as in any input. It keeps focus for the whole interaction and carries aria-autocomplete, aria-expanded and aria-activedescendant."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "Opens and closes the popup with the pointer. It has tabindex=\"-1\", as the ARIA combobox pattern requires, so Tab reaches the input once and skips the button."
+        },
+        {
+          "part": "arrow",
+          "element": "span",
+          "required": true,
+          "purpose": "The chevron inside the trigger, a Glyph inside an Icon, turned over while the popup is open."
+        },
+        {
+          "part": "busy",
+          "element": "span",
+          "required": false,
+          "purpose": "The spinner that replaces the chevron while loading is set, because the chevron promises a list that has not arrived. It carries data-ui=\"spinner\" beside this part, so the spinner stylesheet draws the ring and the combobox sets only its place and size."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Resets both the text and the chosen value. Present only while clearable is set and the input holds text."
+        },
+        {
+          "part": "positioner",
+          "element": "div, rendered by ComboboxContent",
+          "required": true,
+          "purpose": "The popup layer, portalled to the end of the document. It carries data-ui=\"combobox\" again, because a stylesheet scoped to the root cannot reach a subtree outside it."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"listbox\"",
+          "required": true,
+          "purpose": "The popup surface, holding the options that pass the filter. Its height is bounded by the space the positioner reports, and it scrolls inside that bound."
+        },
+        {
+          "part": "group",
+          "element": "div with role=\"group\"",
+          "required": false,
+          "purpose": "A named set of options. A group whose options were all filtered away renders nothing, so no heading appears without options under it."
+        },
+        {
+          "part": "group-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The name of a group, which the group references through aria-labelledby."
+        },
+        {
+          "part": "item",
+          "element": "div with role=\"option\"",
+          "required": true,
+          "purpose": "One option. It compares its own label against the query and renders nothing when it does not match."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": true,
+          "purpose": "The check in the last column, shown on the chosen option."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The first column: an Icon holding a Glyph, or any element of your own."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The option text. It wraps to two lines and then truncates, with the whole text still in the DOM."
+        },
+        {
+          "part": "match",
+          "element": "mark",
+          "required": false,
+          "purpose": "The part of the label the query matched, found with the same collator the filter used. It shows the reader why the option is in the results."
+        },
+        {
+          "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."
+        },
+        {
+          "part": "empty",
+          "element": "div",
+          "required": false,
+          "purpose": "The message the popup shows when nothing matched, instead of an empty box."
+        },
+        {
+          "part": "status",
+          "element": "div with role=\"status\" and aria-live=\"polite\"",
+          "required": true,
+          "purpose": "The loading message and the live region in one row, so a screen reader user hears how many options matched."
+        },
+        {
+          "part": "placeholder",
+          "element": "div",
+          "required": false,
+          "purpose": "Three rows the height of an option, drawn with the skeleton stylesheet while loading is set, so the popup already has the shape of the list. Hidden from assistive technology, because the status row announces the wait."
+        }
+      ],
+      "api": [
+        {
+          "name": "inputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The text in the input. Passing it makes the text controlled."
+        },
+        {
+          "name": "defaultInputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The initial text of an uncontrolled input, read once."
+        },
+        {
+          "name": "value",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The key of the chosen option, which is separate from the typed text. Passing it makes the value controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The initial value of an uncontrolled combobox. It sets the key, not the text."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "Whether the popup is open. Passing it makes the open state controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Whether an uncontrolled popup starts open."
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The key of the highlighted option, which is separate from the chosen one."
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The initial highlight of an uncontrolled combobox."
+        },
+        {
+          "name": "filter",
+          "type": "((label, query) => boolean) | null",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The comparison between a label and the query. Unset uses a locale-sensitive contains; null turns filtering off for a list a server has already filtered."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The BCP 47 language of the default filter. The active locale when unset."
+        },
+        {
+          "name": "items",
+          "type": "ComboboxItems",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "Labels for values, so a closed combobox can show the label of an option it has not rendered."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The name the value is submitted under. Renders a hidden input that carries the chosen key."
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The id of the form the value is submitted with, when it is not the enclosing one."
+        },
+        {
+          "name": "total",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "The size of the whole collection, written to aria-setsize on each option."
+        },
+        {
+          "name": "autocomplete",
+          "type": "'none' | 'list' | 'both'",
+          "defaultValue": "list",
+          "appliesTo": "Combobox",
+          "description": "What typing does: none keeps every option, list filters the options, and both also completes the first match inline. Written to aria-autocomplete."
+        },
+        {
+          "name": "openOn",
+          "type": "'input' | 'focus' | 'manual'",
+          "defaultValue": "input",
+          "appliesTo": "Combobox",
+          "description": "When the popup opens without the trigger: on typing or a press on the input (input), on every focus and press (focus), or only from the trigger and the arrow keys (manual)."
+        },
+        {
+          "name": "allowsCustomValue",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Whether text that matches no option becomes the value on Enter or blur."
+        },
+        {
+          "name": "autoHighlight",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Whether the first match is highlighted when the popup opens and after each query typed, so Enter takes it. A chosen option that is showing takes precedence."
+        },
+        {
+          "name": "highlightMatch",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the part of each label the query matched is marked."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Combobox",
+          "description": "The control size. Unset follows the enclosing field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "Combobox",
+          "description": "How much frame the control draws."
+        },
+        {
+          "name": "side",
+          "type": "'bottom' | 'top' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "bottom",
+          "appliesTo": "Combobox",
+          "description": "The edge of the control the popup opens from."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "Combobox",
+          "description": "The alignment of the popup along that edge."
+        },
+        {
+          "name": "width",
+          "type": "'anchor' | 'content'",
+          "defaultValue": "content",
+          "appliesTo": "Combobox",
+          "description": "The popup width: content keeps it 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": "Combobox",
+          "description": "When the popup exists in the DOM: only while open, from the first open, or from the start."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "Combobox",
+          "description": "The CSS positioning the popup uses."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether a clear button appears once the input holds text."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Whether ArrowDown and ArrowUp wrap at the ends of the list."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether choosing an option closes the popup."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether Escape closes the popup."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether a press outside the combobox closes the popup."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the popup moves to the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the popup slides along its side to stay in view."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the popup hides once the control scrolls out of view."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the popup renders at the end of the document instead of inside the combobox."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Combobox",
+          "description": "Whether the control fills its container or keeps its own width."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Turns off the input, the trigger and the popup. Unset follows the enclosing field."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Keeps the text selectable and copyable and never opens the popup. Unset follows the enclosing field."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Sets the native required attribute on the input. Unset follows the enclosing field."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Draws the border and the focus ring in the invalid tone and sets aria-invalid. Unset follows the enclosing field."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Combobox",
+          "description": "Shows the spinner, the placeholder rows and the loading message, and sets aria-busy on the listbox."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "Combobox",
+          "description": "The gap between the control and the popup, in pixels."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Combobox",
+          "description": "How far the popup shifts along its side, in pixels."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "Combobox",
+          "description": "The minimum distance between the popup and the edge of the viewport, in pixels."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ComboboxMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "Phrases that replace the active locale’s, key by key: clear, trigger, create ({query}), empty, loading and count ({count})."
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxContent",
+          "description": "Replaces the empty message for this popup."
+        },
+        {
+          "name": "status",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxContent",
+          "description": "Replaces the message in the status row for this popup."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxItem",
+          "description": "The option key: what the form submits and what onValueChange receives."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "ComboboxItem",
+          "description": "Keeps the option in the list, announces it as unavailable, and skips it with every movement key."
+        },
+        {
+          "name": "textValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxItem",
+          "description": "The text the filter compares and the mark splits, when the children are not a string."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxItem",
+          "description": "The second line under the label."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxItem",
+          "description": "The element in the first column."
+        },
+        {
+          "name": "position",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxItem",
+          "description": "The position of the option in the whole collection, written to aria-posinset."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxGroup",
+          "description": "The name of the group, which the group references through aria-labelledby."
+        }
+      ],
+      "composition": [
+        {
+          "name": "ComboboxDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once for a subtree. The phrases come from the active locale, set by SlottedProvider."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxInput, ComboboxContent",
+          "description": "Replaces the frame around the input, or the popup layer. The input and the listbox carry the role and the ARIA wiring, so they cannot be replaced."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<ComboboxHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Combobox",
+          "description": "focus(), open(), close() and scrollToKey(value), for actions a prop cannot express."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "defaultValue": "—",
+          "appliesTo": "ComboboxInput",
+          "description": "The input element, for code that reads the caret or the selection."
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef<…>",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Each part accepts the props of its element. Your onKeyDown, placeholder, maxLength or aria-label reaches that element, and the combobox handler runs alongside yours instead of replacing it."
+        }
+      ],
+      "events": [
+        {
+          "name": "onInputValueChange",
+          "payload": "(value: string, request: ChangeRequest)",
+          "when": "Before the text changes. The reason is keyboard while the reader types, select when an option is chosen, and clear, blur or programmatic otherwise."
+        },
+        {
+          "name": "onValueChange",
+          "payload": "(value: string | null, request: ChangeRequest)",
+          "when": "Before the chosen value changes. Typing calls only onInputValueChange; choosing an option calls both, each with the reason select."
+        },
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest)",
+          "when": "Before the popup opens or closes. The reason tells a selection from a dismissal: select, escape, outsidePress, dismiss, blur, pointer, keyboard or programmatic."
+        },
+        {
+          "name": "onHighlightedValueChange",
+          "payload": "(value: string | null, request: ChangeRequest)",
+          "when": "Before the highlight moves, by key or by pointer, and when the filter removes the highlighted option."
+        },
+        {
+          "name": "onCreate",
+          "payload": "(query: string, details: { reason, source? })",
+          "when": "When the reader takes the create option, which appears while onCreate is set, the query is not empty and nothing matched. The popup closes and nothing is selected: add the option to your collection and select it."
+        },
+        {
+          "name": "onInputReset",
+          "payload": "(rejected: string, details: { reason: 'blur', source? })",
+          "when": "When the input loses focus holding text that matches no option while allowsCustomValue is off. The text returns to the label of the chosen option, or empties, and the handler receives the rejected text."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "()",
+          "when": "When the end of the rendered list scrolls into view. Fetch the next page; the combobox keeps no cursor of its own."
+        }
+      ],
+      "accessibility": [
+        "The input has role=\"combobox\" with aria-autocomplete, aria-expanded and aria-controls. The popup has role=\"listbox\", and each row has role=\"option\". The trigger button is out of the tab sequence, as the ARIA combobox pattern requires.",
+        "Focus stays on the input, so Home, End, ArrowLeft, ArrowRight, Backspace and Delete keep their text-editing behaviour. The highlight moves through aria-activedescendant, and the caret does not move with it.",
+        "Escape works in two steps, both named by the pattern. With the popup open, it closes the popup and keeps the text. With the popup closed, it restores the label of the chosen option, and a second press clears the selection.",
+        "The status row is a polite live region. It announces how many options matched, and \"Loading…\" while a request is in flight.",
+        "Tab commits nothing: an option the reader arrowed past is not a choice, which is where the combobox differs from the select. Tab does accept an inline completion that is still showing."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-combobox-action-active-background",
+    "--slotted-combobox-action-color",
+    "--slotted-combobox-action-hover-background",
+    "--slotted-combobox-action-size",
+    "--slotted-combobox-arrow-color",
+    "--slotted-combobox-autofill-background",
+    "--slotted-combobox-background",
+    "--slotted-combobox-border-color",
+    "--slotted-combobox-color",
+    "--slotted-combobox-completion-background",
+    "--slotted-combobox-completion-color",
+    "--slotted-combobox-content-border-color",
+    "--slotted-combobox-content-padding-block",
+    "--slotted-combobox-content-padding-inline",
+    "--slotted-combobox-content-radius",
+    "--slotted-combobox-content-shadow",
+    "--slotted-combobox-content-text",
+    "--slotted-combobox-content-text-muted",
+    "--slotted-combobox-disabled-background",
+    "--slotted-combobox-disabled-border-color",
+    "--slotted-combobox-disabled-color",
+    "--slotted-combobox-highlight",
+    "--slotted-combobox-highlight-active",
+    "--slotted-combobox-highlight-ring",
+    "--slotted-combobox-hover-border-color",
+    "--slotted-combobox-icon-size-min",
+    "--slotted-combobox-invalid-border-color",
+    "--slotted-combobox-invalid-edge-width",
+    "--slotted-combobox-invalid-focus-ring-color",
+    "--slotted-combobox-item-radius",
+    "--slotted-combobox-measure",
+    "--slotted-combobox-open-border-color",
+    "--slotted-combobox-placeholder-color",
+    "--slotted-combobox-plain-hover-background",
+    "--slotted-combobox-radius",
+    "--slotted-combobox-readonly-background",
+    "--slotted-combobox-selected-color",
+    "--slotted-combobox-separator-color",
+    "--slotted-combobox-shadow",
+    "--slotted-combobox-subtle-background",
+    "--slotted-combobox-subtle-border-color",
+    "--slotted-combobox-subtle-hover-background",
+    "--slotted-combobox-surface",
+    "--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-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 combobox with every axis on it, driven by the controls under the canvas. Type into it and watch the list, the marks and the count answer together.",
+      "language": "tsx",
+      "source": "<Combobox>\n  <ComboboxInput aria-label=\"Fruit\" placeholder=\"Search fruit\" />\n  <ComboboxContent>\n    <ComboboxItem value=\"blueberry\">Blueberry</ComboboxItem>\n    <ComboboxItem value=\"raspberry\">Raspberry</ComboboxItem>\n  </ComboboxContent>\n</Combobox>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filtering",
+      "title": "Filtering, and the mark",
+      "note": "The default comparison is locale-sensitive, so resume finds Resumé — and the mark shows the span the collator matched rather than a naive substring that would disagree with it.",
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst CITIES = [\n  'São Paulo',\n  'Zürich',\n  'Montréal',\n  'Kraków',\n  'Malmö',\n  'Querétaro',\n  'Reykjavík',\n  'Düsseldorf',\n];\n\nexport default function ComboboxFiltering() {\n  return (\n    <Field>\n      <FieldLabel>Destination city</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Try “sao” or “zurich”\" />\n        <ComboboxContent>\n          {CITIES.map((city) => (\n            <ComboboxItem key={city} value={city}>\n              {city}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>Accents and case are ignored when matching.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "autocomplete",
+      "title": "Autocomplete",
+      "note": "The pattern’s own three values. both writes the rest of the first match into the field as a selected range, so the next character replaces it and Backspace withdraws it.",
+      "language": "tsx",
+      "source": "<Combobox autocomplete=\"none\">…</Combobox>;\n<Combobox autocomplete=\"list\">…</Combobox>;\n<Combobox autocomplete=\"both\">…</Combobox>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "custom-value",
+      "title": "A value that is not on the list",
+      "note": "With allowsCustomValue the typed text commits as the value. Without it, Enter puts the text back to the committed option’s label — the pattern’s own \"reverts\".",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst BOXES = [\n  { id: 'small', label: 'Small · 20 × 15 × 10 cm' },\n  { id: 'medium', label: 'Medium · 35 × 25 × 15 cm' },\n  { id: 'large', label: 'Large · 50 × 40 × 30 cm' },\n];\n\nexport default function ComboboxCustomValue() {\n  const [value, setValue] = useState<string | null>(null);\n\n  return (\n    <Field>\n      <FieldLabel>Box size</FieldLabel>\n      <Combobox allowsCustomValue value={value} onValueChange={setValue}>\n        <ComboboxInput placeholder=\"Pick a box or type dimensions\" />\n        <ComboboxContent>\n          {BOXES.map((box) => (\n            <ComboboxItem key={box.id} value={box.id}>\n              {box.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>Value: {value ?? 'none'}</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "creation",
+      "title": "Adding a value the list does not hold",
+      "note": "With onCreate, the last option offers to add what was typed once nothing matched. It is an option — ArrowDown reaches it, Enter takes it — and taking it reports the query and selects nothing: the collection is the consumer’s, and only it knows whether this one can grow.",
+      "language": "tsx",
+      "source": "<Combobox onCreate={(query) => add(query)}>…</Combobox>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "async",
+      "title": "Asynchronous results",
+      "note": "Debounce the fetch, not the combobox: a component that delayed its own request would delay a controlled consumer’s re-render and drop characters between them.",
+      "language": "tsx",
+      "source": "const [query, setQuery] = useState('');\nconst deferred = useDeferredValue(query);\nconst { data, isPending } = useQuery({ queryKey: ['people', deferred], queryFn: search });\n\n<Combobox\n  filter={null}\n  inputValue={query}\n  loading={isPending}\n  onInputValueChange={setQuery}\n  onLoadMore={fetchNextPage}\n>\n  …\n</Combobox>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "groups",
+      "title": "Groups",
+      "note": "Two named groups. A group whose every option was filtered away disappears with them, so a heading never claims a category matched when none did.",
+      "language": "tsx",
+      "source": "import {\n  Combobox,\n  ComboboxContent,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n} from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst CATALOG = [\n  {\n    category: 'Kitchen',\n    products: [\n      { sku: 'KIT-1042', name: 'Cast-iron skillet' },\n      { sku: 'KIT-1043', name: 'Stoneware mug' },\n      { sku: 'KIT-1051', name: 'Pour-over kettle' },\n    ],\n  },\n  {\n    category: 'Bags',\n    products: [\n      { sku: 'BAG-2010', name: 'Canvas tote' },\n      { sku: 'BAG-2014', name: 'Trail daypack' },\n      { sku: 'BAG-2019', name: 'Weekender bag' },\n    ],\n  },\n  {\n    category: 'Stationery',\n    products: [\n      { sku: 'STA-3002', name: 'Field notebook' },\n      { sku: 'STA-3007', name: 'Fountain pen' },\n      { sku: 'STA-3011', name: 'Brass stapler' },\n    ],\n  },\n];\n\nexport default function ComboboxGroups() {\n  return (\n    <Field>\n      <FieldLabel>Product</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search the catalog\" />\n        <ComboboxContent>\n          {CATALOG.map((group) => (\n            <ComboboxGroup key={group.category} label={group.category}>\n              {group.products.map((product) => (\n                <ComboboxItem key={product.sku} value={product.sku}>\n                  {product.name}\n                </ComboboxItem>\n              ))}\n            </ComboboxGroup>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearable",
+      "title": "Clearable",
+      "note": "One press takes both contracts back — the text and the chosen key — and focus returns to the field rather than to the document.",
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nexport default function ComboboxClearable() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Default warehouse</FieldLabel>\n        <Combobox defaultInputValue=\"Columbus, OH\" defaultValue=\"CMH\">\n          <ComboboxInput />\n          <ComboboxContent>\n            <ComboboxItem value=\"RNO\">Reno, NV</ComboboxItem>\n            <ComboboxItem value=\"CMH\">Columbus, OH</ComboboxItem>\n            <ComboboxItem value=\"SAV\">Savannah, GA</ComboboxItem>\n          </ComboboxContent>\n        </Combobox>\n        <FieldDescription>Optional. Clearing it routes orders by distance.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel>Payment terms</FieldLabel>\n        <Combobox clearable={false} defaultInputValue=\"Net 30\" defaultValue=\"net-30\">\n          <ComboboxInput />\n          <ComboboxContent>\n            <ComboboxItem value=\"prepaid\">Prepaid</ComboboxItem>\n            <ComboboxItem value=\"net-30\">Net 30</ComboboxItem>\n            <ComboboxItem value=\"net-45\">Net 45</ComboboxItem>\n          </ComboboxContent>\n        </Combobox>\n        <FieldDescription>Every account has terms, so there is nothing to clear.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "Sizes",
+      "note": "Three steps, every one reading control geometry — so a combobox beside a text field of the same size is the same height to the pixel.",
+      "language": "tsx",
+      "source": "import {\n  Combobox,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxItem,\n  type ComboboxSize,\n} from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst SIZES: { size: ComboboxSize; label: string }[] = [\n  { size: 'sm', label: 'Small' },\n  { size: 'md', label: 'Medium' },\n  { size: 'lg', label: 'Large' },\n];\n\nconst WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];\n\nexport default function ComboboxSizes() {\n  return (\n    <Stack gap={5}>\n      {SIZES.map((step) => (\n        <Field key={step.size}>\n          <FieldLabel>{step.label}</FieldLabel>\n          <Combobox size={step.size} defaultInputValue=\"Reno, NV\" defaultValue=\"Reno, NV\">\n            <ComboboxInput />\n            <ComboboxContent>\n              {WAREHOUSES.map((warehouse) => (\n                <ComboboxItem key={warehouse} value={warehouse}>\n                  {warehouse}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\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 {\n  Combobox,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxItem,\n  type ComboboxVariant,\n} from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst VARIANTS: { variant: ComboboxVariant; label: string }[] = [\n  { variant: 'outline', label: 'Outline' },\n  { variant: 'subtle', label: 'Subtle' },\n  { variant: 'plain', label: 'Plain' },\n];\n\nconst WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];\n\nexport default function ComboboxVariants() {\n  return (\n    <Stack gap={5}>\n      {VARIANTS.map((step) => (\n        <Field key={step.variant}>\n          <FieldLabel>{step.label}</FieldLabel>\n          <Combobox variant={step.variant}>\n            <ComboboxInput placeholder=\"Search warehouses\" />\n            <ComboboxContent>\n              {WAREHOUSES.map((warehouse) => (\n                <ComboboxItem key={warehouse} value={warehouse}>\n                  {warehouse}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "Required, invalid, read-only and disabled. Read-only keeps the caret, the selection and the copy, and withholds only the popup, which the combobox decides because the pattern has no read-only state.",
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nexport default function ComboboxStates() {\n  return (\n    <Stack gap={5}>\n      <Field disabled>\n        <FieldLabel>Warehouse</FieldLabel>\n        <Combobox defaultInputValue=\"Reno, NV\" defaultValue=\"RNO\">\n          <ComboboxInput />\n          <ComboboxContent>\n            <ComboboxItem value=\"RNO\">Reno, NV</ComboboxItem>\n            <ComboboxItem value=\"CMH\">Columbus, OH</ComboboxItem>\n          </ComboboxContent>\n        </Combobox>\n        <FieldDescription>Locked while the transfer is in transit.</FieldDescription>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Billing entity</FieldLabel>\n        <Combobox defaultInputValue=\"Northwind Trading Co.\" defaultValue=\"northwind-us\">\n          <ComboboxInput />\n          <ComboboxContent>\n            <ComboboxItem value=\"northwind-us\">Northwind Trading Co.</ComboboxItem>\n            <ComboboxItem value=\"northwind-eu\">Northwind Europe B.V.</ComboboxItem>\n          </ComboboxContent>\n        </Combobox>\n        <FieldDescription>\n          Set by the contract. The text can still be selected and copied.\n        </FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "empty",
+      "title": "Nothing matched, and still travelling",
+      "note": "A query with no answers opens onto a sentence. A query whose answer is in flight keeps the same measure, so nothing jumps when the results land.",
+      "language": "tsx",
+      "source": "<ComboboxContent empty=\"Try a different spelling\" status=\"Searching…\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-content",
+      "title": "Long, translated and unbroken content",
+      "note": "A translated label, an unbroken identifier and two hundred options. The label clamps at two lines with the whole string in the DOM, and the mark sits inside the token that broke.",
+      "language": "tsx",
+      "source": "<ComboboxItem textValue=\"urn:acme:catalogue:9f2c41ab\" value=\"urn\">\n  urn:acme:catalogue:9f2c41ab8de07c5511903fbe\n</ComboboxItem>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "The arrows and the page keys move the highlight without moving the caret; Home, End, Backspace and Delete are never intercepted, which the pattern asks for by name.",
+      "language": "tsx",
+      "source": "<Combobox autoHighlight={false} loop={false} openOn=\"input\">\n  …\n</Combobox>;\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 input carrying the chosen key — never the typed text, which is the other contract.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { SubmitEvent } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst WAREHOUSES = [\n  { code: 'RNO', city: 'Reno, NV' },\n  { code: 'CMH', city: 'Columbus, OH' },\n  { code: 'SAV', city: 'Savannah, GA' },\n];\n\nexport default function ComboboxForm() {\n  const [missing, setMissing] = useState(false);\n  const [submitted, setSubmitted] = useState<string | null>(null);\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const warehouse = new FormData(event.currentTarget).get('warehouse');\n    setMissing(!warehouse);\n    setSubmitted(warehouse ? `warehouse=${String(warehouse)}` : null);\n  };\n\n  return (\n    <form noValidate onSubmit={submit}>\n      <Stack gap={4}>\n        <Field required invalid={missing}>\n          <FieldLabel>Fulfil from</FieldLabel>\n          <Combobox name=\"warehouse\" onValueChange={(next) => next && setMissing(false)}>\n            <ComboboxInput placeholder=\"Search warehouses\" />\n            <ComboboxContent>\n              {WAREHOUSES.map((warehouse) => (\n                <ComboboxItem key={warehouse.code} value={warehouse.code}>\n                  {warehouse.city}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\n          {missing && <FieldError>Choose the warehouse that ships this order.</FieldError>}\n        </Field>\n        <Inline gap={3} align=\"center\">\n          <Button type=\"submit\">Create transfer</Button>\n          {submitted && (\n            <Text size=\"sm\" tone=\"muted\">\n              Submitted {submitted}\n            </Text>\n          )}\n        </Inline>\n      </Stack>\n    </form>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition",
+      "note": "Defaults set once for an application, the words from the language in force, the frame replaced through render, and the imperative handle for what a consumer cannot say declaratively.",
+      "language": "tsx",
+      "source": "<ComboboxDefaultsProvider size=\"sm\">\n  <Combobox ref={handle}>\n    <ComboboxInput render={(props) => <label {...props} />} />…\n  </Combobox>\n</ComboboxDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "assignee-picker",
+      "title": "assignee-picker.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Avatar } from '@slotted/react/avatar';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst PEOPLE = [\n  { id: 'avery', name: 'Avery Collins', role: 'Fulfilment lead', away: false },\n  { id: 'kenji', name: 'Kenji Watanabe', role: 'Customer care', away: false },\n  { id: 'lucia', name: 'Lucía Fernández', role: 'Account manager', away: false },\n  { id: 'ruth', name: 'Ruth Adeyemi', role: 'On leave until 14 October', away: true },\n  { id: 'tomasz', name: 'Tomasz Nowak', role: 'Warehouse supervisor, Reno', away: false },\n  { id: 'omar', name: 'Omar Haddad', role: 'Finance', away: false },\n];\n\nexport default function ComboboxAssigneePicker() {\n  return (\n    <Field>\n      <FieldLabel>Assignee</FieldLabel>\n      <Combobox autoHighlight>\n        <ComboboxInput placeholder=\"Assign to…\" />\n        <ComboboxContent>\n          {PEOPLE.map((person) => (\n            <ComboboxItem\n              key={person.id}\n              value={person.id}\n              description={person.role}\n              disabled={person.away}\n              icon={<Avatar name={person.name} size=\"xs\" decorative />}\n            >\n              {person.name}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "async-search",
+      "title": "async-search.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useEffect, useState } from 'react';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\ninterface Customer {\n  id: string;\n  name: string;\n  city: string;\n}\n\nconst DIRECTORY: Customer[] = [\n  { id: 'brightline', name: 'Brightline Studio', city: 'Portland, OR' },\n  { id: 'harbor-pine', name: 'Harbor & Pine', city: 'Seattle, WA' },\n  { id: 'northgate', name: 'Northgate Labs', city: 'Austin, TX' },\n  { id: 'quill', name: 'Quill & Co.', city: 'Brooklyn, NY' },\n  { id: 'solstice', name: 'Solstice Outdoor', city: 'Boulder, CO' },\n  { id: 'verde', name: 'Verde Kitchen', city: 'Oakland, CA' },\n  { id: 'atlas', name: 'Atlas Freight', city: 'Memphis, TN' },\n  { id: 'juniper', name: 'Juniper Health', city: 'Minneapolis, MN' },\n  { id: 'kestrel', name: 'Kestrel Robotics', city: 'Pittsburgh, PA' },\n  { id: 'larkspur', name: 'Larkspur Books', city: 'Asheville, NC' },\n  { id: 'meridian', name: 'Meridian Hotels', city: 'Chicago, IL' },\n  { id: 'oakline', name: 'Oakline Furniture', city: 'Grand Rapids, MI' },\n  { id: 'pelican', name: 'Pelican Coffee', city: 'Tampa, FL' },\n  { id: 'saltmarsh', name: 'Saltmarsh Dairy', city: 'Burlington, VT' },\n  { id: 'tidewater', name: 'Tidewater Supply', city: 'Norfolk, VA' },\n];\n\n/** Stands in for a request to the server, which answers after 600 ms. */\nfunction searchCustomers(query: string): Promise<Customer[]> {\n  const needle = query.trim().toLowerCase();\n  const found = DIRECTORY.filter((customer) => customer.name.toLowerCase().includes(needle));\n  return new Promise((resolve) => setTimeout(() => resolve(found), 600));\n}\n\nexport default function ComboboxAsyncSearch() {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState<Customer[]>([]);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (query.trim() === '') {\n      setResults([]);\n      setLoading(false);\n      return;\n    }\n    let current = true;\n    setLoading(true);\n    const debounce = setTimeout(() => {\n      void searchCustomers(query).then((found) => {\n        if (!current) return;\n        setResults(found);\n        setLoading(false);\n      });\n    }, 250);\n    return () => {\n      current = false;\n      clearTimeout(debounce);\n    };\n  }, [query]);\n\n  return (\n    <Field>\n      <FieldLabel>Customer</FieldLabel>\n      <Combobox\n        filter={null}\n        inputValue={query}\n        onInputValueChange={setQuery}\n        loading={loading}\n        messages={{\n          empty: query.trim() === '' ? 'Type a name to search.' : 'No customer by that name.',\n        }}\n      >\n        <ComboboxInput placeholder=\"Search 15 customers\" />\n        <ComboboxContent>\n          {results.map((customer) => (\n            <ComboboxItem key={customer.id} value={customer.id} description={customer.city}>\n              {customer.name}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "auto-highlight",
+      "title": "auto-highlight.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst UNITS = ['Each', 'Case of 6', 'Case of 12', 'Pallet', 'Kilogram', 'Pound', 'Meter', 'Liter'];\n\nexport default function ComboboxAutoHighlight() {\n  return (\n    <Field>\n      <FieldLabel>Unit of measure</FieldLabel>\n      <Combobox autoHighlight loop>\n        <ComboboxInput placeholder=\"Type “ca” and press Enter\" />\n        <ComboboxContent>\n          {UNITS.map((unit) => (\n            <ComboboxItem key={unit} value={unit}>\n              {unit}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>The first match is highlighted, so Enter takes it.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst CUSTOMERS = [\n  { id: 'brightline', name: 'Brightline Studio' },\n  { id: 'harbor-pine', name: 'Harbor & Pine' },\n  { id: 'northgate', name: 'Northgate Labs' },\n  { id: 'quill', name: 'Quill & Co.' },\n  { id: 'solstice', name: 'Solstice Outdoor' },\n  { id: 'verde', name: 'Verde Kitchen' },\n  { id: 'atlas', name: 'Atlas Freight' },\n  { id: 'juniper', name: 'Juniper Health' },\n];\n\nexport default function ComboboxBasic() {\n  return (\n    <Field>\n      <FieldLabel>Customer</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search customers\" />\n        <ComboboxContent>\n          {CUSTOMERS.map((customer) => (\n            <ComboboxItem key={customer.id} value={customer.id}>\n              {customer.name}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst PEOPLE = [\n  { id: 'avery', name: 'Avery Collins' },\n  { id: 'kenji', name: 'Kenji Watanabe' },\n  { id: 'lucia', name: 'Lucía Fernández' },\n  { id: 'ruth', name: 'Ruth Adeyemi' },\n  { id: 'tomasz', name: 'Tomasz Nowak' },\n];\n\nexport default function ComboboxControlled() {\n  const [text, setText] = useState('');\n  const [value, setValue] = useState<string | null>(null);\n\n  const assignToMe = () => {\n    setValue('ruth');\n    setText('Ruth Adeyemi');\n  };\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <FieldLabel>Reviewer</FieldLabel>\n        <Combobox\n          inputValue={text}\n          onInputValueChange={setText}\n          value={value}\n          onValueChange={setValue}\n        >\n          <ComboboxInput placeholder=\"Search people\" />\n          <ComboboxContent>\n            {PEOPLE.map((person) => (\n              <ComboboxItem key={person.id} value={person.id}>\n                {person.name}\n              </ComboboxItem>\n            ))}\n          </ComboboxContent>\n        </Combobox>\n      </Field>\n      <Inline gap={3} align=\"center\">\n        <Button size=\"sm\" variant=\"outline\" onClick={assignToMe}>\n          Assign to me\n        </Button>\n        <Text size=\"sm\" tone=\"muted\">\n          Text “{text}” · Value {value ?? 'none'}\n        </Text>\n      </Inline>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "country-picker",
+      "title": "country-picker.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  Combobox,\n  ComboboxContent,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n} from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst REGIONS = [\n  {\n    region: 'Americas',\n    countries: [\n      { code: 'BR', name: 'Brazil', detail: 'BRL · +55' },\n      { code: 'CA', name: 'Canada', detail: 'CAD · +1' },\n      { code: 'MX', name: 'Mexico', detail: 'MXN · +52' },\n      { code: 'US', name: 'United States', detail: 'USD · +1' },\n    ],\n  },\n  {\n    region: 'Europe',\n    countries: [\n      { code: 'FR', name: 'France', detail: 'EUR · +33' },\n      { code: 'DE', name: 'Germany', detail: 'EUR · +49' },\n      { code: 'PL', name: 'Poland', detail: 'PLN · +48' },\n      { code: 'CH', name: 'Switzerland', detail: 'CHF · +41' },\n      { code: 'TR', name: 'Türkiye', detail: 'TRY · +90' },\n      { code: 'GB', name: 'United Kingdom', detail: 'GBP · +44' },\n    ],\n  },\n  {\n    region: 'Asia Pacific',\n    countries: [\n      { code: 'AU', name: 'Australia', detail: 'AUD · +61' },\n      { code: 'JP', name: 'Japan', detail: 'JPY · +81' },\n      { code: 'SG', name: 'Singapore', detail: 'SGD · +65' },\n      { code: 'VN', name: 'Việt Nam', detail: 'VND · +84' },\n    ],\n  },\n  {\n    region: 'Middle East and Africa',\n    countries: [\n      { code: 'CI', name: 'Côte d’Ivoire', detail: 'XOF · +225' },\n      { code: 'EG', name: 'Egypt', detail: 'EGP · +20' },\n      { code: 'KE', name: 'Kenya', detail: 'KES · +254' },\n      { code: 'AE', name: 'United Arab Emirates', detail: 'AED · +971' },\n    ],\n  },\n];\n\nexport default function ComboboxCountryPicker() {\n  return (\n    <Field required>\n      <FieldLabel>Country or region</FieldLabel>\n      <Combobox autoHighlight name=\"country\">\n        <ComboboxInput placeholder=\"Search countries\" />\n        <ComboboxContent>\n          {REGIONS.map((group) => (\n            <ComboboxGroup key={group.region} label={group.region}>\n              {group.countries.map((country) => (\n                <ComboboxItem key={country.code} value={country.code} description={country.detail}>\n                  {country.name}\n                </ComboboxItem>\n              ))}\n            </ComboboxGroup>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>Sets the currency and the phone prefix on the invoice.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "creatable",
+      "title": "creatable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst CATEGORIES = ['Apparel', 'Bags', 'Home', 'Kitchen', 'Stationery', 'Outdoor'];\n\nexport default function ComboboxCreatable() {\n  const [categories, setCategories] = useState(CATEGORIES);\n  const [value, setValue] = useState<string | null>(null);\n\n  const create = (query: string) => {\n    setCategories((held) => [...held, query]);\n    setValue(query);\n  };\n\n  return (\n    <Field>\n      <FieldLabel>Category</FieldLabel>\n      <Combobox onCreate={create} value={value} onValueChange={setValue}>\n        <ComboboxInput placeholder=\"Type “Garden” to add it\" />\n        <ComboboxContent>\n          {categories.map((category) => (\n            <ComboboxItem key={category} value={category}>\n              {category}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>{categories.length} categories</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "custom-filter",
+      "title": "custom-filter.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst PRODUCTS = [\n  { sku: 'KIT-1042', name: 'Cast-iron skillet' },\n  { sku: 'KIT-1043', name: 'Stoneware mug' },\n  { sku: 'BAG-2010', name: 'Canvas tote' },\n  { sku: 'BAG-2014', name: 'Trail daypack' },\n  { sku: 'HOM-4010', name: 'Wool throw' },\n  { sku: 'HOM-4014', name: 'Brass desk lamp' },\n  { sku: 'STA-3010', name: 'Field notebook' },\n];\n\nconst startsWith = (label: string, query: string) =>\n  label.toLowerCase().startsWith(query.toLowerCase());\n\nexport default function ComboboxCustomFilter() {\n  return (\n    <Field>\n      <FieldLabel>SKU</FieldLabel>\n      <Combobox filter={startsWith}>\n        <ComboboxInput placeholder=\"KIT-, BAG-, HOM-…\" />\n        <ComboboxContent>\n          {PRODUCTS.map((product) => (\n            <ComboboxItem key={product.sku} value={product.sku} description={product.name}>\n              {product.sku}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>\n        Codes match from the first character, so “10” finds nothing.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  Combobox,\n  ComboboxContent,\n  ComboboxDefaultsProvider,\n  ComboboxInput,\n  ComboboxItem,\n} from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\n\nexport default function ComboboxAppDefaults() {\n  return (\n    <ComboboxDefaultsProvider variant=\"subtle\" autoHighlight>\n      <Stack gap={4}>\n        <Field>\n          <FieldLabel>Warehouse</FieldLabel>\n          <Combobox>\n            <ComboboxInput placeholder=\"Any warehouse\" />\n            <ComboboxContent>\n              {WAREHOUSES.map((warehouse) => (\n                <ComboboxItem key={warehouse} value={warehouse}>\n                  {warehouse}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\n        </Field>\n        <Field>\n          <FieldLabel>Carrier</FieldLabel>\n          <Combobox>\n            <ComboboxInput placeholder=\"Any carrier\" />\n            <ComboboxContent>\n              {CARRIERS.map((carrier) => (\n                <ComboboxItem key={carrier} value={carrier}>\n                  {carrier}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\n        </Field>\n      </Stack>\n    </ComboboxDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst WAREHOUSES = [\n  { code: 'RNO', city: 'Reno, NV', detail: 'West · same-day cutoff 2:00 pm PT' },\n  { code: 'CMH', city: 'Columbus, OH', detail: 'Midwest · same-day cutoff 3:00 pm ET' },\n  { code: 'SAV', city: 'Savannah, GA', detail: 'Southeast · port of entry for ocean freight' },\n  { code: 'DFW', city: 'Dallas, TX', detail: 'South · opens November 2026' },\n];\n\nexport default function ComboboxDescriptions() {\n  return (\n    <Field>\n      <FieldLabel>Ship from</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search warehouses\" />\n        <ComboboxContent>\n          {WAREHOUSES.map((warehouse) => (\n            <ComboboxItem\n              key={warehouse.code}\n              value={warehouse.code}\n              description={warehouse.detail}\n            >\n              {warehouse.city}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled-options",
+      "title": "disabled-options.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst SERVICES = [\n  { id: 'usps-priority', name: 'USPS Priority Mail', note: '1–3 business days', disabled: false },\n  { id: 'ups-ground', name: 'UPS Ground', note: '1–5 business days', disabled: false },\n  { id: 'fedex-2day', name: 'FedEx 2Day', note: '2 business days', disabled: false },\n  {\n    id: 'dhl-express',\n    name: 'DHL Express Worldwide',\n    note: 'International shipments only',\n    disabled: true,\n  },\n  { id: 'ups-next-day', name: 'UPS Next Day Air', note: 'Cutoff passed for today', disabled: true },\n];\n\nexport default function ComboboxDisabledOptions() {\n  return (\n    <Field>\n      <FieldLabel>Shipping service</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search services\" />\n        <ComboboxContent>\n          {SERVICES.map((service) => (\n            <ComboboxItem\n              key={service.id}\n              value={service.id}\n              description={service.note}\n              disabled={service.disabled}\n            >\n              {service.name}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "field",
+      "title": "field.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst OWNERS = ['Avery Collins', 'Kenji Watanabe', 'Lucía Fernández', 'Omar Haddad'];\nconst COST_CENTERS = ['4100 Fulfilment', '4200 Customer care', '4300 Marketing'];\n\nexport default function ComboboxField() {\n  return (\n    <Stack gap={5}>\n      <Field required>\n        <FieldLabel>Account manager</FieldLabel>\n        <Combobox>\n          <ComboboxInput placeholder=\"Search people\" />\n          <ComboboxContent>\n            {OWNERS.map((owner) => (\n              <ComboboxItem key={owner} value={owner}>\n                {owner}\n              </ComboboxItem>\n            ))}\n          </ComboboxContent>\n        </Combobox>\n        <FieldDescription>Receives the renewal reminders for this account.</FieldDescription>\n      </Field>\n      <Field invalid required>\n        <FieldLabel>Cost center</FieldLabel>\n        <Combobox defaultInputValue=\"4900\">\n          <ComboboxInput />\n          <ComboboxContent>\n            {COST_CENTERS.map((center) => (\n              <ComboboxItem key={center} value={center}>\n                {center}\n              </ComboboxItem>\n            ))}\n          </ComboboxContent>\n        </Combobox>\n        <FieldError>4900 is closed. Choose an open cost center.</FieldError>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-facets",
+      "title": "filter-facets.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Inline } from '@slotted/react/inline';\nimport { Text } from '@slotted/react/typography';\n\ntype Facet = 'warehouse' | 'carrier' | 'owner';\n\nconst WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];\nconst OWNERS = ['Avery Collins', 'Kenji Watanabe', 'Lucía Fernández', 'Omar Haddad'];\n\nconst FACETS: { id: Facet; label: string; options: string[] }[] = [\n  { id: 'warehouse', label: 'Warehouse', options: WAREHOUSES },\n  { id: 'carrier', label: 'Carrier', options: CARRIERS },\n  { id: 'owner', label: 'Owner', options: OWNERS },\n];\n\n/** Open orders, counted per warehouse, carrier and owner. */\nconst ORDERS = WAREHOUSES.flatMap((warehouse, w) =>\n  CARRIERS.flatMap((carrier, c) =>\n    OWNERS.map((owner, o) => ({ warehouse, carrier, owner, count: 1 + ((w + 2 * c + 3 * o) % 5) })),\n  ),\n);\nconst TOTAL = ORDERS.reduce((sum, row) => sum + row.count, 0);\n\nconst NONE: Record<Facet, string | null> = { warehouse: null, carrier: null, owner: null };\nconst EMPTY: Record<Facet, string> = { warehouse: '', carrier: '', owner: '' };\n\nexport default function ComboboxFilterFacets() {\n  const [chosen, setChosen] = useState(NONE);\n  const [texts, setTexts] = useState(EMPTY);\n\n  const matching = ORDERS.filter((row) =>\n    FACETS.every((facet) => chosen[facet.id] === null || row[facet.id] === chosen[facet.id]),\n  ).reduce((sum, row) => sum + row.count, 0);\n  const active = FACETS.filter((facet) => chosen[facet.id] !== null).length;\n\n  const clear = () => {\n    setChosen(NONE);\n    setTexts(EMPTY);\n  };\n\n  return (\n    <Inline gap={2} align=\"center\" wrap=\"wrap\">\n      {FACETS.map((facet) => (\n        <Combobox\n          key={facet.id}\n          size=\"sm\"\n          fullWidth={false}\n          width=\"content\"\n          value={chosen[facet.id]}\n          onValueChange={(next) => setChosen((held) => ({ ...held, [facet.id]: next }))}\n          inputValue={texts[facet.id]}\n          onInputValueChange={(next) => setTexts((held) => ({ ...held, [facet.id]: next }))}\n        >\n          <ComboboxInput aria-label={facet.label} placeholder={facet.label} />\n          <ComboboxContent aria-label={facet.label}>\n            {facet.options.map((option) => (\n              <ComboboxItem key={option} value={option}>\n                {option}\n              </ComboboxItem>\n            ))}\n          </ComboboxContent>\n        </Combobox>\n      ))}\n      <Button size=\"sm\" variant=\"ghost\" disabled={active === 0} onClick={clear}>\n        Clear filters\n      </Button>\n      <Text size=\"sm\" tone=\"muted\">\n        {matching} of {TOTAL} orders\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "global-search",
+      "title": "global-search.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n} from '@slotted/react/combobox';\nimport { Glyph, Icon } from '@slotted/react/icon';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst CUSTOMERS = [\n  { id: 'brightline', name: 'Brightline Studio', city: 'Portland, OR' },\n  { id: 'harbor-pine', name: 'Harbor & Pine', city: 'Seattle, WA' },\n  { id: 'northgate', name: 'Northgate Labs', city: 'Austin, TX' },\n];\nconst ORDERS = [\n  { id: '10482', customer: 'Brightline Studio', total: '$1,284.00' },\n  { id: '10479', customer: 'Atlas Freight', total: '$356.40' },\n  { id: '10471', customer: 'Northgate Labs', total: '$2,910.15' },\n];\nconst LABELS = new Map<string, string>([\n  ...CUSTOMERS.map((customer) => [`customer:${customer.id}`, customer.name] as const),\n  ...ORDERS.map((order) => [`order:${order.id}`, `Order ${order.id}`] as const),\n]);\n\nexport default function ComboboxGlobalSearch() {\n  const [opened, setOpened] = useState<string | null>(null);\n\n  return (\n    <Stack gap={3}>\n      <Combobox openOn=\"focus\" size=\"sm\" onValueChange={setOpened}>\n        <ComboboxInput aria-label=\"Search Northwind\" placeholder=\"Search customers and orders\" />\n        <ComboboxContent aria-label=\"Search Northwind\">\n          <ComboboxGroup label=\"Customers\">\n            {CUSTOMERS.map((customer) => (\n              <ComboboxItem\n                key={customer.id}\n                value={`customer:${customer.id}`}\n                description={customer.city}\n                icon={\n                  <Icon>\n                    <Glyph name=\"person\" />\n                  </Icon>\n                }\n              >\n                {customer.name}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n          <ComboboxGroup label=\"Orders\">\n            {ORDERS.map((order) => (\n              <ComboboxItem\n                key={order.id}\n                value={`order:${order.id}`}\n                description={`${order.customer} · ${order.total}`}\n                icon={\n                  <Icon>\n                    <Glyph name=\"file-text\" />\n                  </Icon>\n                }\n              >\n                {`Order ${order.id}`}\n              </ComboboxItem>\n            ))}\n          </ComboboxGroup>\n        </ComboboxContent>\n      </Combobox>\n      <Text size=\"sm\" tone=\"muted\">\n        {opened === null ? 'Focus the field to see every result.' : `Opening ${LABELS.get(opened)}`}\n      </Text>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "icons",
+      "title": "icons.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Glyph, type GlyphName, Icon } from '@slotted/react/icon';\n\nconst DOCUMENTS: { id: string; name: string; glyph: GlyphName }[] = [\n  { id: 'price-list', name: 'Q4 wholesale price list.xlsx', glyph: 'file-spreadsheet' },\n  { id: 'carrier-contract', name: 'Carrier contract 2026.pdf', glyph: 'file-text' },\n  { id: 'floor-plan', name: 'Reno floor plan.png', glyph: 'file-image' },\n  { id: 'returns-deck', name: 'Returns policy review.key', glyph: 'presentation' },\n  { id: 'product-photos', name: 'Autumn product photos.zip', glyph: 'file-archive' },\n];\n\nexport default function ComboboxIcons() {\n  return (\n    <Field>\n      <FieldLabel>Attach a document</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search shared files\" />\n        <ComboboxContent>\n          {DOCUMENTS.map((document) => (\n            <ComboboxItem\n              key={document.id}\n              value={document.id}\n              icon={\n                <Icon>\n                  <Glyph name={document.glyph} />\n                </Icon>\n              }\n            >\n              {document.name}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "inline-completion",
+      "title": "inline-completion.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst TIME_ZONES = [\n  'America/New_York',\n  'America/Chicago',\n  'America/Denver',\n  'America/Los_Angeles',\n  'Europe/London',\n  'Europe/Berlin',\n  'Asia/Tokyo',\n  'Australia/Sydney',\n];\n\nexport default function ComboboxInlineCompletion() {\n  return (\n    <Field>\n      <FieldLabel>Time zone</FieldLabel>\n      <Combobox autocomplete=\"both\">\n        <ComboboxInput placeholder=\"Type “eu” or “am”\" />\n        <ComboboxContent>\n          {TIME_ZONES.map((zone) => (\n            <ComboboxItem key={zone} value={zone}>\n              {zone}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "load-more",
+      "title": "load-more.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useMemo, useRef, useState } from 'react';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst PRODUCTS = [\n  'Canvas tote',\n  'Merino beanie',\n  'Stoneware mug',\n  'Linen apron',\n  'Trail daypack',\n  'Wool throw',\n  'Ceramic planter',\n  'Field notebook',\n  'Rain shell',\n  'Leather wallet',\n  'Weekender bag',\n  'Cotton crewneck',\n  'Camp mug',\n  'Insulated bottle',\n  'Chambray shirt',\n  'Waffle towel',\n  'Beeswax candle',\n  'Rattan basket',\n  'Hiking socks',\n  'Down vest',\n  'Sketchbook',\n  'Wool blanket',\n  'Market crossbody',\n  'Felt slippers',\n];\nconst COLORS = [\n  'Natural',\n  'Charcoal',\n  'Olive',\n  'Rust',\n  'Navy',\n  'Sand',\n  'Forest',\n  'Slate',\n  'Clay',\n  'Ink',\n];\nconst SKUS = PRODUCTS.flatMap((product, row) =>\n  COLORS.map((color, column) => ({\n    sku: `NW-${1001 + row * COLORS.length + column}`,\n    label: `${product}, ${color}`,\n  })),\n);\nconst PAGE = 30;\n\nexport default function ComboboxLoadMore() {\n  const [query, setQuery] = useState('');\n  const [shown, setShown] = useState(PAGE);\n  const [loading, setLoading] = useState(false);\n  const request = useRef(0);\n\n  /* The server's answer: every SKU whose label holds the query, a page at a time. */\n  const matching = useMemo(() => {\n    const needle = query.trim().toLowerCase();\n    return SKUS.filter((item) => item.label.toLowerCase().includes(needle));\n  }, [query]);\n\n  const type = (text: string) => {\n    request.current += 1;\n    setQuery(text);\n    setShown(PAGE);\n    setLoading(false);\n  };\n\n  const loadMore = () => {\n    if (loading || shown >= matching.length) return;\n    const current = ++request.current;\n    setLoading(true);\n    setTimeout(() => {\n      if (current !== request.current) return;\n      setShown((count) => count + PAGE);\n      setLoading(false);\n    }, 500);\n  };\n\n  return (\n    <Field>\n      <FieldLabel>Variant</FieldLabel>\n      <Combobox\n        filter={null}\n        inputValue={query}\n        onInputValueChange={type}\n        loading={loading}\n        onLoadMore={loadMore}\n        total={matching.length}\n      >\n        <ComboboxInput placeholder=\"Search 240 SKUs\" />\n        <ComboboxContent>\n          {matching.slice(0, shown).map((item, index) => (\n            <ComboboxItem\n              key={item.sku}\n              value={item.sku}\n              description={item.sku}\n              position={index + 1}\n            >\n              {item.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>\n        Thirty at a time; scrolling to the end fetches the next page.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-labels",
+      "title": "long-labels.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst ACCOUNTS = [\n  {\n    id: '4010',\n    label:\n      '4010 · Revenue, wholesale channel, net of returns, allowances and early-payment discounts',\n  },\n  { id: '4020', label: '4020 · Revenue, online store' },\n  {\n    id: 'urn',\n    label: 'urn:northwind:ledger:4030-9f2c41ab8de07c5511903fbe',\n    description: 'Imported from the previous ledger',\n  },\n  {\n    id: '5100',\n    label: '5100 · Cost of goods sold, including inbound freight and duties',\n    description: 'Posted when an order ships, at the weighted average cost of the warehouse',\n  },\n];\n\nexport default function ComboboxLongLabels() {\n  return (\n    <Field>\n      <FieldLabel>Ledger account</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search accounts\" />\n        <ComboboxContent>\n          {ACCOUNTS.map((account) => (\n            <ComboboxItem key={account.id} value={account.id} description={account.description}>\n              {account.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-list",
+      "title": "long-list.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\n\nconst BINS = Array.from({ length: 240 }, (_, index) => {\n  const aisle = String(Math.floor(index / 20) + 1).padStart(2, '0');\n  const bay = String((index % 20) + 1).padStart(2, '0');\n  return { id: `A${aisle}-B${bay}`, detail: `Aisle ${Number(aisle)}, bay ${Number(bay)} · Reno` };\n});\n\nexport default function ComboboxLongList() {\n  return (\n    <Field>\n      <FieldLabel>Put-away bin</FieldLabel>\n      <Combobox>\n        <ComboboxInput placeholder=\"Search 240 bins\" />\n        <ComboboxContent>\n          {BINS.map((bin) => (\n            <ComboboxItem key={bin.id} value={bin.id} description={bin.detail}>\n              {bin.id}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n      <FieldDescription>Page Down and Page Up move ten bins at a time.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "messages",
+      "title": "messages.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS', 'OnTrac'];\n\nexport default function ComboboxCustomMessages() {\n  return (\n    <Field>\n      <FieldLabel>Carrier</FieldLabel>\n      <Combobox\n        messages={{\n          clear: 'Clear carrier',\n          count: '{count, plural, one {# carrier} other {# carriers}}',\n          empty: 'No carrier by that name. Check the spelling on the label.',\n        }}\n      >\n        <ComboboxInput placeholder=\"Type “royal mail”\" />\n        <ComboboxContent>\n          {CARRIERS.map((carrier) => (\n            <ComboboxItem key={carrier} value={carrier}>\n              {carrier}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "open-on",
+      "title": "open-on.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  Combobox,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxItem,\n  type ComboboxOpenOn,\n} from '@slotted/react/combobox';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst MODES: { openOn: ComboboxOpenOn; label: string; hint: string }[] = [\n  { openOn: 'input', label: 'Opens on typing', hint: 'Typing or a press on the field opens it.' },\n  { openOn: 'focus', label: 'Opens on focus', hint: 'Every focus opens it, Tab included.' },\n  {\n    openOn: 'manual',\n    label: 'Opens on request',\n    hint: 'Only the button and the arrow keys open it.',\n  },\n];\n\nconst CHANNELS = ['Online store', 'Wholesale portal', 'Marketplace', 'Retail partners'];\n\nexport default function ComboboxOpening() {\n  return (\n    <Stack gap={5}>\n      {MODES.map((mode) => (\n        <Field key={mode.openOn}>\n          <FieldLabel>{mode.label}</FieldLabel>\n          <Combobox openOn={mode.openOn}>\n            <ComboboxInput placeholder=\"Sales channel\" />\n            <ComboboxContent>\n              {CHANNELS.map((channel) => (\n                <ComboboxItem key={channel} value={channel}>\n                  {channel}\n                </ComboboxItem>\n              ))}\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>{mode.hint}</FieldDescription>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "search-error",
+      "title": "search-error.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useRef, useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\n\nconst CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS', 'OnTrac', 'LaserShip'];\n\n/** Stands in for a rate service that fails its first request and answers after. */\nlet outage = true;\nfunction searchCarriers(query: string): Promise<string[]> {\n  const needle = query.trim().toLowerCase();\n  return new Promise((resolve, reject) =>\n    setTimeout(() => {\n      if (outage) {\n        outage = false;\n        reject(new Error('The rate service did not answer.'));\n        return;\n      }\n      resolve(CARRIERS.filter((carrier) => carrier.toLowerCase().includes(needle)));\n    }, 500),\n  );\n}\n\nexport default function ComboboxSearchError() {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState<string[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [failed, setFailed] = useState(false);\n  const latest = useRef(0);\n\n  const search = (text: string) => {\n    const request = ++latest.current;\n    setLoading(true);\n    setFailed(false);\n    searchCarriers(text).then(\n      (found) => {\n        if (request !== latest.current) return;\n        setResults(found);\n        setLoading(false);\n      },\n      () => {\n        if (request !== latest.current) return;\n        setResults([]);\n        setFailed(true);\n        setLoading(false);\n      },\n    );\n  };\n\n  const type = (text: string) => {\n    setQuery(text);\n    if (text.trim() !== '') search(text);\n  };\n\n  return (\n    <Stack gap={3}>\n      <Field invalid={failed}>\n        <FieldLabel>Carrier</FieldLabel>\n        <Combobox\n          filter={null}\n          inputValue={query}\n          onInputValueChange={type}\n          loading={loading}\n          messages={{ empty: failed ? 'Rates are unavailable.' : 'No carrier by that name.' }}\n        >\n          <ComboboxInput placeholder=\"Search carriers\" />\n          <ComboboxContent>\n            {results.map((carrier) => (\n              <ComboboxItem key={carrier} value={carrier}>\n                {carrier}\n              </ComboboxItem>\n            ))}\n          </ComboboxContent>\n        </Combobox>\n        {failed && <FieldError>The rate service did not answer. Your text is kept.</FieldError>}\n      </Field>\n      {failed && (\n        <div>\n          <Button size=\"sm\" variant=\"outline\" onClick={() => search(query)}>\n            Retry\n          </Button>\n        </div>\n      )}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "width",
+      "title": "width.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '@slotted/react/combobox';\nimport { Field, FieldLabel } from '@slotted/react/field';\n\nconst ZONES = [\n  { id: 'pacific', label: '(UTC−08:00) Pacific Time — Los Angeles, Vancouver' },\n  { id: 'mountain', label: '(UTC−07:00) Mountain Time — Denver, Calgary' },\n  { id: 'central', label: '(UTC−06:00) Central Time — Chicago, Mexico City' },\n  { id: 'eastern', label: '(UTC−05:00) Eastern Time — New York, Toronto' },\n  { id: 'london', label: '(UTC+00:00) Greenwich Mean Time — London, Lisbon' },\n];\n\nexport default function ComboboxPopupWidth() {\n  return (\n    <Field>\n      <FieldLabel>Report time zone</FieldLabel>\n      <Combobox fullWidth={false} width=\"content\">\n        <ComboboxInput placeholder=\"Search zones\" />\n        <ComboboxContent>\n          {ZONES.map((zone) => (\n            <ComboboxItem key={zone.id} value={zone.id}>\n              {zone.label}\n            </ComboboxItem>\n          ))}\n        </ComboboxContent>\n      </Combobox>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}