@cdevhub/ngx-tw 0.2.0 → 0.3.0

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

@@ -10,7 +10,7 @@ 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 { FormFieldComponent, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
+import { TW_FORM_FIELD, TW_FORM_FIELD_CONTROL } from '@cdevhub/ngx-tw/form-field';
 
 /**
  * Internal overlay panel for `tw-select`. Renders the header/search/listbox/empty/footer
@@ -21,76 +21,106 @@ class SelectOverlayComponent {
     elementRef = inject((ElementRef));
     // ── Config signals set by the parent component ──
     /** @internal */
-    size = signal('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = signal('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** @internal */
-    color = signal('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = signal('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** @internal */
-    multiple = signal(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    multiple = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /** @internal */
-    searchable = signal(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     /** @internal */
-    panelMaxHeight = signal(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    panelMaxHeight = signal(256, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyMessage = signal('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyMessage = signal('No results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     /** @internal */
-    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    search = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
     /** @internal */
-    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     /** @internal */
-    renderedRows = signal([], ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    renderedRows = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
     /** @internal */
-    visibleOptions = signal([], ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    visibleOptions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
+    optionTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    emptyTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    headerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
+    headerTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    footerTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    footerTemplate = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionLabelFn = signal(() => '', ...(ngDevMode ? [{ debugName: "optionLabelFn" }] : /* istanbul ignore next */ []));
+    optionLabelFn = signal(() => '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabelFn" }] : /* istanbul ignore next */ []));
     /** @internal */
-    selectedChecker = signal(() => false, ...(ngDevMode ? [{ debugName: "selectedChecker" }] : /* istanbul ignore next */ []));
+    selectedChecker = signal(() => false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedChecker" }] : /* istanbul ignore next */ []));
     /** @internal */
-    computeOptionClass = signal(() => '', ...(ngDevMode ? [{ debugName: "computeOptionClass" }] : /* istanbul ignore next */ []));
+    computeOptionClass = signal(() => '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "computeOptionClass" }] : /* istanbul ignore next */ []));
     /** @internal */
-    checkmarkColorClass = signal('', ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
+    checkmarkColorClass = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
     /** @internal */
-    panelClassValue = signal('', ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
+    panelClassValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClassValue" }] : /* istanbul ignore next */ []));
     /** @internal */
-    listboxId = signal('', ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    listboxId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    searchInputId = signal('', ...(ngDevMode ? [{ debugName: "searchInputId" }] : /* istanbul ignore next */ []));
+    searchInputId = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputId" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionIdFn = signal((i) => `option-${i}`, ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
+    optionIdFn = signal((i) => `option-${i}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionIdFn" }] : /* istanbul ignore next */ []));
     /** @internal */
-    leaving = signal(false, ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
+    leaving = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "leaving" }] : /* istanbul ignore next */ []));
     // ── Callbacks set by the parent component ──
     /** @internal */
-    onSearchInput = signal(() => { }, ...(ngDevMode ? [{ debugName: "onSearchInput" }] : /* istanbul ignore next */ []));
+    onSearchInput = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onSearchInput" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onOptionSelect = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionSelect" }] : /* istanbul ignore next */ []));
+    onOptionSelect = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onOptionSelect" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onOptionActivate = signal(() => { }, ...(ngDevMode ? [{ debugName: "onOptionActivate" }] : /* istanbul ignore next */ []));
+    onOptionActivate = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onOptionActivate" }] : /* istanbul ignore next */ []));
     /** @internal */
-    onPanelKeydown = signal(() => { }, ...(ngDevMode ? [{ debugName: "onPanelKeydown" }] : /* istanbul ignore next */ []));
+    onPanelKeydown = signal(() => { }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "onPanelKeydown" }] : /* istanbul ignore next */ []));
     // ── View refs ──
-    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    searchInputRef = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
     // ── Computed classes ──
     /** @internal */
     panelClasses = computed(() => {
         const base = 'block w-full bg-surface-overlay border border-border rounded-lg shadow-md overflow-hidden flex flex-col';
         const custom = this.panelClassValue();
         return custom ? `${base} ${custom}` : base;
-    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
     checkmarkClasses = computed(() => {
         // xs/sm densities use `size-3.5` (14px) for the checkmark — the half-step
         // is the only icon size that aligns with the surrounding text-xs metric.
         const size = this.size() === 'xs' || this.size() === 'sm' ? 'size-3.5' : 'size-4';
         return `${size} shrink-0 ml-auto ${this.checkmarkColorClass()}`;
-    }, ...(ngDevMode ? [{ debugName: "checkmarkClasses" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkmarkClasses" }] : /* istanbul ignore next */ []));
     // ── Template helpers ──
     /** @internal */
     isOptionDisabled(visibleIndex) {
@@ -149,8 +179,8 @@ class SelectOverlayComponent {
     getElement() {
         return this.elementRef.nativeElement;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SelectOverlayComponent, isStandalone: true, selector: "tw-select-overlay", host: { properties: { "class": "panelClasses()", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: SelectOverlayComponent, isStandalone: true, selector: "tw-select-overlay", host: { properties: { "class": "panelClasses()", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" } }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (headerTemplate(); as tpl) {
       <div class="border-b border-border p-2">
         <ng-container *ngTemplateOutlet="tpl.templateRef" />
@@ -198,6 +228,11 @@ class SelectOverlayComponent {
               </div>
             </div>
           } @else {
+            <!-- ARIA activedescendant listbox: keyboard navigation runs on the
+                 select trigger via aria-activedescendant. Options are click-only
+                 affordances and never DOM-focus, so they need no keydown handler
+                 or tabindex of their own. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
             <div
               role="option"
               [id]="optionIdFn()(row.index)"
@@ -250,7 +285,7 @@ class SelectOverlayComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOverlayComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectOverlayComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-select-overlay',
@@ -309,6 +344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               </div>
             </div>
           } @else {
+            <!-- ARIA activedescendant listbox: keyboard navigation runs on the
+                 select trigger via aria-activedescendant. Options are click-only
+                 affordances and never DOM-focus, so they need no keydown handler
+                 or tabindex of their own. -->
+            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
             <div
               role="option"
               [id]="optionIdFn()(row.index)"
@@ -463,10 +503,10 @@ class SelectOptionTemplateDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectOptionTemplateDirective, isStandalone: true, selector: "[twSelectOption]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectOptionTemplateDirective, isStandalone: true, selector: "[twSelectOption]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectOptionTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectOptionTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twSelectOption]' }]
         }] });
@@ -478,10 +518,10 @@ class SelectTriggerTemplateDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectTriggerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectTriggerTemplateDirective, isStandalone: true, selector: "[twSelectTrigger]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectTriggerTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectTriggerTemplateDirective, isStandalone: true, selector: "[twSelectTrigger]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectTriggerTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectTriggerTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twSelectTrigger]' }]
         }] });
@@ -493,10 +533,10 @@ class SelectEmptyTemplateDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectEmptyTemplateDirective, isStandalone: true, selector: "[twSelectEmpty]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectEmptyTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectEmptyTemplateDirective, isStandalone: true, selector: "[twSelectEmpty]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectEmptyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectEmptyTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twSelectEmpty]' }]
         }] });
@@ -504,10 +544,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class SelectHeaderTemplateDirective {
     /** @internal */
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectHeaderTemplateDirective, isStandalone: true, selector: "[twSelectHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectHeaderTemplateDirective, isStandalone: true, selector: "[twSelectHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectHeaderTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectHeaderTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twSelectHeader]' }]
         }] });
@@ -515,10 +555,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 class SelectFooterTemplateDirective {
     /** @internal */
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: SelectFooterTemplateDirective, isStandalone: true, selector: "[twSelectFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectFooterTemplateDirective, isStandalone: true, selector: "[twSelectFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectFooterTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectFooterTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[twSelectFooter]' }]
         }] });
@@ -548,50 +588,69 @@ function defaultOptionGroup(o) {
  */
 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([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     /** Accessor returning the visible label for an option. Override when passing arbitrary objects. */
-    optionLabel = input(defaultOptionLabel, ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    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. */
-    optionValue = input(defaultOptionValue, ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    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. */
-    optionGroup = input(defaultOptionGroup, ...(ngDevMode ? [{ debugName: "optionGroup" }] : /* istanbul ignore next */ []));
+    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`. */
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     /** When true, renders a search input at the top of the panel that filters options using `filterPredicate`. Defaults to `false`. */
-    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
     /** Custom filter function for the search input. Defaults to a case-insensitive substring match on the option label. */
     filterPredicate = input((option, search) => {
         const label = this.optionLabel()(option);
         return label.toLowerCase().includes(search.toLowerCase());
-    }, ...(ngDevMode ? [{ debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
     /** Placeholder text shown in the trigger when no value is selected. */
-    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    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`. */
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled' });
     /** When true, exposes `aria-required="true"` on the trigger. 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', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Semantic color for focused trigger border, active-option background, and checkmarks. Defaults to `'primary'`. */
-    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    color = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     /** Visual style of the trigger. When inside a `tw-form-field` and left unset, auto-resolves to `'naked'`. Otherwise defaults to `'default'`. */
-    variant = input(undefined, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** 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', ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    panelWidth = input('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
     /** Extra class(es) applied to the overlay panel element. */
-    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    panelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     /** Maximum height of the listbox scroll region in pixels. Defaults to `256`. */
-    panelMaxHeight = input(256, ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
+    panelMaxHeight = input(256, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelMaxHeight" }] : /* istanbul ignore next */ []));
     /** Whether the panel closes after a selection is made. When unset, resolves to `true` for single-select and `false` for multi-select. */
-    closeOnSelect = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
     /** CDK scroll strategy for the overlay. Defaults to `'reposition'`. */
-    scrollStrategy = input('reposition', ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
+    scrollStrategy = input('reposition', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollStrategy" }] : /* istanbul ignore next */ []));
     /** Pixel distance between trigger and panel. Defaults to `4`. */
-    offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    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. */
-    emptyMessage = input('No results', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No results', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
     /** Accessible name for the combobox trigger. */
     ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
     /** ID of an external element that labels the combobox. */
@@ -599,14 +658,18 @@ class SelectComponent {
     /** ID of an external element that describes the combobox. */
     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, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    errorStateMatcher = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     /** Equality comparator for option values. Defaults to `Object.is`. */
-    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
+    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[]`. */
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     /** Two-way bound open state of the panel. */
-    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     // ── Outputs ──
     /** Fires when the panel's visibility finishes changing. */
     openedChange = output();
@@ -616,15 +679,20 @@ class SelectComponent {
     searchChange = output();
     // ── Content queries ──
     /** @internal */
-    triggerTemplateChild = contentChild(SelectTriggerTemplateDirective, ...(ngDevMode ? [{ debugName: "triggerTemplateChild" }] : /* istanbul ignore next */ []));
+    triggerTemplateChild = contentChild(SelectTriggerTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    optionTemplateChild = contentChild(SelectOptionTemplateDirective, ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
+    optionTemplateChild = contentChild(SelectOptionTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    emptyTemplateChild = contentChild(SelectEmptyTemplateDirective, ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
+    emptyTemplateChild = contentChild(SelectEmptyTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    headerTemplateChild = contentChild(SelectHeaderTemplateDirective, ...(ngDevMode ? [{ debugName: "headerTemplateChild" }] : /* istanbul ignore next */ []));
+    headerTemplateChild = contentChild(SelectHeaderTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerTemplateChild" }] : /* istanbul ignore next */ []));
     /** @internal */
-    footerTemplateChild = contentChild(SelectFooterTemplateDirective, ...(ngDevMode ? [{ debugName: "footerTemplateChild" }] : /* istanbul ignore next */ []));
+    footerTemplateChild = contentChild(SelectFooterTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerTemplateChild" }] : /* istanbul ignore next */ []));
     // ── Injected deps ──
     overlayService = inject(Overlay);
     elementRef = inject((ElementRef));
@@ -634,7 +702,7 @@ class SelectComponent {
     focusMonitor = inject(FocusMonitor);
     liveAnnouncer = inject(LiveAnnouncer);
     platform = inject(Platform);
-    formField = inject(FormFieldComponent, { optional: true });
+    formField = inject(TW_FORM_FIELD, { optional: true });
     ngControl = inject(NgControl, { optional: true, self: true });
     parentForm = inject(NgForm, { optional: true });
     parentFormGroup = inject(FormGroupDirective, { optional: true });
@@ -651,23 +719,34 @@ class SelectComponent {
     optionId = (index) => `${this.hostId}-option-${index}`;
     // ── Internal state signals ──
     /** @internal */
-    internalValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    search = signal('', ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    /** @internal */
-    focusedSignal = signal(false, ...(ngDevMode ? [{ debugName: "focusedSignal" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    _ngControlRev = signal(0, ...(ngDevMode ? [{ debugName: "_ngControlRev" }] : /* istanbul ignore next */ []));
-    _formSubmitRev = signal(0, ...(ngDevMode ? [{ debugName: "_formSubmitRev" }] : /* istanbul ignore next */ []));
-    describedByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "describedByIdsSignal" }] : /* istanbul ignore next */ []));
-    labelledByIdsSignal = signal([], ...(ngDevMode ? [{ debugName: "labelledByIdsSignal" }] : /* istanbul ignore next */ []));
-    closingSignal = signal(false, ...(ngDevMode ? [{ debugName: "closingSignal" }] : /* istanbul ignore next */ []));
+    internalValue = linkedSignal(() => this.value(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    search = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    focusedSignal = signal(false, /* @ts-ignore */
+    ...(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 */ []));
+    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, ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
+    overlayInstanceSignal = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayInstanceSignal" }] : /* istanbul ignore next */ []));
     perOpenSubs = null;
     closeTimer = null;
     resizeObserver = null;
@@ -676,16 +755,19 @@ class SelectComponent {
     }
     // ── Derived state ──
     /** @internal */
-    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabledInput() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     /** @internal Effective variant — auto-naked when wrapped in tw-form-field. */
-    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? (this.formField ? 'naked' : 'default'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     /** @internal */
     isEmpty = computed(() => {
         const v = this.internalValue();
         if (this.multiple())
             return !Array.isArray(v) || v.length === 0;
         return v === null || v === undefined;
-    }, ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
     /** @internal Visible (filtered) options with resolved view data. */
     visibleOptions = computed(() => {
         const opts = this.options();
@@ -703,7 +785,8 @@ class SelectComponent {
             disabled: disabledFn(option),
             group: groupFn(option),
         }));
-    }, ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []));
     /** @internal Rows rendered in the panel (group labels + options). */
     renderedRows = computed(() => {
         const visible = this.visibleOptions();
@@ -719,7 +802,8 @@ class SelectComponent {
             rows.push({ kind: 'option', option: v.option, index, group: v.group });
         });
         return rows;
-    }, ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedRows" }] : /* istanbul ignore next */ []));
     /** @internal Resolved option objects that match the current value. */
     selectedOptions = computed(() => {
         const v = this.internalValue();
@@ -733,7 +817,8 @@ class SelectComponent {
             return opts.filter((o) => arr.some((x) => cmp(valueFn(o), x)));
         }
         return opts.filter((o) => cmp(valueFn(o), v));
-    }, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
     /** @internal */
     defaultTriggerText = computed(() => {
         const opts = this.selectedOptions();
@@ -741,9 +826,11 @@ class SelectComponent {
         if (opts.length === 0)
             return '';
         return opts.map((o) => labelFn(o)).join(', ');
-    }, ...(ngDevMode ? [{ debugName: "defaultTriggerText" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultTriggerText" }] : /* istanbul ignore next */ []));
     /** @internal */
-    showClearButton = computed(() => !this.isDisabled() && !this.isEmpty(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    showClearButton = computed(() => !this.isDisabled() && !this.isEmpty(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     /** @internal */
     activeDescendantId = computed(() => {
         if (!this.open())
@@ -752,7 +839,8 @@ class SelectComponent {
         if (idx < 0 || idx >= this.visibleOptions().length)
             return null;
         return this.optionId(idx);
-    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
     /** @internal */
     describedBy = computed(() => {
         const extra = this.describedByIdsSignal();
@@ -761,7 +849,8 @@ class SelectComponent {
         if (user)
             merged.push(...user.split(/\s+/).filter(Boolean));
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
     /** @internal Merged `aria-labelledby`: form-field-pushed label ids + consumer-supplied `aria-labelledby`. */
     labelledBy = computed(() => {
         const extra = this.labelledByIdsSignal();
@@ -770,14 +859,16 @@ class SelectComponent {
         if (user)
             merged.push(...user.split(/\s+/).filter(Boolean));
         return merged.length ? merged.join(' ') : '';
-    }, ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
     /** @internal Resolved close-on-select behaviour. */
     resolvedCloseOnSelect = computed(() => {
         const explicit = this.closeOnSelect();
         if (explicit !== undefined)
             return explicit;
         return !this.multiple();
-    }, ...(ngDevMode ? [{ debugName: "resolvedCloseOnSelect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCloseOnSelect" }] : /* istanbul ignore next */ []));
     // ── tv() output ──
     variantResult = computed(() => selectVariants({
         size: this.size(),
@@ -786,19 +877,26 @@ class SelectComponent {
         disabled: this.isDisabled(),
         focused: this.focusedSignal(),
         color: this.color(),
-    }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
     /** @internal */
-    rootClasses = computed(() => this.variantResult().root(), ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
+    rootClasses = computed(() => this.variantResult().root(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rootClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    triggerClasses = computed(() => this.variantResult().trigger(), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => this.variantResult().trigger(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    valueTextClasses = computed(() => this.variantResult().valueText(), ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
+    valueTextClasses = computed(() => this.variantResult().valueText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueTextClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    placeholderTextClasses = computed(() => this.variantResult().placeholderText(), ...(ngDevMode ? [{ debugName: "placeholderTextClasses" }] : /* istanbul ignore next */ []));
+    placeholderTextClasses = computed(() => this.variantResult().placeholderText(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholderTextClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    chevronClasses = computed(() => this.variantResult().chevron(), ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
+    chevronClasses = computed(() => this.variantResult().chevron(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
-    clearButtonClasses = computed(() => this.variantResult().clearButton(), ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
+    clearButtonClasses = computed(() => this.variantResult().clearButton(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : /* istanbul ignore next */ []));
     /** @internal */
     optionSizeClass = computed(() => {
         switch (this.size()) {
@@ -813,9 +911,11 @@ class SelectComponent {
             case 'xl':
                 return 'px-4 py-3 text-base';
         }
-    }, ...(ngDevMode ? [{ debugName: "optionSizeClass" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionSizeClass" }] : /* istanbul ignore next */ []));
     /** @internal */
-    checkmarkColorClass = computed(() => OPTION_CHECKMARK_COLOR[this.color()], ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
+    checkmarkColorClass = computed(() => OPTION_CHECKMARK_COLOR[this.color()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkmarkColorClass" }] : /* istanbul ignore next */ []));
     /** @internal Class string applied to each option row. */
     computeOptionClass = (selected, active, disabled) => {
         const sizeClass = this.optionSizeClass();
@@ -838,7 +938,8 @@ class SelectComponent {
     };
     // ── FormFieldControl impl (readonly signals) ──
     /** @internal */
-    id = computed(() => this.hostId, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = computed(() => this.hostId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** @internal */
     focused = this.focusedSignal.asReadonly();
     /** @internal */
@@ -846,7 +947,8 @@ class SelectComponent {
     /** @internal */
     disabled = this.isDisabled;
     /** @internal */
-    required = computed(() => this.requiredInput(), ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    required = computed(() => this.requiredInput(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     /** @internal Error-state per the configured `ErrorStateMatcher`. Reads the bound `NgControl.invalid` through the matcher. */
     errorState = computed(() => {
         this._ngControlRev();
@@ -855,13 +957,16 @@ class SelectComponent {
         const form = this.parentFormGroup ??
             this.parentForm;
         return matcher.isErrorState(this.ngControl?.control ?? null, form);
-    }, ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
     /** @internal */
     controlType = 'select';
     /** @internal */
-    userAriaDescribedBy = computed(() => this.ariaDescribedby(), ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
+    userAriaDescribedBy = computed(() => this.ariaDescribedby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaDescribedBy" }] : /* istanbul ignore next */ []));
     /** @internal */
-    userAriaLabelledby = computed(() => this.ariaLabelledby(), ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
+    userAriaLabelledby = computed(() => this.ariaLabelledby(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userAriaLabelledby" }] : /* istanbul ignore next */ []));
     /** @internal Public read-only view of the current value for FormFieldControl. */
     // Overriding `value` typing from the model by using an explicit computed that matches the abstract signature.
     // (The model `value` property is a WritableSignal<T | readonly T[] | null>; FormFieldControl needs a Signal<T | readonly T[] | null>.
@@ -955,7 +1060,7 @@ class SelectComponent {
                 return;
             const hasLabel = !!this.ariaLabel() ||
                 !!this.ariaLabelledby() ||
-                !!this.formField?.labelChild() ||
+                !!this.formField?.hasLabel() ||
                 !!this.triggerTemplateChild();
             if (!hasLabel) {
                 console.warn('[tw-select] The select has no accessible name. Set aria-label, aria-labelledby, wrap in <tw-form-field> with a <label twLabel>, or project a *twSelectTrigger template.');
@@ -1545,8 +1650,8 @@ class SelectComponent {
                 .subscribe(() => this._formSubmitRev.update((n) => n + 1));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", 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: [
+    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: [
             {
                 provide: TW_FORM_FIELD_CONTROL,
                 useExisting: forwardRef(() => SelectComponent),
@@ -1624,7 +1729,7 @@ class SelectComponent {
     </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tw-select',