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

package/docs/multi-select.json

@@ -0,0 +1,1314 @@
+{
+  "family": "multi-select",
+  "ui": "multi-select",
+  "binding": "angular",
+  "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 { SlMultiSelect, SlMultiSelectGroup, SlMultiSelectItem, SlMultiSelectSeparator } from '@slotted/angular/multi-select';",
+        "selector": "sl-multi-select, sl-multi-select-group, sl-multi-select-item, sl-multi-select-separator",
+        "exportAs": "slMultiSelect, slMultiSelectGroup, slMultiSelectItem, slMultiSelectSeparator"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "sl-multi-select, the host element itself",
+          "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 the layer template",
+          "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": "sl-multi-select",
+          "description": "The chosen values, in the order the reader chose them. A model, so [(value)] binds both ways."
+        },
+        {
+          "name": "defaultValue",
+          "type": "readonly string[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The values an unbound multi-select starts with, read once in ngOnInit."
+        },
+        {
+          "name": "inputValue",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The text in the input. It is emptied whenever a value is committed. A model."
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the list is open. A model."
+        },
+        {
+          "name": "highlightedValue",
+          "type": "string | null",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The option the highlight is on, which is not a chosen option. A model."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "Names the input and the list, for a multi-select outside a field."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The text the input shows while no value is chosen."
+        },
+        {
+          "name": "items",
+          "type": "MultiSelectItems",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "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": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "Whether typed text may become a value. Text it turns down is reported through (valueRefuse) with the cause invalid."
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The submission name. One hidden input per value carries it."
+        },
+        {
+          "name": "form",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The id of the form the hidden inputs belong to, for a multi-select rendered outside it."
+        },
+        {
+          "name": "total",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The number of options in the whole collection, for aria-setsize on a windowed list."
+        },
+        {
+          "name": "max",
+          "type": "number | null",
+          "defaultValue": "null",
+          "appliesTo": "sl-multi-select",
+          "description": "The most values the set may hold; null means no limit. At the limit, every option not yet chosen is announced as unavailable. Past it, the validator reports tooMany."
+        },
+        {
+          "name": "delimiters",
+          "type": "readonly string[]",
+          "defaultValue": ",",
+          "appliesTo": "sl-multi-select",
+          "description": "The characters that commit the typed text and split a paste. One list serves both."
+        },
+        {
+          "name": "creatable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether typed text may become a value."
+        },
+        {
+          "name": "editable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether Enter on a focused tag turns it into a text field."
+        },
+        {
+          "name": "reorderable",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether Alt with ArrowLeft, ArrowRight, Home or End moves the focused tag along the row."
+        },
+        {
+          "name": "allowDuplicates",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the same value may be held twice."
+        },
+        {
+          "name": "addOnPaste",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether a paste that contains delimiters becomes several values."
+        },
+        {
+          "name": "commitOnBlur",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether typed text is committed when focus leaves the control."
+        },
+        {
+          "name": "overflow",
+          "type": "'wrap' | 'collapse'",
+          "defaultValue": "wrap",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "Whether a chosen option stays in the list with a check, or leaves it."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the clear button is drawn while the control holds a value or typed text."
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "Whether Escape closes the list."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether a press outside the list closes it."
+        },
+        {
+          "name": "loop",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the highlight wraps from the last option to the first, and back."
+        },
+        {
+          "name": "highlightMatch",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the span the query matched is marked."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "The side of the control the list opens on."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "start",
+          "appliesTo": "sl-multi-select",
+          "description": "How the list aligns along that side."
+        },
+        {
+          "name": "width",
+          "type": "'anchor' | 'content'",
+          "defaultValue": "content",
+          "appliesTo": "sl-multi-select",
+          "description": "content keeps the list at least as wide as the control and widens it to its longest option; anchor pins it to the width of the control."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "The CSS position the list uses."
+        },
+        {
+          "name": "openOn",
+          "type": "'input' | 'focus' | 'manual'",
+          "defaultValue": "input",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "The distance in pixels between the control and the list."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "sl-multi-select",
+          "description": "The shift in pixels along the aligned edge."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "Whether the list moves to the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the list slides along its side to stay in view."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the list hides when the control scrolls out of its clipping container."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the list is portalled to the end of the document."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the control fills the width of its container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "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": "sl-multi-select",
+          "description": "Whether an empty set is invalid."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "description": "Whether the control is drawn in the error state, with aria-invalid on the input."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select",
+          "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": "sl-multi-select",
+          "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": "value",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-item",
+          "description": "The key of the option, which is what enters the set."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-item",
+          "description": "What the reader sees, what the filter compares and what the mark splits. It is an input rather than projected content, because the filter needs the text before the option renders."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-multi-select-item",
+          "description": "Whether the option can be chosen."
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-item",
+          "description": "A second line under the label."
+        },
+        {
+          "name": "icon",
+          "type": "GlyphName",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-item",
+          "description": "The name of the glyph drawn in the first column of the option, as a Glyph inside an Icon box."
+        },
+        {
+          "name": "position",
+          "type": "number",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-item",
+          "description": "The place of the option in a windowed collection, for aria-posinset."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select-group",
+          "description": "The name of the group."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideMultiSelectDefaults()",
+          "type": "Provider",
+          "defaultValue": "—",
+          "appliesTo": "Application",
+          "description": "Sets any axis once for every multi-select below it, in a bootstrap, a route or a component. The words come from the language in force, set by provideSlotted. A binding written on one multi-select still wins."
+        },
+        {
+          "name": "exportAs",
+          "type": "slMultiSelect",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "The instance, for a template that calls focus(), setOpen(), admit(), remove(), move(), clear() or scrollToKey()."
+        },
+        {
+          "name": "ControlValueAccessor",
+          "type": "NG_VALUE_ACCESSOR",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "formControl, formControlName and ngModel bind the whole set, and the disabled state of the form reaches the control."
+        },
+        {
+          "name": "Validator",
+          "type": "NG_VALIDATORS",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "Reports required, tooMany and duplicate to a reactive form, with no validator to write. The React binding has no equivalent."
+        },
+        {
+          "name": "ng-content",
+          "type": "projection",
+          "defaultValue": "—",
+          "appliesTo": "sl-multi-select",
+          "description": "Options, groups and separators are your content, so your own control flow decides what the list holds."
+        }
+      ],
+      "events": [
+        {
+          "name": "valueChange",
+          "payload": "readonly string[]",
+          "when": "The set changed. It is the two-way half of [(value)]."
+        },
+        {
+          "name": "valueChangeRequest",
+          "payload": "ChangeRequest<readonly string[]>",
+          "when": "The same change, with its reason: select for an option, submit for typed text, remove for one value, clear for all of them, keyboard for a reorder, and programmatic for a method."
+        },
+        {
+          "name": "valueRefuse",
+          "payload": "{ values: readonly string[]; cause: \"duplicate\" | \"limit\" | \"invalid\" }",
+          "when": "Values were turned away, and cause says why. Nothing is held and nothing can be cancelled: the values never entered the set."
+        },
+        {
+          "name": "inputValueChange",
+          "payload": "string",
+          "when": "The typed text changed. It is the two-way half of [(inputValue)], and inputValueChangeRequest carries the reason."
+        },
+        {
+          "name": "openChange",
+          "payload": "boolean",
+          "when": "The list opened or closed. openChangeRequest carries the reason: pointer, keyboard, escape, outsidePress, select, dismiss, blur or programmatic."
+        },
+        {
+          "name": "highlightedValueChange",
+          "payload": "string | null",
+          "when": "The highlight moved. Moving it chooses nothing, and highlightedValueChangeRequest carries the reason."
+        },
+        {
+          "name": "loadMore",
+          "payload": "void",
+          "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": "html",
+      "source": "<sl-multi-select\n  aria-label=\"Affected services\"\n  placeholder=\"Add a service\"\n  [defaultValue]=\"['checkout-api']\"\n>\n  <sl-multi-select-item value=\"checkout-api\" label=\"checkout-api\" />\n  <sl-multi-select-item value=\"payments-worker\" label=\"payments-worker\" />\n</sl-multi-select>\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": "html",
+      "source": "<sl-multi-select aria-label=\"Affected services\" [(value)]=\"services\">\n  <sl-multi-select-item value=\"checkout-api\" label=\"checkout-api\" />\n</sl-multi-select>\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": "html",
+      "source": "<sl-multi-select aria-label=\"Labels\" creatable (valueChangeRequest)=\"onLabels($event)\">\n  <sl-multi-select-item value=\"regression\" label=\"regression\" />\n</sl-multi-select>\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 valueRefuse instead of vanishing.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-limit',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Featured categories</label>\n      <sl-multi-select\n        placeholder=\"Add a category\"\n        [max]=\"3\"\n        [items]=\"categories\"\n        [value]=\"featured\"\n      >\n        @for (category of categories; track category.value) {\n          <sl-multi-select-item [value]=\"category.value\" [label]=\"category.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>The storefront home page shows up to three categories.</span>\n    </div>\n  `,\n})\nexport class MultiSelectLimit {\n  protected readonly categories = CATEGORIES;\n  protected readonly featured = ['beverages', 'confections'];\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": "html",
+      "source": "<sl-multi-select aria-label=\"Labels\" creatable locale=\"pt-BR\" />\n\n<sl-multi-select aria-label=\"Labels\" allowDuplicates creatable />\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": "html",
+      "source": "<sl-multi-select aria-label=\"Rollback order\" reorderable (valueChangeRequest)=\"onOrder($event)\" />\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": "html",
+      "source": "<sl-multi-select aria-label=\"Notify\" addOnPaste creatable [delimiters]=\"[',', ';']\" [max]=\"5\" />\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": "html",
+      "source": "<sl-multi-select aria-label=\"Labels\" creatable editable [defaultValue]=\"['payments-worker']\" />\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlMultiSelect, SlMultiSelectItem } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-filtering',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Distributor cities</label>\n      <sl-multi-select placeholder=\"Search cities\">\n        @for (city of cities; track city.value) {\n          <sl-multi-select-item [value]=\"city.value\" [label]=\"city.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>Type “zur” or “malmo”: accents and case are ignored.</span>\n    </div>\n  `,\n})\nexport class MultiSelectFiltering {\n  protected readonly cities = CITIES;\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectGroup,\n  SlMultiSelectItem,\n  SlMultiSelectSeparator,\n  type MultiSelectOptionGroup,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-groups',\n  imports: [\n    SlField,\n    SlFieldLabel,\n    SlMultiSelect,\n    SlMultiSelectGroup,\n    SlMultiSelectItem,\n    SlMultiSelectSeparator,\n  ],\n  template: `\n    <div slField>\n      <label slFieldLabel>Stocking warehouses</label>\n      <sl-multi-select placeholder=\"Add a warehouse\" [items]=\"regions\" [value]=\"stocked\">\n        @for (region of regions; track region.label; let first = $first) {\n          @if (!first) {\n            <sl-multi-select-separator />\n          }\n          <sl-multi-select-group [label]=\"region.label\">\n            @for (warehouse of region.options; track warehouse.value) {\n              <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n            }\n          </sl-multi-select-group>\n        }\n      </sl-multi-select>\n    </div>\n  `,\n})\nexport class MultiSelectGroups {\n  protected readonly regions = REGIONS;\n  protected readonly stocked = ['RNO', 'SAV'];\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-overflow',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Stocking warehouses</label>\n        <sl-multi-select overflow=\"wrap\" [items]=\"warehouses\" [value]=\"stocked\">\n          @for (warehouse of warehouses; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>Wrap: every chip stays in view, up to three rows.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Stocking warehouses</label>\n        <sl-multi-select overflow=\"collapse\" [items]=\"warehouses\" [value]=\"stocked\">\n          @for (warehouse of warehouses; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>Collapse: one row, and a count of the rest.</span>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectOverflow {\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly stocked = STOCKED;\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-sizes',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      @for (entry of sizes; track entry.size) {\n        <div slField [size]=\"entry.size\">\n          <label slFieldLabel>{{ entry.label }}</label>\n          <sl-multi-select [items]=\"warehouses\" [value]=\"stocked\">\n            @for (warehouse of warehouses; track warehouse.value) {\n              <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n            }\n          </sl-multi-select>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class MultiSelectSizes {\n  protected readonly sizes = SIZES;\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly stocked = ['RNO', 'CMH'];\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-variants',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      @for (entry of variants; track entry.variant) {\n        <div slField>\n          <label slFieldLabel>{{ entry.label }}</label>\n          <sl-multi-select [variant]=\"entry.variant\" [items]=\"channels\" [value]=\"chosen\">\n            @for (channel of channels; track channel.value) {\n              <sl-multi-select-item [value]=\"channel.value\" [label]=\"channel.label\" />\n            }\n          </sl-multi-select>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class MultiSelectVariants {\n  protected readonly variants = VARIANTS;\n  protected readonly channels = CHANNELS;\n  protected readonly chosen = ['web', 'wholesale'];\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-states',\n  imports: [\n    SlField,\n    SlFieldDescription,\n    SlFieldError,\n    SlFieldLabel,\n    SlMultiSelect,\n    SlMultiSelectItem,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField invalid required>\n        <label slFieldLabel>Stocking warehouses</label>\n        <sl-multi-select placeholder=\"Add a warehouse\" [items]=\"warehouses\">\n          @for (warehouse of warehouses; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldError>Choose at least one warehouse before publishing.</span>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Warehouses holding stock</label>\n        <sl-multi-select [items]=\"warehouses\" [value]=\"holding\">\n          @for (warehouse of warehouses; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>Updated by the nightly inventory sync.</span>\n      </div>\n      <div slField disabled>\n        <label slFieldLabel>Transfer warehouses</label>\n        <sl-multi-select [items]=\"warehouses\" [value]=\"transfer\">\n          @for (warehouse of warehouses; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>Transfers open once the purchase order is received.</span>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectStates {\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly holding = ['RNO', 'SAV'];\n  protected readonly transfer = ['CMH'];\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": "html",
+      "source": "<sl-multi-select aria-label=\"Services\" loading />\n\n<sl-multi-select aria-label=\"Services\" [messages]=\"{ 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": "html",
+      "source": "<sl-multi-select\n  aria-label=\"Affected services\"\n  [defaultValue]=\"['notification-relay-eu-west-1-canary']\"\n/>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-keyboard',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Carrier priority</label>\n      <sl-multi-select\n        reorderable\n        placeholder=\"Add a carrier\"\n        [items]=\"carriers\"\n        [value]=\"priority\"\n      >\n        @for (carrier of carriers; track carrier.value) {\n          <sl-multi-select-item [value]=\"carrier.value\" [label]=\"carrier.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>\n        Rates are requested from the first carrier, then the next. Alt with an arrow moves the\n        focused carrier.\n      </span>\n    </div>\n  `,\n})\nexport class MultiSelectKeyboard {\n  protected readonly carriers = CARRIERS;\n  protected readonly priority = ['usps', 'ups', 'fedex'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "In a form",
+      "note": "One hidden input per value, all under the same name, and a ControlValueAccessor with a Validator beside it — so a Reactive Form sees required, tooMany and duplicate without the consumer writing one.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-form',\n  imports: [\n    ReactiveFormsModule,\n    SlButton,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlMultiSelect,\n    SlMultiSelectItem,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <form novalidate [formGroup]=\"form\" (ngSubmit)=\"submit()\" (reset)=\"clear()\">\n      <div slStack [gap]=\"5\">\n        <div slField required [invalid]=\"missing() ? true : undefined\">\n          <label slFieldLabel>Stocking warehouses</label>\n          <sl-multi-select\n            name=\"warehouses\"\n            placeholder=\"Add a warehouse\"\n            formControlName=\"warehouses\"\n            [items]=\"warehouses\"\n            (valueChange)=\"missing.set(false)\"\n          >\n            @for (warehouse of warehouses; track warehouse.value) {\n              <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n            }\n          </sl-multi-select>\n          <span slFieldError live=\"polite\" reserve>{{\n            missing() ? 'Choose at least one warehouse to stock this product.' : ''\n          }}</span>\n        </div>\n        <div slField>\n          <label slFieldLabel>Sales channels</label>\n          <sl-multi-select name=\"channels\" formControlName=\"channels\" [items]=\"channels\">\n            @for (channel of channels; track channel.value) {\n              <sl-multi-select-item [value]=\"channel.value\" [label]=\"channel.label\" />\n            }\n          </sl-multi-select>\n        </div>\n        <div slInline [gap]=\"3\" align=\"center\">\n          <button slButton type=\"submit\">Save</button>\n          <button slButton type=\"reset\" tone=\"secondary\" variant=\"outline\">Reset</button>\n          @if (saved(); as message) {\n            <span slText size=\"sm\" tone=\"muted\">{{ message }}</span>\n          }\n        </div>\n      </div>\n    </form>\n  `,\n})\nexport class MultiSelectForm {\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly channels = CHANNELS;\n  /* The control's own Validator reports required, so none is written here. */\n  protected readonly form = new FormGroup({\n    warehouses: new FormControl<readonly string[]>([], { nonNullable: true }),\n    channels: new FormControl<readonly string[]>(['web'], { nonNullable: true }),\n  });\n  protected readonly missing = signal(false);\n  protected readonly saved = signal<string | null>(null);\n\n  protected submit(): void {\n    this.missing.set(this.form.controls.warehouses.invalid);\n    const { warehouses } = this.form.getRawValue();\n    this.saved.set(\n      this.form.valid\n        ? `Saved with ${warehouses.length} of ${WAREHOUSES.length} warehouses.`\n        : null,\n    );\n  }\n\n  protected clear(): void {\n    this.missing.set(false);\n    this.saved.set(null);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "Composition, and the defaults an application sets once",
+      "note": "An injection token carries the axes, provideSlotted the language, exportAs reaches the instance from the template, and projected options keep their own content.",
+      "language": "html",
+      "source": "<sl-multi-select #services=\"slMultiSelect\" aria-label=\"Affected services\" />\n\n<button type=\"button\" (click)=\"services.focus()\">Add a service</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "async-search",
+      "title": "async-search.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, effect, signal } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlMultiSelect, SlMultiSelectItem } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-async-search',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Customers in this campaign</label>\n      <sl-multi-select\n        placeholder=\"Search customers\"\n        [filter]=\"null\"\n        [loading]=\"loading()\"\n        [messages]=\"{ empty: 'No customer by that name.', loading: 'Searching customers…' }\"\n        (inputValueChange)=\"query.set($event)\"\n      >\n        @for (customer of results(); track customer.value) {\n          <sl-multi-select-item\n            [value]=\"customer.value\"\n            [label]=\"customer.label\"\n            [description]=\"customer.city\"\n          />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>Each keystroke searches the customer list on the server.</span>\n    </div>\n  `,\n})\nexport class MultiSelectAsyncSearch {\n  protected readonly query = signal('');\n  protected readonly results = signal<Customer[]>(FIRST_PAGE);\n  protected readonly loading = signal(false);\n\n  constructor() {\n    effect((onCleanup) => {\n      const query = this.query();\n      if (query.trim() === '') {\n        this.results.set(FIRST_PAGE);\n        this.loading.set(false);\n        return;\n      }\n      let current = true;\n      this.loading.set(true);\n      void searchCustomers(query).then((found) => {\n        if (!current) return;\n        this.results.set(found);\n        this.loading.set(false);\n      });\n      onCleanup(() => {\n        current = false;\n      });\n    });\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlMultiSelect, SlMultiSelectItem } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-basic',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Stocking warehouses</label>\n      <sl-multi-select placeholder=\"Add a warehouse\">\n        @for (warehouse of warehouses; track warehouse.value) {\n          <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>Chai tea, 24 bags is reordered at each of these warehouses.</span>\n    </div>\n  `,\n})\nexport class MultiSelectBasic {\n  protected readonly warehouses = WAREHOUSES;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "choose-columns",
+      "title": "choose-columns.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-choose-columns',\n  imports: [\n    SlButton,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlInline,\n    SlMultiSelect,\n    SlMultiSelectItem,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n  ],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <div slInline [gap]=\"3\" justify=\"between\" align=\"center\">\n          <label slFieldLabel>Columns</label>\n          <button\n            slButton\n            size=\"sm\"\n            tone=\"secondary\"\n            variant=\"ghost\"\n            [disabled]=\"shown().length === all.length\"\n            (click)=\"shown.set(all)\"\n          >\n            Show all\n          </button>\n        </div>\n        <sl-multi-select reorderable placeholder=\"Add a column\" [items]=\"options\" [(value)]=\"shown\">\n          @for (column of options; track column.value) {\n            <sl-multi-select-item [value]=\"column.value\" [label]=\"column.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>\n          The table follows the order of the chips. Alt with an arrow moves a focused column.\n        </span>\n      </div>\n      <div slTable [columns]=\"columnCount()\">\n        <div slTableContent aria-label=\"Orders\">\n          <thead slTableHead>\n            <tr slTableRow>\n              @for (column of columns(); track column) {\n                <th slTableColumnHeader>{{ labelOf(column) }}</th>\n              }\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of orders; track order.order) {\n              <tr slTableRow [value]=\"order.order\">\n                @for (column of columns(); track column) {\n                  <td slTableCell>{{ order[column] }}</td>\n                }\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectChooseColumns {\n  protected readonly options = COLUMNS;\n  protected readonly orders = ORDERS;\n  protected readonly all = ALL;\n  protected readonly labelOf = labelOf;\n  protected readonly shown = signal<readonly string[]>(['order', 'customer', 'total']);\n  protected readonly columns = computed(() => this.shown() as readonly Column[]);\n  protected readonly columnCount = computed(() => Math.max(this.columns().length, 1));\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "clearing",
+      "title": "clearing.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-clearing',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField>\n        <label slFieldLabel>Show orders from</label>\n        <sl-multi-select placeholder=\"All channels\" [items]=\"channels\" [value]=\"shown\">\n          @for (channel of channels; track channel.value) {\n            <sl-multi-select-item [value]=\"channel.value\" [label]=\"channel.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>The clear button empties the filter in one press.</span>\n      </div>\n      <div slField>\n        <label slFieldLabel>Sell through</label>\n        <sl-multi-select [clearable]=\"false\" [items]=\"channels\" [value]=\"selling\">\n          @for (channel of channels; track channel.value) {\n            <sl-multi-select-item [value]=\"channel.value\" [label]=\"channel.label\" />\n          }\n        </sl-multi-select>\n        <span slFieldDescription>No clear button: channels come off one at a time.</span>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectClearing {\n  protected readonly channels = CHANNELS;\n  protected readonly shown = ['web', 'marketplace', 'phone'];\n  protected readonly selling = ['web', 'wholesale'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-controlled',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slField>\n        <label slFieldLabel>Stocking warehouses</label>\n        <sl-multi-select\n          placeholder=\"Add a warehouse\"\n          [items]=\"options\"\n          [(value)]=\"warehouses\"\n          (valueChangeRequest)=\"reason.set($event.reason)\"\n        >\n          @for (warehouse of options; track warehouse.value) {\n            <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n          }\n        </sl-multi-select>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class MultiSelectControlled {\n  protected readonly options = WAREHOUSES;\n  protected readonly warehouses = signal<readonly string[]>(['RNO', 'CMH']);\n  protected readonly reason = signal<string | null>(null);\n  protected readonly summary = computed(() => {\n    const held = this.warehouses();\n    const stocked =\n      held.length === 0 ? 'Not stocked anywhere' : `Stocked at ${held.map(labelOf).join('; ')}`;\n    const reason = this.reason();\n    return reason === null ? stocked : `${stocked} · last change: ${reason}`;\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "creatable",
+      "title": "creatable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-creatable',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Search keywords</label>\n      <sl-multi-select creatable placeholder=\"Add a keyword\" [items]=\"suggested\" [value]=\"keywords\">\n        @for (keyword of suggested; track keyword.value) {\n          <sl-multi-select-item [value]=\"keyword.value\" [label]=\"keyword.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>\n        Type a keyword and press Enter or a comma. Shoppers find Chai tea, 24 bags by these words.\n      </span>\n    </div>\n  `,\n})\nexport class MultiSelectCreatable {\n  protected readonly suggested = SUGGESTED;\n  protected readonly keywords = ['chai', 'black tea'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  provideMultiSelectDefaults,\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-defaults',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  providers: [provideMultiSelectDefaults({ size: 'sm', variant: 'subtle', overflow: 'collapse' })],\n  template: `\n    <div slStack [gap]=\"4\">\n      <div slField>\n        <label slFieldLabel>Account owners</label>\n        <sl-multi-select placeholder=\"Any owner\" [items]=\"owners\" [value]=\"ownersChosen\">\n          @for (owner of owners; track owner.value) {\n            <sl-multi-select-item [value]=\"owner.value\" [label]=\"owner.label\" />\n          }\n        </sl-multi-select>\n      </div>\n      <div slField>\n        <label slFieldLabel>Segments</label>\n        <sl-multi-select placeholder=\"Any segment\" [items]=\"segments\" [value]=\"segmentsChosen\">\n          @for (segment of segments; track segment.value) {\n            <sl-multi-select-item [value]=\"segment.value\" [label]=\"segment.label\" />\n          }\n        </sl-multi-select>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectDefaults {\n  protected readonly owners = OWNERS;\n  protected readonly segments = SEGMENTS;\n  protected readonly ownersChosen = ['lucia', 'kenji'];\n  protected readonly segmentsChosen = ['wholesale'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "descriptions",
+      "title": "descriptions.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport type { GlyphName } from '@slotted/angular/icon';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-descriptions',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Attach to the shipping email</label>\n      <sl-multi-select placeholder=\"Add a document\" [items]=\"documents\" [value]=\"attached\">\n        @for (document of documents; track document.value) {\n          <sl-multi-select-item\n            [value]=\"document.value\"\n            [label]=\"document.label\"\n            [description]=\"document.description\"\n            [icon]=\"document.icon\"\n          />\n        }\n      </sl-multi-select>\n    </div>\n  `,\n})\nexport class MultiSelectDescriptions {\n  protected readonly documents = DOCUMENTS;\n  protected readonly attached = ['invoice'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled-options",
+      "title": "disabled-options.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-disabled-options',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Receiving warehouses</label>\n      <sl-multi-select placeholder=\"Add a warehouse\" [items]=\"warehouses\" [value]=\"receiving\">\n        @for (warehouse of warehouses; track warehouse.value) {\n          <sl-multi-select-item\n            [value]=\"warehouse.value\"\n            [label]=\"warehouse.label\"\n            [description]=\"warehouse.description\"\n            [disabled]=\"warehouse.disabled ?? false\"\n          />\n        }\n      </sl-multi-select>\n    </div>\n  `,\n})\nexport class MultiSelectDisabledOptions {\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly receiving = ['RNO'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "editable",
+      "title": "editable.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlMultiSelect } from '@slotted/angular/multi-select';\n\n@Component({\n  selector: 'app-multi-select-editable',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect],\n  template: `\n    <div slField>\n      <label slFieldLabel>Bin locations</label>\n      <sl-multi-select\n        creatable\n        editable\n        placeholder=\"Add a bin\"\n        [value]=\"bins\"\n        [messages]=\"{ empty: 'Type a bin code and press Enter.' }\"\n      />\n      <span slFieldDescription>\n        Press ArrowLeft to reach a bin, then Enter to correct it in place.\n      </span>\n    </div>\n  `,\n})\nexport class MultiSelectEditable {\n  protected readonly bins = ['A-12-03', 'A-12-04', 'C-02-11'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "email-list",
+      "title": "email-list.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectRefuseCause,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-email-list',\n  imports: [\n    SlField,\n    SlFieldDescription,\n    SlFieldError,\n    SlFieldLabel,\n    SlMultiSelect,\n    SlMultiSelectItem,\n  ],\n  template: `\n    <div slField [invalid]=\"refused() !== null ? true : undefined\">\n      <label slFieldLabel>Stockout alerts</label>\n      <sl-multi-select\n        creatable\n        placeholder=\"name@company.com\"\n        [delimiters]=\"delimiters\"\n        [value]=\"recipients\"\n        [validateValue]=\"isEmail\"\n        (valueRefuse)=\"refuse($event)\"\n        (valueChange)=\"refused.set(null)\"\n      >\n        @for (team of teams; track team.value) {\n          <sl-multi-select-item\n            [value]=\"team.value\"\n            [label]=\"team.value\"\n            [description]=\"team.description\"\n          />\n        }\n      </sl-multi-select>\n      @if (refused(); as message) {\n        <span slFieldError live=\"polite\">{{ message }}</span>\n      } @else {\n        <span slFieldDescription>Paste a list separated by commas, semicolons or spaces.</span>\n      }\n    </div>\n  `,\n})\nexport class MultiSelectEmailList {\n  protected readonly teams = TEAMS;\n  protected readonly delimiters = [',', ';', ' '];\n  protected readonly recipients = ['purchasing@northwind.example'];\n  protected readonly isEmail = isEmail;\n  protected readonly refused = signal<string | null>(null);\n\n  protected refuse(event: { values: readonly string[]; cause: MultiSelectRefuseCause }): void {\n    this.refused.set(`${event.values.join(', ')} ${REASONS[event.cause]}.`);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "filter-bar",
+      "title": "filter-bar.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlGrid } from '@slotted/angular/grid';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-filter-bar',\n  imports: [\n    SlGrid,\n    SlMultiSelect,\n    SlMultiSelectItem,\n    SlStack,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n    SlText,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slGrid [columns]=\"2\" [gap]=\"3\">\n        <sl-multi-select\n          aria-label=\"Status\"\n          placeholder=\"All statuses\"\n          size=\"sm\"\n          overflow=\"collapse\"\n          [items]=\"statusOptions\"\n          [(value)]=\"statuses\"\n        >\n          @for (status of statusOptions; track status.value) {\n            <sl-multi-select-item\n              [value]=\"status.value\"\n              [label]=\"status.label\"\n              [description]=\"countOf('status', status.value)\"\n            />\n          }\n        </sl-multi-select>\n        <sl-multi-select\n          aria-label=\"Channel\"\n          placeholder=\"All channels\"\n          size=\"sm\"\n          overflow=\"collapse\"\n          [items]=\"channelOptions\"\n          [(value)]=\"channels\"\n        >\n          @for (channel of channelOptions; track channel.value) {\n            <sl-multi-select-item\n              [value]=\"channel.value\"\n              [label]=\"channel.label\"\n              [description]=\"countOf('channel', channel.value)\"\n            />\n          }\n        </sl-multi-select>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ rows().length }} of {{ orders.length }} orders</span>\n      <div slTable [columns]=\"5\">\n        <div slTableContent aria-label=\"Orders\">\n          <thead slTableHead>\n            <tr slTableRow>\n              <th slTableColumnHeader>Order</th>\n              <th slTableColumnHeader>Customer</th>\n              <th slTableColumnHeader>Status</th>\n              <th slTableColumnHeader>Channel</th>\n              <th slTableColumnHeader numeric>Total</th>\n            </tr>\n          </thead>\n          <tbody slTableBody>\n            @for (order of rows(); track order.id) {\n              <tr slTableRow [value]=\"order.id\">\n                <th slTableRowHeader>{{ order.id }}</th>\n                <td slTableCell>{{ order.customer }}</td>\n                <td slTableCell>{{ labelOf(statusOptions, order.status) }}</td>\n                <td slTableCell>{{ labelOf(channelOptions, order.channel) }}</td>\n                <td slTableCell numeric>{{ order.total }}</td>\n              </tr>\n            }\n          </tbody>\n        </div>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectFilterBar {\n  protected readonly orders = ORDERS;\n  protected readonly statusOptions = STATUSES;\n  protected readonly channelOptions = CHANNELS;\n  protected readonly labelOf = labelOf;\n  protected readonly countOf = countOf;\n  protected readonly statuses = signal<readonly string[]>(['open', 'delayed']);\n  protected readonly channels = signal<readonly string[]>([]);\n  protected readonly rows = computed(() => {\n    const statuses = this.statuses();\n    const channels = this.channels();\n    return ORDERS.filter(\n      (order) =>\n        (statuses.length === 0 || statuses.includes(order.status)) &&\n        (channels.length === 0 || channels.includes(order.channel)),\n    );\n  });\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "initial-value",
+      "title": "initial-value.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-initial-value',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Stocking warehouses</label>\n      <sl-multi-select placeholder=\"Add a warehouse\" [items]=\"warehouses\" [value]=\"stocked\">\n        @for (warehouse of warehouses; track warehouse.value) {\n          <sl-multi-select-item [value]=\"warehouse.value\" [label]=\"warehouse.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>Earl Grey, 100 bags is stocked at two warehouses.</span>\n    </div>\n  `,\n})\nexport class MultiSelectInitialValue {\n  protected readonly warehouses = WAREHOUSES;\n  protected readonly stocked = ['RNO', 'CMH'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-loading',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Carriers offered at checkout</label>\n      <sl-multi-select\n        placeholder=\"Add a carrier\"\n        [loading]=\"loading()\"\n        [items]=\"carriers()\"\n        [messages]=\"{ loading: 'Fetching carriers…' }\"\n        (openChange)=\"load($event)\"\n      >\n        @for (carrier of carriers(); track carrier.value) {\n          <sl-multi-select-item [value]=\"carrier.value\" [label]=\"carrier.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription>Carriers load from the rates service when the list opens.</span>\n    </div>\n  `,\n})\nexport class MultiSelectLoading {\n  protected readonly carriers = signal<MultiSelectOption[]>([]);\n  protected readonly loading = signal(false);\n  private loaded = false;\n\n  protected async load(open: boolean): Promise<void> {\n    if (!open || this.loaded || this.loading()) return;\n    this.loading.set(true);\n    this.carriers.set(await fetchCarriers());\n    this.loading.set(false);\n    this.loaded = true;\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-list",
+      "title": "long-list.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-long-list',\n  imports: [SlField, SlFieldDescription, SlFieldLabel, SlMultiSelect, SlMultiSelectItem],\n  template: `\n    <div slField>\n      <label slFieldLabel>Ship-to states</label>\n      <sl-multi-select\n        chosenOptions=\"hide\"\n        placeholder=\"Add a state\"\n        [items]=\"states\"\n        [value]=\"shipTo\"\n      >\n        @for (state of states; track state.value) {\n          <sl-multi-select-item [value]=\"state.value\" [label]=\"state.label\" />\n        }\n      </sl-multi-select>\n      <span slFieldDescription\n        >Ground shipping from Reno, NV reaches these states in two days.</span\n      >\n    </div>\n  `,\n})\nexport class MultiSelectLongList {\n  protected readonly states = STATES;\n  protected readonly shipTo = ['CA', 'NV', 'OR'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "narrow",
+      "title": "narrow.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport { SlStack } from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-narrow',\n  imports: [SlField, SlFieldLabel, SlMultiSelect, SlMultiSelectItem, SlStack],\n  template: `\n    <div slStack [gap]=\"4\" style=\"inline-size: 7rem\">\n      <div slField>\n        <label slFieldLabel>Channels</label>\n        <sl-multi-select size=\"sm\" width=\"content\" [items]=\"channels\" [value]=\"chosen\">\n          @for (channel of channels; track channel.value) {\n            <sl-multi-select-item [value]=\"channel.value\" [label]=\"channel.label\" />\n          }\n        </sl-multi-select>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectNarrow {\n  protected readonly channels = CHANNELS;\n  protected readonly chosen = ['web', 'marketplace', 'wholesale'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "order-tags",
+      "title": "order-tags.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport {\n  SlMultiSelect,\n  SlMultiSelectItem,\n  type MultiSelectOption,\n} from '@slotted/angular/multi-select';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/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\n@Component({\n  selector: 'app-multi-select-order-tags',\n  imports: [\n    SlMultiSelect,\n    SlMultiSelectItem,\n    SlTable,\n    SlTableBody,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"3\">\n      <div slTableContent aria-label=\"Orders\">\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Tags</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <tr slTableRow [value]=\"order.id\">\n              <th slTableRowHeader>{{ order.id }}</th>\n              <td slTableCell>{{ order.customer }}</td>\n              <td slTableCell>\n                <sl-multi-select\n                  variant=\"plain\"\n                  size=\"sm\"\n                  overflow=\"collapse\"\n                  creatable\n                  placeholder=\"Add a tag\"\n                  [aria-label]=\"'Tags for ' + order.id\"\n                  [items]=\"tags\"\n                  [value]=\"order.tags\"\n                >\n                  @for (tag of tags; track tag.value) {\n                    <sl-multi-select-item [value]=\"tag.value\" [label]=\"tag.label\" />\n                  }\n                </sl-multi-select>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class MultiSelectOrderTags {\n  protected readonly tags = TAGS;\n  protected readonly orders = ORDERS;\n}\n",
+      "verdict": "example"
+    }
+  ]
+}