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

package/docs/combobox.examples.md

@@ -0,0 +1,1732 @@
+<!-- index: ./index.md -->
+# combobox
+
+`data-ui="combobox"` · Text input that filters a list of options.
+
+## Examples
+
+### Playground
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox aria-label="Fruit" placeholder="Search fruit">
+  <sl-combobox-item value="blueberry" label="Blueberry" />
+  <sl-combobox-item value="raspberry" label="Raspberry" />
+</sl-combobox>
+```
+
+### Filtering, and the mark
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const CITIES = [
+  'São Paulo',
+  'Zürich',
+  'Montréal',
+  'Kraków',
+  'Malmö',
+  'Querétaro',
+  'Reykjavík',
+  'Düsseldorf',
+];
+
+@Component({
+  selector: 'app-combobox-filtering',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Destination city</label>
+      <sl-combobox placeholder="Try “sao” or “zurich”">
+        @for (city of cities; track city) {
+          <sl-combobox-item [value]="city" [label]="city" />
+        }
+      </sl-combobox>
+      <span slFieldDescription>Accents and case are ignored when matching.</span>
+    </div>
+  `,
+})
+export class ComboboxFiltering {
+  protected readonly cities = CITIES;
+}
+```
+
+### Autocomplete
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox autocomplete="none">…</sl-combobox>
+<sl-combobox autocomplete="list">…</sl-combobox>
+<sl-combobox autocomplete="both">…</sl-combobox>
+```
+
+### A value that is not on the list
+
+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".
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const BOXES = [
+  { id: 'small', label: 'Small · 20 × 15 × 10 cm' },
+  { id: 'medium', label: 'Medium · 35 × 25 × 15 cm' },
+  { id: 'large', label: 'Large · 50 × 40 × 30 cm' },
+];
+
+@Component({
+  selector: 'app-combobox-custom-value',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Box size</label>
+      <sl-combobox allowsCustomValue placeholder="Pick a box or type dimensions" [(value)]="value">
+        @for (box of boxes; track box.id) {
+          <sl-combobox-item [value]="box.id" [label]="box.label" />
+        }
+      </sl-combobox>
+      <span slFieldDescription>Value: {{ value() ?? 'none' }}</span>
+    </div>
+  `,
+})
+export class ComboboxCustomValue {
+  protected readonly boxes = BOXES;
+  protected readonly value = signal<string | null>(null);
+}
+```
+
+### Adding a value the list does not hold
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox creatable (create)="add($event.query)">…</sl-combobox>
+```
+
+### Asynchronous results
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox
+  [filter]="null"
+  [loading]="pending()"
+  [(inputValue)]="query"
+  (loadMore)="fetchNextPage()"
+>
+  …
+</sl-combobox>
+```
+
+### Groups
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxGroup, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const CATALOG = [
+  {
+    category: 'Kitchen',
+    products: [
+      { sku: 'KIT-1042', name: 'Cast-iron skillet' },
+      { sku: 'KIT-1043', name: 'Stoneware mug' },
+      { sku: 'KIT-1051', name: 'Pour-over kettle' },
+    ],
+  },
+  {
+    category: 'Bags',
+    products: [
+      { sku: 'BAG-2010', name: 'Canvas tote' },
+      { sku: 'BAG-2014', name: 'Trail daypack' },
+      { sku: 'BAG-2019', name: 'Weekender bag' },
+    ],
+  },
+  {
+    category: 'Stationery',
+    products: [
+      { sku: 'STA-3002', name: 'Field notebook' },
+      { sku: 'STA-3007', name: 'Fountain pen' },
+      { sku: 'STA-3011', name: 'Brass stapler' },
+    ],
+  },
+];
+
+@Component({
+  selector: 'app-combobox-groups',
+  imports: [SlCombobox, SlComboboxGroup, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Product</label>
+      <sl-combobox placeholder="Search the catalog">
+        @for (group of catalog; track group.category) {
+          <sl-combobox-group [label]="group.category">
+            @for (product of group.products; track product.sku) {
+              <sl-combobox-item [value]="product.sku" [label]="product.name" />
+            }
+          </sl-combobox-group>
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxGroups {
+  protected readonly catalog = CATALOG;
+}
+```
+
+### Clearable
+
+One press takes both contracts back — the text and the chosen key — and focus returns to the field rather than to the document.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+@Component({
+  selector: 'app-combobox-clearable',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="5">
+      <div slField>
+        <label slFieldLabel>Default warehouse</label>
+        <sl-combobox inputValue="Columbus, OH" defaultValue="CMH">
+          <sl-combobox-item value="RNO" label="Reno, NV" />
+          <sl-combobox-item value="CMH" label="Columbus, OH" />
+          <sl-combobox-item value="SAV" label="Savannah, GA" />
+        </sl-combobox>
+        <span slFieldDescription>Optional. Clearing it routes orders by distance.</span>
+      </div>
+      <div slField>
+        <label slFieldLabel>Payment terms</label>
+        <sl-combobox [clearable]="false" inputValue="Net 30" defaultValue="net-30">
+          <sl-combobox-item value="prepaid" label="Prepaid" />
+          <sl-combobox-item value="net-30" label="Net 30" />
+          <sl-combobox-item value="net-45" label="Net 45" />
+        </sl-combobox>
+        <span slFieldDescription>Every account has terms, so there is nothing to clear.</span>
+      </div>
+    </div>
+  `,
+})
+export class ComboboxClearable {}
+```
+
+### Sizes
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import type { ComboboxSize } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const SIZES: { size: ComboboxSize; label: string }[] = [
+  { size: 'sm', label: 'Small' },
+  { size: 'md', label: 'Medium' },
+  { size: 'lg', label: 'Large' },
+];
+
+const WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];
+
+@Component({
+  selector: 'app-combobox-sizes',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="5">
+      @for (step of sizes; track step.size) {
+        <div slField>
+          <label slFieldLabel>{{ step.label }}</label>
+          <sl-combobox [size]="step.size" inputValue="Reno, NV" defaultValue="Reno, NV">
+            @for (warehouse of warehouses; track warehouse) {
+              <sl-combobox-item [value]="warehouse" [label]="warehouse" />
+            }
+          </sl-combobox>
+        </div>
+      }
+    </div>
+  `,
+})
+export class ComboboxSizes {
+  protected readonly sizes = SIZES;
+  protected readonly warehouses = WAREHOUSES;
+}
+```
+
+### Variants
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import type { ComboboxVariant } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const VARIANTS: { variant: ComboboxVariant; label: string }[] = [
+  { variant: 'outline', label: 'Outline' },
+  { variant: 'subtle', label: 'Subtle' },
+  { variant: 'plain', label: 'Plain' },
+];
+
+const WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];
+
+@Component({
+  selector: 'app-combobox-variants',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="5">
+      @for (step of variants; track step.variant) {
+        <div slField>
+          <label slFieldLabel>{{ step.label }}</label>
+          <sl-combobox placeholder="Search warehouses" [variant]="step.variant">
+            @for (warehouse of warehouses; track warehouse) {
+              <sl-combobox-item [value]="warehouse" [label]="warehouse" />
+            }
+          </sl-combobox>
+        </div>
+      }
+    </div>
+  `,
+})
+export class ComboboxVariants {
+  protected readonly variants = VARIANTS;
+  protected readonly warehouses = WAREHOUSES;
+}
+```
+
+### States
+
+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.
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+@Component({
+  selector: 'app-combobox-states',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="5">
+      <div slField disabled>
+        <label slFieldLabel>Warehouse</label>
+        <sl-combobox inputValue="Reno, NV" defaultValue="RNO">
+          <sl-combobox-item value="RNO" label="Reno, NV" />
+          <sl-combobox-item value="CMH" label="Columbus, OH" />
+        </sl-combobox>
+        <span slFieldDescription>Locked while the transfer is in transit.</span>
+      </div>
+      <div slField readOnly>
+        <label slFieldLabel>Billing entity</label>
+        <sl-combobox inputValue="Northwind Trading Co." defaultValue="northwind-us">
+          <sl-combobox-item value="northwind-us" label="Northwind Trading Co." />
+          <sl-combobox-item value="northwind-eu" label="Northwind Europe B.V." />
+        </sl-combobox>
+        <span slFieldDescription
+          >Set by the contract. The text can still be selected and copied.</span
+        >
+      </div>
+    </div>
+  `,
+})
+export class ComboboxStates {}
+```
+
+### Nothing matched, and still travelling
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox [messages]="{ empty: 'Try a different spelling' }">…</sl-combobox>
+```
+
+### Long, translated and unbroken content
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox-item value="urn" label="urn:acme:catalogue:9f2c41ab8de07c5511903fbe" />
+```
+
+### Keyboard
+
+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.
+
+Excerpt — not a complete module
+
+```html
+<sl-combobox openOn="input" [autoHighlight]="false" [loop]="false">…</sl-combobox>
+```
+
+### In a Reactive Form
+
+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.
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { SlButton } from '@slotted/angular/button';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const WAREHOUSES = [
+  { code: 'RNO', city: 'Reno, NV' },
+  { code: 'CMH', city: 'Columbus, OH' },
+  { code: 'SAV', city: 'Savannah, GA' },
+];
+
+@Component({
+  selector: 'app-combobox-form',
+  imports: [
+    ReactiveFormsModule,
+    SlButton,
+    SlCombobox,
+    SlComboboxItem,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlText,
+  ],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <div slStack [gap]="4">
+        <div slField required [invalid]="missing()">
+          <label slFieldLabel>Fulfil from</label>
+          <sl-combobox
+            formControlName="warehouse"
+            placeholder="Search warehouses"
+            (valueChange)="$event && missing.set(false)"
+          >
+            @for (warehouse of warehouses; track warehouse.code) {
+              <sl-combobox-item [value]="warehouse.code" [label]="warehouse.city" />
+            }
+          </sl-combobox>
+          @if (missing()) {
+            <span slFieldError>Choose the warehouse that ships this order.</span>
+          }
+        </div>
+        <div slInline [gap]="3" align="center">
+          <button slButton type="submit">Create transfer</button>
+          @if (submitted(); as line) {
+            <span slText size="sm" tone="muted">Submitted {{ line }}</span>
+          }
+        </div>
+      </div>
+    </form>
+  `,
+})
+export class ComboboxForm {
+  protected readonly warehouses = WAREHOUSES;
+  protected readonly form = new FormGroup({
+    warehouse: new FormControl<string | null>(null, Validators.required),
+  });
+  protected readonly missing = signal(false);
+  protected readonly submitted = signal<string | null>(null);
+
+  protected submit() {
+    const warehouse = this.form.value.warehouse;
+    this.missing.set(this.form.invalid);
+    this.submitted.set(this.form.valid ? `warehouse=${warehouse}` : null);
+  }
+}
+```
+
+### Composition
+
+Defaults provided once for a whole application; the words come from the language in force (provideSlotted).
+
+Excerpt — not a complete module
+
+```ts
+providers: [provideComboboxDefaults({ size: 'sm' })];
+```
+
+### assignee-picker.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlAvatar } from '@slotted/angular/avatar';
+import { SlCombobox, SlComboboxItem, SlComboboxItemIcon } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const PEOPLE = [
+  { id: 'avery', name: 'Avery Collins', role: 'Fulfilment lead', away: false },
+  { id: 'kenji', name: 'Kenji Watanabe', role: 'Customer care', away: false },
+  { id: 'lucia', name: 'Lucía Fernández', role: 'Account manager', away: false },
+  { id: 'ruth', name: 'Ruth Adeyemi', role: 'On leave until 14 October', away: true },
+  { id: 'tomasz', name: 'Tomasz Nowak', role: 'Warehouse supervisor, Reno', away: false },
+  { id: 'omar', name: 'Omar Haddad', role: 'Finance', away: false },
+];
+
+@Component({
+  selector: 'app-combobox-assignee-picker',
+  imports: [SlAvatar, SlCombobox, SlComboboxItem, SlComboboxItemIcon, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Assignee</label>
+      <sl-combobox autoHighlight placeholder="Assign to…">
+        @for (person of people; track person.id) {
+          <sl-combobox-item
+            [value]="person.id"
+            [label]="person.name"
+            [description]="person.role"
+            [disabled]="person.away"
+          >
+            <span slComboboxItemIcon
+              ><span slAvatar [name]="person.name" size="xs" decorative></span
+            ></span>
+          </sl-combobox-item>
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxAssigneePicker {
+  protected readonly people = PEOPLE;
+}
+```
+
+### async-search.ts
+
+Example
+
+```ts
+import { Component, computed, DestroyRef, inject, signal } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+interface Customer {
+  id: string;
+  name: string;
+  city: string;
+}
+
+const DIRECTORY: Customer[] = [
+  { id: 'brightline', name: 'Brightline Studio', city: 'Portland, OR' },
+  { id: 'harbor-pine', name: 'Harbor & Pine', city: 'Seattle, WA' },
+  { id: 'northgate', name: 'Northgate Labs', city: 'Austin, TX' },
+  { id: 'quill', name: 'Quill & Co.', city: 'Brooklyn, NY' },
+  { id: 'solstice', name: 'Solstice Outdoor', city: 'Boulder, CO' },
+  { id: 'verde', name: 'Verde Kitchen', city: 'Oakland, CA' },
+  { id: 'atlas', name: 'Atlas Freight', city: 'Memphis, TN' },
+  { id: 'juniper', name: 'Juniper Health', city: 'Minneapolis, MN' },
+  { id: 'kestrel', name: 'Kestrel Robotics', city: 'Pittsburgh, PA' },
+  { id: 'larkspur', name: 'Larkspur Books', city: 'Asheville, NC' },
+  { id: 'meridian', name: 'Meridian Hotels', city: 'Chicago, IL' },
+  { id: 'oakline', name: 'Oakline Furniture', city: 'Grand Rapids, MI' },
+  { id: 'pelican', name: 'Pelican Coffee', city: 'Tampa, FL' },
+  { id: 'saltmarsh', name: 'Saltmarsh Dairy', city: 'Burlington, VT' },
+  { id: 'tidewater', name: 'Tidewater Supply', city: 'Norfolk, VA' },
+];
+
+/** Stands in for a request to the server, which answers after 600 ms. */
+function searchCustomers(query: string): Promise<Customer[]> {
+  const needle = query.trim().toLowerCase();
+  const found = DIRECTORY.filter((customer) => customer.name.toLowerCase().includes(needle));
+  return new Promise((resolve) => setTimeout(() => resolve(found), 600));
+}
+
+@Component({
+  selector: 'app-combobox-async-search',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Customer</label>
+      <sl-combobox
+        placeholder="Search 15 customers"
+        [filter]="null"
+        [inputValue]="query()"
+        [loading]="loading()"
+        [messages]="{ empty: emptyMessage() }"
+        (inputValueChange)="type($event)"
+      >
+        @for (customer of results(); track customer.id) {
+          <sl-combobox-item
+            [value]="customer.id"
+            [label]="customer.name"
+            [description]="customer.city"
+          />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxAsyncSearch {
+  protected readonly query = signal('');
+  protected readonly results = signal<Customer[]>([]);
+  protected readonly loading = signal(false);
+  protected readonly emptyMessage = computed(() =>
+    this.query().trim() === '' ? 'Type a name to search.' : 'No customer by that name.',
+  );
+  private debounce: ReturnType<typeof setTimeout> | undefined;
+  private latest = 0;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => clearTimeout(this.debounce));
+  }
+
+  protected type(text: string) {
+    this.query.set(text);
+    clearTimeout(this.debounce);
+    const request = ++this.latest;
+    if (text.trim() === '') {
+      this.results.set([]);
+      this.loading.set(false);
+      return;
+    }
+    this.loading.set(true);
+    this.debounce = setTimeout(() => {
+      void searchCustomers(text).then((found) => {
+        if (request !== this.latest) return;
+        this.results.set(found);
+        this.loading.set(false);
+      });
+    }, 250);
+  }
+}
+```
+
+### auto-highlight.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const UNITS = ['Each', 'Case of 6', 'Case of 12', 'Pallet', 'Kilogram', 'Pound', 'Meter', 'Liter'];
+
+@Component({
+  selector: 'app-combobox-auto-highlight',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Unit of measure</label>
+      <sl-combobox autoHighlight loop placeholder="Type “ca” and press Enter">
+        @for (unit of units; track unit) {
+          <sl-combobox-item [value]="unit" [label]="unit" />
+        }
+      </sl-combobox>
+      <span slFieldDescription>The first match is highlighted, so Enter takes it.</span>
+    </div>
+  `,
+})
+export class ComboboxAutoHighlight {
+  protected readonly units = UNITS;
+}
+```
+
+### controlled.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const PEOPLE = [
+  { id: 'avery', name: 'Avery Collins' },
+  { id: 'kenji', name: 'Kenji Watanabe' },
+  { id: 'lucia', name: 'Lucía Fernández' },
+  { id: 'ruth', name: 'Ruth Adeyemi' },
+  { id: 'tomasz', name: 'Tomasz Nowak' },
+];
+
+@Component({
+  selector: 'app-combobox-controlled',
+  imports: [SlButton, SlCombobox, SlComboboxItem, SlField, SlFieldLabel, SlInline, SlStack, SlText],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Reviewer</label>
+        <sl-combobox placeholder="Search people" [(inputValue)]="text" [(value)]="value">
+          @for (person of people; track person.id) {
+            <sl-combobox-item [value]="person.id" [label]="person.name" />
+          }
+        </sl-combobox>
+      </div>
+      <div slInline [gap]="3" align="center">
+        <button slButton size="sm" variant="outline" (click)="assignToMe()">Assign to me</button>
+        <span slText size="sm" tone="muted"
+          >Text “{{ text() }}” · Value {{ value() ?? 'none' }}</span
+        >
+      </div>
+    </div>
+  `,
+})
+export class ComboboxControlled {
+  protected readonly people = PEOPLE;
+  protected readonly text = signal('');
+  protected readonly value = signal<string | null>(null);
+
+  protected assignToMe() {
+    this.value.set('ruth');
+    this.text.set('Ruth Adeyemi');
+  }
+}
+```
+
+### country-picker.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxGroup, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const REGIONS = [
+  {
+    region: 'Americas',
+    countries: [
+      { code: 'BR', name: 'Brazil', detail: 'BRL · +55' },
+      { code: 'CA', name: 'Canada', detail: 'CAD · +1' },
+      { code: 'MX', name: 'Mexico', detail: 'MXN · +52' },
+      { code: 'US', name: 'United States', detail: 'USD · +1' },
+    ],
+  },
+  {
+    region: 'Europe',
+    countries: [
+      { code: 'FR', name: 'France', detail: 'EUR · +33' },
+      { code: 'DE', name: 'Germany', detail: 'EUR · +49' },
+      { code: 'PL', name: 'Poland', detail: 'PLN · +48' },
+      { code: 'CH', name: 'Switzerland', detail: 'CHF · +41' },
+      { code: 'TR', name: 'Türkiye', detail: 'TRY · +90' },
+      { code: 'GB', name: 'United Kingdom', detail: 'GBP · +44' },
+    ],
+  },
+  {
+    region: 'Asia Pacific',
+    countries: [
+      { code: 'AU', name: 'Australia', detail: 'AUD · +61' },
+      { code: 'JP', name: 'Japan', detail: 'JPY · +81' },
+      { code: 'SG', name: 'Singapore', detail: 'SGD · +65' },
+      { code: 'VN', name: 'Việt Nam', detail: 'VND · +84' },
+    ],
+  },
+  {
+    region: 'Middle East and Africa',
+    countries: [
+      { code: 'CI', name: 'Côte d’Ivoire', detail: 'XOF · +225' },
+      { code: 'EG', name: 'Egypt', detail: 'EGP · +20' },
+      { code: 'KE', name: 'Kenya', detail: 'KES · +254' },
+      { code: 'AE', name: 'United Arab Emirates', detail: 'AED · +971' },
+    ],
+  },
+];
+
+@Component({
+  selector: 'app-combobox-country-picker',
+  imports: [SlCombobox, SlComboboxGroup, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField required>
+      <label slFieldLabel>Country or region</label>
+      <sl-combobox autoHighlight name="country" placeholder="Search countries">
+        @for (group of regions; track group.region) {
+          <sl-combobox-group [label]="group.region">
+            @for (country of group.countries; track country.code) {
+              <sl-combobox-item
+                [value]="country.code"
+                [label]="country.name"
+                [description]="country.detail"
+              />
+            }
+          </sl-combobox-group>
+        }
+      </sl-combobox>
+      <span slFieldDescription>Sets the currency and the phone prefix on the invoice.</span>
+    </div>
+  `,
+})
+export class ComboboxCountryPicker {
+  protected readonly regions = REGIONS;
+}
+```
+
+### creatable.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const CATEGORIES = ['Apparel', 'Bags', 'Home', 'Kitchen', 'Stationery', 'Outdoor'];
+
+@Component({
+  selector: 'app-combobox-creatable',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Category</label>
+      <sl-combobox
+        creatable
+        placeholder="Type “Garden” to add it"
+        [(value)]="value"
+        (create)="create($event.query)"
+      >
+        @for (category of categories(); track category) {
+          <sl-combobox-item [value]="category" [label]="category" />
+        }
+      </sl-combobox>
+      <span slFieldDescription>{{ categories().length }} categories</span>
+    </div>
+  `,
+})
+export class ComboboxCreatable {
+  protected readonly categories = signal(CATEGORIES);
+  protected readonly value = signal<string | null>(null);
+
+  protected create(query: string) {
+    this.categories.update((held) => [...held, query]);
+    this.value.set(query);
+  }
+}
+```
+
+### custom-filter.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const PRODUCTS = [
+  { sku: 'KIT-1042', name: 'Cast-iron skillet' },
+  { sku: 'KIT-1043', name: 'Stoneware mug' },
+  { sku: 'BAG-2010', name: 'Canvas tote' },
+  { sku: 'BAG-2014', name: 'Trail daypack' },
+  { sku: 'HOM-4010', name: 'Wool throw' },
+  { sku: 'HOM-4014', name: 'Brass desk lamp' },
+  { sku: 'STA-3010', name: 'Field notebook' },
+];
+
+@Component({
+  selector: 'app-combobox-custom-filter',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>SKU</label>
+      <sl-combobox placeholder="KIT-, BAG-, HOM-…" [filter]="startsWith">
+        @for (product of products; track product.sku) {
+          <sl-combobox-item
+            [value]="product.sku"
+            [label]="product.sku"
+            [description]="product.name"
+          />
+        }
+      </sl-combobox>
+      <span slFieldDescription>Codes match from the first character, so “10” finds nothing.</span>
+    </div>
+  `,
+})
+export class ComboboxCustomFilter {
+  protected readonly products = PRODUCTS;
+  protected readonly startsWith = (label: string, query: string) =>
+    label.toLowerCase().startsWith(query.toLowerCase());
+}
+```
+
+### defaults.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { provideComboboxDefaults, SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+
+@Component({
+  selector: 'app-combobox-defaults',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel, SlStack],
+  providers: [provideComboboxDefaults({ variant: 'subtle', autoHighlight: true })],
+  template: `
+    <div slStack [gap]="4">
+      <div slField>
+        <label slFieldLabel>Warehouse</label>
+        <sl-combobox placeholder="Any warehouse">
+          @for (warehouse of warehouses; track warehouse) {
+            <sl-combobox-item [value]="warehouse" [label]="warehouse" />
+          }
+        </sl-combobox>
+      </div>
+      <div slField>
+        <label slFieldLabel>Carrier</label>
+        <sl-combobox placeholder="Any carrier">
+          @for (carrier of carriers; track carrier) {
+            <sl-combobox-item [value]="carrier" [label]="carrier" />
+          }
+        </sl-combobox>
+      </div>
+    </div>
+  `,
+})
+export class ComboboxAppDefaults {
+  protected readonly warehouses = WAREHOUSES;
+  protected readonly carriers = CARRIERS;
+}
+```
+
+### descriptions.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const WAREHOUSES = [
+  { code: 'RNO', city: 'Reno, NV', detail: 'West · same-day cutoff 2:00 pm PT' },
+  { code: 'CMH', city: 'Columbus, OH', detail: 'Midwest · same-day cutoff 3:00 pm ET' },
+  { code: 'SAV', city: 'Savannah, GA', detail: 'Southeast · port of entry for ocean freight' },
+  { code: 'DFW', city: 'Dallas, TX', detail: 'South · opens November 2026' },
+];
+
+@Component({
+  selector: 'app-combobox-descriptions',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Ship from</label>
+      <sl-combobox placeholder="Search warehouses">
+        @for (warehouse of warehouses; track warehouse.code) {
+          <sl-combobox-item
+            [value]="warehouse.code"
+            [label]="warehouse.city"
+            [description]="warehouse.detail"
+          />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxDescriptions {
+  protected readonly warehouses = WAREHOUSES;
+}
+```
+
+### disabled-options.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const SERVICES = [
+  { id: 'usps-priority', name: 'USPS Priority Mail', note: '1–3 business days', disabled: false },
+  { id: 'ups-ground', name: 'UPS Ground', note: '1–5 business days', disabled: false },
+  { id: 'fedex-2day', name: 'FedEx 2Day', note: '2 business days', disabled: false },
+  {
+    id: 'dhl-express',
+    name: 'DHL Express Worldwide',
+    note: 'International shipments only',
+    disabled: true,
+  },
+  { id: 'ups-next-day', name: 'UPS Next Day Air', note: 'Cutoff passed for today', disabled: true },
+];
+
+@Component({
+  selector: 'app-combobox-disabled-options',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Shipping service</label>
+      <sl-combobox placeholder="Search services">
+        @for (service of services; track service.id) {
+          <sl-combobox-item
+            [value]="service.id"
+            [label]="service.name"
+            [description]="service.note"
+            [disabled]="service.disabled"
+          />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxDisabledOptions {
+  protected readonly services = SERVICES;
+}
+```
+
+### field.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const OWNERS = ['Avery Collins', 'Kenji Watanabe', 'Lucía Fernández', 'Omar Haddad'];
+const COST_CENTERS = ['4100 Fulfilment', '4200 Customer care', '4300 Marketing'];
+
+@Component({
+  selector: 'app-combobox-field',
+  imports: [
+    SlCombobox,
+    SlComboboxItem,
+    SlField,
+    SlFieldDescription,
+    SlFieldError,
+    SlFieldLabel,
+    SlStack,
+  ],
+  template: `
+    <div slStack [gap]="5">
+      <div slField required>
+        <label slFieldLabel>Account manager</label>
+        <sl-combobox placeholder="Search people">
+          @for (owner of owners; track owner) {
+            <sl-combobox-item [value]="owner" [label]="owner" />
+          }
+        </sl-combobox>
+        <span slFieldDescription>Receives the renewal reminders for this account.</span>
+      </div>
+      <div slField invalid required>
+        <label slFieldLabel>Cost center</label>
+        <sl-combobox inputValue="4900">
+          @for (center of costCenters; track center) {
+            <sl-combobox-item [value]="center" [label]="center" />
+          }
+        </sl-combobox>
+        <span slFieldError>4900 is closed. Choose an open cost center.</span>
+      </div>
+    </div>
+  `,
+})
+export class ComboboxField {
+  protected readonly owners = OWNERS;
+  protected readonly costCenters = COST_CENTERS;
+}
+```
+
+### filter-facets.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlInline } from '@slotted/angular/inline';
+import { SlText } from '@slotted/angular/typography';
+
+type Facet = 'warehouse' | 'carrier' | 'owner';
+
+const WAREHOUSES = ['Reno, NV', 'Columbus, OH', 'Savannah, GA'];
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS'];
+const OWNERS = ['Avery Collins', 'Kenji Watanabe', 'Lucía Fernández', 'Omar Haddad'];
+
+const FACETS: { id: Facet; label: string; options: string[] }[] = [
+  { id: 'warehouse', label: 'Warehouse', options: WAREHOUSES },
+  { id: 'carrier', label: 'Carrier', options: CARRIERS },
+  { id: 'owner', label: 'Owner', options: OWNERS },
+];
+
+/** Open orders, counted per warehouse, carrier and owner. */
+const ORDERS = WAREHOUSES.flatMap((warehouse, w) =>
+  CARRIERS.flatMap((carrier, c) =>
+    OWNERS.map((owner, o) => ({ warehouse, carrier, owner, count: 1 + ((w + 2 * c + 3 * o) % 5) })),
+  ),
+);
+const TOTAL = ORDERS.reduce((sum, row) => sum + row.count, 0);
+
+const NONE: Record<Facet, string | null> = { warehouse: null, carrier: null, owner: null };
+const EMPTY: Record<Facet, string> = { warehouse: '', carrier: '', owner: '' };
+
+@Component({
+  selector: 'app-combobox-filter-facets',
+  imports: [SlButton, SlCombobox, SlComboboxItem, SlInline, SlText],
+  template: `
+    <div slInline [gap]="2" align="center" wrap="wrap">
+      @for (facet of facets; track facet.id) {
+        <sl-combobox
+          size="sm"
+          width="content"
+          [fullWidth]="false"
+          [aria-label]="facet.label"
+          [placeholder]="facet.label"
+          [value]="chosen()[facet.id]"
+          (valueChange)="choose(facet.id, $event)"
+          [inputValue]="texts()[facet.id]"
+          (inputValueChange)="type(facet.id, $event)"
+        >
+          @for (option of facet.options; track option) {
+            <sl-combobox-item [value]="option" [label]="option" />
+          }
+        </sl-combobox>
+      }
+      <button slButton size="sm" variant="ghost" [disabled]="active() === 0" (click)="clear()">
+        Clear filters
+      </button>
+      <span slText size="sm" tone="muted">{{ matching() }} of {{ total }} orders</span>
+    </div>
+  `,
+})
+export class ComboboxFilterFacets {
+  protected readonly facets = FACETS;
+  protected readonly total = TOTAL;
+  protected readonly chosen = signal(NONE);
+  protected readonly texts = signal(EMPTY);
+
+  protected readonly matching = computed(() =>
+    ORDERS.filter((row) =>
+      FACETS.every(
+        (facet) => this.chosen()[facet.id] === null || row[facet.id] === this.chosen()[facet.id],
+      ),
+    ).reduce((sum, row) => sum + row.count, 0),
+  );
+  protected readonly active = computed(
+    () => FACETS.filter((facet) => this.chosen()[facet.id] !== null).length,
+  );
+
+  protected choose(facet: Facet, value: string | null) {
+    this.chosen.update((held) => ({ ...held, [facet]: value }));
+  }
+
+  protected type(facet: Facet, text: string) {
+    this.texts.update((held) => ({ ...held, [facet]: text }));
+  }
+
+  protected clear() {
+    this.chosen.set(NONE);
+    this.texts.set(EMPTY);
+  }
+}
+```
+
+### global-search.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlCombobox, SlComboboxGroup, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlStack } from '@slotted/angular/stack';
+import { SlText } from '@slotted/angular/typography';
+
+const CUSTOMERS = [
+  { id: 'brightline', name: 'Brightline Studio', city: 'Portland, OR' },
+  { id: 'harbor-pine', name: 'Harbor & Pine', city: 'Seattle, WA' },
+  { id: 'northgate', name: 'Northgate Labs', city: 'Austin, TX' },
+];
+const ORDERS = [
+  { id: '10482', customer: 'Brightline Studio', total: '$1,284.00' },
+  { id: '10479', customer: 'Atlas Freight', total: '$356.40' },
+  { id: '10471', customer: 'Northgate Labs', total: '$2,910.15' },
+];
+const LABELS = new Map<string, string>([
+  ...CUSTOMERS.map((customer) => [`customer:${customer.id}`, customer.name] as const),
+  ...ORDERS.map((order) => [`order:${order.id}`, `Order ${order.id}`] as const),
+]);
+
+@Component({
+  selector: 'app-combobox-global-search',
+  imports: [SlCombobox, SlComboboxGroup, SlComboboxItem, SlStack, SlText],
+  template: `
+    <div slStack [gap]="3">
+      <sl-combobox
+        aria-label="Search Northwind"
+        openOn="focus"
+        placeholder="Search customers and orders"
+        size="sm"
+        (valueChange)="opened.set($event)"
+      >
+        <sl-combobox-group label="Customers">
+          @for (customer of customers; track customer.id) {
+            <sl-combobox-item
+              icon="person"
+              [value]="'customer:' + customer.id"
+              [label]="customer.name"
+              [description]="customer.city"
+            />
+          }
+        </sl-combobox-group>
+        <sl-combobox-group label="Orders">
+          @for (order of orders; track order.id) {
+            <sl-combobox-item
+              icon="file-text"
+              [value]="'order:' + order.id"
+              [label]="'Order ' + order.id"
+              [description]="order.customer + ' · ' + order.total"
+            />
+          }
+        </sl-combobox-group>
+      </sl-combobox>
+      <span slText size="sm" tone="muted">
+        @if (opened(); as key) {
+          Opening {{ labels.get(key) }}
+        } @else {
+          Focus the field to see every result.
+        }
+      </span>
+    </div>
+  `,
+})
+export class ComboboxGlobalSearch {
+  protected readonly customers = CUSTOMERS;
+  protected readonly orders = ORDERS;
+  protected readonly labels = LABELS;
+  protected readonly opened = signal<string | null>(null);
+}
+```
+
+### icons.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+import type { GlyphName } from '@slotted/angular/icon';
+
+const DOCUMENTS: { id: string; name: string; glyph: GlyphName }[] = [
+  { id: 'price-list', name: 'Q4 wholesale price list.xlsx', glyph: 'file-spreadsheet' },
+  { id: 'carrier-contract', name: 'Carrier contract 2026.pdf', glyph: 'file-text' },
+  { id: 'floor-plan', name: 'Reno floor plan.png', glyph: 'file-image' },
+  { id: 'returns-deck', name: 'Returns policy review.key', glyph: 'presentation' },
+  { id: 'product-photos', name: 'Autumn product photos.zip', glyph: 'file-archive' },
+];
+
+@Component({
+  selector: 'app-combobox-icons',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Attach a document</label>
+      <sl-combobox placeholder="Search shared files">
+        @for (document of documents; track document.id) {
+          <sl-combobox-item [value]="document.id" [label]="document.name" [icon]="document.glyph" />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxIcons {
+  protected readonly documents = DOCUMENTS;
+}
+```
+
+### inline-completion.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const TIME_ZONES = [
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'Europe/London',
+  'Europe/Berlin',
+  'Asia/Tokyo',
+  'Australia/Sydney',
+];
+
+@Component({
+  selector: 'app-combobox-inline-completion',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Time zone</label>
+      <sl-combobox autocomplete="both" placeholder="Type “eu” or “am”">
+        @for (zone of zones; track zone) {
+          <sl-combobox-item [value]="zone" [label]="zone" />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxInlineCompletion {
+  protected readonly zones = TIME_ZONES;
+}
+```
+
+### load-more.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const PRODUCTS = [
+  'Canvas tote',
+  'Merino beanie',
+  'Stoneware mug',
+  'Linen apron',
+  'Trail daypack',
+  'Wool throw',
+  'Ceramic planter',
+  'Field notebook',
+  'Rain shell',
+  'Leather wallet',
+  'Weekender bag',
+  'Cotton crewneck',
+  'Camp mug',
+  'Insulated bottle',
+  'Chambray shirt',
+  'Waffle towel',
+  'Beeswax candle',
+  'Rattan basket',
+  'Hiking socks',
+  'Down vest',
+  'Sketchbook',
+  'Wool blanket',
+  'Market crossbody',
+  'Felt slippers',
+];
+const COLORS = [
+  'Natural',
+  'Charcoal',
+  'Olive',
+  'Rust',
+  'Navy',
+  'Sand',
+  'Forest',
+  'Slate',
+  'Clay',
+  'Ink',
+];
+const SKUS = PRODUCTS.flatMap((product, row) =>
+  COLORS.map((color, column) => ({
+    sku: `NW-${1001 + row * COLORS.length + column}`,
+    label: `${product}, ${color}`,
+  })),
+);
+const PAGE = 30;
+
+@Component({
+  selector: 'app-combobox-load-more',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Variant</label>
+      <sl-combobox
+        placeholder="Search 240 SKUs"
+        [filter]="null"
+        [inputValue]="query()"
+        [loading]="loading()"
+        [total]="matching().length"
+        (inputValueChange)="type($event)"
+        (loadMore)="loadMore()"
+      >
+        @for (item of visible(); track item.sku; let index = $index) {
+          <sl-combobox-item
+            [value]="item.sku"
+            [label]="item.label"
+            [description]="item.sku"
+            [position]="index + 1"
+          />
+        }
+      </sl-combobox>
+      <span slFieldDescription>Thirty at a time; scrolling to the end fetches the next page.</span>
+    </div>
+  `,
+})
+export class ComboboxLoadMore {
+  protected readonly query = signal('');
+  protected readonly shown = signal(PAGE);
+  protected readonly loading = signal(false);
+  private request = 0;
+
+  /* The server's answer: every SKU whose label holds the query, a page at a time. */
+  protected readonly matching = computed(() => {
+    const needle = this.query().trim().toLowerCase();
+    return SKUS.filter((item) => item.label.toLowerCase().includes(needle));
+  });
+  protected readonly visible = computed(() => this.matching().slice(0, this.shown()));
+
+  protected type(text: string) {
+    this.request += 1;
+    this.query.set(text);
+    this.shown.set(PAGE);
+    this.loading.set(false);
+  }
+
+  protected loadMore() {
+    if (this.loading() || this.shown() >= this.matching().length) return;
+    const current = ++this.request;
+    this.loading.set(true);
+    setTimeout(() => {
+      if (current !== this.request) return;
+      this.shown.update((count) => count + PAGE);
+      this.loading.set(false);
+    }, 500);
+  }
+}
+```
+
+### long-labels.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const ACCOUNTS: { id: string; label: string; description?: string }[] = [
+  {
+    id: '4010',
+    label:
+      '4010 · Revenue, wholesale channel, net of returns, allowances and early-payment discounts',
+  },
+  { id: '4020', label: '4020 · Revenue, online store' },
+  {
+    id: 'urn',
+    label: 'urn:northwind:ledger:4030-9f2c41ab8de07c5511903fbe',
+    description: 'Imported from the previous ledger',
+  },
+  {
+    id: '5100',
+    label: '5100 · Cost of goods sold, including inbound freight and duties',
+    description: 'Posted when an order ships, at the weighted average cost of the warehouse',
+  },
+];
+
+@Component({
+  selector: 'app-combobox-long-labels',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Ledger account</label>
+      <sl-combobox placeholder="Search accounts">
+        @for (account of accounts; track account.id) {
+          <sl-combobox-item
+            [value]="account.id"
+            [label]="account.label"
+            [description]="account.description"
+          />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxLongLabels {
+  protected readonly accounts = ACCOUNTS;
+}
+```
+
+### long-list.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+
+const BINS = Array.from({ length: 240 }, (_, index) => {
+  const aisle = String(Math.floor(index / 20) + 1).padStart(2, '0');
+  const bay = String((index % 20) + 1).padStart(2, '0');
+  return { id: `A${aisle}-B${bay}`, detail: `Aisle ${Number(aisle)}, bay ${Number(bay)} · Reno` };
+});
+
+@Component({
+  selector: 'app-combobox-long-list',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Put-away bin</label>
+      <sl-combobox placeholder="Search 240 bins">
+        @for (bin of bins; track bin.id) {
+          <sl-combobox-item [value]="bin.id" [label]="bin.id" [description]="bin.detail" />
+        }
+      </sl-combobox>
+      <span slFieldDescription>Page Down and Page Up move ten bins at a time.</span>
+    </div>
+  `,
+})
+export class ComboboxLongList {
+  protected readonly bins = BINS;
+}
+```
+
+### messages.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS', 'OnTrac'];
+
+@Component({
+  selector: 'app-combobox-messages',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Carrier</label>
+      <sl-combobox placeholder="Type “royal mail”" [messages]="messages">
+        @for (carrier of carriers; track carrier) {
+          <sl-combobox-item [value]="carrier" [label]="carrier" />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxCustomMessages {
+  protected readonly carriers = CARRIERS;
+  protected readonly messages = {
+    clear: 'Clear carrier',
+    count: '{count, plural, one {# carrier} other {# carriers}}',
+    empty: 'No carrier by that name. Check the spelling on the label.',
+  };
+}
+```
+
+### open-on.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import type { ComboboxOpenOn } from '@slotted/angular/combobox';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const MODES: { openOn: ComboboxOpenOn; label: string; hint: string }[] = [
+  { openOn: 'input', label: 'Opens on typing', hint: 'Typing or a press on the field opens it.' },
+  { openOn: 'focus', label: 'Opens on focus', hint: 'Every focus opens it, Tab included.' },
+  {
+    openOn: 'manual',
+    label: 'Opens on request',
+    hint: 'Only the button and the arrow keys open it.',
+  },
+];
+
+const CHANNELS = ['Online store', 'Wholesale portal', 'Marketplace', 'Retail partners'];
+
+@Component({
+  selector: 'app-combobox-open-on',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldDescription, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="5">
+      @for (mode of modes; track mode.openOn) {
+        <div slField>
+          <label slFieldLabel>{{ mode.label }}</label>
+          <sl-combobox placeholder="Sales channel" [openOn]="mode.openOn">
+            @for (channel of channels; track channel) {
+              <sl-combobox-item [value]="channel" [label]="channel" />
+            }
+          </sl-combobox>
+          <span slFieldDescription>{{ mode.hint }}</span>
+        </div>
+      }
+    </div>
+  `,
+})
+export class ComboboxOpening {
+  protected readonly modes = MODES;
+  protected readonly channels = CHANNELS;
+}
+```
+
+### search-error.ts
+
+Example
+
+```ts
+import { Component, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlStack } from '@slotted/angular/stack';
+
+const CARRIERS = ['UPS', 'FedEx', 'DHL', 'USPS', 'OnTrac', 'LaserShip'];
+
+/** Stands in for a rate service that fails its first request and answers after. */
+let outage = true;
+function searchCarriers(query: string): Promise<string[]> {
+  const needle = query.trim().toLowerCase();
+  return new Promise((resolve, reject) =>
+    setTimeout(() => {
+      if (outage) {
+        outage = false;
+        reject(new Error('The rate service did not answer.'));
+        return;
+      }
+      resolve(CARRIERS.filter((carrier) => carrier.toLowerCase().includes(needle)));
+    }, 500),
+  );
+}
+
+@Component({
+  selector: 'app-combobox-search-error',
+  imports: [SlButton, SlCombobox, SlComboboxItem, SlField, SlFieldError, SlFieldLabel, SlStack],
+  template: `
+    <div slStack [gap]="3">
+      <div slField [invalid]="failed()">
+        <label slFieldLabel>Carrier</label>
+        <sl-combobox
+          placeholder="Search carriers"
+          [filter]="null"
+          [inputValue]="query()"
+          [loading]="loading()"
+          [messages]="{ empty: failed() ? 'Rates are unavailable.' : 'No carrier by that name.' }"
+          (inputValueChange)="type($event)"
+        >
+          @for (carrier of results(); track carrier) {
+            <sl-combobox-item [value]="carrier" [label]="carrier" />
+          }
+        </sl-combobox>
+        @if (failed()) {
+          <span slFieldError>The rate service did not answer. Your text is kept.</span>
+        }
+      </div>
+      @if (failed()) {
+        <div>
+          <button slButton size="sm" variant="outline" (click)="search(query())">Retry</button>
+        </div>
+      }
+    </div>
+  `,
+})
+export class ComboboxSearchError {
+  protected readonly query = signal('');
+  protected readonly results = signal<string[]>([]);
+  protected readonly loading = signal(false);
+  protected readonly failed = signal(false);
+  private latest = 0;
+
+  protected search(text: string) {
+    const request = ++this.latest;
+    this.loading.set(true);
+    this.failed.set(false);
+    searchCarriers(text).then(
+      (found) => {
+        if (request !== this.latest) return;
+        this.results.set(found);
+        this.loading.set(false);
+      },
+      () => {
+        if (request !== this.latest) return;
+        this.results.set([]);
+        this.failed.set(true);
+        this.loading.set(false);
+      },
+    );
+  }
+
+  protected type(text: string) {
+    this.query.set(text);
+    if (text.trim() !== '') this.search(text);
+  }
+}
+```
+
+### width.ts
+
+Example
+
+```ts
+import { Component } from '@angular/core';
+import { SlCombobox, SlComboboxItem } from '@slotted/angular/combobox';
+import { SlField, SlFieldLabel } from '@slotted/angular/field';
+
+const ZONES = [
+  { id: 'pacific', label: '(UTC−08:00) Pacific Time — Los Angeles, Vancouver' },
+  { id: 'mountain', label: '(UTC−07:00) Mountain Time — Denver, Calgary' },
+  { id: 'central', label: '(UTC−06:00) Central Time — Chicago, Mexico City' },
+  { id: 'eastern', label: '(UTC−05:00) Eastern Time — New York, Toronto' },
+  { id: 'london', label: '(UTC+00:00) Greenwich Mean Time — London, Lisbon' },
+];
+
+@Component({
+  selector: 'app-combobox-width',
+  imports: [SlCombobox, SlComboboxItem, SlField, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Report time zone</label>
+      <sl-combobox placeholder="Search zones" [fullWidth]="false" width="content">
+        @for (zone of zones; track zone.id) {
+          <sl-combobox-item [value]="zone.id" [label]="zone.label" />
+        }
+      </sl-combobox>
+    </div>
+  `,
+})
+export class ComboboxPopupWidth {
+  protected readonly zones = ZONES;
+}
+```