@cdevhub/ngx-tw 0.5.0 → 0.6.1

package/fesm2022/cdevhub-ngx-tw-select.mjs

@@ -1,15 +1,12 @@
 import * as i0 from '@angular/core';
 import { inject, ElementRef, signal, viewChild, computed, ChangeDetectionStrategy, Component, TemplateRef, Directive, input, model, output, contentChild, ViewContainerRef, Injector, DestroyRef, linkedSignal, effect, untracked, afterNextRender, isDevMode, forwardRef } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { NgControl } from '@angular/forms';
 import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { Platform } from '@angular/cdk/platform';
 import { FocusMonitor, LiveAnnouncer } from '@angular/cdk/a11y';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Subscription, merge } from 'rxjs';
 import { tv } from 'tailwind-variants';
-import { TW_ERROR_STATE_MATCHER, buildSelectLikePositions, resolveSelectScrollStrategy, consumeOverlayEscape } from '@cdevhub/ngx-tw/core';
+import { PickerOverlayCoordinator, wireErrorState, resolveSelectScrollStrategy, buildSelectLikePositions } from '@cdevhub/ngx-tw/core';
 import { TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 
 /**
@@ -44,6 +41,16 @@ class SelectOverlayComponent {
     /** @internal */
     activeIndex = signal(-1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Id of the active option, mirrored from the parent select.
+     *
+     * In searchable mode DOM focus sits on this panel's search input, so
+     * `aria-activedescendant` has to live there — an implicit `searchbox`
+     * allows it (inherited from `textbox`). The trigger drops the attribute for
+     * as long as the panel is open.
+     */
+    activeDescendantId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
     /** @internal */
     renderedRows = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
@@ -195,6 +202,7 @@ class SelectOverlayComponent {
           [id]="searchInputId()"
           [attr.aria-label]="'Search'"
           [attr.aria-controls]="listboxId()"
+          [attr.aria-activedescendant]="activeDescendantId()"
           [value]="search()"
           class="w-full px-3 py-1.5 rounded-md border border-border bg-surface text-fg placeholder:text-fg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none text-sm"
           placeholder="Search…"
@@ -311,6 +319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
           [id]="searchInputId()"
           [attr.aria-label]="'Search'"
           [attr.aria-controls]="listboxId()"
+          [attr.aria-activedescendant]="activeDescendantId()"
           [value]="search()"
           class="w-full px-3 py-1.5 rounded-md border border-border bg-surface text-fg placeholder:text-fg-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 transition-colors duration-normal motion-reduce:transition-none text-sm"
           placeholder="Search…"
@@ -403,36 +412,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }], propDecorators: { searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
 
-// Duration for leave animation — matches theme/_base.css scale-out/fade-out.
-const ANIMATION_DURATION = 120;
 // ── tv() config ───────────────────────────────────────────────────
 const selectVariants = tv({
     slots: {
         root: 'relative inline-block w-full',
-        trigger: 'w-full inline-flex items-center gap-2 text-fg cursor-pointer transition-[color,border-color,background-color,box-shadow] duration-normal motion-reduce:transition-none',
+        // `flex`, NOT `inline-flex`. An inline-level trigger inside the block
+        // `root` generates a line box, so the host's height became
+        // `max(strutAscent, triggerAscent) + triggerDescent` — taller than the
+        // trigger itself whenever the consumer's inherited strut out-ascends it.
+        // That is what made `xs` measure an odd 27px (26px trigger + a
+        // font-metric-dependent fraction) while combobox, whose trigger is
+        // block-level `flex`, measured a clean 26. A block-level trigger removes
+        // the line box entirely, so the host height equals the pinned height.
+        trigger: 'w-full flex items-center gap-2 text-fg cursor-pointer transition-[color,border-color,background-color,box-shadow] duration-normal motion-reduce:transition-none',
         valueText: 'flex-1 min-w-0 text-left truncate',
         placeholderText: 'flex-1 min-w-0 text-left truncate text-fg-subtle',
         chevron: 'shrink-0 text-fg-muted transition-transform duration-normal motion-reduce:transition-none',
-        clearButton: 'inline-flex items-center justify-center shrink-0 rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+        // In-flow placeholder that holds the clear control's slot inside the
+        // trigger's flex row. The control itself is an absolutely positioned
+        // SIBLING of the trigger, because HTML's content model forbids
+        // interactive content inside a `button`. Keeping a same-sized box in flow
+        // means the value text truncates at exactly the same point, and the
+        // `naked` variant's `h-auto` trigger keeps the same 24px floor, as when
+        // the control was itself a flex item. Reserving the space with trailing
+        // padding instead does NOT work: tailwind-merge does not treat `pe-*` as
+        // conflicting with `px-*`, so both would survive the merge.
+        clearSpacer: 'size-6 shrink-0',
+        // `size-6` (24px) is the WCAG 2.2 SC 2.5.8 target-size floor and the `xs`
+        // step of the square-interactive scale. It does NOT scale with `size`:
+        // the clear sits over the trigger, whose smallest pinned height is 24px
+        // (`xs` -> `h-6`), so any larger step would overflow the smallest
+        // trigger. The floor is what the success criterion asks for.
+        //
+        // `end-*` (inset-inline-end), never `right-*`: the trigger's flex row
+        // reverses under `dir="rtl"`, so a physical offset would park the control
+        // on the wrong side. Per-size values live in the `size` variant below.
+        clearButton: 'absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-md text-fg-muted hover:text-fg hover:bg-surface-muted transition-colors duration-normal motion-reduce:transition-none size-6 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
     },
     variants: {
+        // Trigger height is PINNED (docs/vertical-rhythm.md §1-3): the box is
+        // always one line, so it declares its border-box height and carries no
+        // vertical padding. Horizontal padding and the font size are unchanged.
+        //
+        // The `clearButton` offsets place the absolutely positioned control back
+        // over the in-flow `clearSpacer` it replaced. Each is the trigger's
+        // 1px border + its horizontal padding + the chevron's width + `gap-2`,
+        // rounded to the nearest spacing step (so each sits 1px inboard of the
+        // spacer, which is not perceivable). The `naked` variant drops the border
+        // and the padding and takes its own values in `compoundVariants` below.
         size: {
             // xs density: chevron uses `size-3.5` (14px) — half-step that lines up
             // with text-xs inside the compact trigger.
-            xs: { trigger: 'px-2 py-1 text-xs', chevron: 'size-3.5' },
-            sm: { trigger: 'px-3 py-1.5 text-sm', chevron: 'size-4' },
-            md: { trigger: 'px-4 py-2 text-sm', chevron: 'size-4' },
-            lg: { trigger: 'px-5 py-2.5 text-base', chevron: 'size-5' },
-            xl: { trigger: 'px-6 py-3 text-base', chevron: 'size-5' },
+            xs: { trigger: 'px-2 text-xs h-6', chevron: 'size-3.5', clearButton: 'end-8' },
+            sm: { trigger: 'px-3 text-sm h-8', chevron: 'size-4', clearButton: 'end-9' },
+            md: { trigger: 'px-4 text-sm h-9', chevron: 'size-4', clearButton: 'end-10' },
+            lg: { trigger: 'px-5 text-base h-11', chevron: 'size-5', clearButton: 'end-12' },
+            xl: { trigger: 'px-6 text-base h-12', chevron: 'size-5', clearButton: 'end-13' },
         },
         variant: {
             default: {
                 trigger: 'border border-border bg-surface rounded-md hover:border-border-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
             },
+            // `naked` = wrapped in a `tw-form-field`, which owns the box: its
+            // controlWrapper draws the border and the vertical padding. `h-auto`
+            // releases the pinned height (declared after `size`, so twMerge keeps
+            // it — same ordering `p-0` already relies on) so the trigger
+            // contributes only its line box and the field's own rhythm governs.
+            //
+            // The focus ring is NOT declared here — it depends on whether a
+            // form-field is actually present. See `fieldOwnsFocusRing` below.
             naked: {
-                trigger: 'bg-transparent border-0 rounded-none p-0 focus-visible:outline-none',
+                trigger: 'bg-transparent border-0 rounded-none p-0 h-auto',
             },
         },
+        // Whether an ancestor `tw-form-field` draws the focus ring for us. Only
+        // the `naked` variant reads it, via the compound variants below: inside
+        // a field the control wrapper owns the ring, so the trigger suppresses
+        // its own; used standalone there is no wrapper, so the trigger has to
+        // draw the canonical ring itself or the composite has no focus
+        // indicator at all (WCAG 2.2 SC 2.4.7).
+        //
+        // This cannot be expressed by adding `focus-visible:outline-none` to
+        // `naked` and overriding it later: `outline-none` (outline-style) and
+        // `outline-2` (outline-width) sit in different tailwind-merge conflict
+        // groups, so both survive the merge and `outline-style: none` wins.
+        fieldOwnsFocusRing: {
+            true: {},
+            false: {},
+        },
         open: {
             true: { chevron: 'rotate-180' },
             false: { chevron: 'rotate-0' },
@@ -462,6 +529,25 @@ const selectVariants = tv({
         { variant: 'default', focused: true, color: 'success', class: { trigger: 'border-success-500' } },
         { variant: 'default', focused: true, color: 'warning', class: { trigger: 'border-warning-500' } },
         { variant: 'default', focused: true, color: 'error', class: { trigger: 'border-error-500' } },
+        // `naked` drops the border and the horizontal padding (`px-0`), so the
+        // clear control's offset collapses to chevron width + `gap-2`.
+        { variant: 'naked', size: 'xs', class: { clearButton: 'end-6' } },
+        { variant: 'naked', size: 'sm', class: { clearButton: 'end-6' } },
+        { variant: 'naked', size: 'md', class: { clearButton: 'end-6' } },
+        { variant: 'naked', size: 'lg', class: { clearButton: 'end-7' } },
+        { variant: 'naked', size: 'xl', class: { clearButton: 'end-7' } },
+        {
+            variant: 'naked',
+            fieldOwnsFocusRing: true,
+            class: { trigger: 'focus-visible:outline-none' },
+        },
+        {
+            variant: 'naked',
+            fieldOwnsFocusRing: false,
+            class: {
+                trigger: 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500',
+            },
+        },
     ],
     defaultVariants: {
         size: 'md',
@@ -470,6 +556,7 @@ const selectVariants = tv({
         disabled: false,
         focused: false,
         color: 'primary',
+        fieldOwnsFocusRing: false,
     },
 }, { twMerge: true });
 // ── Option-state color lookups ──
@@ -590,16 +677,16 @@ class SelectComponent {
     /** Array of options to render in the panel. Accepts either `TwSelectOption<T>` objects or arbitrary records read via the accessor inputs. Defaults to an empty array. */
     options = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
-    /** Accessor returning the visible label for an option. Override when passing arbitrary objects. */
+    /** Accessor returning the visible label for an option. Override when passing arbitrary objects. Defaults to reading `.label`, falling back to `String(.value)`. */
     optionLabel = input(defaultOptionLabel, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
-    /** Accessor returning the value for an option. The result is what `value` / `valueChange` emit. */
+    /** Accessor returning the value for an option. The result is what `value` / `valueChange` emit. Defaults to reading `.value`. */
     optionValue = input(defaultOptionValue, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
     /** Accessor returning the disabled state for an option. Defaults to reading `.disabled`. */
     optionDisabled = input(defaultOptionDisabled, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
-    /** Accessor returning the group name for an option. Options sharing a group render under a labelled `role="group"` region. */
+    /** Accessor returning the group name for an option. Options sharing a group render under a labelled `role="group"` region. Defaults to reading `.group`. */
     optionGroup = input(defaultOptionGroup, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []));
     /** When true, enables multi-selection. The `value` model becomes a `T[]` and the panel renders checkable options. Defaults to `false`. */
@@ -614,12 +701,12 @@ class SelectComponent {
         return label.toLowerCase().includes(search.toLowerCase());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
-    /** Placeholder text shown in the trigger when no value is selected. */
+    /** Placeholder text shown in the trigger when no value is selected. Defaults to `undefined`. */
     placeholder = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    /** When true, the trigger cannot be activated and the panel cannot open. Defaults to `false`. */
+    /** When true, the trigger cannot be activated and the panel cannot open. Defaults to `false`. Alias: `disabled`. */
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
-    /** When true, exposes `aria-required="true"` on the trigger. Defaults to `false`. */
+    /** When true, exposes `aria-required="true"` on the trigger and the `*` marker on a wrapping `tw-form-field`. Also inferred from `Validators.required` on a bound control, so a reactive/template-driven form does not have to state it twice. Defaults to `false`. */
     requiredInput = input(false, { ...(ngDevMode ? { debugName: "requiredInput" } : /* istanbul ignore next */ {}), alias: 'required' });
     /** Controls trigger padding, font size, and panel option density. Defaults to `'md'`. */
     size = input('md', /* @ts-ignore */
@@ -633,7 +720,7 @@ class SelectComponent {
     /** Overlay panel width. `'trigger'` matches the trigger's measured width; `'auto'` lets content decide; a number is applied as pixels; a string is passed through as a CSS length. Defaults to `'trigger'`. */
     panelWidth = input('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
-    /** Extra class(es) applied to the overlay panel element. */
+    /** Extra class(es) applied to the overlay panel element. Defaults to an empty string. */
     panelClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** Maximum height of the listbox scroll region in pixels. Defaults to `256`. */
@@ -648,14 +735,14 @@ class SelectComponent {
     /** Pixel distance between trigger and panel. Defaults to `4`. */
     offset = input(4, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
-    /** Fallback message rendered when the filter yields no options and no `*twSelectEmpty` template is provided. */
+    /** Fallback message rendered when the filter yields no options and no `*twSelectEmpty` template is provided. Defaults to `'No results'`. */
     emptyMessage = input('No results', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the combobox trigger. */
+    /** Accessible name for the combobox trigger. Defaults to `undefined`. Alias: `aria-label`. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    /** ID of an external element that labels the combobox. */
+    /** ID of an external element that labels the combobox. Defaults to `undefined`. Alias: `aria-labelledby`. */
     ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
-    /** ID of an external element that describes the combobox. */
+    /** ID of an external element that describes the combobox. Defaults to `undefined`. Alias: `aria-describedby`. */
     ariaDescribedby = input(undefined, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
     /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the select uses the `TW_ERROR_STATE_MATCHER` token's value. */
     errorStateMatcher = input(undefined, /* @ts-ignore */
@@ -664,18 +751,18 @@ class SelectComponent {
     compareWith = input(Object.is, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
     // ── Models (two-way) ──
-    /** Two-way bound selected value(s). Single-select: `T | null`. Multi-select: `T[]`. */
+    /** Two-way bound selected value(s). Single-select: `T | null`. Multi-select: `T[]`. Defaults to `null`. */
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /** Two-way bound open state of the panel. */
+    /** Two-way bound open state of the panel. Defaults to `false`. */
     open = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
-    /** Fires when the panel's visibility finishes changing. */
+    /** Fires when the panel's visibility finishes changing. Payload carries the new `open` state and the trigger element the overlay is anchored to. */
     openedChange = output();
     /** Fires after any selection change, with `added`, `removed`, `previousValue`, and a `source` discriminator. */
     selectionChange = output();
-    /** Fires whenever the search input changes (only when `searchable` is true). */
+    /** Fires whenever the search input changes (only when `searchable` is true). Payload carries the raw, untrimmed query and the post-filter `visibleCount`. Emitted immediately, not debounced. */
     searchChange = output();
     // ── Content queries ──
     /** @internal */
@@ -693,8 +780,13 @@ class SelectComponent {
     /** @internal */
     footerTemplateChild = contentChild(SelectFooterTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerTemplateChild" }] : /* istanbul ignore next */ []));
+    // ── View queries ──
+    /** @internal The combobox trigger — focus target after the clear control unmounts. */
+    triggerButtonRef = viewChild('triggerButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerButtonRef" }] : /* istanbul ignore next */ []));
     // ── Injected deps ──
     overlayService = inject(Overlay);
+    coordinator = inject(PickerOverlayCoordinator);
     elementRef = inject((ElementRef));
     viewContainerRef = inject(ViewContainerRef);
     injector = inject(Injector);
@@ -704,9 +796,6 @@ class SelectComponent {
     platform = inject(Platform);
     formField = inject(TW_FORM_FIELD, { optional: true });
     ngControl = inject(NgControl, { optional: true, self: true });
-    parentForm = inject(NgForm, { optional: true });
-    parentFormGroup = inject(FormGroupDirective, { optional: true });
-    defaultMatcher = inject(TW_ERROR_STATE_MATCHER);
     // ── Identity ──
     uid = nextSelectId++;
     /** @internal */
@@ -732,27 +821,35 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
     cvaDisabled = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
+    /** @internal Shared `errorState` / `required` / `errors` derivation — see `wireErrorState`. */
+    errorWiring = wireErrorState({
+        ngControl: () => this.ngControl,
+        matcher: () => this.errorStateMatcher(),
+        required: () => this.requiredInput(),
+    });
     describedByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
     labelledByIdsSignal = signal([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
-    closingSignal = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
-    overlayRef = null;
-    overlayInstanceSignal = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
-    perOpenSubs = null;
-    closeTimer = null;
+    /**
+     * Watches the host for size changes so `panelWidth="trigger"` keeps tracking
+     * while the panel is up. Minted per open and disconnected on close, because
+     * the `OverlayRef` it feeds is disposed on close (see `openOverlay`).
+     */
     resizeObserver = null;
-    get overlayInstance() {
-        return this.overlayInstanceSignal();
-    }
+    // Overlay bookkeeping is deliberately held in plain fields, not signals — same
+    // shape as popover and command-palette. A signal here would be track-read by the
+    // open/close lifecycle effect that also writes it, which is the cycle shape
+    // CLAUDE.md forbids. The only reactive bit is `isAttached`, written by the
+    // lifecycle effect and read only by the state-push effect below, so the two
+    // never form a loop.
+    overlayInstance = null;
+    closing = false;
+    /** Flips true once the overlay component is attached; the sole trigger for the state-push effect. */
+    isAttached = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isAttached" }] : /* istanbul ignore next */ []));
     // ── Derived state ──
     /** @internal */
     isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
@@ -841,6 +938,21 @@ class SelectComponent {
         return this.optionId(idx);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal `aria-activedescendant` for the trigger button.
+     *
+     * Null while a searchable panel is open: `openOverlay()` moves DOM focus to
+     * the overlay's search input, and `aria-activedescendant` is only honoured
+     * on the element that actually holds focus. Leaving it on the blurred
+     * trigger made arrow-key navigation silent to assistive tech. The overlay's
+     * search input carries it instead in that mode.
+     */
+    triggerActiveDescendantId = computed(() => {
+        if (this.searchable() && this.open())
+            return null;
+        return this.activeDescendantId();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerActiveDescendantId" }] : /* istanbul ignore next */ []));
     /** @internal */
     describedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -877,6 +989,7 @@ class SelectComponent {
         disabled: this.isDisabled(),
         focused: this.focusedSignal(),
         color: this.color(),
+        fieldOwnsFocusRing: !!this.formField,
     }), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
@@ -898,6 +1011,9 @@ class SelectComponent {
     clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
+    clearSpacerClasses = computed(() => this.variantResult().clearSpacer(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearSpacerClasses" }] : /* istanbul ignore next */ []));
+    /** @internal */
     optionSizeClass = computed(() => {
         switch (this.size()) {
             case 'xs':
@@ -946,19 +1062,20 @@ class SelectComponent {
     empty = this.isEmpty;
     /** @internal */
     disabled = this.isDisabled;
-    /** @internal */
-    required = computed(() => this.requiredInput(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Resolved required state: the `required` input OR'd with
+     * `Validators.required` on a bound `NgControl`. Without the validator arm the
+     * form-field `*` marker (`FormFieldComponent.isRequired`) and the trigger's
+     * `aria-required` silently vanish under reactive/template-driven forms, while
+     * signal forms shows them — `cvaControlCreate` writes the `required` *input*
+     * directly from the field state and never consults validators. The OR keeps
+     * both branches true at once.
+     */
+    required = this.errorWiring.required;
+    /** @internal Active validation errors map from the bound `NgControl`. Drives `[twError match="…"]` inside a wrapping `tw-form-field`; without it the form-field's key set is permanently empty and every `match`ed error stays hidden. */
+    errors = this.errorWiring.errors;
     /** @internal Error-state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher. */
-    errorState = computed(() => {
-        this._ngControlRev();
-        this._formSubmitRev();
-        const matcher = this.errorStateMatcher() ?? this.defaultMatcher;
-        const form = this.parentFormGroup ??
-            this.parentForm;
-        return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    errorState = this.errorWiring.errorState;
     /** @internal */
     controlType = 'select';
     /** @internal */
@@ -981,27 +1098,32 @@ class SelectComponent {
             this.ngControl.valueAccessor = this;
         }
         // Mirror parent `open` model into overlay lifecycle.
+        // Only `open` and `isDisabled` are read in the tracked phase; the lifecycle
+        // calls run inside `untracked()` because they both read and write panel state
+        // (openOverlay resets `search` and then reads it back through visibleOptions).
         effect(() => {
             const shouldOpen = this.open();
             const disabled = this.isDisabled();
-            if (disabled && this.overlayInstance) {
-                this.closeOverlay();
-                return;
-            }
-            if (shouldOpen && !this.overlayInstance && !disabled && !this.closingSignal()) {
-                this.openOverlay();
-            }
-            else if (!shouldOpen && this.overlayInstance && !this.closingSignal()) {
-                this.closeOverlay();
-            }
+            untracked(() => {
+                if (disabled && this.overlayInstance) {
+                    this.closeOverlay();
+                    return;
+                }
+                if (shouldOpen && !this.overlayInstance && !disabled && !this.closing) {
+                    this.openOverlay();
+                }
+                else if (!shouldOpen && this.overlayInstance && !this.closing) {
+                    this.closeOverlay();
+                }
+            });
         });
         // Push state into overlay component whenever anything relevant changes.
-        // Reads happen in the tracked phase; writes to the overlay instance are
-        // wrapped in `untracked()` so they never feed back into this effect.
+        // `isAttached` is the trigger — it is written by the lifecycle effect above
+        // and never written here, so the two effects cannot feed each other. All
+        // reads happen in the tracked phase; every write to the overlay instance is
+        // wrapped in `untracked()` so it never feeds back into this effect.
         effect(() => {
-            const instance = this.overlayInstance;
-            if (!instance)
-                return;
+            const attached = this.isAttached();
             const size = this.size();
             const color = this.color();
             const multiple = this.multiple();
@@ -1010,6 +1132,7 @@ class SelectComponent {
             const emptyMessage = this.emptyMessage();
             const search = this.search();
             const activeIndex = this.activeIndex();
+            const activeDescendantId = this.activeDescendantId();
             const renderedRows = this.renderedRows();
             const visibleOptions = this.visibleOptions();
             const optionTemplate = this.optionTemplateChild();
@@ -1020,6 +1143,9 @@ class SelectComponent {
             const checkmarkColorClass = this.checkmarkColorClass();
             const panelClassValue = this.resolvePanelClass();
             untracked(() => {
+                const instance = this.overlayInstance;
+                if (!attached || !instance)
+                    return;
                 instance.size.set(size);
                 instance.color.set(color);
                 instance.multiple.set(multiple);
@@ -1028,6 +1154,7 @@ class SelectComponent {
                 instance.emptyMessage.set(emptyMessage);
                 instance.search.set(search);
                 instance.activeIndex.set(activeIndex);
+                instance.activeDescendantId.set(activeDescendantId);
                 instance.renderedRows.set(renderedRows);
                 instance.visibleOptions.set(visibleOptions);
                 instance.optionTemplate.set(optionTemplate);
@@ -1077,20 +1204,20 @@ class SelectComponent {
                 if (wasFocused) {
                     // Blur often flips `touched` on the bound `NgControl`; bump the
                     // revision so `errorState` recomputes.
-                    this._ngControlRev.update((n) => n + 1);
+                    this.errorWiring.bump();
                 }
             }
         });
+        // The overlay itself is torn down by `PickerOverlayCoordinator`, which
+        // registers its own `DestroyRef.onDestroy` during this component's field
+        // initialisation — i.e. before this hook — and disposes the `OverlayRef`,
+        // cancels the close timer and completes the per-open streams there.
         this.destroyRef.onDestroy(() => {
             monitorSub.unsubscribe();
             this.focusMonitor.stopMonitoring(this.elementRef);
-            this.clearCloseTimer();
-            this.perOpenSubs?.unsubscribe();
             this.resizeObserver?.disconnect();
             this.resizeObserver = null;
-            this.overlayRef?.dispose();
-            this.overlayRef = null;
-            this.overlayInstanceSignal.set(null);
+            this.overlayInstance = null;
         });
     }
     // ── Public methods ──
@@ -1167,20 +1294,54 @@ class SelectComponent {
             return;
         this.toggle();
     }
-    /** @internal */
+    /**
+     * @internal
+     *
+     * `stopPropagation` + `preventDefault` are load-bearing even now that the
+     * control is a sibling of the trigger rather than nested inside it: inside a
+     * `tw-form-field` the click still bubbles to the field's control wrapper,
+     * which calls `onContainerClick()` and would open the panel on a clear.
+     */
     onClearClick(event) {
         event.stopPropagation();
         event.preventDefault();
         this.clear();
+        this.focusTrigger();
     }
-    /** @internal */
+    /**
+     * @internal
+     *
+     * A native `button` already activates on Enter and Space in a browser, so
+     * this looks redundant — it is not. `preventDefault()` here suppresses that
+     * native activation, so the two paths cannot both fire, and jsdom never
+     * synthesises a click from a key event at all, which makes this the only
+     * keyboard path a unit spec can exercise.
+     */
     onClearKeydown(event) {
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             event.stopPropagation();
             this.clear();
+            this.focusTrigger();
         }
     }
+    /**
+     * Clearing removes the clear control from the DOM (`showClearButton()` goes
+     * false), so whatever had focus is destroyed under the user. Hand focus back
+     * to the trigger rather than letting it fall to `<body>` (SC 2.4.3).
+     *
+     * The disabled guard is not redundant. `[disabled]` on a native button makes
+     * `.focus()` a silent no-op (the same trap `calendar-cell` hit), and today
+     * the only reason the path cannot be reached is that `showClearButton()`
+     * happens to include `!isDisabled()`. That is ordering, not a guarantee: a
+     * `setDisabledState(true)` landing between the keydown and this call would
+     * drop focus to `<body>` with nothing to show for it.
+     */
+    focusTrigger() {
+        if (this.isDisabled())
+            return;
+        this.triggerButtonRef()?.nativeElement.focus();
+    }
     /** @internal */
     onTriggerKeydown(event) {
         if (this.isDisabled())
@@ -1311,7 +1472,12 @@ class SelectComponent {
         this.typeAheadBuffer += char.toLowerCase();
         const labelFn = this.optionLabel();
         const visible = this.visibleOptions();
-        const match = visible.findIndex((o) => labelFn(o.option).toLowerCase().startsWith(this.typeAheadBuffer));
+        // Disabled options are skipped, matching every other navigation path in this
+        // file (`findEnabledFrom`). Without the filter, `aria-activedescendant` could
+        // land on an option that `selectByVisibleIndex` then refuses to commit, so
+        // Enter did nothing with no feedback.
+        const match = visible.findIndex((o) => !o.disabled &&
+            labelFn(o.option).toLowerCase().startsWith(this.typeAheadBuffer));
         if (match >= 0) {
             if (!this.open())
                 this.openPanel();
@@ -1446,12 +1612,47 @@ class SelectComponent {
         }
     }
     // ── Overlay lifecycle ──
+    /**
+     * Builds and attaches the panel through {@link PickerOverlayCoordinator}.
+     *
+     * The coordinator disposes the `OverlayRef` on close, so every value read
+     * here — `offset`, `scrollStrategy`, `panelClass`, and the position
+     * strategy's origin — is re-read on each open rather than frozen at the
+     * first one. That replaces the previous `refreshPositionConfig()` /
+     * `applyScrollStrategy()` pair, which could only refresh the two inputs it
+     * knew about on a reused ref.
+     *
+     * `focusTrap: false` is load-bearing: this is an `aria-activedescendant`
+     * listbox, so DOM focus stays on the trigger (or the panel's search input)
+     * and a trap's anchor elements would inject tab stops around the panel.
+     */
     openOverlay() {
-        this.ensureOverlay();
-        this.attachOverlayComponent();
+        const result = this.coordinator.open({
+            origin: this.elementRef,
+            portalComponent: SelectOverlayComponent,
+            viewContainerRef: this.viewContainerRef,
+            injector: this.injector,
+            positions: buildSelectLikePositions(this.offset()),
+            scrollStrategy: resolveSelectScrollStrategy(this.scrollStrategy(), this.overlayService),
+            panelClass: 'tw-select-panel',
+            focusTrap: false,
+        });
+        if (!result)
+            return;
+        const instance = result.instance;
+        instance.onSearchInput.set((v) => this.search.set(v));
+        instance.onOptionSelect.set((i) => this.selectByVisibleIndex(i, 'user'));
+        instance.onOptionActivate.set((i) => this.activeIndex.set(i));
+        instance.onPanelKeydown.set((e) => this.handleKeydown(e));
+        this.overlayInstance = instance;
+        this.installResizeObserver();
+        this.updateOverlaySize();
         this.subscribePerOpen();
         this.search.set('');
         this.initActiveIndexOnOpen();
+        // Set last: this is what wakes the state-push effect, and it must not fire
+        // until the instance exists and the per-open state has been reset.
+        this.isAttached.set(true);
         queueMicrotask(() => {
             if (this.searchable()) {
                 this.overlayInstance?.focusSearchInput();
@@ -1460,47 +1661,27 @@ class SelectComponent {
         this.openedChange.emit({ open: true, trigger: this.elementRef.nativeElement });
     }
     closeOverlay() {
-        if (this.closingSignal() || !this.overlayInstance)
+        if (this.closing || !this.overlayInstance)
             return;
-        this.closingSignal.set(true);
+        this.closing = true;
         this.overlayInstance.leaving.set(true);
-        this.elementRef.nativeElement.querySelector('button')?.focus();
-        this.closeTimer = setTimeout(() => {
-            this.closeTimer = null;
-            if (this.overlayRef?.hasAttached()) {
-                this.overlayRef.detach();
-            }
-            this.perOpenSubs?.unsubscribe();
-            this.perOpenSubs = null;
-            this.overlayInstanceSignal.set(null);
+        this.triggerButtonRef()?.nativeElement.focus();
+        // The coordinator runs the leave animation, then detaches and disposes;
+        // this callback fires once the overlay is fully gone.
+        this.coordinator.close(() => {
+            // Safe to drop the observer: the next open mints a fresh one against the
+            // fresh OverlayRef. Keeping it alive would leave it feeding a disposed
+            // ref, which is the mirror image of the bug the old reuse path had.
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = null;
+            this.overlayInstance = null;
+            this.isAttached.set(false);
             this.search.set('');
             this.activeIndex.set(-1);
             untracked(() => this.open.set(false));
-            this.closingSignal.set(false);
+            this.closing = false;
             this.openedChange.emit({ open: false, trigger: this.elementRef.nativeElement });
-        }, ANIMATION_DURATION);
-    }
-    ensureOverlay() {
-        if (this.overlayRef) {
-            this.updateOverlaySize();
-            return;
-        }
-        const positionStrategy = this.overlayService
-            .position()
-            .flexibleConnectedTo(this.elementRef)
-            .withPositions(buildSelectLikePositions(this.offset()))
-            .withFlexibleDimensions(false)
-            .withPush(false)
-            .withViewportMargin(8);
-        this.overlayRef = this.overlayService.create({
-            positionStrategy,
-            scrollStrategy: resolveSelectScrollStrategy(this.scrollStrategy(), this.overlayService),
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: 'tw-select-panel',
         });
-        this.installResizeObserver();
-        this.updateOverlaySize();
     }
     installResizeObserver() {
         if (!this.platform.isBrowser || typeof ResizeObserver === 'undefined')
@@ -1510,61 +1691,43 @@ class SelectComponent {
         this.resizeObserver.observe(this.elementRef.nativeElement);
     }
     updateOverlaySize() {
-        if (!this.overlayRef)
+        const overlayRef = this.coordinator.ref();
+        if (!overlayRef)
             return;
         const width = this.panelWidth();
         if (width === 'trigger') {
-            const button = this.elementRef.nativeElement.querySelector('button');
+            // The view query, NOT `querySelector('button')`: the clear control is now
+            // a second button inside the host, and measuring the wrong one would
+            // silently corrupt `panelWidth="trigger"`.
+            const button = this.triggerButtonRef()?.nativeElement ?? null;
             const rect = (button ?? this.elementRef.nativeElement).getBoundingClientRect();
-            this.overlayRef.updateSize({ width: rect.width });
+            overlayRef.updateSize({ width: rect.width });
         }
         else if (width === 'auto') {
-            this.overlayRef.updateSize({ width: undefined, minWidth: undefined });
-        }
-        else if (typeof width === 'number') {
-            this.overlayRef.updateSize({ width });
+            overlayRef.updateSize({ width: undefined, minWidth: undefined });
         }
         else {
-            this.overlayRef.updateSize({ width });
+            overlayRef.updateSize({ width });
         }
     }
-    attachOverlayComponent() {
-        if (!this.overlayRef)
-            return;
-        const portal = new ComponentPortal(SelectOverlayComponent, this.viewContainerRef, this.injector);
-        const ref = this.overlayRef.attach(portal);
-        const instance = ref.instance;
-        instance.onSearchInput.set((v) => this.search.set(v));
-        instance.onOptionSelect.set((i) => this.selectByVisibleIndex(i, 'user'));
-        instance.onOptionActivate.set((i) => this.activeIndex.set(i));
-        instance.onPanelKeydown.set((e) => this.handleKeydown(e));
-        this.overlayInstanceSignal.set(instance);
-    }
+    /**
+     * Registers the backdrop-click and Escape listeners for one open.
+     *
+     * Both streams come from the coordinator, which completes them when the
+     * overlay closes — so there is no per-open `Subscription` aggregate to keep
+     * and no way for listeners to accumulate across opens.
+     */
     subscribePerOpen() {
-        this.perOpenSubs?.unsubscribe();
-        this.perOpenSubs = new Subscription();
-        if (!this.overlayRef)
-            return;
-        this.perOpenSubs.add(this.overlayRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.closePanel()));
-        const teardownEscape = consumeOverlayEscape(this.overlayRef, (event) => {
+        this.coordinator.backdropClick$().subscribe(() => this.closePanel());
+        this.coordinator.escape$().subscribe((event) => {
             event.preventDefault();
             this.closePanel();
         });
-        this.perOpenSubs.add(() => teardownEscape());
     }
     resolvePanelClass() {
         const raw = this.panelClass();
         return Array.isArray(raw) ? raw.join(' ') : raw;
     }
-    clearCloseTimer() {
-        if (this.closeTimer !== null) {
-            clearTimeout(this.closeTimer);
-            this.closeTimer = null;
-        }
-    }
     /** @internal */
     buildTriggerContext() {
         return {
@@ -1624,8 +1787,7 @@ class SelectComponent {
     onContainerClick(event) {
         if (this.isDisabled())
             return;
-        const btn = this.elementRef.nativeElement.querySelector('button');
-        btn?.focus();
+        this.triggerButtonRef()?.nativeElement.focus();
         if (!event.defaultPrevented) {
             this.openPanel();
         }
@@ -1634,21 +1796,7 @@ class SelectComponent {
         // NgControl's `control` is set by the parent FormControl* directive before
         // children's `ngOnInit`. Subscribe here so errorState reacts to status/value
         // changes on the bound control.
-        const ctrl = this.ngControl?.control;
-        if (ctrl) {
-            const streams = [ctrl.statusChanges, ctrl.valueChanges].filter((s) => !!s);
-            if (streams.length) {
-                merge(...streams)
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => this._ngControlRev.update((n) => n + 1));
-            }
-        }
-        const submit = this.parentFormGroup?.ngSubmit ?? this.parentForm?.ngSubmit;
-        if (submit) {
-            submit
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this._formSubmitRev.update((n) => n + 1));
-        }
+        this.errorWiring.connect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectComponent, isStandalone: true, selector: "tw-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionGroup: { classPropertyName: "optionGroup", publicName: "optionGroup", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, requiredInput: { classPropertyName: "requiredInput", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", open: "openChange", openedChange: "openedChange", selectionChange: "selectionChange", searchChange: "searchChange" }, host: { properties: { "class": "rootClasses()" } }, providers: [
@@ -1656,7 +1804,8 @@ class SelectComponent {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => SelectComponent),
             },
-        ], queries: [{ propertyName: "triggerTemplateChild", first: true, predicate: SelectTriggerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionTemplateChild", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "emptyTemplateChild", first: true, predicate: SelectEmptyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplateChild", first: true, predicate: SelectHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplateChild", first: true, predicate: SelectFooterTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+            PickerOverlayCoordinator,
+        ], queries: [{ propertyName: "triggerTemplateChild", first: true, predicate: SelectTriggerTemplateDirective, descendants: true, isSignal: true }, { propertyName: "optionTemplateChild", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "emptyTemplateChild", first: true, predicate: SelectEmptyTemplateDirective, descendants: true, isSignal: true }, { propertyName: "headerTemplateChild", first: true, predicate: SelectHeaderTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplateChild", first: true, predicate: SelectFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerButtonRef", first: true, predicate: ["triggerButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       #triggerButton
       type="button"
@@ -1666,12 +1815,12 @@ class SelectComponent {
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-expanded]="open() ? 'true' : 'false'"
       [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeDescendantId() || null"
+      [attr.aria-activedescendant]="triggerActiveDescendantId()"
       [attr.aria-autocomplete]="searchable() ? 'list' : 'none'"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="labelledBy() || null"
       [attr.aria-describedby]="describedBy() || null"
-      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-required]="required() || null"
       [attr.aria-invalid]="errorState() || null"
       [attr.aria-disabled]="isDisabled() || null"
       [disabled]="isDisabled()"
@@ -1692,22 +1841,11 @@ class SelectComponent {
       }
 
       @if (showClearButton()) {
-        <span
-          role="button"
-          tabindex="-1"
-          [class]="clearButtonClasses()"
-          [attr.aria-label]="'Clear selection'"
-          (click)="onClearClick($event)"
-          (keydown)="onClearKeydown($event)"
-        >
-          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
-            <path
-              fill-rule="evenodd"
-              d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </span>
+        <!--
+          Holds the clear control's slot in the flex row. The control itself is
+          rendered after this button, not inside it - see clearSpacer above.
+        -->
+        <span [class]="clearSpacerClasses()" aria-hidden="true"></span>
       }
 
       <svg
@@ -1724,6 +1862,30 @@ class SelectComponent {
       </svg>
     </button>
 
+    @if (showClearButton()) {
+      <!--
+        A real, native button and a SIBLING of the trigger: HTML's content model
+        for button is "no interactive content descendant", so the previous
+        role="button" tabindex="0" span nested inside the trigger was invalid.
+        It sits after the trigger in DOM order, so the tab order is unchanged.
+      -->
+      <button
+        type="button"
+        [class]="clearButtonClasses()"
+        aria-label="Clear selection"
+        (click)="onClearClick($event)"
+        (keydown)="onClearKeydown($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+
     <span hidden>
       <ng-content />
     </span>
@@ -1740,6 +1902,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                             provide: TW_FORM_FIELD_CONTROL,
                             useExisting: forwardRef(() => SelectComponent),
                         },
+                        PickerOverlayCoordinator,
                     ],
                     template: `
     <button
@@ -1751,12 +1914,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       [attr.aria-haspopup]="'listbox'"
       [attr.aria-expanded]="open() ? 'true' : 'false'"
       [attr.aria-controls]="listboxId"
-      [attr.aria-activedescendant]="activeDescendantId() || null"
+      [attr.aria-activedescendant]="triggerActiveDescendantId()"
       [attr.aria-autocomplete]="searchable() ? 'list' : 'none'"
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-labelledby]="labelledBy() || null"
       [attr.aria-describedby]="describedBy() || null"
-      [attr.aria-required]="requiredInput() || null"
+      [attr.aria-required]="required() || null"
       [attr.aria-invalid]="errorState() || null"
       [attr.aria-disabled]="isDisabled() || null"
       [disabled]="isDisabled()"
@@ -1777,22 +1940,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       }
 
       @if (showClearButton()) {
-        <span
-          role="button"
-          tabindex="-1"
-          [class]="clearButtonClasses()"
-          [attr.aria-label]="'Clear selection'"
-          (click)="onClearClick($event)"
-          (keydown)="onClearKeydown($event)"
-        >
-          <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
-            <path
-              fill-rule="evenodd"
-              d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </span>
+        <!--
+          Holds the clear control's slot in the flex row. The control itself is
+          rendered after this button, not inside it - see clearSpacer above.
+        -->
+        <span [class]="clearSpacerClasses()" aria-hidden="true"></span>
       }
 
       <svg
@@ -1809,6 +1961,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       </svg>
     </button>
 
+    @if (showClearButton()) {
+      <!--
+        A real, native button and a SIBLING of the trigger: HTML's content model
+        for button is "no interactive content descendant", so the previous
+        role="button" tabindex="0" span nested inside the trigger was invalid.
+        It sits after the trigger in DOM order, so the tab order is unchanged.
+      -->
+      <button
+        type="button"
+        [class]="clearButtonClasses()"
+        aria-label="Clear selection"
+        (click)="onClearClick($event)"
+        (keydown)="onClearKeydown($event)"
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-3">
+          <path
+            fill-rule="evenodd"
+            d="M10 8.586 4.707 3.293a1 1 0 0 0-1.414 1.414L8.586 10l-5.293 5.293a1 1 0 1 0 1.414 1.414L10 11.414l5.293 5.293a1 1 0 0 0 1.414-1.414L11.414 10l5.293-5.293a1 1 0 0 0-1.414-1.414L10 8.586Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </button>
+    }
+
     <span hidden>
       <ng-content />
     </span>
@@ -1817,7 +1993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[class]': 'rootClasses()',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroup", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], triggerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTriggerTemplateDirective), { isSignal: true }] }], optionTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], emptyTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectEmptyTemplateDirective), { isSignal: true }] }], headerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectHeaderTemplateDirective), { isSignal: true }] }], footerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectFooterTemplateDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroup", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], requiredInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], triggerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectTriggerTemplateDirective), { isSignal: true }] }], optionTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectOptionTemplateDirective), { isSignal: true }] }], emptyTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectEmptyTemplateDirective), { isSignal: true }] }], headerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectHeaderTemplateDirective), { isSignal: true }] }], footerTemplateChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SelectFooterTemplateDirective), { isSignal: true }] }], triggerButtonRef: [{ type: i0.ViewChild, args: ['triggerButton', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.