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

package/docs/select.json

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