ngwr 14.0.0 → 14.0.1

package/fesm2022/ngwr-segmented.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WR_FORM_FIELD } from 'ngwr/form';\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * A signal-forms native control: it implements `FormValueControl<T | null>`, so\n * `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic\n * `[(ngModel)]` / reactive forms keep working through Angular's bridge.\n *\n * It stays a `role=\"group\"` of `aria-pressed` toggle buttons rather than\n * becoming a `radiogroup`: being a form control changes what the value is bound\n * to, not what the widget is, and a radiogroup would owe a roving tab stop and\n * arrow-key selection — a different keyboard contract for every consumer who\n * already ships this. The group is what the field describes (`aria-describedby`\n * / `aria-invalid` land on the host), while the `<label for>` has to name a\n * labelable element, so the id goes on the first segment.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-segmented [options]=\"ranges\" [formField]=\"form.range\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/segmented\n */\nexport type WrSegmentedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style]': 'thumbStyle()',\n    role: 'group',\n    '[attr.aria-describedby]': 'describedBy()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '(focusout)': 'onFocusOut($event)',\n  },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> implements FormValueControl<T | null> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  // The model keeps the component's own `T`, and the contract is satisfied as\n  // `FormValueControl<T | null>` — legal because `FormField<T>` infers its type from\n  // the FIELD it is handed and never from the host component, so the interface's\n  // parameter describes this model rather than constraining the binding.\n  // `wr-cascader` and `wr-tree` widen theirs to `unknown` because their value SHAPE\n  // changes with a mode input (`TId | null` in single mode, a `readonly TId[]` in\n  // multi) and no one type is true of both. A segmented control has one shape, so\n  // widening here would only throw away what `[options]` already proved: every\n  // `(valueChange)=\"pick($event)\"` in a typed app would start receiving `unknown`.\n  // With the default type parameter this degenerates to exactly the catalog's\n  // `FormValueControl<unknown>`.\n  /**\n   * The picked segment's `value`, `null` when nothing is selected. Bound by\n   * `[formField]`, or two-way via `[(value)]`.\n   */\n  readonly value = model<T | null>(null);\n\n  /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /**\n   * Disable the whole control. Bound automatically from the field's disabled\n   * state when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Refuse changes while every segment stays focusable and the value still\n   * submits. Bound automatically from the field's readonly state when used with\n   * `[formField]`.\n   *\n   * NOTHING is mirrored into ARIA here, deliberately: the strip is a\n   * `role=\"group\"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`\n   * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`\n   * and their kin, and it is not global. `aria-disabled` is the only attribute\n   * that would apply to a button, and it says the wrong thing: these segments\n   * are still focusable and the value still submits. So the state is honest in\n   * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree\n   * rather than announced with a word that means something else.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSegmentedSize>('md');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the\n   * FIRST segment.\n   *\n   * The field renders its label before it can see what was projected into it, so the\n   * id travels the other way and the control adopts it, exactly as `[wrInput]`,\n   * `wr-slider` and `wr-select` do. Without this the `for` named an element that was\n   * nowhere in the document: clicking the label did nothing.\n   *\n   * It cannot go on the host — only a labelable element can be a label's target, and\n   * `<wr-segmented>` is not one — and there is no single control to put it on, so it\n   * goes where clicking the label should land a user: the first segment, which is\n   * also the strip's first tab stop. The same choice `wr-slider` makes with its low\n   * thumb.\n   *\n   * What this does NOT change is that segment's NAME: it is named by its own label,\n   * and a `<label for>` cannot outrank text content in the accname order anyway.\n   *\n   * The one shape this reads wrong is a strip NESTED inside another control that is\n   * itself the field — `<wr-color-picker>`'s own format tabs are the only case in\n   * the library — where the id lands on a tab instead of on the picker. That is the\n   * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix\n   * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`\n   * as `null`), not to a strip that cannot tell whose field it is in.\n   */\n  protected readonly controlId = computed(() => this.field?.controlId() ?? null);\n\n  /**\n   * The field's error message, wired to the GROUP rather than to a segment.\n   *\n   * A segmented control is one field made of several buttons, so the description\n   * belongs to the thing the field describes — repeated on every segment it would be\n   * announced once per Tab. `role=\"group\"` supports neither state as a role-specific\n   * attribute, but both are ARIA globals, so this is valid where an `aria-checked`\n   * would not be.\n   *\n   * `aria-invalid` is keyed on the message EXISTING rather than on `errorKeys()`,\n   * because the field only publishes an id once it is showing something — announcing\n   * \"invalid\" while pointing at nothing is worse than staying quiet.\n   */\n  protected readonly describedBy = computed(() => this.field?.describedBy() ?? null);\n  protected readonly ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null));\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-segmented--${size}`);\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    else if (this.readonly()) parts.push('wr-segmented--readonly');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction of the strip. `Directionality` is root-provided, so this\n   * always resolves — `optional` only guards a consumer who has deliberately\n   * torn the provider out. A subtree that overrides the direction does it with\n   * the CDK's `Dir` directive, which writes `valueSignal`, so `thumbStyle`\n   * re-renders instead of leaving the thumb parked on the old segment.\n   */\n  private readonly isRtl = computed(() => this.dir?.valueSignal() === 'rtl');\n\n  /**\n   * Inline CSS vars driving the sliding thumb position.\n   *\n   * `--wr-segmented-thumb-index` is the SLOT the thumb parks in, counted from the\n   * physical left, which is the selected index only in LTR. The stylesheet anchors\n   * the thumb with a physical `left` and slides it with `translateX` — neither has\n   * a logical form — while the options are a grid that mirrors, so under `dir=\"rtl\"`\n   * the segment at logical index `i` occupies slot `count - 1 - i`. Left unsigned,\n   * the pill sat under a different label than the one it marks (the whole strip's\n   * worth of offset at the far end), which is the carousel's `trackStyle` problem\n   * one component over.\n   */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    const slot = this.isRtl() ? count - 1 - i : i;\n    return {\n      '--wr-segmented-thumb-index': `${slot}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || this.readonly() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n\n  /**\n   * A bound field learns it may show its validation copy from `touch`, and a click\n   * cannot be the source: a strip tabbed into and out of without a pick left the\n   * field untouched forever — which is exactly the case `touched` exists for.\n   *\n   * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this\n   * component owns one button per option, so it listens for the bubbling `focusout`\n   * on its host instead — and ignores the one that only moves focus from one segment\n   * to the next, the way `wr-slider` ignores the hop between its two thumbs.\n   */\n  protected onFocusOut(event: FocusEvent): void {\n    if (this.host.nativeElement.contains(event.relatedTarget as Node | null)) return;\n    this.touch.emit();\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n<!--\n  `id` on the FIRST segment only: it is the id a surrounding `<wr-form-field>`\n  already points its `<label for>` at, and a `for` may only name a labelable\n  element — see `controlId` in the component. `null` without a field, so a bare\n  strip stamps no document-global id on anything.\n-->\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [attr.id]=\"$first ? controlId() : null\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngwr-segmented.mjs","sources":["../../../projects/lib/segmented/segmented.ts","../../../projects/lib/segmented/segmented.html","../../../projects/lib/segmented/ngwr-segmented.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { Directionality } from '@angular/cdk/bidi';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  Component,\n  ElementRef,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport type { FormValueControl } from '@angular/forms/signals';\n\nimport { WR_FORM_FIELD, useFormFieldAria } from 'ngwr/form';\nimport { WrIcon } from 'ngwr/icon';\n\nimport type { WrSegmentedOption } from './interfaces';\n\n/**\n * Single-choice picker rendered as a segmented control. Two-way binds\n * the selected `value`.\n *\n * A signal-forms native control: it implements `FormValueControl<T | null>`, so\n * `[formField]` binds straight to its `value` model — no\n * `ControlValueAccessor` in between. `[(value)]` works standalone, and classic\n * `[(ngModel)]` / reactive forms keep working through Angular's bridge.\n *\n * It stays a `role=\"group\"` of `aria-pressed` toggle buttons rather than\n * becoming a `radiogroup`: being a form control changes what the value is bound\n * to, not what the widget is, and a radiogroup would owe a roving tab stop and\n * arrow-key selection — a different keyboard contract for every consumer who\n * already ships this. The group is what the field describes (`aria-describedby`\n * / `aria-invalid` land on the host), while the `<label for>` has to name a\n * labelable element, so the id goes on the first segment.\n *\n * @example\n * ```html\n * <!-- signal forms -->\n * <wr-segmented [options]=\"ranges\" [formField]=\"form.range\" />\n *\n * <!-- standalone two-way binding -->\n * <wr-segmented\n *   [options]=\"[\n *     { value: 'day',  label: 'Day' },\n *     { value: 'week', label: 'Week' },\n *     { value: 'month', label: 'Month' },\n *   ]\"\n *   [(value)]=\"range\"\n * />\n * ```\n *\n * @see https://ngwr.dev/reference/components/segmented\n */\nexport type WrSegmentedSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'wr-segmented',\n  templateUrl: './segmented.html',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'classes()',\n    '[style]': 'thumbStyle()',\n    role: 'group',\n    '[attr.aria-describedby]': 'describedBy()',\n    '[attr.aria-invalid]': 'ariaInvalid()',\n    '(focusout)': 'onFocusOut($event)',\n  },\n  imports: [WrIcon],\n})\nexport class WrSegmented<T = unknown> implements FormValueControl<T | null> {\n  /** The segments to render. */\n  readonly options = input.required<readonly WrSegmentedOption<T>[]>();\n\n  // The model keeps the component's own `T`, and the contract is satisfied as\n  // `FormValueControl<T | null>` — legal because `FormField<T>` infers its type from\n  // the FIELD it is handed and never from the host component, so the interface's\n  // parameter describes this model rather than constraining the binding.\n  // `wr-cascader` and `wr-tree` widen theirs to `unknown` because their value SHAPE\n  // changes with a mode input (`TId | null` in single mode, a `readonly TId[]` in\n  // multi) and no one type is true of both. A segmented control has one shape, so\n  // widening here would only throw away what `[options]` already proved: every\n  // `(valueChange)=\"pick($event)\"` in a typed app would start receiving `unknown`.\n  // With the default type parameter this degenerates to exactly the catalog's\n  // `FormValueControl<unknown>`.\n  /**\n   * The picked segment's `value`, `null` when nothing is selected. Bound by\n   * `[formField]`, or two-way via `[(value)]`.\n   */\n  readonly value = model<T | null>(null);\n\n  /** Emitted when focus leaves the strip, so a bound field can mark itself touched. */\n  readonly touch = output<void>();\n\n  /**\n   * Disable the whole control. Bound automatically from the field's disabled\n   * state when used with `[formField]`.\n   *\n   * @default false\n   */\n  readonly disabled = input(false, { transform: coerceBooleanProperty });\n\n  /**\n   * Refuse changes while every segment stays focusable and the value still\n   * submits. Bound automatically from the field's readonly state when used with\n   * `[formField]`.\n   *\n   * NOTHING is mirrored into ARIA here, deliberately: the strip is a\n   * `role=\"group\"` of `aria-pressed` buttons, and ARIA defines `aria-readonly`\n   * for neither role — it is a state of `checkbox` / `radiogroup` / `textbox`\n   * and their kin, and it is not global. `aria-disabled` is the only attribute\n   * that would apply to a button, and it says the wrong thing: these segments\n   * are still focusable and the value still submits. So the state is honest in\n   * the DOM (`wr-segmented--readonly`) and silent in the accessibility tree\n   * rather than announced with a word that means something else.\n   *\n   * @default false\n   */\n  readonly readonly = input(false, { transform: coerceBooleanProperty });\n\n  /** Control size — shares the `--wr-control-*` contract. @default 'md' */\n  readonly size = input<WrSegmentedSize>('md');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly field = inject(WR_FORM_FIELD, { optional: true });\n\n  /**\n   * Id the surrounding `<wr-form-field>`'s `<label for>` points at, stamped on the\n   * FIRST segment.\n   *\n   * The field renders its label before it can see what was projected into it, so the\n   * id travels the other way and the control adopts it, exactly as `[wrInput]`,\n   * `wr-slider` and `wr-select` do. Without this the `for` named an element that was\n   * nowhere in the document: clicking the label did nothing.\n   *\n   * It cannot go on the host — only a labelable element can be a label's target, and\n   * `<wr-segmented>` is not one — and there is no single control to put it on, so it\n   * goes where clicking the label should land a user: the first segment, which is\n   * also the strip's first tab stop. The same choice `wr-slider` makes with its low\n   * thumb.\n   *\n   * What this does NOT change is that segment's NAME: it is named by its own label,\n   * and a `<label for>` cannot outrank text content in the accname order anyway.\n   *\n   * The one shape this reads wrong is a strip NESTED inside another control that is\n   * itself the field — `<wr-color-picker>`'s own format tabs are the only case in\n   * the library — where the id lands on a tab instead of on the picker. That is the\n   * same exposure `[wrInput]`, `wr-slider` and `wr-select` all carry, and the fix\n   * belongs to the outer control (shield its subtree by providing `WR_FORM_FIELD`\n   * as `null`), not to a strip that cannot tell whose field it is in.\n   */\n  protected readonly controlId = computed(() => this.field?.controlId() ?? null);\n\n  /**\n   * The field's error message, wired to the GROUP rather than to a segment.\n   *\n   * A segmented control is one field made of several buttons, so the description\n   * belongs to the thing the field describes — repeated on every segment it would be\n   * announced once per Tab. `role=\"group\"` supports neither state as a role-specific\n   * attribute, but both are ARIA globals, so this is valid where an `aria-checked`\n   * would not be.\n   *\n   * `aria-invalid` is keyed on the message EXISTING rather than on `errorKeys()`,\n   * because the field only publishes an id once it is showing something — announcing\n   * \"invalid\" while pointing at nothing is worse than staying quiet.\n   */\n  // Through the shared helper, not a local pair: the hint is described by\n  // `hintId`, which only `useFormFieldAria()` composes, and `aria-invalid` keys\n  // on the error COUNT rather than on \"something is described\". Hand-rolled here,\n  // these three announced the error and never the hint — and `<input wrInput>` is\n  // the control the report was filed against.\n  private readonly fieldAria = useFormFieldAria();\n  protected readonly describedBy = this.fieldAria.describedBy;\n  protected readonly ariaInvalid = this.fieldAria.ariaInvalid;\n\n  /** Index of the selected option, or `-1` when nothing is selected. */\n  protected readonly selectedIndex = computed(() => {\n    const v = this.value();\n    return this.options().findIndex(o => o.value === v);\n  });\n\n  /** Flips true after the first paint so the thumb only animates user-driven changes, not the initial snap. */\n  private readonly mounted = signal(false);\n\n  constructor() {\n    afterNextRender(() => this.mounted.set(true));\n  }\n\n  protected readonly classes = computed(() => {\n    const parts = ['wr-segmented'];\n    const size = this.size();\n    if (size !== 'md') parts.push(`wr-segmented--${size}`);\n    if (this.disabled()) parts.push('wr-segmented--disabled');\n    else if (this.readonly()) parts.push('wr-segmented--readonly');\n    if (this.selectedIndex() < 0) parts.push('wr-segmented--unselected');\n    if (this.mounted()) parts.push('wr-segmented--mounted');\n    return parts.join(' ');\n  });\n\n  private readonly dir = inject(Directionality, { optional: true });\n\n  /**\n   * Reading direction of the strip. `Directionality` is root-provided, so this\n   * always resolves — `optional` only guards a consumer who has deliberately\n   * torn the provider out. A subtree that overrides the direction does it with\n   * the CDK's `Dir` directive, which writes `valueSignal`, so `thumbStyle`\n   * re-renders instead of leaving the thumb parked on the old segment.\n   */\n  private readonly isRtl = computed(() => this.dir?.valueSignal() === 'rtl');\n\n  /**\n   * Inline CSS vars driving the sliding thumb position.\n   *\n   * `--wr-segmented-thumb-index` is the SLOT the thumb parks in, counted from the\n   * physical left, which is the selected index only in LTR. The stylesheet anchors\n   * the thumb with a physical `left` and slides it with `translateX` — neither has\n   * a logical form — while the options are a grid that mirrors, so under `dir=\"rtl\"`\n   * the segment at logical index `i` occupies slot `count - 1 - i`. Left unsigned,\n   * the pill sat under a different label than the one it marks (the whole strip's\n   * worth of offset at the far end), which is the carousel's `trackStyle` problem\n   * one component over.\n   */\n  protected readonly thumbStyle = computed<Record<string, string>>(() => {\n    const i = Math.max(0, this.selectedIndex());\n    const count = Math.max(1, this.options().length);\n    const slot = this.isRtl() ? count - 1 - i : i;\n    return {\n      '--wr-segmented-thumb-index': `${slot}`,\n      '--wr-segmented-thumb-count': `${count}`,\n    };\n  });\n\n  protected isSelected(option: WrSegmentedOption<T>): boolean {\n    return this.value() === option.value;\n  }\n\n  protected select(option: WrSegmentedOption<T>): void {\n    if (this.disabled() || this.readonly() || option.disabled || this.isSelected(option)) return;\n    this.value.set(option.value);\n  }\n\n  protected trackByValue(_: number, option: WrSegmentedOption<T>): unknown {\n    return option.value;\n  }\n\n  /**\n   * A bound field learns it may show its validation copy from `touch`, and a click\n   * cannot be the source: a strip tabbed into and out of without a pick left the\n   * field untouched forever — which is exactly the case `touched` exists for.\n   *\n   * `wr-knob` and `wr-rating` bind `(blur)` on the one element they own; this\n   * component owns one button per option, so it listens for the bubbling `focusout`\n   * on its host instead — and ignores the one that only moves focus from one segment\n   * to the next, the way `wr-slider` ignores the hop between its two thumbs.\n   */\n  protected onFocusOut(event: FocusEvent): void {\n    if (this.host.nativeElement.contains(event.relatedTarget as Node | null)) return;\n    this.touch.emit();\n  }\n}\n","<span class=\"wr-segmented__thumb\" aria-hidden=\"true\"></span>\n\n<!--\n  `id` on the FIRST segment only: it is the id a surrounding `<wr-form-field>`\n  already points its `<label for>` at, and a `for` may only name a labelable\n  element — see `controlId` in the component. `null` without a field, so a bare\n  strip stamps no document-global id on anything.\n-->\n@for (option of options(); track option.value) {\n  <button\n    type=\"button\"\n    class=\"wr-segmented__option\"\n    [attr.id]=\"$first ? controlId() : null\"\n    [class.wr-segmented__option--selected]=\"isSelected(option)\"\n    [disabled]=\"disabled() || !!option.disabled\"\n    [attr.aria-pressed]=\"isSelected(option)\"\n    [attr.aria-label]=\"option.label ? null : (option.ariaLabel ?? option.value)\"\n    (click)=\"select(option)\"\n  >\n    @if (option.icon) {\n      <wr-icon class=\"wr-segmented__icon\" [name]=\"option.icon\" />\n    }\n    @if (option.label) {\n      <span class=\"wr-segmented__label\">{{ option.label }}</span>\n    }\n  </button>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-select.mjs

@@ -3,11 +3,11 @@ import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, input, inject, ElementRef, signal, computed, effect, afterEveryRender, ViewEncapsulation, Component, model, output, contentChildren, viewChild, TemplateRef, ViewContainerRef, DestroyRef, PLATFORM_ID, forwardRef } from '@angular/core';
+import { InjectionToken, input, inject, ElementRef, signal, computed, effect, afterEveryRender, ViewEncapsulation, Component, model, output, contentChildren, viewChild, TemplateRef, afterNextRender, ViewContainerRef, DestroyRef, PLATFORM_ID, Injector, forwardRef } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { skip, debounce, timer, switchMap, of, defer, isObservable, from, tap, catchError, finalize } from 'rxjs';
 import { useConfigValue } from 'ngwr/config';
-import { WR_FORM_FIELD } from 'ngwr/form';
+import { WR_FORM_FIELD, useFormFieldAria } from 'ngwr/form';
 import { useI18nText, useI18nFormatter } from 'ngwr/i18n';
 import { WR_OVERLAY, WrOutsideClick, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet } from 'ngwr/overlay';
 import { isComposing, randomId } from 'ngwr/utils';
@@ -157,10 +157,10 @@ class WrOption {
             return;
         this.parent.selectOption(this.value());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrOption, isStandalone: true, selector: "wr-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()" }, properties: { "attr.id": "id", "class": "classes()", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrOption, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrOption, isStandalone: true, selector: "wr-option", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, listeners: { "click": "onClick()" }, properties: { "attr.id": "id", "class": "classes()", "attr.aria-selected": "selected()", "attr.aria-disabled": "disabled() ? true : null" } }, ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrOption, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-option',
@@ -297,19 +297,19 @@ class WrSelect {
     controlId = computed(() => this.field?.controlId() ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
     /**
-     * The field's error message, wired to the same element.
+     * The field's error message — or, failing that, its hint — wired to the same
+     * element, plus the invalid flag.
      *
-     * Without it the messages `<wr-form-field>` renders are visible and nothing else:
-     * a screen reader on the trigger never learns the field is invalid, nor what the
-     * message says. `aria-invalid` is keyed on the message EXISTING rather than on
-     * `errorKeys()`, because the field only publishes an id once it is showing
-     * something — announcing "invalid" while pointing at nothing is worse than
-     * staying quiet.
+     * Without it the copy `<wr-form-field>` renders is visible and nothing else: a
+     * screen reader on the trigger never learns the field is invalid, nor what the
+     * message says. Composed by `useFormFieldAria()` rather than read off the field
+     * here, so the trigger picks up the hint the same way the other value controls
+     * do and `aria-invalid` stays keyed on the error rather than on "is anything
+     * describing me".
      */
-    describedBy = computed(() => this.field?.describedBy() ?? null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-    ariaInvalid = computed(() => (this.field?.describedBy() ? 'true' : null), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaInvalid" }] : /* istanbul ignore next */ []));
+    fieldAria = useFormFieldAria();
+    describedBy = this.fieldAria.describedBy;
+    ariaInvalid = this.fieldAria.ariaInvalid;
     /**
      * Disable the select. Bound automatically from the field's disabled state
      * when used with `[formField]`.
@@ -626,6 +626,21 @@ class WrSelect {
             // following and contained — so masking is the API's own idiom, not a
             // cleverness to be rewritten as a comparison.
             /* eslint-disable no-bitwise -- reading the flags of a DOM bitmask */
+            // DISCONNECTED is checked FIRST, and it is not defensive noise. Projected
+            // `<wr-option>` hosts live in an `<ng-template>` that only instantiates
+            // when the panel opens, so on the first change detection they are not in
+            // the document yet — and the template's own `aria-activedescendant`
+            // binding reads this computed on exactly that pass. For disconnected nodes
+            // the spec lets a UA answer PRECEDING or FOLLOWING arbitrarily, as long as
+            // it answers consistently; the answer means nothing, and the computed
+            // CACHES it until the registry itself changes, so one meaningless
+            // comparison decides the cursor order for the life of the select. Chromium
+            // happens to answer in tree order and jsdom happens to answer in reverse,
+            // which is the whole difference between a working component and one where
+            // End lands on the first option. Registration order is the honest fallback:
+            // the sort is stable, and it is already DOM order for a static list.
+            if (relation & Node.DOCUMENT_POSITION_DISCONNECTED)
+                return 0;
             if (relation & Node.DOCUMENT_POSITION_FOLLOWING)
                 return -1;
             if (relation & Node.DOCUMENT_POSITION_PRECEDING)
@@ -858,10 +873,30 @@ class WrSelect {
     get vlistElement() {
         return this.overlayRef?.overlayElement.querySelector('.wr-select-panel__vlist') ?? null;
     }
-    /** Scroll filtered index `i` just into view (sets the `scrollTop` signal synchronously). */
+    /** The scrolling listbox inside the overlay panel, if attached. */
+    get panelElement() {
+        return this.overlayRef?.overlayElement.querySelector('.wr-select-panel') ?? null;
+    }
+    /**
+     * Scroll the ordered index `i` just into view. Two implementations, because the
+     * two panels scroll different elements and know the row geometry in different
+     * ways — the virtual list is index maths against a measured row height, the
+     * projected list has to read the row it is moving to.
+     *
+     * The non-virtual half is not an optimisation, it is the whole keyboard
+     * contract: `activeIndex` drives `aria-activedescendant`, and NOTHING else
+     * moves a projected panel, because the rows never take DOM focus. Without it
+     * End on a 250-option `mode="search"` panel announced Zimbabwe while the panel
+     * sat at `scrollTop` 0 with the cursor 9 218 px below the fold, and Enter then
+     * committed a row the user could not see.
+     */
     ensureVisible(i) {
-        if (!this.virtualActive() || i < 0)
+        if (i < 0)
+            return;
+        if (!this.virtualActive()) {
+            this.ensureRowVisible(i);
             return;
+        }
         const h = this.effRowH();
         const vp = this.viewportPx() || this.fallbackViewportPx();
         const top = i * h;
@@ -876,6 +911,47 @@ class WrSelect {
             this.vlistElement?.scrollTo({ top: next });
         }
     }
+    /**
+     * Scroll the projected row at ordered index `i` just into view.
+     *
+     * Geometry is READ rather than computed: projected `<wr-option>` rows are
+     * consumer content, so they are not a uniform height the way a virtual row is
+     * — a row with a description, an icon or a wrapped label is taller than its
+     * neighbours, and index maths would land the panel next to the cursor instead
+     * of on it. The offset is taken relative to the panel's own scroll content
+     * (`rect.top` difference plus the current `scrollTop`) rather than from
+     * `offsetTop`, which is measured against whichever ancestor happens to be
+     * positioned.
+     *
+     * `scrollTop` is written directly instead of `scrollTo`, so the write is
+     * observable in a spec — jsdom implements the property and does not implement
+     * the method. It still reads as a no-op there, since every jsdom rect is 0×0:
+     * a spec asserting a scroll has to stub `getBoundingClientRect` and
+     * `clientHeight` on the panel and the row, which `select.spec.ts` does.
+     */
+    ensureRowVisible(i) {
+        const panel = this.panelElement;
+        if (!panel)
+            return;
+        const list = this.orderedRegistry();
+        if (i >= list.length)
+            return;
+        const row = panel.querySelector(`#${CSS.escape(list[i].id)}`);
+        if (!row)
+            return;
+        const panelRect = panel.getBoundingClientRect();
+        const rowRect = row.getBoundingClientRect();
+        const cur = panel.scrollTop;
+        const top = rowRect.top - panelRect.top + cur;
+        const vp = panel.clientHeight;
+        let next = cur;
+        if (top < cur)
+            next = top;
+        else if (top + rowRect.height > cur + vp)
+            next = top + rowRect.height - vp;
+        if (next !== cur)
+            panel.scrollTop = next;
+    }
     /**
      * Count of registered options that pass the current search filter.
      * Hides the noResults state when the panel has at least one visible row.
@@ -1008,7 +1084,18 @@ class WrSelect {
         if (this.virtualActive()) {
             this.scrollTop.set(0);
             this.vlistElement?.scrollTo({ top: 0 });
+            return;
         }
+        // The projected panel keeps whatever `scrollTop` the previous query left it
+        // at, so the re-seeded cursor lands off screen unless it is scrolled to —
+        // and this is the ONE cursor move that cannot be handled synchronously.
+        // Filtered-out options only self-hide via CSS, applied on the next pass, so
+        // a rect read on this line measures the panel as it was BEFORE the new query
+        // removed rows above the cursor. `afterNextRender`, not `queueMicrotask`:
+        // under zoneless CD the scheduler refreshes the view in a macrotask, and a
+        // microtask queued from this handler runs before the DOM reflects the query
+        // that caused it.
+        afterNextRender(() => this.ensureVisible(this.activeIndex()), { injector: this.injector });
     }
     onSearchFocus() {
         if (this.isDisabled())
@@ -1136,6 +1223,7 @@ class WrSelect {
     scrollStrategies = inject(ScrollStrategyOptions);
     destroyRef = inject(DestroyRef);
     platformId = inject(PLATFORM_ID);
+    injector = inject(Injector);
     overlayRef = null;
     constructor() {
         // A component destroyed while the panel is open takes its overlay with it.
@@ -1575,6 +1663,7 @@ class WrSelect {
             const o = list[i];
             if (!o.disabled && !this.isOptionHidden(o.label())) {
                 this.activeIndex.set(i);
+                this.ensureVisible(i);
                 return;
             }
         }
@@ -1654,6 +1743,16 @@ class WrSelect {
         });
         const portal = new TemplatePortal(this.panelTpl(), this.vcr);
         this.overlayRef.attach(portal);
+        // Seed the projected panel's scroll onto the cursor the same way the virtual
+        // one is seeded from its own effect: opening a select whose selected option
+        // is the 200th shows the cursor, not the top of the list. Synchronous is
+        // correct here and a deferral would not be — `attachTemplatePortal` appends
+        // the rows and calls `detectChanges()` before returning, and `activeIndex`
+        // was seeded before `open()` flipped, so the row is in the DOM and the panel
+        // is measurable on this line. The virtual path stays on its effect, which
+        // has to wait to MEASURE a row height this one never needs.
+        if (!this.virtualActive())
+            this.ensureVisible(this.activeIndex());
         if (asSheet) {
             this.overlayRef
                 .backdropClick()
@@ -1684,16 +1783,16 @@ class WrSelect {
         this.overlayRef.dispose();
         this.overlayRef = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: WrSelect, isStandalone: true, selector: "wr-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, serverSearch: { classPropertyName: "serverSearch", publicName: "serverSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, freeText: { classPropertyName: "freeText", publicName: "freeText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchQuery: "searchQueryChange", searchChange: "searchChange", value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: WrSelect, isStandalone: true, selector: "wr-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, serverSearch: { classPropertyName: "serverSearch", publicName: "serverSearch", isSignal: true, isRequired: false, transformFunction: null }, debounceMs: { classPropertyName: "debounceMs", publicName: "debounceMs", isSignal: true, isRequired: false, transformFunction: null }, minChars: { classPropertyName: "minChars", publicName: "minChars", isSignal: true, isRequired: false, transformFunction: null }, freeText: { classPropertyName: "freeText", publicName: "freeText", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, allowDuplicates: { classPropertyName: "allowDuplicates", publicName: "allowDuplicates", isSignal: true, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, maxTagCount: { classPropertyName: "maxTagCount", publicName: "maxTagCount", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchQuery: "searchQueryChange", searchChange: "searchChange", value: "valueChange", touch: "touch" }, host: { properties: { "class": "classes()" } }, providers: [
             {
                 provide: WR_SELECT,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
                 useExisting: forwardRef(() => WrSelect),
             },
-        ], queries: [{ propertyName: "projectedOptions", predicate: WrOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagInputEl", first: true, predicate: ["tagInput"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], 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 \u2014 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    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one \u2014 see `controlId` in the\n         component. They go on the tab stop, the only labelable element here. -->\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-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      [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 \u00D7\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` \u2014 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 \u2014 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          <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 \u00D7 and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all \u2014 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      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\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-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  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\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              <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        <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]=\"resolvedSize() === 'sm'\"\n    [class.wr-select-panel--lg]=\"resolvedSize() === '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 \u2014 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            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\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 \u2014 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 \u2014 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 \u2014 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"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "projectedOptions", predicate: WrOption, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "tagInputEl", first: true, predicate: ["tagInput"], descendants: true, isSignal: true }, { propertyName: "searchInputEl", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], 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 \u2014 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    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one \u2014 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 \u2014 the one shape where the documented `ariaLabel` input reached\n         nothing. -->\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]=\"resolvedAriaLabel()\"\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      [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 \u00D7\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` \u2014 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 \u2014 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          <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 \u00D7 and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all \u2014 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      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\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-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  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\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              <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        <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]=\"resolvedSize() === 'sm'\"\n    [class.wr-select-panel--lg]=\"resolvedSize() === '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 \u2014 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            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\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 \u2014 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 \u2014 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 \u2014 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"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrSelect, decorators: [{
             type: Component,
             args: [{ selector: 'wr-select', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, imports: [WrOption], providers: [
                         {
@@ -1701,7 +1800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                             // eslint-disable-next-line @angular-eslint/no-forward-ref
                             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 \u2014 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    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one \u2014 see `controlId` in the\n         component. They go on the tab stop, the only labelable element here. -->\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-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      [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 \u00D7\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` \u2014 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 \u2014 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          <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 \u00D7 and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all \u2014 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      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\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-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  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\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              <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        <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]=\"resolvedSize() === 'sm'\"\n    [class.wr-select-panel--lg]=\"resolvedSize() === '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 \u2014 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            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\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 \u2014 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 \u2014 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 \u2014 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 \u2014 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    <!-- `id` / `aria-describedby` / `aria-invalid` come from a surrounding\n         `<wr-form-field>` and are null without one \u2014 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 \u2014 the one shape where the documented `ariaLabel` input reached\n         nothing. -->\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]=\"resolvedAriaLabel()\"\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      [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 \u00D7\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` \u2014 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 \u2014 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          <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 \u00D7 and the clear button are\n           `tabindex=\"-1\"` spans), so disabling it left a full tag select with\n           nothing focusable at all \u2014 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      <input\n        #tagInput\n        type=\"text\"\n        class=\"wr-select__tag-input\"\n        autocomplete=\"off\"\n        [attr.id]=\"controlId()\"\n        [attr.aria-label]=\"resolvedAriaLabel()\"\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-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  </div>\n} @else {\n  <button\n    type=\"button\"\n    class=\"wr-select__trigger\"\n    role=\"combobox\"\n    [attr.id]=\"controlId()\"\n    [attr.aria-label]=\"resolvedAriaLabel()\"\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              <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        <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]=\"resolvedSize() === 'sm'\"\n    [class.wr-select-panel--lg]=\"resolvedSize() === '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 \u2014 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            [attr.aria-selected]=\"isSelected(entry.item)\"\n            [attr.aria-setsize]=\"filteredDynamicOptions().length\"\n            [attr.aria-posinset]=\"entry.index + 1\"\n            (click)=\"selectOption(entry.item)\"\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 \u2014 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 \u2014 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 \u2014 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" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], displayWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayWith", required: false }] }], loader: [{ type: i0.Input, args: [{ isSignal: true, alias: "loader", required: false }] }], serverSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverSearch", required: false }] }], debounceMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceMs", required: false }] }], minChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "minChars", required: false }] }], freeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeText", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], viewportHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewportHeight", required: false }] }], overscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "overscan", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], allowDuplicates: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDuplicates", required: false }] }], validate: [{ type: i0.Input, args: [{ isSignal: true, alias: "validate", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], maxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTagCount", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], projectedOptions: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WrOption), { ...{ descendants: true }, isSignal: true }] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { ...{ read: TemplateRef }, isSignal: true }] }], tagInputEl: [{ type: i0.ViewChild, args: ['tagInput', { isSignal: true }] }], searchInputEl: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
 /**
@@ -1730,10 +1829,10 @@ class WrOptionGroup {
      * be wired to it for the name to reach a screen reader.
      */
     labelId = randomId('wr-option-group-label');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: WrOptionGroup, isStandalone: true, selector: "wr-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId" }, classAttribute: "wr-option-group" }, ngImport: i0, template: "<div class=\"wr-option-group__label\" [id]=\"labelId\">{{ label() }}</div>\n<ng-content />\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: WrOptionGroup, isStandalone: true, selector: "wr-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-labelledby": "labelId" }, classAttribute: "wr-option-group" }, ngImport: i0, template: "<div class=\"wr-option-group__label\" [id]=\"labelId\">{{ label() }}</div>\n<ng-content />\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: WrOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: WrOptionGroup, decorators: [{
             type: Component,
             args: [{ selector: 'wr-option-group', encapsulation: ViewEncapsulation.None, host: { class: 'wr-option-group', role: 'group', '[attr.aria-labelledby]': 'labelId' }, template: "<div class=\"wr-option-group__label\" [id]=\"labelId\">{{ label() }}</div>\n<ng-content />\n" }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });