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

package/docs/combobox.json

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