ngwr 15.2.0 → 15.3.0

package/fesm2022/ngwr-select.mjs

@@ -4,13 +4,52 @@ import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coerci
 import { NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { useI18nFormatter, useI18nText } from "ngwr/i18n";
 import { isComposing, randomId, toClassList } from "ngwr/utils";
+import { WrSpinner } from "ngwr/spinner";
 import { Directionality } from "@angular/cdk/bidi";
 import { ScrollStrategyOptions } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { WR_FORM_FIELD, useFormFieldAria } from "ngwr/form";
 import { WR_OVERLAY, WrOutsideClick, wrFollowDirection } from "ngwr/overlay";
-import { catchError, debounce, defer, finalize, from, isObservable, of, skip, switchMap, tap, timer } from "rxjs";
+import { Subject, catchError, debounce, defer, finalize, from, isObservable, map, merge, of, skip, switchMap, tap, timer } from "rxjs";
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+var WrSelectLoadError = class WrSelectLoadError {
+	template = inject(TemplateRef);
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WrSelectLoadError,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		type: WrSelectLoadError,
+		isStandalone: true,
+		selector: "ng-template[wrSelectLoadError]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: WrSelectLoadError,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[wrSelectLoadError]" }]
+	}]
+});
 /**
 * @license
 *
@@ -370,8 +409,16 @@ var WrSelect = class WrSelect {
 	});
 	noResultsText = input(null, ...ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []);
 	loadingText = input(null, ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
+	loadErrorText = input(null, ...ngDevMode ? [{ debugName: "loadErrorText" }] : /* istanbul ignore next */ []);
+	retryable = input(false, {
+		...ngDevMode ? { debugName: "retryable" } : /* istanbul ignore next */ {},
+		transform: coerceBooleanProperty
+	});
+	retryText = input(null, ...ngDevMode ? [{ debugName: "retryText" }] : /* istanbul ignore next */ []);
 	resolvedNoResults = useI18nText(this.noResultsText, "select.noResults", "No results");
 	resolvedLoading = useI18nText(this.loadingText, "select.loading", "Loading…");
+	resolvedLoadError = useI18nText(this.loadErrorText, "select.loadError", "Could not load results");
+	resolvedRetry = useI18nText(this.retryText, "select.retry", "Try again");
 	searchChange = output();
 	loading = input(false, {
 		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
@@ -380,6 +427,11 @@ var WrSelect = class WrSelect {
 	loadedOptions = signal([], ...ngDevMode ? [{ debugName: "loadedOptions" }] : /* istanbul ignore next */ []);
 	loaderLoading = signal(false, ...ngDevMode ? [{ debugName: "loaderLoading" }] : /* istanbul ignore next */ []);
 	isLoading = computed(() => this.loading() || this.loaderLoading(), ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
+	failedQuery = signal(null, ...ngDevMode ? [{ debugName: "failedQuery" }] : /* istanbul ignore next */ []);
+	loadErrorValue = signal(null, ...ngDevMode ? [{ debugName: "loadErrorValue" }] : /* istanbul ignore next */ []);
+	retrying = signal(false, ...ngDevMode ? [{ debugName: "retrying" }] : /* istanbul ignore next */ []);
+	loadFailed = computed(() => this.failedQuery() === this.searchQuery(), ...ngDevMode ? [{ debugName: "loadFailed" }] : /* istanbul ignore next */ []);
+	retryRequests = new Subject();
 	separators = input(["Enter", ","], ...ngDevMode ? [{ debugName: "separators" }] : /* istanbul ignore next */ []);
 	allowDuplicates = input(false, {
 		...ngDevMode ? { debugName: "allowDuplicates" } : /* istanbul ignore next */ {},
@@ -418,6 +470,7 @@ var WrSelect = class WrSelect {
 	}, ...ngDevMode ? [{ debugName: "orderedRegistry" }] : /* istanbul ignore next */ []);
 	activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
 	activeOptionId = computed(() => {
+		if (this.retryOffered() && !this.freeText()) return this.retryRowId;
 		const idx = this.activeIndex();
 		if (this.virtualActive()) {
 			const { start, end } = this.virtualWindow();
@@ -616,10 +669,25 @@ var WrSelect = class WrSelect {
 	}, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
 	meetsMinChars = computed(() => !this.isSearchable() || this.searchQuery().trim().length >= this.minChars(), ...ngDevMode ? [{ debugName: "meetsMinChars" }] : /* istanbul ignore next */ []);
 	hasNoResults = computed(() => {
-		if (!this.isSearchable() || !this.open() || this.isLoading()) return false;
+		if (!this.isSearchable() || !this.open() || this.isLoading() || this.loadFailed()) return false;
 		if (this.searchQuery().trim().length < this.minChars()) return false;
 		return this.visibleCount() === 0;
 	}, ...ngDevMode ? [{ debugName: "hasNoResults" }] : /* istanbul ignore next */ []);
+	showLoadError = computed(() => this.isSearchable() && this.open() && this.loadFailed() && (!this.isLoading() || this.retrying()), ...ngDevMode ? [{ debugName: "showLoadError" }] : /* istanbul ignore next */ []);
+	loadErrorTpl = contentChild(WrSelectLoadError, {
+		...ngDevMode ? { debugName: "loadErrorTpl" } : /* istanbul ignore next */ {},
+		descendants: false
+	});
+	loadErrorContext = computed(() => ({
+		$implicit: this.loadErrorValue(),
+		query: this.failedQuery() ?? "",
+		canRetry: this.retryOffered(),
+		retry: this.retryFn,
+		retrying: this.retrying()
+	}), ...ngDevMode ? [{ debugName: "loadErrorContext" }] : /* istanbul ignore next */ []);
+	retryFn = () => this.onLoadErrorClick();
+	retryOffered = computed(() => this.retryable() && this.showLoadError() && this.visibleCount() === 0, ...ngDevMode ? [{ debugName: "retryOffered" }] : /* istanbul ignore next */ []);
+	retryRowId = `${this.listboxId}-retry`;
 	isOptionHidden(label) {
 		if (!this.isSearchable() || !this.clientFilter()) return false;
 		const q = this.searchQuery().trim().toLowerCase();
@@ -709,6 +777,11 @@ var WrSelect = class WrSelect {
 	}
 	onSearchKey(event) {
 		if (this.imeOwnsKey(event)) return;
+		if (event.key === "Enter" && this.retryOffered() && !this.freeText()) {
+			event.preventDefault();
+			this.retryLoad();
+			return;
+		}
 		if (event.key === "Enter" && this.freeText() && this.open()) {
 			const q = this.searchQuery().trim();
 			const idx = this.activeIndex();
@@ -769,17 +842,43 @@ var WrSelect = class WrSelect {
 		debouncedQuery.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((query) => {
 			if (this.isSearchable()) this.searchChange.emit(query);
 		});
-		debouncedQuery.pipe(switchMap((query) => {
+		merge(debouncedQuery.pipe(map((query) => ({
+			query,
+			retry: false
+		}))), this.retryRequests.pipe(map(() => ({
+			query: this.failedQuery() ?? this.searchQuery(),
+			retry: true
+		})))).pipe(switchMap(({ query, retry }) => {
 			const loader = this.loader();
 			if (!loader || !this.isSearchable() || query.length < this.minChars()) {
 				this.loaderLoading.set(false);
+				this.retrying.set(false);
+				this.failedQuery.set(null);
 				return of([]);
 			}
+			this.retrying.set(retry);
+			if (!retry) this.failedQuery.set(null);
+			let settled = false;
 			this.loaderLoading.set(true);
 			return defer(() => {
 				const result = loader(query);
 				return isObservable(result) ? result : from(Promise.resolve(result));
-			}).pipe(tap(() => this.loaderLoading.set(false)), catchError(() => of([])), finalize(() => this.loaderLoading.set(false)));
+			}).pipe(tap(() => {
+				settled = true;
+				this.loaderLoading.set(false);
+				this.failedQuery.set(null);
+				this.retrying.set(false);
+			}), catchError((error) => {
+				settled = true;
+				this.failedQuery.set(query);
+				this.loadErrorValue.set(error);
+				this.retrying.set(false);
+				return of([]);
+			}), finalize(() => {
+				this.loaderLoading.set(false);
+				this.retrying.set(false);
+				if (retry && !settled) this.failedQuery.set(null);
+			}));
 		}), takeUntilDestroyed(this.destroyRef)).subscribe((items) => this.loadedOptions.set(items));
 		effect((onCleanup) => {
 			if (!isPlatformBrowser(this.platformId)) return;
@@ -823,6 +922,13 @@ var WrSelect = class WrSelect {
 		if (this.isMulti()) return this.asArray(this.value()).includes(value);
 		return this.value() === value;
 	}
+	retryLoad() {
+		if (this.retrying()) return;
+		this.retryRequests.next();
+	}
+	onLoadErrorClick() {
+		if (this.retryOffered()) this.retryLoad();
+	}
 	selectOption(value) {
 		if (this.isReadonly()) return;
 		if (this.isMulti()) {
@@ -1257,6 +1363,27 @@ var WrSelect = class WrSelect {
 				isRequired: false,
 				transformFunction: null
 			},
+			loadErrorText: {
+				classPropertyName: "loadErrorText",
+				publicName: "loadErrorText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			retryable: {
+				classPropertyName: "retryable",
+				publicName: "retryable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			retryText: {
+				classPropertyName: "retryText",
+				publicName: "retryText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			loading: {
 				classPropertyName: "loading",
 				publicName: "loading",
@@ -1332,17 +1459,26 @@ var WrSelect = class WrSelect {
 			provide: WR_SELECT,
 			useExisting: forwardRef(() => WrSelect)
 		}],
-		queries: [{
-			propertyName: "defaultLeading",
-			first: true,
-			predicate: WrOptionLeading,
-			isSignal: true
-		}, {
-			propertyName: "projectedOptions",
-			predicate: WrOption,
-			descendants: true,
-			isSignal: true
-		}],
+		queries: [
+			{
+				propertyName: "defaultLeading",
+				first: true,
+				predicate: WrOptionLeading,
+				isSignal: true
+			},
+			{
+				propertyName: "projectedOptions",
+				predicate: WrOption,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "loadErrorTpl",
+				first: true,
+				predicate: WrSelectLoadError,
+				isSignal: true
+			}
+		],
 		viewQueries: [
 			{
 				propertyName: "panelTpl",
@@ -1375,26 +1511,35 @@ var WrSelect = class WrSelect {
 			}
 		],
 		ngImport: i0,
-		template: "@if (isSearchTrigger()) {\n  <!-- Search mode (or a searchable single): a real text input drives a filtered\n       overlay panel. The wrapper isn't itself focusable — the input is the\n       tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <!-- The selected option's leading visual, before the field — the same class\n         and the same `placement: 'value'` the button trigger uses, because it is\n         the same surface and a consumer who styled one should not have to learn\n         a second name. `searchLeading()` draws it only while the field is\n         showing the VALUE, so it never stands in front of a query or a bare\n         placeholder, and it sits OUTSIDE the input for the obvious reason: an\n         `<input>` holds a string. `aria-hidden` keeps it out of the combobox's\n         name, which is `resolvedAriaLabel()`, and out of its value, which is the\n         input's own text. -->\n    @if (searchLeading(); as leading) {\n      <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"leading\"\n          [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n        />\n      </span>\n    }\n    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one — see `controlId` in the\n         component. They go on the tab stop, the only labelable element here.\n         `aria-label` is the trigger's name and belongs on the same element for\n         the same reason: this input carries `role=\"combobox\"`, and the four\n         other trigger shapes all bind `resolvedAriaLabel()`. Without it a\n         search select with no placeholder rendered a combobox with no name at\n         all — the one shape where the documented `ariaLabel` input reached\n         nothing. -->\n    <!-- `aria-autocomplete` is static, and `list` rather than `both`: the panel\n         is the only place a suggestion appears, nothing is written back into\n         the field for the user. It describes a permanent CAPABILITY, which is\n         why it does not track `open()` — the same reasoning `wr-mention`\n         records at its own host binding. -->\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.id]=\"controlId()\"\n      [attr.aria-label]=\"nameLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [attr.aria-readonly]=\"isReadonly() || null\"\n      [readonly]=\"isReadonly()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onSearchBlur()\"\n    />\n    <!-- Pointer-only, and the `keydown.enter` / `keydown.space` pair this used to\n         carry was dead code rather than the keyboard path it looked like: the ×\n         is `tabindex=\"-1\"` with no roving owner, so no key event ever originates\n         here to bubble into a handler. It stays unfocusable because the same\n         span sits inside the BUTTON trigger further down, where a focusable\n         child is `nested-interactive` — the defect the window taskbar's close\n         button already taught this repo. The keyboard reaches the function\n         instead: Backspace on the empty field, which `onSearchKey` routes to\n         `clearAll` for a single and to the last chip for a multi. -->\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag() || hasChipSearch()) {\n  <!-- Chip trigger — tag mode, or a searchable multi. A focusable input lives\n       inside, so the wrapper itself only exists to host chips and forward\n       whitespace clicks to the input. Tag mode needs no role (users tab\n       straight into the input); the searchable multi is a real combobox, so it\n       carries the listbox wiring. The click handler is a mouse-only\n       convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          @if (chip.leading; as leading) {\n            <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n              <ng-container\n                [ngTemplateOutlet]=\"leading\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n              />\n            </span>\n          }\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          @if (!isReadonly()) {\n            <span\n              class=\"wr-select__chip-remove\"\n              role=\"button\"\n              [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n              tabindex=\"-1\"\n              (click)=\"removeChip($index, $event)\"\n            >\n              <svg\n                class=\"wr-icon__svg\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </span>\n          }\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n      }\n      <!-- At `maxItems` this input goes READONLY, never disabled: it is the only\n           tab stop in the whole control (the chip × and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all — and Backspace on an empty draft, the one\n           keyboard way back UNDER the cap, is bound to this very element. It was\n           never needed as enforcement either: `tryAddTag` already refuses past\n           capacity. -->\n      <!-- `aria-autocomplete` is conditional here, unlike the search input's:\n           this field is only a combobox when a panel backs it. In plain tag\n           mode there is no popup to suggest from, and claiming otherwise\n           describes a control that does not exist. -->\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"nameLabel()\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        spellcheck=\"false\"\n        [value]=\"hasChipSearch() ? searchQuery() : draft()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"isReadonly() || (isTag() && atCapacity())\"\n        [attr.aria-readonly]=\"hasChipSearch() && isReadonly() ? true : null\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        [attr.role]=\"hasChipSearch() ? 'combobox' : null\"\n        [attr.aria-haspopup]=\"hasChipSearch() ? 'listbox' : null\"\n        [attr.aria-autocomplete]=\"hasChipSearch() ? 'list' : null\"\n        [attr.aria-expanded]=\"hasChipSearch() ? open() : null\"\n        [attr.aria-controls]=\"hasChipSearch() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"hasChipSearch() && open() ? activeOptionId() || null : null\"\n        (input)=\"onChipsInput($event)\"\n        (keydown)=\"onChipsKeydown($event)\"\n        (paste)=\"onChipsPaste($event)\"\n        (focus)=\"onChipsFocus()\"\n        (blur)=\"onChipsBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Only for the searchable MULTI, never for tag mode. The two share this\n         trigger and differ in the one thing a chevron stands for: the searchable\n         multi's input is a `role=\"combobox\"` with `aria-haspopup=\"listbox\"` and\n         a panel of options behind it, while tag mode takes free text and has no\n         popup at all. Folding the second into this branch left it as the only\n         combobox shape in the component with no affordance saying it opens —\n         `mode=\"search\"` has one, a searchable single has one, the button trigger\n         has one, and this one rendered a bare field. -->\n    @if (hasChipSearch()) {\n      <svg\n        class=\"wr-icon__svg wr-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    }\n  </div>\n} @else {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"nameLabel()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    [attr.aria-readonly]=\"isReadonly() || null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"touch.emit()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <!-- A selected chip draws its option's leading visual — one copy per\n                   VISIBLE chip, so `maxTagCount` caps these too. -->\n              @if (chip.leading; as leading) {\n                <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"leading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n                  />\n                </span>\n              }\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              @if (!isReadonly()) {\n                <span\n                  class=\"wr-select__chip-remove\"\n                  role=\"button\"\n                  [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                  tabindex=\"-1\"\n                  (click)=\"removeChip($index, $event)\"\n                >\n                  <svg\n                    class=\"wr-icon__svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M18 6 6 18\" />\n                    <path d=\"m6 6 12 12\" />\n                  </svg>\n                </span>\n              }\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <!-- Beside the label, not inside it: the harness and the accessible name\n             both read `.wr-select__value`, and the visual says nothing either should. -->\n        @if (selectedLeading(); as leading) {\n          <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n            <ng-container\n              [ngTemplateOutlet]=\"leading\"\n              [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n            />\n          </span>\n        }\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  >\n    <!-- `aria-busy` belongs on the listbox, not on this row: it is the container\n         whose required `option` children are temporarily missing, and a global\n         ARIA attribute on a role-less child makes that child an owned element the\n         listbox may not own (axe `aria-required-children`, critical). Plain text\n         inside the listbox is fine — only ELEMENTS are checked. -->\n    @if (isLoading()) {\n      <div class=\"wr-select-panel__loading\">{{ resolvedLoading() }}</div>\n    }\n\n    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [class.wr-option--disabled]=\"atMaxItems() && !isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-disabled]=\"atMaxItems() && !isSelected(entry.item) ? true : null\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            <!-- Only the select-wide template reaches a virtual row — there is no\n                 `<wr-option>` here to declare one — and only rows inside the\n                 rendered window instantiate it. -->\n            @if (optionLeading(); as leading) {\n              <span class=\"wr-option__leading\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"leading\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item, placement: 'option' }\"\n                />\n              </span>\n            }\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\n      <!-- Dynamic options from [options] or async [loader] (search mode).\n           Rendered as wr-option so the standard registration / filter\n           pipeline applies uniformly. -->\n      @for (item of dynamicOptions(); track $index) {\n        <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n      }\n    }\n\n    <!-- Projected static options — always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\n    <ng-content />\n\n    <!-- A listbox may only own `option` and `group` children, and as a bare `<div>`\n         this row was the only thing in the tree when it showed — an\n         `aria-required-children` critical. It cannot move out of the listbox the\n         way the command palette's does: this element IS the listbox, and the id\n         the trigger's `aria-controls` names is what gives it its accessible name.\n         So it announces as a disabled option instead. Keyboard navigation skips\n         it for free — arrow keys walk the registered `wr-option`s, and nothing\n         registers this row. -->\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">\n        {{ resolvedNoResults() }}\n      </div>\n    }\n  </div>\n</ng-template>\n",
-		dependencies: [{
-			kind: "component",
-			type: WrOption,
-			selector: "wr-option",
-			inputs: [
-				"value",
-				"disabled",
-				"label"
-			]
-		}, {
-			kind: "directive",
-			type: NgTemplateOutlet,
-			selector: "[ngTemplateOutlet]",
-			inputs: [
-				"ngTemplateOutletContext",
-				"ngTemplateOutlet",
-				"ngTemplateOutletInjector"
-			]
-		}],
+		template: "@if (isSearchTrigger()) {\n  <!-- Search mode (or a searchable single): a real text input drives a filtered\n       overlay panel. The wrapper isn't itself focusable — the input is the\n       tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <!-- The selected option's leading visual, before the field — the same class\n         and the same `placement: 'value'` the button trigger uses, because it is\n         the same surface and a consumer who styled one should not have to learn\n         a second name. `searchLeading()` draws it only while the field is\n         showing the VALUE, so it never stands in front of a query or a bare\n         placeholder, and it sits OUTSIDE the input for the obvious reason: an\n         `<input>` holds a string. `aria-hidden` keeps it out of the combobox's\n         name, which is `resolvedAriaLabel()`, and out of its value, which is the\n         input's own text. -->\n    @if (searchLeading(); as leading) {\n      <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"leading\"\n          [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n        />\n      </span>\n    }\n    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one — see `controlId` in the\n         component. They go on the tab stop, the only labelable element here.\n         `aria-label` is the trigger's name and belongs on the same element for\n         the same reason: this input carries `role=\"combobox\"`, and the four\n         other trigger shapes all bind `resolvedAriaLabel()`. Without it a\n         search select with no placeholder rendered a combobox with no name at\n         all — the one shape where the documented `ariaLabel` input reached\n         nothing. -->\n    <!-- `aria-autocomplete` is static, and `list` rather than `both`: the panel\n         is the only place a suggestion appears, nothing is written back into\n         the field for the user. It describes a permanent CAPABILITY, which is\n         why it does not track `open()` — the same reasoning `wr-mention`\n         records at its own host binding. -->\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.id]=\"controlId()\"\n      [attr.aria-label]=\"nameLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [attr.aria-readonly]=\"isReadonly() || null\"\n      [readonly]=\"isReadonly()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onSearchBlur()\"\n    />\n    <!-- Pointer-only, and the `keydown.enter` / `keydown.space` pair this used to\n         carry was dead code rather than the keyboard path it looked like: the ×\n         is `tabindex=\"-1\"` with no roving owner, so no key event ever originates\n         here to bubble into a handler. It stays unfocusable because the same\n         span sits inside the BUTTON trigger further down, where a focusable\n         child is `nested-interactive` — the defect the window taskbar's close\n         button already taught this repo. The keyboard reaches the function\n         instead: Backspace on the empty field, which `onSearchKey` routes to\n         `clearAll` for a single and to the last chip for a multi. -->\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag() || hasChipSearch()) {\n  <!-- Chip trigger — tag mode, or a searchable multi. A focusable input lives\n       inside, so the wrapper itself only exists to host chips and forward\n       whitespace clicks to the input. Tag mode needs no role (users tab\n       straight into the input); the searchable multi is a real combobox, so it\n       carries the listbox wiring. The click handler is a mouse-only\n       convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          @if (chip.leading; as leading) {\n            <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n              <ng-container\n                [ngTemplateOutlet]=\"leading\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n              />\n            </span>\n          }\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          @if (!isReadonly()) {\n            <span\n              class=\"wr-select__chip-remove\"\n              role=\"button\"\n              [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n              tabindex=\"-1\"\n              (click)=\"removeChip($index, $event)\"\n            >\n              <svg\n                class=\"wr-icon__svg\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </span>\n          }\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n      }\n      <!-- At `maxItems` this input goes READONLY, never disabled: it is the only\n           tab stop in the whole control (the chip × and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all — and Backspace on an empty draft, the one\n           keyboard way back UNDER the cap, is bound to this very element. It was\n           never needed as enforcement either: `tryAddTag` already refuses past\n           capacity. -->\n      <!-- `aria-autocomplete` is conditional here, unlike the search input's:\n           this field is only a combobox when a panel backs it. In plain tag\n           mode there is no popup to suggest from, and claiming otherwise\n           describes a control that does not exist. -->\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"nameLabel()\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        spellcheck=\"false\"\n        [value]=\"hasChipSearch() ? searchQuery() : draft()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"isReadonly() || (isTag() && atCapacity())\"\n        [attr.aria-readonly]=\"hasChipSearch() && isReadonly() ? true : null\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        [attr.role]=\"hasChipSearch() ? 'combobox' : null\"\n        [attr.aria-haspopup]=\"hasChipSearch() ? 'listbox' : null\"\n        [attr.aria-autocomplete]=\"hasChipSearch() ? 'list' : null\"\n        [attr.aria-expanded]=\"hasChipSearch() ? open() : null\"\n        [attr.aria-controls]=\"hasChipSearch() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"hasChipSearch() && open() ? activeOptionId() || null : null\"\n        (input)=\"onChipsInput($event)\"\n        (keydown)=\"onChipsKeydown($event)\"\n        (paste)=\"onChipsPaste($event)\"\n        (focus)=\"onChipsFocus()\"\n        (blur)=\"onChipsBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Only for the searchable MULTI, never for tag mode. The two share this\n         trigger and differ in the one thing a chevron stands for: the searchable\n         multi's input is a `role=\"combobox\"` with `aria-haspopup=\"listbox\"` and\n         a panel of options behind it, while tag mode takes free text and has no\n         popup at all. Folding the second into this branch left it as the only\n         combobox shape in the component with no affordance saying it opens —\n         `mode=\"search\"` has one, a searchable single has one, the button trigger\n         has one, and this one rendered a bare field. -->\n    @if (hasChipSearch()) {\n      <svg\n        class=\"wr-icon__svg wr-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    }\n  </div>\n} @else {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"nameLabel()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    [attr.aria-readonly]=\"isReadonly() || null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"touch.emit()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <!-- A selected chip draws its option's leading visual — one copy per\n                   VISIBLE chip, so `maxTagCount` caps these too. -->\n              @if (chip.leading; as leading) {\n                <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"leading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n                  />\n                </span>\n              }\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              @if (!isReadonly()) {\n                <span\n                  class=\"wr-select__chip-remove\"\n                  role=\"button\"\n                  [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                  tabindex=\"-1\"\n                  (click)=\"removeChip($index, $event)\"\n                >\n                  <svg\n                    class=\"wr-icon__svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M18 6 6 18\" />\n                    <path d=\"m6 6 12 12\" />\n                  </svg>\n                </span>\n              }\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <!-- Beside the label, not inside it: the harness and the accessible name\n             both read `.wr-select__value`, and the visual says nothing either should. -->\n        @if (selectedLeading(); as leading) {\n          <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n            <ng-container\n              [ngTemplateOutlet]=\"leading\"\n              [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n            />\n          </span>\n        }\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  >\n    <!-- `aria-busy` belongs on the listbox, not on this row: it is the container\n         whose required `option` children are temporarily missing, and a global\n         ARIA attribute on a role-less child makes that child an owned element the\n         listbox may not own (axe `aria-required-children`, critical). Plain text\n         inside the listbox is fine — only ELEMENTS are checked. -->\n    <!-- While the error row is up, through a retry, it carries the loader. -->\n    @if (isLoading() && !showLoadError()) {\n      <div class=\"wr-select-panel__loading\">{{ resolvedLoading() }}</div>\n    }\n\n    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [class.wr-option--disabled]=\"atMaxItems() && !isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-disabled]=\"atMaxItems() && !isSelected(entry.item) ? true : null\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            <!-- Only the select-wide template reaches a virtual row — there is no\n                 `<wr-option>` here to declare one — and only rows inside the\n                 rendered window instantiate it. -->\n            @if (optionLeading(); as leading) {\n              <span class=\"wr-option__leading\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"leading\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item, placement: 'option' }\"\n                />\n              </span>\n            }\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\n      <!-- Dynamic options from [options] or async [loader] (search mode).\n           Rendered as wr-option so the standard registration / filter\n           pipeline applies uniformly. -->\n      @for (item of dynamicOptions(); track $index) {\n        <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n      }\n    }\n\n    <!-- Projected static options — always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\n    <ng-content />\n\n    <!-- A listbox may only own `option` and `group` children, and as a bare `<div>`\n         this row was the only thing in the tree when it showed — an\n         `aria-required-children` critical. It cannot move out of the listbox the\n         way the command palette's does: this element IS the listbox, and the id\n         the trigger's `aria-controls` names is what gives it its accessible name.\n         So it announces as a disabled option instead. Keyboard navigation skips\n         it for free — arrow keys walk the registered `wr-option`s, and nothing\n         registers this row. -->\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">\n        {{ resolvedNoResults() }}\n      </div>\n    }\n\n    <!-- A failed load, in place of \"no results\". An option for the same reason as\n         that row. While it offers a retry it is the option that runs the loader\n         again: the field's aria-activedescendant names it, Enter there reaches it,\n         and mousedown keeps focus in the field. The retry is DRAWN as a button but\n         cannot be one, since a button inside an option is nested interactive\n         content; it wears `.wr-btn` and takes the click. -->\n    @if (showLoadError()) {\n      <div\n        class=\"wr-select-panel__error\"\n        [class.wr-select-panel__error--retryable]=\"retryOffered()\"\n        [class.wr-select-panel__error--active]=\"retryOffered() && !freeText()\"\n        role=\"option\"\n        aria-selected=\"false\"\n        [attr.id]=\"retryOffered() ? retryRowId : null\"\n        [attr.aria-disabled]=\"retryOffered() ? null : true\"\n        (mousedown)=\"$event.preventDefault()\"\n      >\n        @if (loadErrorTpl(); as custom) {\n          <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"loadErrorContext()\" />\n        } @else {\n          {{ resolvedLoadError() }}\n          @if (retryOffered()) {\n            <!-- The spinner as `wr-btn` draws it while loading: hidden from the\n                 accessibility tree, since the row already reads the retry label. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n            <span\n              class=\"wr-btn wr-btn--sm wr-select-panel__retry\"\n              [class.wr-btn--loading]=\"retrying()\"\n              (click)=\"onLoadErrorClick()\"\n            >\n              @if (retrying()) {\n                <wr-spinner class=\"wr-btn__spin\" size=\"sm\" aria-hidden=\"true\" />\n              }\n              <span class=\"wr-btn__label\">{{ resolvedRetry() }}</span>\n            </span>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: WrOption,
+				selector: "wr-option",
+				inputs: [
+					"value",
+					"disabled",
+					"label"
+				]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: WrSpinner,
+				selector: "wr-spinner",
+				inputs: ["size", "ariaLabel"]
+			}
+		],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
@@ -1409,12 +1554,16 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "wr-select",
 			encapsulation: ViewEncapsulation.None,
 			host: { "[class]": "classes()" },
-			imports: [WrOption, NgTemplateOutlet],
+			imports: [
+				WrOption,
+				NgTemplateOutlet,
+				WrSpinner
+			],
 			providers: [{
 				provide: WR_SELECT,
 				useExisting: forwardRef(() => WrSelect)
 			}],
-			template: "@if (isSearchTrigger()) {\n  <!-- Search mode (or a searchable single): a real text input drives a filtered\n       overlay panel. The wrapper isn't itself focusable — the input is the\n       tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <!-- The selected option's leading visual, before the field — the same class\n         and the same `placement: 'value'` the button trigger uses, because it is\n         the same surface and a consumer who styled one should not have to learn\n         a second name. `searchLeading()` draws it only while the field is\n         showing the VALUE, so it never stands in front of a query or a bare\n         placeholder, and it sits OUTSIDE the input for the obvious reason: an\n         `<input>` holds a string. `aria-hidden` keeps it out of the combobox's\n         name, which is `resolvedAriaLabel()`, and out of its value, which is the\n         input's own text. -->\n    @if (searchLeading(); as leading) {\n      <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"leading\"\n          [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n        />\n      </span>\n    }\n    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one — see `controlId` in the\n         component. They go on the tab stop, the only labelable element here.\n         `aria-label` is the trigger's name and belongs on the same element for\n         the same reason: this input carries `role=\"combobox\"`, and the four\n         other trigger shapes all bind `resolvedAriaLabel()`. Without it a\n         search select with no placeholder rendered a combobox with no name at\n         all — the one shape where the documented `ariaLabel` input reached\n         nothing. -->\n    <!-- `aria-autocomplete` is static, and `list` rather than `both`: the panel\n         is the only place a suggestion appears, nothing is written back into\n         the field for the user. It describes a permanent CAPABILITY, which is\n         why it does not track `open()` — the same reasoning `wr-mention`\n         records at its own host binding. -->\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.id]=\"controlId()\"\n      [attr.aria-label]=\"nameLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [attr.aria-readonly]=\"isReadonly() || null\"\n      [readonly]=\"isReadonly()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onSearchBlur()\"\n    />\n    <!-- Pointer-only, and the `keydown.enter` / `keydown.space` pair this used to\n         carry was dead code rather than the keyboard path it looked like: the ×\n         is `tabindex=\"-1\"` with no roving owner, so no key event ever originates\n         here to bubble into a handler. It stays unfocusable because the same\n         span sits inside the BUTTON trigger further down, where a focusable\n         child is `nested-interactive` — the defect the window taskbar's close\n         button already taught this repo. The keyboard reaches the function\n         instead: Backspace on the empty field, which `onSearchKey` routes to\n         `clearAll` for a single and to the last chip for a multi. -->\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag() || hasChipSearch()) {\n  <!-- Chip trigger — tag mode, or a searchable multi. A focusable input lives\n       inside, so the wrapper itself only exists to host chips and forward\n       whitespace clicks to the input. Tag mode needs no role (users tab\n       straight into the input); the searchable multi is a real combobox, so it\n       carries the listbox wiring. The click handler is a mouse-only\n       convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          @if (chip.leading; as leading) {\n            <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n              <ng-container\n                [ngTemplateOutlet]=\"leading\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n              />\n            </span>\n          }\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          @if (!isReadonly()) {\n            <span\n              class=\"wr-select__chip-remove\"\n              role=\"button\"\n              [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n              tabindex=\"-1\"\n              (click)=\"removeChip($index, $event)\"\n            >\n              <svg\n                class=\"wr-icon__svg\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </span>\n          }\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n      }\n      <!-- At `maxItems` this input goes READONLY, never disabled: it is the only\n           tab stop in the whole control (the chip × and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all — and Backspace on an empty draft, the one\n           keyboard way back UNDER the cap, is bound to this very element. It was\n           never needed as enforcement either: `tryAddTag` already refuses past\n           capacity. -->\n      <!-- `aria-autocomplete` is conditional here, unlike the search input's:\n           this field is only a combobox when a panel backs it. In plain tag\n           mode there is no popup to suggest from, and claiming otherwise\n           describes a control that does not exist. -->\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"nameLabel()\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        spellcheck=\"false\"\n        [value]=\"hasChipSearch() ? searchQuery() : draft()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"isReadonly() || (isTag() && atCapacity())\"\n        [attr.aria-readonly]=\"hasChipSearch() && isReadonly() ? true : null\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        [attr.role]=\"hasChipSearch() ? 'combobox' : null\"\n        [attr.aria-haspopup]=\"hasChipSearch() ? 'listbox' : null\"\n        [attr.aria-autocomplete]=\"hasChipSearch() ? 'list' : null\"\n        [attr.aria-expanded]=\"hasChipSearch() ? open() : null\"\n        [attr.aria-controls]=\"hasChipSearch() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"hasChipSearch() && open() ? activeOptionId() || null : null\"\n        (input)=\"onChipsInput($event)\"\n        (keydown)=\"onChipsKeydown($event)\"\n        (paste)=\"onChipsPaste($event)\"\n        (focus)=\"onChipsFocus()\"\n        (blur)=\"onChipsBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Only for the searchable MULTI, never for tag mode. The two share this\n         trigger and differ in the one thing a chevron stands for: the searchable\n         multi's input is a `role=\"combobox\"` with `aria-haspopup=\"listbox\"` and\n         a panel of options behind it, while tag mode takes free text and has no\n         popup at all. Folding the second into this branch left it as the only\n         combobox shape in the component with no affordance saying it opens —\n         `mode=\"search\"` has one, a searchable single has one, the button trigger\n         has one, and this one rendered a bare field. -->\n    @if (hasChipSearch()) {\n      <svg\n        class=\"wr-icon__svg wr-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    }\n  </div>\n} @else {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"nameLabel()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    [attr.aria-readonly]=\"isReadonly() || null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"touch.emit()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <!-- A selected chip draws its option's leading visual — one copy per\n                   VISIBLE chip, so `maxTagCount` caps these too. -->\n              @if (chip.leading; as leading) {\n                <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"leading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n                  />\n                </span>\n              }\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              @if (!isReadonly()) {\n                <span\n                  class=\"wr-select__chip-remove\"\n                  role=\"button\"\n                  [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                  tabindex=\"-1\"\n                  (click)=\"removeChip($index, $event)\"\n                >\n                  <svg\n                    class=\"wr-icon__svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M18 6 6 18\" />\n                    <path d=\"m6 6 12 12\" />\n                  </svg>\n                </span>\n              }\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <!-- Beside the label, not inside it: the harness and the accessible name\n             both read `.wr-select__value`, and the visual says nothing either should. -->\n        @if (selectedLeading(); as leading) {\n          <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n            <ng-container\n              [ngTemplateOutlet]=\"leading\"\n              [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n            />\n          </span>\n        }\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  >\n    <!-- `aria-busy` belongs on the listbox, not on this row: it is the container\n         whose required `option` children are temporarily missing, and a global\n         ARIA attribute on a role-less child makes that child an owned element the\n         listbox may not own (axe `aria-required-children`, critical). Plain text\n         inside the listbox is fine — only ELEMENTS are checked. -->\n    @if (isLoading()) {\n      <div class=\"wr-select-panel__loading\">{{ resolvedLoading() }}</div>\n    }\n\n    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [class.wr-option--disabled]=\"atMaxItems() && !isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-disabled]=\"atMaxItems() && !isSelected(entry.item) ? true : null\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            <!-- Only the select-wide template reaches a virtual row — there is no\n                 `<wr-option>` here to declare one — and only rows inside the\n                 rendered window instantiate it. -->\n            @if (optionLeading(); as leading) {\n              <span class=\"wr-option__leading\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"leading\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item, placement: 'option' }\"\n                />\n              </span>\n            }\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\n      <!-- Dynamic options from [options] or async [loader] (search mode).\n           Rendered as wr-option so the standard registration / filter\n           pipeline applies uniformly. -->\n      @for (item of dynamicOptions(); track $index) {\n        <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n      }\n    }\n\n    <!-- Projected static options — always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\n    <ng-content />\n\n    <!-- A listbox may only own `option` and `group` children, and as a bare `<div>`\n         this row was the only thing in the tree when it showed — an\n         `aria-required-children` critical. It cannot move out of the listbox the\n         way the command palette's does: this element IS the listbox, and the id\n         the trigger's `aria-controls` names is what gives it its accessible name.\n         So it announces as a disabled option instead. Keyboard navigation skips\n         it for free — arrow keys walk the registered `wr-option`s, and nothing\n         registers this row. -->\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">\n        {{ resolvedNoResults() }}\n      </div>\n    }\n  </div>\n</ng-template>\n"
+			template: "@if (isSearchTrigger()) {\n  <!-- Search mode (or a searchable single): a real text input drives a filtered\n       overlay panel. The wrapper isn't itself focusable — the input is the\n       tabstop. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div class=\"wr-select__trigger wr-select__trigger--search\" (click)=\"focusSearchInput()\">\n    <!-- The selected option's leading visual, before the field — the same class\n         and the same `placement: 'value'` the button trigger uses, because it is\n         the same surface and a consumer who styled one should not have to learn\n         a second name. `searchLeading()` draws it only while the field is\n         showing the VALUE, so it never stands in front of a query or a bare\n         placeholder, and it sits OUTSIDE the input for the obvious reason: an\n         `<input>` holds a string. `aria-hidden` keeps it out of the combobox's\n         name, which is `resolvedAriaLabel()`, and out of its value, which is the\n         input's own text. -->\n    @if (searchLeading(); as leading) {\n      <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"leading\"\n          [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n        />\n      </span>\n    }\n    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one — see `controlId` in the\n         component. They go on the tab stop, the only labelable element here.\n         `aria-label` is the trigger's name and belongs on the same element for\n         the same reason: this input carries `role=\"combobox\"`, and the four\n         other trigger shapes all bind `resolvedAriaLabel()`. Without it a\n         search select with no placeholder rendered a combobox with no name at\n         all — the one shape where the documented `ariaLabel` input reached\n         nothing. -->\n    <!-- `aria-autocomplete` is static, and `list` rather than `both`: the panel\n         is the only place a suggestion appears, nothing is written back into\n         the field for the user. It describes a permanent CAPABILITY, which is\n         why it does not track `open()` — the same reasoning `wr-mention`\n         records at its own host binding. -->\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      class=\"wr-select__search-input\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n      [attr.id]=\"controlId()\"\n      [attr.aria-label]=\"nameLabel()\"\n      [attr.aria-labelledby]=\"labelledBy()\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.aria-invalid]=\"ariaInvalid()\"\n      [disabled]=\"isDisabled()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"listboxId\"\n      [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n      [attr.aria-readonly]=\"isReadonly() || null\"\n      [readonly]=\"isReadonly()\"\n      [placeholder]=\"resolvedPlaceholder()\"\n      [value]=\"searchDisplay()\"\n      (input)=\"onSearchInput($event)\"\n      (focus)=\"onSearchFocus()\"\n      (keydown)=\"onSearchKey($event)\"\n      (blur)=\"onSearchBlur()\"\n    />\n    <!-- Pointer-only, and the `keydown.enter` / `keydown.space` pair this used to\n         carry was dead code rather than the keyboard path it looked like: the ×\n         is `tabindex=\"-1\"` with no roving owner, so no key event ever originates\n         here to bubble into a handler. It stays unfocusable because the same\n         span sits inside the BUTTON trigger further down, where a focusable\n         child is `nested-interactive` — the defect the window taskbar's close\n         button already taught this repo. The keyboard reaches the function\n         instead: Backspace on the empty field, which `onSearchKey` routes to\n         `clearAll` for a single and to the last chip for a multi. -->\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </div>\n} @else if (isTag() || hasChipSearch()) {\n  <!-- Chip trigger — tag mode, or a searchable multi. A focusable input lives\n       inside, so the wrapper itself only exists to host chips and forward\n       whitespace clicks to the input. Tag mode needs no role (users tab\n       straight into the input); the searchable multi is a real combobox, so it\n       carries the listbox wiring. The click handler is a mouse-only\n       convenience. -->\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n  <div\n    class=\"wr-select__trigger wr-select__trigger--tag\"\n    [attr.aria-disabled]=\"isDisabled() || null\"\n    (click)=\"focusTagInput()\"\n  >\n    <span class=\"wr-select__chips\">\n      @for (chip of visibleChips(); track $index) {\n        <span class=\"wr-select__chip\">\n          @if (chip.leading; as leading) {\n            <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n              <ng-container\n                [ngTemplateOutlet]=\"leading\"\n                [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n              />\n            </span>\n          }\n          <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n          @if (!isReadonly()) {\n            <span\n              class=\"wr-select__chip-remove\"\n              role=\"button\"\n              [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n              tabindex=\"-1\"\n              (click)=\"removeChip($index, $event)\"\n            >\n              <svg\n                class=\"wr-icon__svg\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"M18 6 6 18\" />\n                <path d=\"m6 6 12 12\" />\n              </svg>\n            </span>\n          }\n        </span>\n      }\n      @if (hiddenChipCount(); as extra) {\n        <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n      }\n      <!-- At `maxItems` this input goes READONLY, never disabled: it is the only\n           tab stop in the whole control (the chip × and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all — and Backspace on an empty draft, the one\n           keyboard way back UNDER the cap, is bound to this very element. It was\n           never needed as enforcement either: `tryAddTag` already refuses past\n           capacity. -->\n      <!-- `aria-autocomplete` is conditional here, unlike the search input's:\n           this field is only a combobox when a panel backs it. In plain tag\n           mode there is no popup to suggest from, and claiming otherwise\n           describes a control that does not exist. -->\n      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"nameLabel()\"\n        [attr.aria-labelledby]=\"labelledBy()\"\n        [attr.aria-describedby]=\"describedBy()\"\n        [attr.aria-invalid]=\"ariaInvalid()\"\n        spellcheck=\"false\"\n        [value]=\"hasChipSearch() ? searchQuery() : draft()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"isReadonly() || (isTag() && atCapacity())\"\n        [attr.aria-readonly]=\"hasChipSearch() && isReadonly() ? true : null\"\n        [placeholder]=\"hasSelection() ? '' : resolvedPlaceholder()\"\n        [attr.role]=\"hasChipSearch() ? 'combobox' : null\"\n        [attr.aria-haspopup]=\"hasChipSearch() ? 'listbox' : null\"\n        [attr.aria-autocomplete]=\"hasChipSearch() ? 'list' : null\"\n        [attr.aria-expanded]=\"hasChipSearch() ? open() : null\"\n        [attr.aria-controls]=\"hasChipSearch() ? listboxId : null\"\n        [attr.aria-activedescendant]=\"hasChipSearch() && open() ? activeOptionId() || null : null\"\n        (input)=\"onChipsInput($event)\"\n        (keydown)=\"onChipsKeydown($event)\"\n        (paste)=\"onChipsPaste($event)\"\n        (focus)=\"onChipsFocus()\"\n        (blur)=\"onChipsBlur()\"\n      />\n    </span>\n\n    @if (clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <!-- Only for the searchable MULTI, never for tag mode. The two share this\n         trigger and differ in the one thing a chevron stands for: the searchable\n         multi's input is a `role=\"combobox\"` with `aria-haspopup=\"listbox\"` and\n         a panel of options behind it, while tag mode takes free text and has no\n         popup at all. Folding the second into this branch left it as the only\n         combobox shape in the component with no affordance saying it opens —\n         `mode=\"search\"` has one, a searchable single has one, the button trigger\n         has one, and this one rendered a bare field. -->\n    @if (hasChipSearch()) {\n      <svg\n        class=\"wr-icon__svg wr-select__chevron\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    }\n  </div>\n} @else {\n  <button\n    #trigger\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"nameLabel()\"\n    [attr.aria-labelledby]=\"labelledBy()\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"ariaInvalid()\"\n    [disabled]=\"isDisabled()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-expanded]=\"open()\"\n    [attr.aria-controls]=\"listboxId\"\n    [attr.aria-activedescendant]=\"open() ? activeOptionId() || null : null\"\n    [attr.aria-readonly]=\"isReadonly() || null\"\n    (click)=\"onTriggerClick()\"\n    (keydown)=\"onTriggerKey($event)\"\n    (blur)=\"touch.emit()\"\n  >\n    @if (isMulti()) {\n      @if (hasSelection()) {\n        <span class=\"wr-select__chips\">\n          @for (chip of visibleChips(); track $index) {\n            <span class=\"wr-select__chip\">\n              <!-- A selected chip draws its option's leading visual — one copy per\n                   VISIBLE chip, so `maxTagCount` caps these too. -->\n              @if (chip.leading; as leading) {\n                <span class=\"wr-select__chip-leading\" aria-hidden=\"true\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"leading\"\n                    [ngTemplateOutletContext]=\"{ $implicit: chip.value, placement: 'chip' }\"\n                  />\n                </span>\n              }\n              <span class=\"wr-select__chip-label\">{{ chip.label }}</span>\n              @if (!isReadonly()) {\n                <span\n                  class=\"wr-select__chip-remove\"\n                  role=\"button\"\n                  [attr.aria-label]=\"chipRemoveLabel({ label: chip.label })\"\n                  tabindex=\"-1\"\n                  (click)=\"removeChip($index, $event)\"\n                >\n                  <svg\n                    class=\"wr-icon__svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M18 6 6 18\" />\n                    <path d=\"m6 6 12 12\" />\n                  </svg>\n                </span>\n              }\n            </span>\n          }\n          @if (hiddenChipCount(); as extra) {\n            <span class=\"wr-select__chip wr-select__chip--more\">{{ moreLabel({ count: extra }) }}</span>\n          }\n        </span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    } @else {\n      @if (selectedLabel(); as label) {\n        <!-- Beside the label, not inside it: the harness and the accessible name\n             both read `.wr-select__value`, and the visual says nothing either should. -->\n        @if (selectedLeading(); as leading) {\n          <span class=\"wr-select__value-leading\" aria-hidden=\"true\">\n            <ng-container\n              [ngTemplateOutlet]=\"leading\"\n              [ngTemplateOutletContext]=\"{ $implicit: value(), placement: 'value' }\"\n            />\n          </span>\n        }\n        <span class=\"wr-select__value\">{{ label }}</span>\n      } @else {\n        <span class=\"wr-select__placeholder\">{{ resolvedPlaceholder() }}</span>\n      }\n    }\n\n    @if (isMulti() && clearable() && hasSelection() && !isDisabled() && !isReadonly()) {\n      <span\n        class=\"wr-select__clear\"\n        role=\"button\"\n        [attr.aria-label]=\"resolvedClear()\"\n        tabindex=\"-1\"\n        (click)=\"clearAll($event)\"\n      >\n        <svg\n          class=\"wr-icon__svg\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n        >\n          <path d=\"M18 6 6 18\" />\n          <path d=\"m6 6 12 12\" />\n        </svg>\n      </span>\n    }\n\n    <svg\n      class=\"wr-icon__svg wr-select__chevron\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </button>\n}\n\n<ng-template #panelTpl>\n  <div\n    class=\"wr-select-panel\"\n    [class.wr-select-panel--sm]=\"size() === 'sm'\"\n    [class.wr-select-panel--lg]=\"size() === 'lg'\"\n    [class.wr-select-panel--virtual]=\"virtualActive()\"\n    role=\"listbox\"\n    [attr.id]=\"listboxId\"\n    [attr.aria-multiselectable]=\"isMulti() ? 'true' : null\"\n    [attr.aria-busy]=\"isLoading() ? 'true' : null\"\n  >\n    <!-- `aria-busy` belongs on the listbox, not on this row: it is the container\n         whose required `option` children are temporarily missing, and a global\n         ARIA attribute on a role-less child makes that child an owned element the\n         listbox may not own (axe `aria-required-children`, critical). Plain text\n         inside the listbox is fine — only ELEMENTS are checked. -->\n    <!-- While the error row is up, through a retry, it carries the loader. -->\n    @if (isLoading() && !showLoadError()) {\n      <div class=\"wr-select-panel__loading\">{{ resolvedLoading() }}</div>\n    }\n\n    @if (virtualActive()) {\n      <!-- Windowed data-array rows: plain role=\"option\" elements (not <wr-option>),\n           navigated via the input's aria-activedescendant, selected by value. -->\n      <div class=\"wr-select-panel__vlist\" [style.max-height]=\"resolvedViewportHeight()\">\n        @if (virtualWindow().padTop > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padTop\"></div>\n        }\n        @for (entry of windowOptions(); track entry.index) {\n          <!-- Keyboard handled by the search input via aria-activedescendant; the\n               row is a pointer target only. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n          <div\n            role=\"option\"\n            class=\"wr-option\"\n            [id]=\"virtualRowId(entry.index)\"\n            [class.wr-option--active]=\"entry.index === activeIndex()\"\n            [class.wr-option--selected]=\"isSelected(entry.item)\"\n            [class.wr-option--disabled]=\"atMaxItems() && !isSelected(entry.item)\"\n            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-disabled]=\"atMaxItems() && !isSelected(entry.item) ? true : null\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\n          >\n            <!-- Only the select-wide template reaches a virtual row — there is no\n                 `<wr-option>` here to declare one — and only rows inside the\n                 rendered window instantiate it. -->\n            @if (optionLeading(); as leading) {\n              <span class=\"wr-option__leading\" aria-hidden=\"true\">\n                <ng-container\n                  [ngTemplateOutlet]=\"leading\"\n                  [ngTemplateOutletContext]=\"{ $implicit: entry.item, placement: 'option' }\"\n                />\n              </span>\n            }\n            {{ displayWith()(entry.item) }}\n          </div>\n        }\n        @if (virtualWindow().padBottom > 0) {\n          <div class=\"wr-select-panel__vspacer\" aria-hidden=\"true\" [style.height.px]=\"virtualWindow().padBottom\"></div>\n        }\n      </div>\n    } @else {\n      <!-- Dynamic options from [options] or async [loader] (search mode).\n           Rendered as wr-option so the standard registration / filter\n           pipeline applies uniformly. -->\n      @for (item of dynamicOptions(); track $index) {\n        <wr-option [value]=\"item\">{{ displayWith()(item) }}</wr-option>\n      }\n    }\n\n    <!-- Projected static options — always present (a conditional `<ng-content>`\n         would drop projected content). Empty whenever `virtualActive`. -->\n    <ng-content />\n\n    <!-- A listbox may only own `option` and `group` children, and as a bare `<div>`\n         this row was the only thing in the tree when it showed — an\n         `aria-required-children` critical. It cannot move out of the listbox the\n         way the command palette's does: this element IS the listbox, and the id\n         the trigger's `aria-controls` names is what gives it its accessible name.\n         So it announces as a disabled option instead. Keyboard navigation skips\n         it for free — arrow keys walk the registered `wr-option`s, and nothing\n         registers this row. -->\n    @if (hasNoResults()) {\n      <div class=\"wr-select-panel__empty\" role=\"option\" aria-selected=\"false\" aria-disabled=\"true\">\n        {{ resolvedNoResults() }}\n      </div>\n    }\n\n    <!-- A failed load, in place of \"no results\". An option for the same reason as\n         that row. While it offers a retry it is the option that runs the loader\n         again: the field's aria-activedescendant names it, Enter there reaches it,\n         and mousedown keeps focus in the field. The retry is DRAWN as a button but\n         cannot be one, since a button inside an option is nested interactive\n         content; it wears `.wr-btn` and takes the click. -->\n    @if (showLoadError()) {\n      <div\n        class=\"wr-select-panel__error\"\n        [class.wr-select-panel__error--retryable]=\"retryOffered()\"\n        [class.wr-select-panel__error--active]=\"retryOffered() && !freeText()\"\n        role=\"option\"\n        aria-selected=\"false\"\n        [attr.id]=\"retryOffered() ? retryRowId : null\"\n        [attr.aria-disabled]=\"retryOffered() ? null : true\"\n        (mousedown)=\"$event.preventDefault()\"\n      >\n        @if (loadErrorTpl(); as custom) {\n          <ng-container [ngTemplateOutlet]=\"custom.template\" [ngTemplateOutletContext]=\"loadErrorContext()\" />\n        } @else {\n          {{ resolvedLoadError() }}\n          @if (retryOffered()) {\n            <!-- The spinner as `wr-btn` draws it while loading: hidden from the\n                 accessibility tree, since the row already reads the retry label. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events,@angular-eslint/template/interactive-supports-focus -->\n            <span\n              class=\"wr-btn wr-btn--sm wr-select-panel__retry\"\n              [class.wr-btn--loading]=\"retrying()\"\n              (click)=\"onLoadErrorClick()\"\n            >\n              @if (retrying()) {\n                <wr-spinner class=\"wr-btn__spin\" size=\"sm\" aria-hidden=\"true\" />\n              }\n              <span class=\"wr-btn__label\">{{ resolvedRetry() }}</span>\n            </span>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1606,6 +1755,30 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		loadErrorText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadErrorText",
+				required: false
+			}]
+		}],
+		retryable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryable",
+				required: false
+			}]
+		}],
+		retryText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "retryText",
+				required: false
+			}]
+		}],
 		searchChange: [{
 			type: i0.Output,
 			args: ["searchChange"]
@@ -1703,6 +1876,13 @@ i0.ɵɵngDeclareClassMetadata({
 				isSignal: true
 			}]
 		}],
+		loadErrorTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => WrSelectLoadError), {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
 		panelTpl: [{
 			type: i0.ViewChild,
 			args: ["panelTpl", {
@@ -1791,6 +1971,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
-export { WR_SELECT, WrOption, WrOptionGroup, WrOptionLeading, WrSelect };
+export { WR_SELECT, WrOption, WrOptionGroup, WrOptionLeading, WrSelect, WrSelectLoadError };
 
 //# sourceMappingURL=ngwr-select.mjs.map