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

package/dist/docs/multi-select.json

@@ -0,0 +1,1342 @@
+{
+  "family": "multi-select",
+  "ui": "multi-select",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Picks several options shown as tags."
+  },
+  "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"
+    ],
+    "openOn": [
+      "input",
+      "focus",
+      "manual"
+    ],
+    "overflow": [
+      "wrap",
+      "collapse"
+    ],
+    "chosenOptions": [
+      "show",
+      "hide"
+    ],
+    "creatable": [
+      true,
+      false
+    ],
+    "editable": [
+      true,
+      false
+    ],
+    "reorderable": [
+      true,
+      false
+    ],
+    "allowDuplicates": [
+      true,
+      false
+    ],
+    "commitOnBlur": [
+      true,
+      false
+    ],
+    "addOnPaste": [
+      true,
+      false
+    ],
+    "clearable": [
+      true,
+      false
+    ],
+    "loop": [
+      true,
+      false
+    ],
+    "highlightMatch": [
+      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": {
+    "multi-select": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "variant": "outline",
+        "side": "bottom",
+        "align": "start",
+        "width": "content",
+        "mount": "active",
+        "strategy": "absolute",
+        "openOn": "input",
+        "overflow": "wrap",
+        "chosenOptions": "show",
+        "creatable": false,
+        "editable": false,
+        "reorderable": false,
+        "allowDuplicates": false,
+        "commitOnBlur": true,
+        "addOnPaste": true,
+        "clearable": true,
+        "loop": false,
+        "highlightMatch": true,
+        "closeOnSelect": false,
+        "closeOnEscape": true,
+        "closeOnOutsidePress": true,
+        "flip": true,
+        "shift": true,
+        "hideWhenDetached": true,
+        "portal": true,
+        "fullWidth": true,
+        "disabled": false,
+        "readOnly": false,
+        "required": false,
+        "invalid": false,
+        "loading": false,
+        "max": null,
+        "delimiters": [
+          ","
+        ],
+        "sideOffset": 4,
+        "alignOffset": 0,
+        "collisionPadding": 8
+      },
+      "capabilities": [
+        "value",
+        "selection",
+        "open",
+        "current",
+        "overflow",
+        "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",
+        "complete"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "chips",
+        "field",
+        "input",
+        "counter",
+        "busy",
+        "clear",
+        "trigger",
+        "arrow",
+        "positioner",
+        "content",
+        "chosen",
+        "group",
+        "group-label",
+        "item",
+        "indicator",
+        "icon",
+        "label",
+        "match",
+        "description",
+        "separator",
+        "empty",
+        "status",
+        "placeholder"
+      ]
+    }
+  },
+  "docs": {
+    "multi-select": {
+      "imports": {
+        "source": "import { MultiSelect, MultiSelectContent, MultiSelectControl, MultiSelectGroup, MultiSelectItem, MultiSelectSeparator } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, rendered by MultiSelectControl",
+          "required": true,
+          "purpose": "The frame, carrying data-ui=\"multi-select\". It draws the border, the shadow, the focus ring and every state. Its height is not fixed: it grows by whole rows of tags up to three, then scrolls."
+        },
+        {
+          "part": "control",
+          "element": "div with role=\"grid\"",
+          "required": true,
+          "purpose": "The layout grid that holds the tags and the field, as the APG grid pattern describes for a list of message recipients. Its aria-label carries the number of chosen values, such as \"2 chosen\"."
+        },
+        {
+          "part": "chips",
+          "element": "div with role=\"row\"",
+          "required": true,
+          "purpose": "One row in the DOM, however many lines it wraps to. The wrap is CSS, so the reading order stays linear and ArrowDown and ArrowUp stay with the list. Past three rows it scrolls, and it draws no scrollbar inside the frame."
+        },
+        {
+          "part": "field",
+          "element": "span with role=\"gridcell\"",
+          "required": true,
+          "purpose": "The last cell of the row, holding the input. It wraps with the tags instead of moving to a line of its own, and it takes the width of a word with a floor of two characters."
+        },
+        {
+          "part": "input",
+          "element": "input with role=\"combobox\"",
+          "required": true,
+          "purpose": "A native text input, so text editing, the caret, selection, IME and autofill work as in any input. It is the tab stop of the control and carries aria-expanded, aria-controls and aria-activedescendant."
+        },
+        {
+          "part": "counter",
+          "element": "span",
+          "required": false,
+          "purpose": "The number of values against max, such as \"2 of 3\", or the number chosen while the frame is too narrow for a tag. It is drawn only in those two cases."
+        },
+        {
+          "part": "busy",
+          "element": "span",
+          "required": false,
+          "purpose": "The spinner that stands in place of the chevron while loading is set, because the list has nothing to open onto yet."
+        },
+        {
+          "part": "clear",
+          "element": "button",
+          "required": false,
+          "purpose": "Removes every value and the typed text at once, under the reason clear. It is drawn while clearable is set and the control holds a value or typed text."
+        },
+        {
+          "part": "trigger",
+          "element": "button",
+          "required": true,
+          "purpose": "Opens and closes the list with the pointer. It carries tabindex=\"-1\", because the combobox pattern keeps the popup indicator out of the tab sequence."
+        },
+        {
+          "part": "arrow",
+          "element": "span",
+          "required": true,
+          "purpose": "The chevron inside the trigger, a Glyph inside an Icon box, turned over while the list is open."
+        },
+        {
+          "part": "positioner",
+          "element": "div, rendered by MultiSelectContent",
+          "required": true,
+          "purpose": "The layer, portalled to the end of the document. It carries data-ui=\"multi-select\" as well, so the stylesheet reaches the list outside the root."
+        },
+        {
+          "part": "content",
+          "element": "div with role=\"listbox\" and aria-multiselectable",
+          "required": true,
+          "purpose": "The list surface. Selection does not follow the highlight: moving through the options chooses nothing, which departs from the combobox pattern on purpose."
+        },
+        {
+          "part": "chosen",
+          "element": "div",
+          "required": false,
+          "purpose": "Every chosen value as a tag, at the top of the list, whatever the row in the control shows. With overflow=\"collapse\", the values the +N tag counts stay readable here."
+        },
+        {
+          "part": "group",
+          "element": "div with role=\"group\"",
+          "required": false,
+          "purpose": "A run of options under a name. A group whose options were all filtered away is hidden with its heading, so a heading never claims a match."
+        },
+        {
+          "part": "group-label",
+          "element": "div",
+          "required": false,
+          "purpose": "The name of a group, which the group references with aria-labelledby."
+        },
+        {
+          "part": "item",
+          "element": "div with role=\"option\"",
+          "required": true,
+          "purpose": "One option. It compares its own label with the query and is hidden when it does not match. Pressing an option already chosen removes its value."
+        },
+        {
+          "part": "indicator",
+          "element": "span",
+          "required": true,
+          "purpose": "The check on a chosen option, and the plus on the option that adds the typed text."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": false,
+          "purpose": "The first column of an option, for an icon that makes rows recognisable."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "The text the reader chooses by, clamped to two lines. Its rules apply inside the option only, so the label of a tag keeps its own."
+        },
+        {
+          "part": "match",
+          "element": "mark, the match part of the highlight component, inside label",
+          "required": false,
+          "purpose": "The span of the label the query matched, drawn by the highlight stylesheet, so every filtered list marks a match the same way."
+        },
+        {
+          "part": "description",
+          "element": "span",
+          "required": false,
+          "purpose": "A second line under the label of an option, 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 shown when no option matches. It keeps the width of the list, so nothing shifts when results arrive."
+        },
+        {
+          "part": "status",
+          "element": "div with role=\"status\"",
+          "required": true,
+          "purpose": "The live region, and the loading row. It announces how many options match the query."
+        },
+        {
+          "part": "placeholder",
+          "element": "div holding skeleton rows",
+          "required": false,
+          "purpose": "Rows the height of an option, standing in for the options while they load. Hidden from assistive technology, because the status row announces the wait."
+        }
+      ],
+      "api": [
+        {
+          "name": "value",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The chosen values, in the order the reader chose them. Controlled."
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The values an uncontrolled multi-select starts with, read once. A reset of the form it belongs to returns to them."
+        },
+        {
+          "name": "inputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The text in the input. It is emptied whenever a value is committed. Controlled."
+        },
+        {
+          "name": "defaultInputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The text an uncontrolled input starts with, read once."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the list is open. Controlled."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Whether an uncontrolled list starts open."
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The option the highlight is on, which is not a chosen option. Controlled."
+        },
+        {
+          "name": "defaultHighlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Where an uncontrolled highlight starts."
+        },
+        {
+          "name": "items",
+          "type": "MultiSelectItems",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Values and labels declared up front, so a tag shows its label before the list has rendered its options."
+        },
+        {
+          "name": "filter",
+          "type": "MultiSelectFilter",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Compares an option label with the query. When absent, the comparison is a locale-sensitive \"contains\" that ignores case and accents; null turns filtering off for options a server has already filtered."
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The BCP 47 language of the filter and of the duplicate comparison. When absent, the language in force."
+        },
+        {
+          "name": "validateValue",
+          "type": "(text, values) => boolean",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Whether typed text may become a value. Text it turns down is reported through onValueRefuse with the cause invalid."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The submission name. One hidden input per value carries it."
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The id of the form the hidden inputs belong to, for a multi-select rendered outside it."
+        },
+        {
+          "name": "total",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "The number of options in the whole collection, for aria-setsize on a windowed list."
+        },
+        {
+          "name": "max",
+          "type": "number | null",
+          "defaultValue": "null",
+          "appliesTo": "MultiSelect",
+          "description": "The most values the set may hold; null means no limit. At the limit, every option not yet chosen is announced as unavailable."
+        },
+        {
+          "name": "delimiters",
+          "type": "readonly string[]",
+          "defaultValue": ",",
+          "appliesTo": "MultiSelect",
+          "description": "The characters that commit the typed text and split a paste. One list serves both."
+        },
+        {
+          "name": "creatable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether typed text may become a value."
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether Enter on a focused tag turns it into a text field."
+        },
+        {
+          "name": "reorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether Alt with ArrowLeft, ArrowRight, Home or End moves the focused tag along the row."
+        },
+        {
+          "name": "allowDuplicates",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the same value may be held twice."
+        },
+        {
+          "name": "addOnPaste",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether a paste that contains delimiters becomes several values."
+        },
+        {
+          "name": "commitOnBlur",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether typed text is committed when focus leaves the control."
+        },
+        {
+          "name": "overflow",
+          "type": "'wrap' | 'collapse'",
+          "defaultValue": "wrap",
+          "appliesTo": "MultiSelect",
+          "description": "What the control does with more tags than fit: wrap grows by rows up to three, then scrolls; collapse keeps one row and counts the rest in a +N tag."
+        },
+        {
+          "name": "chosenOptions",
+          "type": "'show' | 'hide'",
+          "defaultValue": "show",
+          "appliesTo": "MultiSelect",
+          "description": "Whether a chosen option stays in the list with a check, or leaves it."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the clear button is drawn while the control holds a value or typed text."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether choosing an option closes the list. Off by default, because a set is built with several choices."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether Escape closes the list."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether a press outside the list closes it."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the highlight wraps from the last option to the first, and back."
+        },
+        {
+          "name": "highlightMatch",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the span the query matched is marked."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "MultiSelect",
+          "description": "The step of the control scale. Inside a field, an unset size follows the field."
+        },
+        {
+          "name": "variant",
+          "type": "'outline' | 'subtle' | 'plain'",
+          "defaultValue": "outline",
+          "appliesTo": "MultiSelect",
+          "description": "The frame: outline draws an edge, subtle a filled ground, plain neither until hover or focus."
+        },
+        {
+          "name": "side",
+          "type": "'bottom' | 'top' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "bottom",
+          "appliesTo": "MultiSelect",
+          "description": "The side of the control the list opens on."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "MultiSelect",
+          "description": "How the list aligns along that side."
+        },
+        {
+          "name": "width",
+          "type": "'anchor' | 'content'",
+          "defaultValue": "content",
+          "appliesTo": "MultiSelect",
+          "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": "MultiSelect",
+          "description": "When the list exists in the DOM: only while open (active), from the first open on (lazy), or from the start (eager)."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "MultiSelect",
+          "description": "The CSS position the list uses."
+        },
+        {
+          "name": "openOn",
+          "type": "'input' | 'focus' | 'manual'",
+          "defaultValue": "input",
+          "appliesTo": "MultiSelect",
+          "description": "Which gestures open the list besides the trigger and the arrow keys: typing or a press on the input (input), also any focus on the input (focus), or none, so typing filters without opening (manual)."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "4",
+          "appliesTo": "MultiSelect",
+          "description": "The distance in pixels between the control and the list."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "MultiSelect",
+          "description": "The shift in pixels along the aligned edge."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "MultiSelect",
+          "description": "How close in pixels the list may come to the edge of the viewport before it moves."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the list moves to the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the list slides along its side to stay in view."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the list hides when the control scrolls out of its clipping container."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the list is portalled to the end of the document."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the control fills the width of its container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the control is disabled: it takes no input, draws no remove buttons and leaves the tab order."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the values can be read and copied but not changed. The input stays focusable; the list, the remove buttons and the clear button are withheld."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether an empty set is invalid."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether the control is drawn in the error state, with aria-invalid on the input."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelect",
+          "description": "Whether options are on their way: the spinner replaces the chevron and the list shows placeholder rows."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<MultiSelectMessages>",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "Replaces any of the phrases the multi-select writes: clear, trigger, chosen ({count}), count ({count}), counter ({count}, {max}), create ({query}), empty, loading, remove ({label}) and reorder ({label}, {position}, {count}). Phrases left out come from the language in force."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectControl",
+          "description": "Replaces the frame element. The props it receives include the ref that measures the frame for the narrow layout, which the replacement has to keep."
+        },
+        {
+          "name": "chosen",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "MultiSelectContent",
+          "description": "Whether the band of chosen values is drawn at the top of the list."
+        },
+        {
+          "name": "empty",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectContent",
+          "description": "What the list shows when no option matches, in place of the empty message."
+        },
+        {
+          "name": "status",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectContent",
+          "description": "What the live region says, in place of the number of matching options."
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectItem",
+          "description": "The key of the option, which is what enters the set."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "MultiSelectItem",
+          "description": "Whether the option can be chosen."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectItem",
+          "description": "A second line under the label."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectItem",
+          "description": "Any element, drawn in the first column of the option."
+        },
+        {
+          "name": "textValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectItem",
+          "description": "The text the filter compares, for an option whose children are not plain text."
+        },
+        {
+          "name": "position",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectItem",
+          "description": "The place of the option in a windowed collection, for aria-posinset."
+        },
+        {
+          "name": "label",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectGroup",
+          "description": "The name of the group."
+        }
+      ],
+      "composition": [
+        {
+          "name": "MultiSelectDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once for every multi-select below it. The words come from the language in force, set by SlottedProvider. A prop set on one multi-select still wins."
+        },
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectControl, MultiSelectContent",
+          "description": "On MultiSelectControl, replaces the frame and receives the ref that measures it; a replacement that drops the ref loses the narrow layout. On MultiSelectContent, replaces the layer and receives its attributes and the options."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<MultiSelectHandle>",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelect",
+          "description": "focus(), open(), close(), scrollToKey(value) and setValue(values, reason): the actions a prop cannot express."
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef",
+          "defaultValue": "—",
+          "appliesTo": "MultiSelectControl, MultiSelectContent",
+          "description": "Props written on MultiSelectControl reach the input, such as aria-label and placeholder; props written on MultiSelectContent reach the listbox. On the input, your onKeyDown, onChange, onClick, onFocus, onBlur and onPaste run first, and calling preventDefault stops the multi-select from handling that event."
+        },
+        {
+          "name": "data-*",
+          "type": "attributes",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every state is an attribute to style: data-open, data-disabled, data-readonly, data-invalid, data-required, data-loading, data-selected, data-current and data-complete."
+        }
+      ],
+      "events": [
+        {
+          "name": "onValueChange",
+          "payload": "(value: readonly string[], request: ChangeRequest<readonly string[]>)",
+          "when": "Before the set changes. request.reason is select for an option, submit for typed text, remove for one value, clear for all of them, keyboard for a reorder, and programmatic for the handle and for a form reset. request.cancel() refuses the change."
+        },
+        {
+          "name": "onValueRefuse",
+          "payload": "(values: readonly string[], details: { cause: \"duplicate\" | \"limit\" | \"invalid\" })",
+          "when": "Values were turned away, and details.cause says why. Nothing is held and nothing can be cancelled: the values never entered the set."
+        },
+        {
+          "name": "onInputValueChange",
+          "payload": "(value: string, request: ChangeRequest<string>)",
+          "when": "Before the typed text changes. request.reason is keyboard while typing, select or submit when a commit empties it, clear for Escape or the clear button, blur when leaving the control commits it, and programmatic for a form reset."
+        },
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the list opens or closes. request.reason is pointer, keyboard, escape, outsidePress, select, dismiss, blur or programmatic."
+        },
+        {
+          "name": "onHighlightedValueChange",
+          "payload": "(value: string | null, request: ChangeRequest<string | null>)",
+          "when": "Before the highlight moves. request.reason is pointer, keyboard or programmatic. Moving the highlight chooses nothing."
+        },
+        {
+          "name": "onLoadMore",
+          "payload": "()",
+          "when": "The last option scrolled into view, so the next page can be fetched."
+        }
+      ],
+      "accessibility": [
+        "The input is the tab stop of the control. The tags, their remove buttons and the trigger carry tabindex=\"-1\", as the combobox and grid patterns ask; the clear button, while it is drawn, is in the tab order.",
+        "The tags are a layout grid with one row, which leaves ArrowDown and ArrowUp to the list. Focus lands on a tag rather than on its remove button, and Delete and Backspace do what the button does. The grid carries the number of chosen values as its name.",
+        "The list sets aria-multiselectable, and selection does not follow the highlight: moving through the options chooses nothing until Enter or a press. This departs from the note in the combobox pattern, as every implementation surveyed does.",
+        "Changes are announced as well as drawn: a value added with the count now held, a value removed with its label and the count left, a value moved with its new position, and the limit when it is reached. The status row announces how many options match the query."
+      ]
+    }
+  },
+  "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-multi-select-action-active-background",
+    "--slotted-multi-select-action-color",
+    "--slotted-multi-select-action-hover-background",
+    "--slotted-multi-select-action-size",
+    "--slotted-multi-select-arrow-color",
+    "--slotted-multi-select-autofill-background",
+    "--slotted-multi-select-background",
+    "--slotted-multi-select-border-color",
+    "--slotted-multi-select-color",
+    "--slotted-multi-select-content-border-color",
+    "--slotted-multi-select-content-padding-block",
+    "--slotted-multi-select-content-padding-inline",
+    "--slotted-multi-select-content-radius",
+    "--slotted-multi-select-content-shadow",
+    "--slotted-multi-select-content-text",
+    "--slotted-multi-select-content-text-muted",
+    "--slotted-multi-select-counter-color",
+    "--slotted-multi-select-counter-complete-color",
+    "--slotted-multi-select-disabled-background",
+    "--slotted-multi-select-disabled-border-color",
+    "--slotted-multi-select-disabled-color",
+    "--slotted-multi-select-field-basis",
+    "--slotted-multi-select-field-min",
+    "--slotted-multi-select-highlight",
+    "--slotted-multi-select-highlight-active",
+    "--slotted-multi-select-highlight-ring",
+    "--slotted-multi-select-hover-border-color",
+    "--slotted-multi-select-icon-size-min",
+    "--slotted-multi-select-invalid-border-color",
+    "--slotted-multi-select-invalid-edge-width",
+    "--slotted-multi-select-invalid-focus-ring-color",
+    "--slotted-multi-select-item-radius",
+    "--slotted-multi-select-measure",
+    "--slotted-multi-select-open-border-color",
+    "--slotted-multi-select-placeholder-color",
+    "--slotted-multi-select-plain-hover-background",
+    "--slotted-multi-select-radius",
+    "--slotted-multi-select-readonly-background",
+    "--slotted-multi-select-selected-color",
+    "--slotted-multi-select-separator-color",
+    "--slotted-multi-select-shadow",
+    "--slotted-multi-select-subtle-background",
+    "--slotted-multi-select-subtle-border-color",
+    "--slotted-multi-select-subtle-hover-background",
+    "--slotted-multi-select-surface",
+    "--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 control with every axis on it, driven by the controls under the canvas. Add a service, take one back out, and watch the row grow by whole rows rather than by pixels.",
+      "language": "tsx",
+      "source": "<MultiSelect defaultValue={['checkout-api']}>\n  <MultiSelectControl aria-label=\"Affected services\" placeholder=\"Add a service\" />\n  <MultiSelectContent aria-label=\"Affected services\">\n    <MultiSelectItem value=\"checkout-api\">checkout-api</MultiSelectItem>\n    <MultiSelectItem value=\"payments-worker\">payments-worker</MultiSelectItem>\n  </MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "chips",
+      "title": "The chips, and where they live",
+      "note": "Inside the frame, beside the caret, because this control holds a real input. Each chip is a tag: the same pill, the same remove control, the same geometry stated once in tag.css.",
+      "language": "tsx",
+      "source": "const [services, setServices] = useState(['checkout-api', 'payments-worker']);\n\n<MultiSelect onValueChange={setServices} value={services}>\n  <MultiSelectControl aria-label=\"Affected services\" />\n  <MultiSelectContent aria-label=\"Affected services\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "creation",
+      "title": "Creating a value the list does not hold",
+      "note": "With creatable, the offer stands as an option — ArrowDown reaches it, aria-activedescendant names it and Enter takes it — and its mark is the plus rather than the check, because nothing is in the set yet.",
+      "language": "tsx",
+      "source": "<MultiSelect\n  creatable\n  onValueChange={(labels, request) => {\n    if (request.reason === 'submit') report(labels);\n  }}\n>\n  <MultiSelectControl aria-label=\"Labels\" placeholder=\"Add a label\" />\n  <MultiSelectContent aria-label=\"Labels\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "limit",
+      "title": "A limit that is a validity, not a silence",
+      "note": "At the limit the counter takes the accent, the root carries data-complete, every unchosen option answers aria-disabled, and what was refused leaves through onValueRefuse instead of vanishing.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst CATEGORIES: MultiSelectOption[] = [\n  { value: 'beverages', label: 'Beverages' },\n  { value: 'condiments', label: 'Condiments' },\n  { value: 'confections', label: 'Confections' },\n  { value: 'dairy', label: 'Dairy products' },\n  { value: 'grains', label: 'Grains and cereals' },\n  { value: 'meat', label: 'Meat and poultry' },\n  { value: 'produce', label: 'Produce' },\n  { value: 'seafood', label: 'Seafood' },\n];\n\nexport default function MultiSelectLimit() {\n  return (\n    <Field>\n      <FieldLabel>Featured categories</FieldLabel>\n      <MultiSelect max={3} defaultValue={['beverages', 'confections']} items={CATEGORIES}>\n        <MultiSelectControl placeholder=\"Add a category\" />\n        <MultiSelectContent>\n          {CATEGORIES.map((category) => (\n            <MultiSelectItem key={category.value} value={category.value}>\n              {category.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>The storefront home page shows up to three categories.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "duplicates",
+      "title": "Duplicates",
+      "note": "The comparison is locale-sensitive, so P1 is already held when p1 is typed. The refusal moves focus to the chip that holds it: the reader is shown where their value is instead of being told nothing happened.",
+      "language": "tsx",
+      "source": "<MultiSelect creatable locale=\"pt-BR\">\n  …\n</MultiSelect>;\n\n<MultiSelect allowDuplicates creatable>\n  …\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "reorder",
+      "title": "Reorder, by keyboard first",
+      "note": "Alt with an arrow moves the focused chip one place, following the writing direction; Alt+Home and Alt+End take it to either end. The set is unchanged and the request carries keyboard, so a consumer persisting an order listens for exactly that.",
+      "language": "tsx",
+      "source": "<MultiSelect\n  onValueChange={(order, request) => {\n    if (request.reason === 'keyboard') saveOrder(order);\n  }}\n  reorderable\n>\n  <MultiSelectControl aria-label=\"Runbook steps\" />\n  <MultiSelectContent aria-label=\"Runbook steps\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "paste",
+      "title": "Pasting many values at once",
+      "note": "One list of delimiters serves the key and the paste split, so a control cannot accept a comma-separated list from the clipboard and refuse it from the keyboard. Past the limit, the rest is reported rather than dropped.",
+      "language": "tsx",
+      "source": "<MultiSelect addOnPaste creatable delimiters={[',', ';']} max={5}>\n  <MultiSelectControl aria-label=\"Notify\" placeholder=\"Paste a list\" />\n  <MultiSelectContent aria-label=\"Notify\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "editing",
+      "title": "Editing a chip in place",
+      "note": "Enter on a focused chip turns its cell into a field, Enter commits and Escape reverts — which is the grid pattern’s own answer for a cell holding editable content. The commit is one transition, not a removal and an addition.",
+      "language": "tsx",
+      "source": "<MultiSelect creatable editable defaultValue={['payments-worker']}>\n  <MultiSelectControl aria-label=\"Labels\" />\n  <MultiSelectContent aria-label=\"Labels\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "filtering",
+      "title": "Filtering, and the mark",
+      "note": "The default comparison is locale-sensitive and the mark shows the span the collator matched, rather than a naive substring that would disagree with it. chosenOptions decides whether a value already held stays in the list.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n} from '@slotted/react/multi-select';\n\nconst CITIES = [\n  { value: 'cdz', label: 'Cádiz, Spain' },\n  { value: 'dus', label: 'Düsseldorf, Germany' },\n  { value: 'krk', label: 'Kraków, Poland' },\n  { value: 'mmx', label: 'Malmö, Sweden' },\n  { value: 'yul', label: 'Montréal, Canada' },\n  { value: 'gru', label: 'São Paulo, Brazil' },\n  { value: 'zrh', label: 'Zürich, Switzerland' },\n  { value: 'aar', label: 'Aarhus, Denmark' },\n];\n\nexport default function MultiSelectFiltering() {\n  return (\n    <Field>\n      <FieldLabel>Distributor cities</FieldLabel>\n      <MultiSelect>\n        <MultiSelectControl placeholder=\"Search cities\" />\n        <MultiSelectContent>\n          {CITIES.map((city) => (\n            <MultiSelectItem key={city.value} value={city.value}>\n              {city.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>Type “zur” or “malmo”: accents and case are ignored.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "groups",
+      "title": "Groups",
+      "note": "A set of options under a heading the group points at with aria-labelledby. A group whose every option was filtered away leaves the surface entirely, so a heading never claims a category matched when none did.",
+      "language": "tsx",
+      "source": "import { Fragment } from 'react';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectGroup,\n  MultiSelectItem,\n  type MultiSelectOptionGroup,\n  MultiSelectSeparator,\n} from '@slotted/react/multi-select';\n\nconst REGIONS: MultiSelectOptionGroup[] = [\n  {\n    label: 'West',\n    options: [\n      { value: 'RNO', label: 'Reno, NV' },\n      { value: 'ONT', label: 'Ontario, CA' },\n      { value: 'SEA', label: 'Kent, WA' },\n    ],\n  },\n  {\n    label: 'Central',\n    options: [\n      { value: 'DFW', label: 'Dallas, TX' },\n      { value: 'JOT', label: 'Joliet, IL' },\n      { value: 'CMH', label: 'Columbus, OH' },\n    ],\n  },\n  {\n    label: 'East',\n    options: [\n      { value: 'SAV', label: 'Savannah, GA' },\n      { value: 'ABE', label: 'Allentown, PA' },\n      { value: 'EWR', label: 'Edison, NJ' },\n    ],\n  },\n];\n\nexport default function MultiSelectGroups() {\n  return (\n    <Field>\n      <FieldLabel>Stocking warehouses</FieldLabel>\n      <MultiSelect defaultValue={['RNO', 'SAV']} items={REGIONS}>\n        <MultiSelectControl placeholder=\"Add a warehouse\" />\n        <MultiSelectContent>\n          {REGIONS.map((region, index) => (\n            <Fragment key={region.label}>\n              {index > 0 && <MultiSelectSeparator />}\n              <MultiSelectGroup label={region.label}>\n                {region.options.map((warehouse) => (\n                  <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n                    {warehouse.label}\n                  </MultiSelectItem>\n                ))}\n              </MultiSelectGroup>\n            </Fragment>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "overflow",
+      "title": "Overflow, and access to the whole set",
+      "note": "wrap grows by rows to three and then scrolls, keeping every chip in the DOM. collapse is one line high for a table row: what did not fit becomes a counting chip that opens the popup, whose band holds every value.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'ONT', label: 'Ontario, CA' },\n  { value: 'SEA', label: 'Kent, WA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n  { value: 'JOT', label: 'Joliet, IL' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'ABE', label: 'Allentown, PA' },\n  { value: 'EWR', label: 'Edison, NJ' },\n];\n\nconst STOCKED = ['RNO', 'ONT', 'SEA', 'DFW', 'JOT', 'CMH', 'SAV'];\n\nconst options = WAREHOUSES.map((warehouse) => (\n  <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n    {warehouse.label}\n  </MultiSelectItem>\n));\n\nexport default function MultiSelectOverflow() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Stocking warehouses</FieldLabel>\n        <MultiSelect overflow=\"wrap\" defaultValue={STOCKED} items={WAREHOUSES}>\n          <MultiSelectControl />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>Wrap: every chip stays in view, up to three rows.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel>Stocking warehouses</FieldLabel>\n        <MultiSelect overflow=\"collapse\" defaultValue={STOCKED} items={WAREHOUSES}>\n          <MultiSelectControl />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>Collapse: one row, and a count of the rest.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "Sizes",
+      "note": "The three control steps, from the geometry every control in the library reads. An empty control is exactly the height of a text field beside it on the same form; a chip is what changes that.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n];\n\nconst SIZES = [\n  { size: 'sm', label: 'Filter by warehouse' },\n  { size: 'md', label: 'Stocking warehouses' },\n  { size: 'lg', label: 'Return warehouses' },\n] as const;\n\nexport default function MultiSelectSizes() {\n  return (\n    <Stack gap={5}>\n      {SIZES.map(({ size, label }) => (\n        <Field key={size} size={size}>\n          <FieldLabel>{label}</FieldLabel>\n          <MultiSelect defaultValue={['RNO', 'CMH']} items={WAREHOUSES}>\n            <MultiSelectControl />\n            <MultiSelectContent>\n              {WAREHOUSES.map((warehouse) => (\n                <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n                  {warehouse.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "Variants",
+      "note": "outline for a form, subtle for a panel that already has a ground, and plain for a table cell — where an edge and a resting shadow would draw a cell that is not there.",
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst CHANNELS: MultiSelectOption[] = [\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 VARIANTS = [\n  { variant: 'outline', label: 'Sales channels' },\n  { variant: 'subtle', label: 'Promotion channels' },\n  { variant: 'plain', label: 'Report channels' },\n] as const;\n\nexport default function MultiSelectVariants() {\n  return (\n    <Stack gap={5}>\n      {VARIANTS.map(({ variant, label }) => (\n        <Field key={variant}>\n          <FieldLabel>{label}</FieldLabel>\n          <MultiSelect variant={variant} defaultValue={['web', 'wholesale']} items={CHANNELS}>\n            <MultiSelectControl />\n            <MultiSelectContent>\n              {CHANNELS.map((channel) => (\n                <MultiSelectItem key={channel.value} value={channel.value}>\n                  {channel.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\n        </Field>\n      ))}\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "states",
+      "title": "States",
+      "note": "disabled answers nothing and keeps its values legible; readOnly keeps the caret and the copy and withholds the popup and every remove control; invalid retints the border and the focus ring together.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n];\n\nconst options = WAREHOUSES.map((warehouse) => (\n  <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n    {warehouse.label}\n  </MultiSelectItem>\n));\n\nexport default function MultiSelectStates() {\n  return (\n    <Stack gap={5}>\n      <Field invalid required>\n        <FieldLabel>Stocking warehouses</FieldLabel>\n        <MultiSelect items={WAREHOUSES}>\n          <MultiSelectControl placeholder=\"Add a warehouse\" />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldError>Choose at least one warehouse before publishing.</FieldError>\n      </Field>\n      <Field readOnly>\n        <FieldLabel>Warehouses holding stock</FieldLabel>\n        <MultiSelect defaultValue={['RNO', 'SAV']} items={WAREHOUSES}>\n          <MultiSelectControl />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>Updated by the nightly inventory sync.</FieldDescription>\n      </Field>\n      <Field disabled>\n        <FieldLabel>Transfer warehouses</FieldLabel>\n        <MultiSelect defaultValue={['CMH']} items={WAREHOUSES}>\n          <MultiSelectControl />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>Transfers open once the purchase order is received.</FieldDescription>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading-and-empty",
+      "title": "Loading, and nothing found",
+      "note": "While an answer travels the control shows the ring where the chevron stood and the popup shows rows the height of an option — the shape of the list that is coming. A query nothing answered keeps the surface’s measure rather than collapsing it.",
+      "language": "tsx",
+      "source": "<MultiSelect loading>…</MultiSelect>;\n\n<MultiSelectContent empty=\"No service by that name\" />;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-content",
+      "title": "Content the family did not choose",
+      "note": "A forty-character service name truncates inside its chip and stays whole in the accessibility tree; the row wraps rather than pushing the frame wider; and under 120 pixels there is no chip at all and the counter answers instead.",
+      "language": "tsx",
+      "source": "<MultiSelect defaultValue={['notification-relay-eu-west-1-canary']}>\n  <MultiSelectControl aria-label=\"Affected services\" />\n  <MultiSelectContent aria-label=\"Affected services\">…</MultiSelectContent>\n</MultiSelect>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Backspace from an empty field moves to the last chip and removes nothing; a second press removes it. Delete takes the focused chip out, the arrows walk the row, and a printable character sends the reader back to the field.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst CARRIERS: MultiSelectOption[] = [\n  { value: 'ups', label: 'UPS Ground' },\n  { value: 'fedex', label: 'FedEx Ground' },\n  { value: 'usps', label: 'USPS Priority Mail' },\n  { value: 'dhl', label: 'DHL Express' },\n  { value: 'ontrac', label: 'OnTrac' },\n];\n\nexport default function MultiSelectKeyboard() {\n  return (\n    <Field>\n      <FieldLabel>Carrier priority</FieldLabel>\n      <MultiSelect reorderable defaultValue={['usps', 'ups', 'fedex']} items={CARRIERS}>\n        <MultiSelectControl placeholder=\"Add a carrier\" />\n        <MultiSelectContent>\n          {CARRIERS.map((carrier) => (\n            <MultiSelectItem key={carrier.value} value={carrier.value}>\n              {carrier.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>\n        Rates are requested from the first carrier, then the next. Alt with an arrow moves the\n        focused carrier.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "In a form",
+      "note": "One hidden input per value, all under the same name, so a plain FormData receives several values under one key and a native reset() restores them. The field carries the label, the description and the error by ID.",
+      "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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n];\n\nconst CHANNELS: MultiSelectOption[] = [\n  { value: 'web', label: 'Web store' },\n  { value: 'marketplace', label: 'Marketplace' },\n  { value: 'wholesale', label: 'Wholesale' },\n];\n\nexport default function MultiSelectForm() {\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 warehouses = data.getAll('warehouses');\n    setMissing(warehouses.length === 0);\n    setSaved(\n      warehouses.length === 0\n        ? null\n        : `Saved with ${warehouses.length} of ${WAREHOUSES.length} warehouses.`,\n    );\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>Stocking warehouses</FieldLabel>\n          <MultiSelect name=\"warehouses\" items={WAREHOUSES} onValueChange={() => setMissing(false)}>\n            <MultiSelectControl placeholder=\"Add a warehouse\" />\n            <MultiSelectContent>\n              {WAREHOUSES.map((warehouse) => (\n                <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n                  {warehouse.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\n          <FieldError live=\"polite\" reserve>\n            {missing ? 'Choose at least one warehouse to stock this product.' : ''}\n          </FieldError>\n        </Field>\n        <Field>\n          <FieldLabel>Sales channels</FieldLabel>\n          <MultiSelect name=\"channels\" defaultValue={['web']} items={CHANNELS}>\n            <MultiSelectControl />\n            <MultiSelectContent>\n              {CHANNELS.map((channel) => (\n                <MultiSelectItem key={channel.value} value={channel.value}>\n                  {channel.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\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, and the defaults an application sets once",
+      "note": "A provider carries the axes, the words come from the language in force, render replaces the frame while keeping the measurement, and the handle answers the actions a prop cannot express.",
+      "language": "tsx",
+      "source": "<MultiSelectDefaultsProvider size=\"sm\" variant=\"subtle\">\n  <MultiSelect ref={handle}>\n    <MultiSelectControl render={(props) => <fieldset {...props} />} />\n    <MultiSelectContent aria-label=\"Affected services\">…</MultiSelectContent>\n  </MultiSelect>\n</MultiSelectDefaultsProvider>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "async-search",
+      "title": "async-search.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useEffect, useState } from 'react';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n} from '@slotted/react/multi-select';\n\ninterface Customer {\n  value: string;\n  label: string;\n  city: string;\n}\n\nconst CUSTOMERS: Customer[] = [\n  { value: 'ALFKI', label: 'Alfreds Futterkiste', city: 'Berlin' },\n  { value: 'ANATR', label: 'Ana Trujillo Emparedados', city: 'México D.F.' },\n  { value: 'BERGS', label: 'Berglunds snabbköp', city: 'Luleå' },\n  { value: 'BLAUS', label: 'Blauer See Delikatessen', city: 'Mannheim' },\n  { value: 'BONAP', label: 'Bon app’', city: 'Marseille' },\n  { value: 'BOTTM', label: 'Bottom-Dollar Markets', city: 'Tsawassen' },\n  { value: 'ERNSH', label: 'Ernst Handel', city: 'Graz' },\n  { value: 'FOLKO', label: 'Folk och fä HB', city: 'Bräcke' },\n  { value: 'FRANK', label: 'Frankenversand', city: 'München' },\n  { value: 'QUICK', label: 'QUICK-Stop', city: 'Cunewalde' },\n  { value: 'RATTC', label: 'Rattlesnake Canyon Grocery', city: 'Albuquerque' },\n  { value: 'SAVEA', label: 'Save-a-lot Markets', city: 'Boise' },\n];\n\n/** Stands in for the customer search endpoint, which filters on the server. */\nconst searchCustomers = (query: string) =>\n  new Promise<Customer[]>((resolve) =>\n    setTimeout(() => {\n      const needle = query.trim().toLowerCase();\n      resolve(CUSTOMERS.filter((customer) => customer.label.toLowerCase().includes(needle)));\n    }, 600),\n  );\n\n/** The first page of customers, which arrives with the page itself. */\nconst FIRST_PAGE = CUSTOMERS.slice(0, 6);\n\nexport default function MultiSelectAsyncSearch() {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState<Customer[]>(FIRST_PAGE);\n  const [loading, setLoading] = useState(false);\n\n  useEffect(() => {\n    if (query.trim() === '') {\n      setResults(FIRST_PAGE);\n      setLoading(false);\n      return;\n    }\n    let current = true;\n    setLoading(true);\n    void searchCustomers(query).then((found) => {\n      if (!current) return;\n      setResults(found);\n      setLoading(false);\n    });\n    return () => {\n      current = false;\n    };\n  }, [query]);\n\n  return (\n    <Field>\n      <FieldLabel>Customers in this campaign</FieldLabel>\n      <MultiSelect\n        filter={null}\n        loading={loading}\n        messages={{ empty: 'No customer by that name.', loading: 'Searching customers…' }}\n        onInputValueChange={setQuery}\n      >\n        <MultiSelectControl placeholder=\"Search customers\" />\n        <MultiSelectContent>\n          {results.map((customer) => (\n            <MultiSelectItem\n              key={customer.value}\n              value={customer.value}\n              description={customer.city}\n            >\n              {customer.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>Each keystroke searches the customer list on the server.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n} from '@slotted/react/multi-select';\n\nconst WAREHOUSES = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n  { value: 'ONT', label: 'Ontario, CA' },\n  { value: 'ABE', label: 'Allentown, PA' },\n];\n\nexport default function MultiSelectBasic() {\n  return (\n    <Field>\n      <FieldLabel>Stocking warehouses</FieldLabel>\n      <MultiSelect>\n        <MultiSelectControl placeholder=\"Add a warehouse\" />\n        <MultiSelectContent>\n          {WAREHOUSES.map((warehouse) => (\n            <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n              {warehouse.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>\n        Chai tea, 24 bags is reordered at each of these warehouses.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "choose-columns",
+      "title": "choose-columns.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n} from '@slotted/react/table';\n\ntype Column = 'order' | 'customer' | 'placed' | 'items' | 'total';\n\nconst COLUMNS: (MultiSelectOption & { value: Column })[] = [\n  { value: 'order', label: 'Order' },\n  { value: 'customer', label: 'Customer' },\n  { value: 'placed', label: 'Placed' },\n  { value: 'items', label: 'Items' },\n  { value: 'total', label: 'Total' },\n];\n\nconst ORDERS: Record<Column, string>[] = [\n  {\n    order: 'SO-10482',\n    customer: 'Harbor & Pine',\n    placed: 'Oct 2',\n    items: '14',\n    total: '$1,240.00',\n  },\n  {\n    order: 'SO-10483',\n    customer: 'Brightline Studio',\n    placed: 'Oct 3',\n    items: '3',\n    total: '$318.50',\n  },\n  {\n    order: 'SO-10484',\n    customer: 'Northgate Labs',\n    placed: 'Oct 3',\n    items: '41',\n    total: '$2,906.10',\n  },\n];\n\nconst ALL = COLUMNS.map((column) => column.value);\nconst labelOf = (value: string) => COLUMNS.find((column) => column.value === value)?.label;\n\nexport default function MultiSelectChooseColumns() {\n  const [shown, setShown] = useState<readonly string[]>(['order', 'customer', 'total']);\n  const columns = shown as readonly Column[];\n\n  return (\n    <Stack gap={4}>\n      <Field>\n        <Inline gap={3} justify=\"between\" align=\"center\">\n          <FieldLabel>Columns</FieldLabel>\n          <Button\n            size=\"sm\"\n            tone=\"secondary\"\n            variant=\"ghost\"\n            disabled={shown.length === ALL.length}\n            onClick={() => setShown(ALL)}\n          >\n            Show all\n          </Button>\n        </Inline>\n        <MultiSelect reorderable value={shown} items={COLUMNS} onValueChange={setShown}>\n          <MultiSelectControl placeholder=\"Add a column\" />\n          <MultiSelectContent>\n            {COLUMNS.map((column) => (\n              <MultiSelectItem key={column.value} value={column.value}>\n                {column.label}\n              </MultiSelectItem>\n            ))}\n          </MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>\n          The table follows the order of the chips. Alt with an arrow moves a focused column.\n        </FieldDescription>\n      </Field>\n      <Table columns={Math.max(columns.length, 1)}>\n        <TableContent aria-label=\"Orders\">\n          <TableHead>\n            <TableRow>\n              {columns.map((column) => (\n                <TableColumnHeader key={column}>{labelOf(column)}</TableColumnHeader>\n              ))}\n            </TableRow>\n          </TableHead>\n          <TableBody>\n            {ORDERS.map((order) => (\n              <TableRow key={order.order} value={order.order}>\n                {columns.map((column) => (\n                  <TableCell key={column}>{order[column]}</TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearing",
+      "title": "clearing.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst CHANNELS: MultiSelectOption[] = [\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 options = CHANNELS.map((channel) => (\n  <MultiSelectItem key={channel.value} value={channel.value}>\n    {channel.label}\n  </MultiSelectItem>\n));\n\nexport default function MultiSelectClearing() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Show orders from</FieldLabel>\n        <MultiSelect defaultValue={['web', 'marketplace', 'phone']} items={CHANNELS}>\n          <MultiSelectControl placeholder=\"All channels\" />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>The clear button empties the filter in one press.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel>Sell through</FieldLabel>\n        <MultiSelect clearable={false} defaultValue={['web', 'wholesale']} items={CHANNELS}>\n          <MultiSelectControl />\n          <MultiSelectContent>{options}</MultiSelectContent>\n        </MultiSelect>\n        <FieldDescription>No clear button: channels come off one at a time.</FieldDescription>\n      </Field>\n    </Stack>\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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n];\n\nconst labelOf = (value: string) => WAREHOUSES.find((option) => option.value === value)?.label;\n\nexport default function MultiSelectControlled() {\n  const [warehouses, setWarehouses] = useState<readonly string[]>(['RNO', 'CMH']);\n  const [reason, setReason] = useState<string | null>(null);\n\n  return (\n    <Stack gap={3}>\n      <Field>\n        <FieldLabel>Stocking warehouses</FieldLabel>\n        <MultiSelect\n          value={warehouses}\n          items={WAREHOUSES}\n          onValueChange={(next, request) => {\n            setWarehouses(next);\n            setReason(request.reason);\n          }}\n        >\n          <MultiSelectControl placeholder=\"Add a warehouse\" />\n          <MultiSelectContent>\n            {WAREHOUSES.map((warehouse) => (\n              <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n                {warehouse.label}\n              </MultiSelectItem>\n            ))}\n          </MultiSelectContent>\n        </MultiSelect>\n      </Field>\n      <Text size=\"sm\" tone=\"muted\">\n        {warehouses.length === 0\n          ? 'Not stocked anywhere'\n          : `Stocked at ${warehouses.map(labelOf).join('; ')}`}\n        {reason === null ? '' : ` · last change: ${reason}`}\n      </Text>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "creatable",
+      "title": "creatable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst SUGGESTED: MultiSelectOption[] = [\n  { value: 'chai', label: 'chai' },\n  { value: 'black tea', label: 'black tea' },\n  { value: 'spiced', label: 'spiced' },\n  { value: 'loose leaf', label: 'loose leaf' },\n  { value: 'caffeinated', label: 'caffeinated' },\n  { value: 'gift', label: 'gift' },\n];\n\nexport default function MultiSelectCreatable() {\n  return (\n    <Field>\n      <FieldLabel>Search keywords</FieldLabel>\n      <MultiSelect creatable defaultValue={['chai', 'black tea']} items={SUGGESTED}>\n        <MultiSelectControl placeholder=\"Add a keyword\" />\n        <MultiSelectContent>\n          {SUGGESTED.map((keyword) => (\n            <MultiSelectItem key={keyword.value} value={keyword.value}>\n              {keyword.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>\n        Type a keyword and press Enter or a comma. Shoppers find Chai tea, 24 bags by these words.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectDefaultsProvider,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst OWNERS: MultiSelectOption[] = [\n  { value: 'avery', label: 'Avery Collins' },\n  { value: 'kenji', label: 'Kenji Watanabe' },\n  { value: 'lucia', label: 'Lucía Fernández' },\n  { value: 'omar', label: 'Omar Haddad' },\n];\n\nconst SEGMENTS: MultiSelectOption[] = [\n  { value: 'enterprise', label: 'Enterprise' },\n  { value: 'wholesale', label: 'Wholesale' },\n  { value: 'retail', label: 'Retail' },\n];\n\nexport default function MultiSelectDefaults() {\n  return (\n    <MultiSelectDefaultsProvider size=\"sm\" variant=\"subtle\" overflow=\"collapse\">\n      <Stack gap={4}>\n        <Field>\n          <FieldLabel>Account owners</FieldLabel>\n          <MultiSelect defaultValue={['lucia', 'kenji']} items={OWNERS}>\n            <MultiSelectControl placeholder=\"Any owner\" />\n            <MultiSelectContent>\n              {OWNERS.map((owner) => (\n                <MultiSelectItem key={owner.value} value={owner.value}>\n                  {owner.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\n        </Field>\n        <Field>\n          <FieldLabel>Segments</FieldLabel>\n          <MultiSelect defaultValue={['wholesale']} items={SEGMENTS}>\n            <MultiSelectControl placeholder=\"Any segment\" />\n            <MultiSelectContent>\n              {SEGMENTS.map((segment) => (\n                <MultiSelectItem key={segment.value} value={segment.value}>\n                  {segment.label}\n                </MultiSelectItem>\n              ))}\n            </MultiSelectContent>\n          </MultiSelect>\n        </Field>\n      </Stack>\n    </MultiSelectDefaultsProvider>\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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst DOCUMENTS: (MultiSelectOption & { icon: GlyphName; description: string })[] = [\n  {\n    value: 'invoice',\n    label: 'Invoice',\n    icon: 'file-text',\n    description: 'PDF, issued when the order ships',\n  },\n  {\n    value: 'packing-slip',\n    label: 'Packing slip',\n    icon: 'file',\n    description: 'PDF, one page per parcel',\n  },\n  {\n    value: 'customs',\n    label: 'Customs declaration',\n    icon: 'file-spreadsheet',\n    description: 'CN23, international orders only',\n  },\n  {\n    value: 'photos',\n    label: 'Product photos',\n    icon: 'file-image',\n    description: 'Up to five images per line item',\n  },\n];\n\nexport default function MultiSelectDescriptions() {\n  return (\n    <Field>\n      <FieldLabel>Attach to the shipping email</FieldLabel>\n      <MultiSelect defaultValue={['invoice']} items={DOCUMENTS}>\n        <MultiSelectControl placeholder=\"Add a document\" />\n        <MultiSelectContent>\n          {DOCUMENTS.map((document) => (\n            <MultiSelectItem\n              key={document.value}\n              value={document.value}\n              description={document.description}\n              icon={\n                <Icon>\n                  <Glyph name={document.icon} />\n                </Icon>\n              }\n            >\n              {document.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst WAREHOUSES: (MultiSelectOption & { description: string })[] = [\n  { value: 'RNO', label: 'Reno, NV', description: '142 pallet spaces free' },\n  { value: 'CMH', label: 'Columbus, OH', description: '38 pallet spaces free' },\n  {\n    value: 'SAV',\n    label: 'Savannah, GA',\n    description: 'At capacity until November 3',\n    disabled: true,\n  },\n  { value: 'DFW', label: 'Dallas, TX', description: '210 pallet spaces free' },\n  {\n    value: 'ONT',\n    label: 'Ontario, CA',\n    description: 'Closed for a stock count this week',\n    disabled: true,\n  },\n];\n\nexport default function MultiSelectDisabledOptions() {\n  return (\n    <Field>\n      <FieldLabel>Receiving warehouses</FieldLabel>\n      <MultiSelect defaultValue={['RNO']} items={WAREHOUSES}>\n        <MultiSelectControl placeholder=\"Add a warehouse\" />\n        <MultiSelectContent>\n          {WAREHOUSES.map((warehouse) => (\n            <MultiSelectItem\n              key={warehouse.value}\n              value={warehouse.value}\n              description={warehouse.description}\n              disabled={warehouse.disabled ?? false}\n            >\n              {warehouse.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editable",
+      "title": "editable.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport { MultiSelect, MultiSelectContent, MultiSelectControl } from '@slotted/react/multi-select';\n\nexport default function MultiSelectEditable() {\n  return (\n    <Field>\n      <FieldLabel>Bin locations</FieldLabel>\n      <MultiSelect\n        creatable\n        editable\n        defaultValue={['A-12-03', 'A-12-04', 'C-02-11']}\n        messages={{ empty: 'Type a bin code and press Enter.' }}\n      >\n        <MultiSelectControl placeholder=\"Add a bin\" />\n        <MultiSelectContent />\n      </MultiSelect>\n      <FieldDescription>\n        Press ArrowLeft to reach a bin, then Enter to correct it in place.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "email-list",
+      "title": "email-list.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectRefuseCause,\n} from '@slotted/react/multi-select';\n\nconst TEAMS = [\n  { value: 'purchasing@northwind.example', description: 'Purchasing team' },\n  { value: 'warehouse-ops@northwind.example', description: 'Warehouse operations' },\n  { value: 'category-managers@northwind.example', description: 'Category managers' },\n];\n\nconst isEmail = (text: string) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(text.trim());\n\nconst REASONS: Record<MultiSelectRefuseCause, string> = {\n  invalid: 'is not an email address',\n  duplicate: 'is already on the list',\n  limit: 'is over the limit',\n};\n\nexport default function MultiSelectEmailList() {\n  const [refused, setRefused] = useState<string | null>(null);\n\n  return (\n    <Field invalid={refused !== null ? true : undefined}>\n      <FieldLabel>Stockout alerts</FieldLabel>\n      <MultiSelect\n        creatable\n        delimiters={[',', ';', ' ']}\n        defaultValue={['purchasing@northwind.example']}\n        validateValue={isEmail}\n        onValueRefuse={(values, { cause }) => setRefused(`${values.join(', ')} ${REASONS[cause]}.`)}\n        onValueChange={() => setRefused(null)}\n      >\n        <MultiSelectControl placeholder=\"name@company.com\" />\n        <MultiSelectContent>\n          {TEAMS.map((team) => (\n            <MultiSelectItem key={team.value} value={team.value} description={team.description}>\n              {team.value}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      {refused === null ? (\n        <FieldDescription>Paste a list separated by commas, semicolons or spaces.</FieldDescription>\n      ) : (\n        <FieldError live=\"polite\">{refused}</FieldError>\n      )}\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-bar",
+      "title": "filter-bar.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Grid } from '@slotted/react/grid';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-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', channel: 'web', total: '$1,240.00' },\n  {\n    id: 'SO-10483',\n    customer: 'Brightline Studio',\n    status: 'on-hold',\n    channel: 'phone',\n    total: '$318.50',\n  },\n  {\n    id: 'SO-10484',\n    customer: 'Northgate Labs',\n    status: 'shipped',\n    channel: 'wholesale',\n    total: '$2,906.10',\n  },\n  { id: 'SO-10485', customer: 'Verde Kitchen', status: 'delayed', channel: 'web', total: '$86.00' },\n  {\n    id: 'SO-10486',\n    customer: 'Quill & Co.',\n    status: 'shipped',\n    channel: 'marketplace',\n    total: '$540.25',\n  },\n  {\n    id: 'SO-10487',\n    customer: 'Atlas Freight',\n    status: 'open',\n    channel: 'wholesale',\n    total: '$1,912.00',\n  },\n  { id: 'SO-10488', customer: 'Lumen Dental', status: 'open', channel: 'web', total: '$472.80' },\n  {\n    id: 'SO-10489',\n    customer: 'Cobalt Outfitters',\n    status: 'delayed',\n    channel: 'marketplace',\n    total: '$1,055.40',\n  },\n];\n\nconst STATUSES: MultiSelectOption[] = [\n  { value: 'open', label: 'Open' },\n  { value: 'on-hold', label: 'On hold' },\n  { value: 'delayed', label: 'Delayed' },\n  { value: 'shipped', label: 'Shipped' },\n];\n\nconst CHANNELS: MultiSelectOption[] = [\n  { value: 'web', label: 'Web store' },\n  { value: 'marketplace', label: 'Marketplace' },\n  { value: 'wholesale', label: 'Wholesale' },\n  { value: 'phone', label: 'Phone orders' },\n];\n\ntype Facet = 'status' | 'channel';\n\nconst labelOf = (options: MultiSelectOption[], value: string) =>\n  options.find((option) => option.value === value)?.label;\n\nconst countOf = (facet: Facet, value: string) => {\n  const count = ORDERS.filter((order) => order[facet] === value).length;\n  return count === 1 ? '1 order' : `${count} orders`;\n};\n\nexport default function MultiSelectFilterBar() {\n  const [statuses, setStatuses] = useState<readonly string[]>(['open', 'delayed']);\n  const [channels, setChannels] = useState<readonly string[]>([]);\n\n  const rows = ORDERS.filter(\n    (order) =>\n      (statuses.length === 0 || statuses.includes(order.status)) &&\n      (channels.length === 0 || channels.includes(order.channel)),\n  );\n\n  return (\n    <Stack gap={3}>\n      <Grid columns={2} gap={3}>\n        <MultiSelect\n          size=\"sm\"\n          overflow=\"collapse\"\n          value={statuses}\n          items={STATUSES}\n          onValueChange={setStatuses}\n        >\n          <MultiSelectControl aria-label=\"Status\" placeholder=\"All statuses\" />\n          <MultiSelectContent aria-label=\"Status\">\n            {STATUSES.map((status) => (\n              <MultiSelectItem\n                key={status.value}\n                value={status.value}\n                description={countOf('status', status.value)}\n              >\n                {status.label}\n              </MultiSelectItem>\n            ))}\n          </MultiSelectContent>\n        </MultiSelect>\n        <MultiSelect\n          size=\"sm\"\n          overflow=\"collapse\"\n          value={channels}\n          items={CHANNELS}\n          onValueChange={setChannels}\n        >\n          <MultiSelectControl aria-label=\"Channel\" placeholder=\"All channels\" />\n          <MultiSelectContent aria-label=\"Channel\">\n            {CHANNELS.map((channel) => (\n              <MultiSelectItem\n                key={channel.value}\n                value={channel.value}\n                description={countOf('channel', channel.value)}\n              >\n                {channel.label}\n              </MultiSelectItem>\n            ))}\n          </MultiSelectContent>\n        </MultiSelect>\n      </Grid>\n      <Text size=\"sm\" tone=\"muted\">\n        {rows.length} of {ORDERS.length} orders\n      </Text>\n      <Table columns={5}>\n        <TableContent aria-label=\"Orders\">\n          <TableHead>\n            <TableRow>\n              <TableColumnHeader>Order</TableColumnHeader>\n              <TableColumnHeader>Customer</TableColumnHeader>\n              <TableColumnHeader>Status</TableColumnHeader>\n              <TableColumnHeader>Channel</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(STATUSES, order.status)}</TableCell>\n                <TableCell>{labelOf(CHANNELS, order.channel)}</TableCell>\n                <TableCell numeric>{order.total}</TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </TableContent>\n      </Table>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "initial-value",
+      "title": "initial-value.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst WAREHOUSES: MultiSelectOption[] = [\n  { value: 'RNO', label: 'Reno, NV' },\n  { value: 'CMH', label: 'Columbus, OH' },\n  { value: 'SAV', label: 'Savannah, GA' },\n  { value: 'DFW', label: 'Dallas, TX' },\n  { value: 'ONT', label: 'Ontario, CA' },\n  { value: 'ABE', label: 'Allentown, PA' },\n];\n\nexport default function MultiSelectInitialValue() {\n  return (\n    <Field>\n      <FieldLabel>Stocking warehouses</FieldLabel>\n      <MultiSelect defaultValue={['RNO', 'CMH']} items={WAREHOUSES}>\n        <MultiSelectControl placeholder=\"Add a warehouse\" />\n        <MultiSelectContent>\n          {WAREHOUSES.map((warehouse) => (\n            <MultiSelectItem key={warehouse.value} value={warehouse.value}>\n              {warehouse.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>Earl Grey, 100 bags is stocked at two warehouses.</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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst CARRIERS: MultiSelectOption[] = [\n  { value: 'ups', label: 'UPS Ground' },\n  { value: 'fedex', label: 'FedEx Ground' },\n  { value: 'usps', label: 'USPS Priority Mail' },\n  { value: 'dhl', label: 'DHL Express' },\n];\n\n/** Stands in for a request to the shipping rates API. */\nconst fetchCarriers = () =>\n  new Promise<MultiSelectOption[]>((resolve) => setTimeout(() => resolve(CARRIERS), 1500));\n\nexport default function MultiSelectLoading() {\n  const [carriers, setCarriers] = useState<MultiSelectOption[]>([]);\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    setCarriers(await fetchCarriers());\n    setLoading(false);\n    setLoaded(true);\n  };\n\n  return (\n    <Field>\n      <FieldLabel>Carriers offered at checkout</FieldLabel>\n      <MultiSelect\n        loading={loading}\n        items={carriers}\n        messages={{ loading: 'Fetching carriers…' }}\n        onOpenChange={(open) => void load(open)}\n      >\n        <MultiSelectControl placeholder=\"Add a carrier\" />\n        <MultiSelectContent>\n          {carriers.map((carrier) => (\n            <MultiSelectItem key={carrier.value} value={carrier.value}>\n              {carrier.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>Carriers load from the rates service when the list opens.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-list",
+      "title": "long-list.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldLabel } from '@slotted/react/field';\nimport {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\n\nconst STATES: MultiSelectOption[] = [\n  { value: 'AL', label: 'Alabama' },\n  { value: 'AK', label: 'Alaska' },\n  { value: 'AZ', label: 'Arizona' },\n  { value: 'AR', label: 'Arkansas' },\n  { value: 'CA', label: 'California' },\n  { value: 'CO', label: 'Colorado' },\n  { value: 'CT', label: 'Connecticut' },\n  { value: 'DE', label: 'Delaware' },\n  { value: 'FL', label: 'Florida' },\n  { value: 'GA', label: 'Georgia' },\n  { value: 'HI', label: 'Hawaii' },\n  { value: 'ID', label: 'Idaho' },\n  { value: 'IL', label: 'Illinois' },\n  { value: 'IN', label: 'Indiana' },\n  { value: 'IA', label: 'Iowa' },\n  { value: 'KS', label: 'Kansas' },\n  { value: 'KY', label: 'Kentucky' },\n  { value: 'LA', label: 'Louisiana' },\n  { value: 'ME', label: 'Maine' },\n  { value: 'MD', label: 'Maryland' },\n  { value: 'MA', label: 'Massachusetts' },\n  { value: 'MI', label: 'Michigan' },\n  { value: 'MN', label: 'Minnesota' },\n  { value: 'MS', label: 'Mississippi' },\n  { value: 'MO', label: 'Missouri' },\n  { value: 'MT', label: 'Montana' },\n  { value: 'NE', label: 'Nebraska' },\n  { value: 'NV', label: 'Nevada' },\n  { value: 'NH', label: 'New Hampshire' },\n  { value: 'NJ', label: 'New Jersey' },\n  { value: 'NM', label: 'New Mexico' },\n  { value: 'NY', label: 'New York' },\n  { value: 'NC', label: 'North Carolina' },\n  { value: 'ND', label: 'North Dakota' },\n  { value: 'OH', label: 'Ohio' },\n  { value: 'OK', label: 'Oklahoma' },\n  { value: 'OR', label: 'Oregon' },\n  { value: 'PA', label: 'Pennsylvania' },\n  { value: 'RI', label: 'Rhode Island' },\n  { value: 'SC', label: 'South Carolina' },\n  { value: 'SD', label: 'South Dakota' },\n  { value: 'TN', label: 'Tennessee' },\n  { value: 'TX', label: 'Texas' },\n  { value: 'UT', label: 'Utah' },\n  { value: 'VT', label: 'Vermont' },\n  { value: 'VA', label: 'Virginia' },\n  { value: 'WA', label: 'Washington' },\n  { value: 'WV', label: 'West Virginia' },\n  { value: 'WI', label: 'Wisconsin' },\n  { value: 'WY', label: 'Wyoming' },\n];\n\nexport default function MultiSelectLongList() {\n  return (\n    <Field>\n      <FieldLabel>Ship-to states</FieldLabel>\n      <MultiSelect chosenOptions=\"hide\" defaultValue={['CA', 'NV', 'OR']} items={STATES}>\n        <MultiSelectControl placeholder=\"Add a state\" />\n        <MultiSelectContent>\n          {STATES.map((state) => (\n            <MultiSelectItem key={state.value} value={state.value}>\n              {state.label}\n            </MultiSelectItem>\n          ))}\n        </MultiSelectContent>\n      </MultiSelect>\n      <FieldDescription>\n        Ground shipping from Reno, NV reaches these states in two days.\n      </FieldDescription>\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  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport { Stack } from '@slotted/react/stack';\n\nconst CHANNELS: MultiSelectOption[] = [\n  { value: 'web', label: 'Web store' },\n  { value: 'marketplace', label: 'Marketplace' },\n  { value: 'wholesale', label: 'Wholesale' },\n  { value: 'phone', label: 'Phone orders' },\n];\n\nexport default function MultiSelectNarrow() {\n  return (\n    <Stack gap={4} style={{ inlineSize: '7rem' }}>\n      <Field>\n        <FieldLabel>Channels</FieldLabel>\n        <MultiSelect\n          size=\"sm\"\n          width=\"content\"\n          defaultValue={['web', 'marketplace', 'wholesale']}\n          items={CHANNELS}\n        >\n          <MultiSelectControl />\n          <MultiSelectContent>\n            {CHANNELS.map((channel) => (\n              <MultiSelectItem key={channel.value} value={channel.value}>\n                {channel.label}\n              </MultiSelectItem>\n            ))}\n          </MultiSelectContent>\n        </MultiSelect>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "order-tags",
+      "title": "order-tags.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import {\n  MultiSelect,\n  MultiSelectContent,\n  MultiSelectControl,\n  MultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/react/multi-select';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\n\nconst TAGS: MultiSelectOption[] = [\n  { value: 'priority', label: 'priority' },\n  { value: 'gift wrap', label: 'gift wrap' },\n  { value: 'fragile', label: 'fragile' },\n  { value: 'backorder', label: 'backorder' },\n  { value: 'address check', label: 'address check' },\n  { value: 'wholesale', label: 'wholesale' },\n];\n\nconst ORDERS = [\n  { id: 'SO-10482', customer: 'Harbor & Pine', tags: ['priority', 'fragile'] },\n  { id: 'SO-10483', customer: 'Brightline Studio', tags: ['address check'] },\n  { id: 'SO-10484', customer: 'Northgate Labs', tags: ['wholesale', 'backorder', 'priority'] },\n  { id: 'SO-10485', customer: 'Verde Kitchen', tags: [] },\n];\n\nexport default function MultiSelectOrderTags() {\n  return (\n    <Table columns={3}>\n      <TableContent aria-label=\"Orders\">\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Tags</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {ORDERS.map((order) => (\n            <TableRow key={order.id} value={order.id}>\n              <TableRowHeader>{order.id}</TableRowHeader>\n              <TableCell>{order.customer}</TableCell>\n              <TableCell>\n                <MultiSelect\n                  variant=\"plain\"\n                  size=\"sm\"\n                  overflow=\"collapse\"\n                  creatable\n                  defaultValue={order.tags}\n                  items={TAGS}\n                >\n                  <MultiSelectControl aria-label={`Tags for ${order.id}`} placeholder=\"Add a tag\" />\n                  <MultiSelectContent aria-label={`Tags for ${order.id}`}>\n                    {TAGS.map((tag) => (\n                      <MultiSelectItem key={tag.value} value={tag.value}>\n                        {tag.label}\n                      </MultiSelectItem>\n                    ))}\n                  </MultiSelectContent>\n                </MultiSelect>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}