@ethlete/cdk 3.19.0 → 3.19.2

package/fesm2022/ethlete-cdk.mjs

@@ -4,10 +4,11 @@ import { AsyncPipe, NgIf, NgClass, NgTemplateOutlet, NgForOf, NgFor, NgComponent
 import * as i0 from '@angular/core';
 import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive, InjectionToken, booleanAttribute, Input, ContentChild, ContentChildren, inject, ElementRef, Injector, HostBinding, computed, signal, Optional, Inject, Injectable, SkipSelf, HostListener, ViewContainerRef, EventEmitter, NgZone, isDevMode, Output, NgModule, ChangeDetectorRef, ViewChild, runInInjectionContext, TemplateRef, forwardRef, LOCALE_ID, numberAttribute, ViewChildren, Renderer2, Attribute } from '@angular/core';
 import * as i1$2 from '@ethlete/core';
-import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, createReactiveBindings, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
-import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, take, merge, skipUntil, defer, fromEvent, partition, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription, Observable } from 'rxjs';
+import { LetDirective, createDestroy, ScrollObserverFirstElementDirective, ScrollObserverLastElementDirective, Memo, signalHostAttributes, signalHostClasses, AnimatedIfDirective, AnimatedLifecycleDirective, SmartBlockScrollStrategy, RouterStateService, ANIMATED_LIFECYCLE_TOKEN, nextFrame, elementCanScroll, equal, ViewportService, AnimatedOverlayDirective, ClickObserverService, FocusVisibleService, cloneFormGroup, getFormGroupValue, ObserveVisibilityDirective, signalVisibilityChangeClasses, IS_EMAIL, MUST_MATCH, IS_ARRAY_NOT_EMPTY, AT_LEAST_ONE_REQUIRED, switchQueryListChanges, signalAttributes, ResizeObserverService, createFlipAnimation, RuntimeError, SelectionModel, ActiveSelectionModel, KeyPressManager, signalClasses, scrollToElement, isEmptyArray, isObjectArray, isPrimitiveArray, ClickOutsideDirective, ObserveContentDirective, clamp, DELAYABLE_TOKEN, ObserveResizeDirective, getElementVisibleStates, IS_ACTIVE_ELEMENT, IS_ELEMENT, CursorDragScrollDirective, ObserveScrollStateDirective, IsElementDirective, IsActiveElementDirective, ScrollObserverIgnoreTargetDirective, TypedQueryList } from '@ethlete/core';
+import { BehaviorSubject, startWith, map, switchMap, combineLatest, pairwise, tap, takeUntil, skip, of, Subject, filter, take, merge, skipUntil, defer, fromEvent, partition, debounceTime as debounceTime$1, Observable, distinctUntilChanged as distinctUntilChanged$1, withLatestFrom, skipWhile, catchError, throwError, firstValueFrom, timer, Subscription } from 'rxjs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { __decorate, __metadata } from 'tslib';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { extractQuery, isQueryStateLoading, isQueryStateSuccess, isQueryStateFailure, QueryDirective, shouldRetryRequest, isClassValidatorError, isSymfonyFormViolationListError } from '@ethlete/query';
 import { CdkDialogContainer, Dialog, DialogConfig, DIALOG_SCROLL_STRATEGY_PROVIDER as DIALOG_SCROLL_STRATEGY_PROVIDER$1 } from '@angular/cdk/dialog';
 import * as i1$1 from '@angular/cdk/a11y';
@@ -18,11 +19,12 @@ import { ESCAPE, hasModifierKey, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW,
 import * as i1$4 from '@angular/cdk/bidi';
 import { Directionality } from '@angular/cdk/bidi';
 import { coerceBooleanProperty, coerceCssPixelValue, coerceElement, _isNumberValue } from '@angular/cdk/coercion';
-import * as i2$1 from '@angular/cdk/platform';
+import * as i2$2 from '@angular/cdk/platform';
 import { _getEventTarget } from '@angular/cdk/platform';
 import { startWith as startWith$1, debounceTime, distinctUntilChanged, takeUntil as takeUntil$1, skip as skip$1, filter as filter$1, mergeMap, mapTo, mergeAll, switchMap as switchMap$1, take as take$1 } from 'rxjs/operators';
 import { UniqueSelectionDispatcher, _VIEW_REPEATER_STRATEGY, _RecycleViewRepeaterStrategy, _DisposeViewRepeaterStrategy, DataSource } from '@angular/cdk/collections';
-import { toSignal } from '@angular/core/rxjs-interop';
+import * as i2$1 from '@ethlete/theming';
+import { THEME_PROVIDER, ProvideThemeDirective } from '@ethlete/theming';
 import { AutofillMonitor } from '@angular/cdk/text-field';
 import { FormControl, NgControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
@@ -1027,27 +1029,11 @@ class ButtonDirective {
         this._disabled$ = new BehaviorSubject(false);
         this._type$ = new BehaviorSubject('button');
         this._pressed$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: ['disabled', 'aria-disabled'],
-            observable: this.disabled$.pipe(map((disabled) => ({
-                render: disabled,
-                value: true,
-            }))),
-        }, {
-            attribute: ['tabindex'],
-            observable: this.disabled$.pipe(map((disabled) => ({
-                render: disabled && this.isAnchor,
-                value: -1,
-            }))),
-        }, {
-            attribute: ['type'],
-            observable: this.type$.pipe(map((type) => ({
-                render: this.isButton,
-                value: type,
-            }))),
-        }, {
-            attribute: ['aria-pressed'],
-            observable: this._pressed$,
+        this.hostAttributeBindings = signalHostAttributes({
+            'disabled aria-disabled': toSignal(this.disabled$),
+            'aria-pressed': toSignal(this._pressed$),
+            ...(this.isAnchor ? { tabindex: toSignal(this.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))) } : {}),
+            ...(this.isButton ? { type: toSignal(this.type$) } : {}),
         });
     }
     get disabled() {
@@ -1075,10 +1061,10 @@ class ButtonDirective {
         this._pressed$.next(booleanAttribute(value));
     }
     _removeDisabledBindings() {
-        this._bindings.remove('disabled', 'aria-disabled');
+        this.hostAttributeBindings.remove('disabled', 'aria-disabled');
     }
     _removeTabIndexBindings() {
-        this._bindings.remove('tabindex');
+        this.hostAttributeBindings.remove('tabindex');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: ButtonDirective, isStandalone: true, inputs: { disabled: "disabled", type: "type", pressed: "pressed" }, exportAs: ["etButton"], ngImport: i0 }); }
@@ -1133,7 +1119,6 @@ class QueryButtonDirective {
         classList.remove(CLASSES.success);
         classList.remove(CLASSES.failure);
         classList.remove(CLASSES.loading);
-        this._bindings.reset();
         const query = extractQuery(this._query$.value);
         if (!query) {
             return;
@@ -1184,15 +1169,9 @@ class QueryButtonDirective {
         this._skipFailure = false;
         this._skipLoading = false;
         this._query$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: ['disabled', 'aria-disabled'],
-            observable: combineLatest([this._button.disabled$, this.showFailure$, this.showSuccess$, this.isLoading$]).pipe(map(([disabled, showFailure, showSuccess, isLoading]) => ({
-                render: disabled || showFailure || showSuccess || isLoading,
-                value: true,
-            }))),
-        }, {
-            attribute: ['aria-live'],
-            observable: combineLatest([
+        this.hostAttributeBindings = signalHostAttributes({
+            'disabled aria-disabled': toSignal(combineLatest([this._button.disabled$, this.showFailure$, this.showSuccess$, this.isLoading$]).pipe(map(([disabled, showFailure, showSuccess, isLoading]) => disabled || showFailure || showSuccess || isLoading))),
+            'aria-live': toSignal(combineLatest([
                 this.query$.pipe(map((q) => extractQuery(q)), switchMap((q) => q?.state$ ?? of(null))),
                 this.didLoadOnce$,
             ]).pipe(map(([state, didLoadOnce]) => {
@@ -1200,11 +1179,8 @@ class QueryButtonDirective {
                 if (isQueryStateLoading(state) || isQueryStateSuccess(state) || isQueryStateFailure(state) || didLoadOnce) {
                     value = 'assertive';
                 }
-                return {
-                    render: true,
-                    value,
-                };
-            })),
+                return value;
+            }))),
         });
         this._button._removeDisabledBindings();
     }
@@ -4023,10 +3999,15 @@ class OverlayContainerComponent extends CdkDialogContainer {
         super(inject(ElementRef), inject(FocusTrapFactory), inject(DOCUMENT), inject(OVERLAY_CONFIG), inject(InteractivityChecker), inject(NgZone), inject(OverlayRef$1), inject(FocusMonitor));
         this._swipeHandlerService = inject(SwipeHandlerService);
         this._dragToDismissStop$ = new Subject();
+        this._themeProvider = inject(THEME_PROVIDER);
+        this._parentThemeProvider = inject(THEME_PROVIDER, { optional: true, skipSelf: true });
         this._animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
         this.cdkOverlayRef = inject(OverlayRef$1);
         this.overlayRef = null;
         this.elementRef = this._elementRef;
+        if (this._parentThemeProvider) {
+            this._themeProvider.syncWithProvider(this._parentThemeProvider);
+        }
     }
     _contentAttached() {
         super._contentAttached();
@@ -4257,7 +4238,7 @@ class OverlayContainerComponent extends CdkDialogContainer {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: OverlayContainerComponent, isStandalone: true, selector: "et-overlay-container", host: { attributes: { "tabindex": "-1" }, properties: { "attr.aria-modal": "_config.ariaModal", "id": "_config.id", "attr.role": "_config.role", "attr.aria-labelledby": "_config.ariaLabel ? null : _ariaLabelledBy", "attr.aria-label": "_config.ariaLabel", "attr.aria-describedby": "_config.ariaDescribedBy || null", "class.et-with-default-animation": "!_config.customAnimated" }, classAttribute: "et-overlay" }, usesInheritance: true, hostDirectives: [{ directive: i1$2.AnimatedLifecycleDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: `<ng-template cdkPortalOutlet></ng-template>`, isInline: true, styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: OverlayContainerComponent, decorators: [{
             type: Component,
@@ -4271,7 +4252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         '[attr.aria-label]': '_config.ariaLabel',
                         '[attr.aria-describedby]': '_config.ariaDescribedBy || null',
                         '[class.et-with-default-animation]': '!_config.customAnimated',
-                    }, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
+                    }, standalone: true, imports: [PortalModule], hostDirectives: [AnimatedLifecycleDirective, ProvideThemeDirective], styles: [".et-overlay{position:relative;display:grid;overflow:hidden;pointer-events:all;outline:none}.et-overlay>*{overflow:auto}.et-overlay-pane{pointer-events:none}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-to{transform:scale(0)!important;border-radius:250px}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),border-radius .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-1),border-radius .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--full-screen-dialog.et-animation-leave-active{transition:transform .15s var(--ease-in-5),border-radius .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet{bottom:-50px;padding-bottom:50px}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-to{transform:translateY(100%)!important}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--bottom-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--top-sheet{top:-50px;padding-top:50px}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-to{transform:translateY(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--top-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--left-sheet{left:-50px;padding-left:50px}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-to{transform:translate(-100%)!important}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--left-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--right-sheet{right:-50px;padding-right:50px}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-to{transform:translate(100%)!important}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-enter-active{transition:transform .3s var(--ease-spring-1)}}.et-overlay.et-with-default-animation.et-overlay--right-sheet.et-animation-leave-active{transition:transform .15s var(--ease-in-5)}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-from{opacity:0!important;transform:scale(.85)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-to{opacity:0!important;transform:scale(.7)!important}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}@supports (transition-timing-function: linear(0,1)){.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-enter-active{transition:transform .3s var(--ease-spring-2),opacity .3s var(--ease-out-5)}}.et-overlay.et-with-default-animation.et-overlay--dialog.et-animation-leave-active{transition:transform .15s var(--ease-out-5),opacity .15s var(--ease-out-5)}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 const createOverlayConfig = (globalConfig, localConfig) => ({
@@ -4999,6 +4980,7 @@ class ToggletipDirective {
         this._destroy$ = createDestroy();
         this._defaultConfig = inject(TOGGLETIP_CONFIG, { optional: true }) ?? createToggletipConfig();
         this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._themeProvider = inject(THEME_PROVIDER, { optional: true });
         this._toggletip = null;
         this._showToggletip = false;
         this.toggletipClose = new EventEmitter();
@@ -5045,6 +5027,7 @@ class ToggletipDirective {
     _mountToggletip() {
         this._animatedOverlay.mount({
             component: ToggletipComponent,
+            themeProvider: this._themeProvider,
             providers: [
                 {
                     provide: TOGGLETIP_CONFIG,
@@ -5102,6 +5085,7 @@ class ToggletipComponent {
         this._config = inject(TOGGLETIP_CONFIG);
         this.toggletipText = inject(TOGGLETIP_TEXT, { optional: true });
         this.toggletipTemplate = inject(TOGGLETIP_TEMPLATE, { optional: true });
+        this._themeProvider = inject(THEME_PROVIDER);
         this.injector = inject(Injector);
         this._cdr = inject(ChangeDetectorRef);
         this._trigger = inject(TOGGLETIP_DIRECTIVE);
@@ -5119,17 +5103,20 @@ class ToggletipComponent {
     _markForCheck() {
         this._cdr.markForCheck();
     }
+    _setThemeFromProvider(provider) {
+        this._themeProvider.syncWithProvider(provider);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ToggletipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ToggletipComponent, isStandalone: true, selector: "et-toggletip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-toggletip" }, providers: [
             {
                 provide: TOGGLETIP,
                 useExisting: ToggletipComponent,
             },
-        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"toggletipText\">\n    {{ toggletipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"toggletipTemplate\">\n    <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-toggletip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"toggletipText\">\n    {{ toggletipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"toggletipTemplate\">\n    <ng-container *ngTemplateOutlet=\"toggletipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"toggletip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-toggletip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-toggletip{transform:var(--et-floating-translate);will-change:transform}.et-toggletip[et-floating-placement^=top] .toggletip-arrow{bottom:-4px;left:0}.et-toggletip[et-floating-placement^=right] .toggletip-arrow{left:-4px;top:0}.et-toggletip[et-floating-placement^=bottom] .toggletip-arrow{top:-4px;left:0}.et-toggletip[et-floating-placement^=left] .toggletip-arrow{right:-4px;top:0}.et-toggletip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-toggletip-container:before{content:\"; Has toggletip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.toggletip-arrow{transform:var(--et-floating-arrow-translate);inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;will-change:transform}.toggletip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to{opacity:0}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-from .toggletip-arrow:before,.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-to .toggletip-arrow:before{transform:rotate(45deg) scale(0)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active{transition:transform .2s var(--ease-out-5),opacity .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-enter-active .toggletip-arrow:before{transition:transform .2s var(--ease-out-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation .et-toggletip-container.et-animation-leave-active .toggletip-arrow:before{transition:transform .15s var(--ease-in-5)}.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=top] .et-toggletip-container.et-animation-leave-to{transform:translateY(5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=right] .et-toggletip-container.et-animation-leave-to{transform:translate(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=bottom] .et-toggletip-container.et-animation-leave-to{transform:translateY(-5px)}.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-enter-from,.et-toggletip.et-with-default-animation[et-floating-placement^=left] .et-toggletip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ToggletipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
+            args: [{ selector: 'et-toggletip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], hostDirectives: [ProvideThemeDirective], host: {
                         class: 'et-toggletip',
                     }, providers: [
                         {
@@ -5198,6 +5185,7 @@ class TooltipDirective {
     constructor() {
         this._defaultConfig = inject(TOOLTIP_CONFIG, { optional: true }) ?? createTooltipConfig();
         this._animatedOverlay = inject(AnimatedOverlayDirective);
+        this._themeProvider = inject(THEME_PROVIDER, { optional: true });
         this._tooltip = null;
         this._tooltipAriaDescription = null;
         this._lastTooltipText = null;
@@ -5276,6 +5264,7 @@ class TooltipDirective {
     _mountTooltip() {
         this._animatedOverlay.mount({
             component: TooltipComponent,
+            themeProvider: this._themeProvider,
             providers: [
                 {
                     provide: TOOLTIP_CONFIG,
@@ -5336,6 +5325,7 @@ class TooltipComponent {
         this._config = inject(TOOLTIP_CONFIG);
         this.tooltipText = inject(TOOLTIP_TEXT, { optional: true });
         this.tooltipTemplate = inject(TOOLTIP_TEMPLATE, { optional: true });
+        this._themeProvider = inject(THEME_PROVIDER);
         this.injector = inject(Injector);
         this._cdr = inject(ChangeDetectorRef);
         this._trigger = inject(TOOLTIP_DIRECTIVE);
@@ -5353,17 +5343,20 @@ class TooltipComponent {
     _markForCheck() {
         this._cdr.markForCheck();
     }
+    _setThemeFromProvider(provider) {
+        this._themeProvider.syncWithProvider(provider);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TooltipComponent, isStandalone: true, selector: "et-tooltip", host: { properties: { "attr.aria-hidden": "this.attrAriaHidden", "class.et-with-default-animation": "this.usesDefaultAnimation", "class": "this.containerClass" }, classAttribute: "et-tooltip" }, providers: [
             {
                 provide: TOOLTIP,
                 useExisting: TooltipComponent,
             },
-        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"tooltipText\">\n    {{ tooltipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"tooltipTemplate\">\n    <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div class=\"et-tooltip-container\" etAnimatedLifecycle>\n  <ng-container *ngIf=\"tooltipText\">\n    {{ tooltipText }}\n  </ng-container>\n\n  <ng-container *ngIf=\"tooltipTemplate\">\n    <ng-container *ngTemplateOutlet=\"tooltipTemplate; injector: injector\" />\n  </ng-container>\n\n  <div class=\"tooltip-arrow\" et-floating-arrow></div>\n</div>\n", styles: [":where(.et-tooltip){--background-color: hsl(0 0% 20%);--foreground-color: CanvasText;--border-radius: 4px;--padding-inline: 1.5ch;--padding-block: .75ch;--inline-max-size: 25ch;--arrow-size: 10px;--arrow-radius: 2px}.et-tooltip{pointer-events:none;-webkit-user-select:none;user-select:none;transform:var(--et-floating-translate);will-change:transform}.et-tooltip[et-floating-placement^=top] .tooltip-arrow{bottom:-4px;left:0}.et-tooltip[et-floating-placement^=right] .tooltip-arrow{left:-4px;top:0}.et-tooltip[et-floating-placement^=bottom] .tooltip-arrow{top:-4px;left:0}.et-tooltip[et-floating-placement^=left] .tooltip-arrow{right:-4px;top:0}.et-tooltip-container{z-index:1;inline-size:max-content;max-inline-size:var(--inline-max-size);padding:var(--padding-block) var(--padding-inline);border-radius:var(--border-radius);background:var(--background-color);color:var(--foreground-color);will-change:transform}.et-tooltip-container:before{content:\"; Has tooltip: \";clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.tooltip-arrow{inline-size:var(--arrow-size);block-size:var(--arrow-size);position:absolute;z-index:1;transform:var(--et-floating-arrow-translate);will-change:transform}.tooltip-arrow:before{inline-size:var(--arrow-size);block-size:var(--arrow-size);border-radius:var(--arrow-radius);position:absolute;z-index:-1;transform:rotate(45deg);background:var(--background-color);top:0;left:0;content:\"\"}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-to{opacity:0}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-enter-active{transition:transform .3s var(--ease-out-5),opacity .3s var(--ease-out-5)}.et-tooltip.et-with-default-animation .et-tooltip-container.et-animation-leave-active{transition:transform .15s var(--ease-in-5),opacity .15s var(--ease-in-5)}.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=top] .et-tooltip-container.et-animation-leave-to{transform:translateY(5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=right] .et-tooltip-container.et-animation-leave-to{transform:translate(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=bottom] .et-tooltip-container.et-animation-leave-to{transform:translateY(-5px)}.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-enter-from,.et-tooltip.et-with-default-animation[et-floating-placement^=left] .et-tooltip-container.et-animation-leave-to{transform:translate(5px)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], host: {
+            args: [{ selector: 'et-tooltip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, NgTemplateOutlet, AnimatedLifecycleDirective], hostDirectives: [ProvideThemeDirective], host: {
                         class: 'et-tooltip',
                     }, providers: [
                         {
@@ -5854,8 +5847,25 @@ class InputStateService {
         this.valueIsTruthy = toSignal(this.valueIsTruthy$, { requireSync: true });
         this.valueIsFalsy$ = this.value$.pipe(map((value) => !value));
         this.valueIsFalsy = toSignal(this.valueIsFalsy$, { requireSync: true });
-        this.valueIsEmpty$ = combineLatest([this.value$, this.autofilled$]).pipe(map(([value, autofilled]) => (value === null || value === undefined || value === '' || (Array.isArray(value) && !value.length)) &&
-            !autofilled));
+        /**
+         * Selects might have a option that is "null".
+         * This helper can be used to enhance the detection of empty values.
+         * The input is empty if the helper returns a falsy value and the value itself is falsy or an empty array.
+         */
+        this.isEmptyHelper$ = new BehaviorSubject(undefined);
+        this.isEmptyHelper = toSignal(this.isEmptyHelper$, { requireSync: true });
+        this.valueIsEmpty$ = combineLatest([
+            this.value$,
+            this.autofilled$,
+            this.isEmptyHelper$.pipe(switchMap((isEmptyHelper) => (isEmptyHelper instanceof Observable ? isEmptyHelper : of(isEmptyHelper)))),
+        ]).pipe(map(([value, autofilled, isEmptyHelper]) => {
+            const defaultIsEmpty = (value === null || value === undefined || value === '' || (Array.isArray(value) && !value.length)) &&
+                !autofilled;
+            if (isEmptyHelper !== undefined) {
+                return !isEmptyHelper && defaultIsEmpty;
+            }
+            return defaultIsEmpty;
+        }));
         this.valueIsEmpty = toSignal(this.valueIsEmpty$, { requireSync: true });
         this.errors$ = new BehaviorSubject(null);
         this.errors = toSignal(this.errors$, { requireSync: true });
@@ -6335,6 +6345,9 @@ class InputDirective {
         }
         this._inputStateService.shouldDisplayError$.next(value);
     }
+    _setEmptyHelper(value) {
+        this._inputStateService.isEmptyHelper$.next(value);
+    }
     _detectControlRequiredValidationChanges() {
         const hasRequired = this.control.hasValidator(Validators.required) ?? false;
         const hasRequiredTrue = this.control.hasValidator(Validators.requiredTrue) ?? false;
@@ -6618,27 +6631,14 @@ const WRITEABLE_INPUT_VALUE_ACCESSOR = {
 class WriteableInputDirective {
     constructor() {
         this._inputStateService = inject(InputStateService);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-required',
-            observable: this._inputStateService.required$,
-        }, {
-            attribute: 'class.et-disabled',
-            observable: this._inputStateService.disabled$,
-        }, {
-            attribute: 'class.et-value-is-truthy',
-            observable: this._inputStateService.valueIsTruthy$,
-        }, {
-            attribute: 'class.et-value-is-falsy',
-            observable: this._inputStateService.valueIsFalsy$,
-        }, {
-            attribute: 'class.et-empty',
-            observable: this._inputStateService.valueIsEmpty$,
-        }, {
-            attribute: 'class.et-should-display-error',
-            observable: this._inputStateService.shouldDisplayError$,
-        }, {
-            attribute: 'class.et-autofilled',
-            observable: this._inputStateService.autofilled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-required': this._inputStateService.required,
+            'et-disabled': this._inputStateService.disabled,
+            'et-value-is-truthy': this._inputStateService.valueIsTruthy,
+            'et-value-is-falsy': this._inputStateService.valueIsFalsy,
+            'et-empty': this._inputStateService.valueIsEmpty,
+            'et-should-display-error': this._inputStateService.shouldDisplayError,
+            'et-autofilled': this._inputStateService.autofilled,
         });
     }
     writeValue(value) {
@@ -6682,12 +6682,9 @@ class ErrorComponent {
         this.errorText$ = new BehaviorSubject(null);
         this.id = `et-error-${_uniqueIdCounter++}`;
         this._errors = null;
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-error--has-errors',
-            observable: this.errorText$.pipe(map((v) => !!v)),
-        }, {
-            attribute: 'class.cdk-visually-hidden',
-            observable: this._dynamicFormGroupOrField.hideErrorMessage$,
+        this.hostClassBindings = signalHostClasses({
+            'et-error--has-errors': toSignal(this.errorText$),
+            'cdk-visually-hidden': toSignal(this._dynamicFormGroupOrField.hideErrorMessage$),
         });
     }
     get errors() {
@@ -6726,19 +6723,21 @@ const CHECKBOX_FIELD_TOKEN = new InjectionToken('ET_CHECKBOX_FIELD_DIRECTIVE_TOK
 class CheckboxFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._checkbox) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-checkbox-field--indeterminate',
-            observable: this._checkbox.changes.pipe(startWith(this._checkbox)).pipe(switchMap((checkboxes) => combineLatest(checkboxes.filter((cb) => !!cb).map((checkbox) => checkbox.indeterminate$))), map((checked) => checked.some((value) => value))),
+        this._checkbox$ = new BehaviorSubject(null);
+        this.hostClassBindings = signalHostClasses({
+            'et-checkbox-field--indeterminate': toSignal(this._checkbox$.pipe(switchQueryListChanges(), switchMap((checkboxes) => {
+                if (!checkboxes?.length) {
+                    return of(null);
+                }
+                return combineLatest(checkboxes.map((checkbox) => checkbox.indeterminate$)).pipe(map((indeterminateStates) => indeterminateStates.some((isIndeterminate) => isIndeterminate)));
+            }))),
         });
     }
+    set checkbox(checkbox) {
+        this._checkbox$.next(checkbox);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }], queries: [{ propertyName: "_checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: CheckboxFieldDirective, isStandalone: true, providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }], queries: [{ propertyName: "checkbox", predicate: i0.forwardRef(function () { return CHECKBOX_TOKEN; }), descendants: true }], exportAs: ["etCheckboxGroup"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxFieldDirective, decorators: [{
             type: Directive,
@@ -6747,7 +6746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: CHECKBOX_FIELD_TOKEN, useExisting: CheckboxFieldDirective }],
                     exportAs: 'etCheckboxGroup',
                 }]
-        }], propDecorators: { _checkbox: [{
+        }], propDecorators: { checkbox: [{
                 type: ContentChildren,
                 args: [forwardRef(() => CHECKBOX_TOKEN), { descendants: true }]
             }] } });
@@ -6758,15 +6757,10 @@ class CheckboxDirective {
         this.input = inject(INPUT_TOKEN);
         this.checked$ = this.input.value$.pipe(map((value) => !!value));
         this.indeterminate$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-checkbox--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-checkbox--disabled'],
-            observable: this.input.disabled$,
-        }, {
-            attribute: ['class.et-checkbox--indeterminate'],
-            observable: combineLatest([this.checked$, this.indeterminate$]).pipe(map(([checked, indeterminate]) => !checked && indeterminate)),
+        this.hostClassBindings = signalHostClasses({
+            'et-checkbox--checked': toSignal(this.checked$),
+            'et-checkbox--disabled': toSignal(this.input.disabled$),
+            'et-checkbox--indeterminate': toSignal(combineLatest([this.checked$, this.indeterminate$]).pipe(map(([checked, indeterminate]) => !checked && indeterminate))),
         });
     }
     _onInputInteraction(event) {
@@ -6874,16 +6868,8 @@ class CheckboxGroupControlDirective {
         this.checkbox = inject(CHECKBOX_TOKEN);
         this.input = inject(INPUT_TOKEN);
         this.group = inject(CHECKBOX_GROUP_TOKEN);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        this._bindings.push({
-            attribute: ['aria-controls'],
-            elementRef: this.input.nativeInputRef?.element,
-            observable: this.group.checkboxesWithoutGroupCtrl$.pipe(map((checkboxes) => ({
-                render: true,
-                value: checkboxes.map((checkbox) => checkbox.input.id).join(' '),
-            }))) ?? of(false),
+        this.inputAttributeBindings = signalAttributes(this.input.nativeInputRef$.pipe(map((el) => el?.element)), {
+            'aria-controls': toSignal(this.group.checkboxesWithoutGroupCtrl$.pipe(map((checkboxes) => checkboxes.map((checkbox) => checkbox.input.id).join(' ')))),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: CheckboxGroupControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -6947,12 +6933,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 class DecoratedFormFieldBase {
     constructor() {
         this._formFieldStateService = inject(FormFieldStateService);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-form-field--has-prefix',
-            observable: this._formFieldStateService.hasPrefix$,
-        }, {
-            attribute: 'class.et-form-field--has-suffix',
-            observable: this._formFieldStateService.hasSuffix$,
+        this.hostClassBindings = signalHostClasses({
+            'et-form-field--has-prefix': this._formFieldStateService.hasPrefix,
+            'et-form-field--has-suffix': this._formFieldStateService.hasSuffix,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedFormFieldBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -6980,35 +6963,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }] } });
 
 class DecoratedInputBase extends InputBase {
+    set inputPrefix(inputPrefix) {
+        this.inputPrefix$.next(inputPrefix);
+    }
+    set inputSuffix(inputSuffix) {
+        this.inputSuffix$.next(inputSuffix);
+    }
     constructor() {
-        super(...arguments);
+        super();
         this._formFieldStateService = inject(FormFieldStateService);
         this._destroy$ = createDestroy();
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-input--has-prefix',
-            observable: this._formFieldStateService.hasPrefix$,
-        }, {
-            attribute: 'class.et-input--has-suffix',
-            observable: this._formFieldStateService.hasSuffix$,
+        this.inputPrefix$ = new BehaviorSubject(null);
+        this.inputSuffix$ = new BehaviorSubject(null);
+        this.hasPrefix$ = this.inputPrefix$.pipe(switchQueryListChanges(), map((list) => !!list && list?.length > 0));
+        this.hasSuffix$ = this.inputSuffix$.pipe(switchQueryListChanges(), map((list) => !!list && list?.length > 0));
+        this.hostClassBindings = signalHostClasses({
+            'et-input--has-prefix': toSignal(this.hasPrefix$),
+            'et-input--has-suffix': toSignal(this.hasSuffix$),
         });
+        this.hasPrefix$
+            .pipe(takeUntilDestroyed(), tap((hasPrefix) => this._formFieldStateService.hasPrefix$.next(hasPrefix)))
+            .subscribe();
+        this.hasSuffix$
+            .pipe(takeUntilDestroyed(), tap((hasSuffix) => this._formFieldStateService.hasSuffix$.next(hasSuffix)))
+            .subscribe();
     }
-    ngAfterContentInit() {
-        if (!this.inputPrefix || !this.inputSuffix) {
-            return;
-        }
-        this.inputPrefix.changes
-            .pipe(takeUntil(this._destroy$), startWith(this.inputPrefix), map((list) => list.length > 0))
-            .subscribe(this._formFieldStateService.hasPrefix$);
-        this.inputSuffix.changes
-            .pipe(takeUntil(this._destroy$), startWith(this.inputSuffix), map((list) => list.length > 0))
-            .subscribe(this._formFieldStateService.hasSuffix$);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: DecoratedInputBase, queries: [{ propertyName: "inputPrefix", predicate: INPUT_PREFIX_TOKEN }, { propertyName: "inputSuffix", predicate: INPUT_SUFFIX_TOKEN }], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: DecoratedInputBase, decorators: [{
             type: Directive
-        }], propDecorators: { inputPrefix: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { inputPrefix: [{
                 type: ContentChildren,
                 args: [INPUT_PREFIX_TOKEN]
             }], inputSuffix: [{
@@ -7639,12 +7624,9 @@ class RadioDirective {
         this._disabled$ = new BehaviorSubject(false);
         this.checked$ = combineLatest([this.input.value$, this._value$]).pipe(map(([inputValue, value]) => inputValue === value));
         this.disabled$ = combineLatest([this.input.disabled$, this._disabled$]).pipe(map(([inputDisabled, disabled]) => inputDisabled || disabled));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-radio--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-radio--disabled'],
-            observable: this.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-radio--checked': toSignal(this.disabled$),
+            'et-radio--disabled': toSignal(this.disabled$),
         });
     }
     get value() {
@@ -7692,23 +7674,18 @@ const RADIO_FIELD_TOKEN = new InjectionToken('ET_RADIO_FIELD_DIRECTIVE_TOKEN');
 class RadioFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._radio) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-radio-field--checked',
-            observable: this._radio.changes.pipe(startWith(this._radio)).pipe(switchMap((radios) => combineLatest(radios.filter((radio) => !!radio).map((radio) => radio.checked$))), map((checked) => checked.some((value) => value))),
-        });
-        this._bindings.push({
-            attribute: 'class.et-radio-field--disabled',
-            observable: this._radio.changes.pipe(startWith(this._radio)).pipe(switchMap((radios) => combineLatest(radios.filter((radio) => !!radio).map((radio) => radio.disabled$))), map((disabled) => disabled.some((value) => value))),
+        this._radio$ = new BehaviorSubject(null);
+        this.radioQueryList$ = this._radio$.pipe(switchQueryListChanges());
+        this.hostClassBindings = signalHostClasses({
+            'et-radio-field--checked': toSignal(this.radioQueryList$.pipe(switchMap((radios) => (radios?.length ? combineLatest(radios.map((radio) => radio.disabled$)) : of([]))), map((checked) => checked.some((value) => value)))),
+            'et-radio-field--disabled': toSignal(this.radioQueryList$.pipe(switchMap((radios) => (radios?.length ? combineLatest(radios.map((radio) => radio.disabled$)) : of([]))), map((disabled) => disabled.some((value) => value)))),
         });
     }
+    set radio(radio) {
+        this._radio$.next(radio);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }], queries: [{ propertyName: "_radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: RadioFieldDirective, isStandalone: true, providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }], queries: [{ propertyName: "radio", predicate: i0.forwardRef(function () { return RADIO_TOKEN; }), descendants: true }], exportAs: ["etRadioField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioFieldDirective, decorators: [{
             type: Directive,
@@ -7717,7 +7694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: RADIO_FIELD_TOKEN, useExisting: RadioFieldDirective }],
                     exportAs: 'etRadioField',
                 }]
-        }], propDecorators: { _radio: [{
+        }], propDecorators: { radio: [{
                 type: ContentChildren,
                 args: [forwardRef(() => RADIO_TOKEN), { descendants: true }]
             }] } });
@@ -7728,14 +7705,8 @@ class RadioGroupDirective {
     constructor() {
         this._formGroupStateService = inject(FormGroupStateService);
         this.name = `et-radio-group-${++nextUniqueId$3}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-labelledby',
-            observable: this._formGroupStateService.describedBy$.pipe(map((describedBy) => {
-                return {
-                    render: !!describedBy,
-                    value: `${describedBy}`,
-                };
-            })),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-labelledby': toSignal(this._formGroupStateService.describedBy$),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: RadioGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -7836,12 +7807,9 @@ class SegmentedButtonDirective {
         this._disabled$ = new BehaviorSubject(false);
         this.checked$ = combineLatest([this.input.value$, this._value$]).pipe(map(([inputValue, value]) => inputValue === value));
         this.disabled$ = combineLatest([this.input.disabled$, this._disabled$]).pipe(map(([inputDisabled, disabled]) => inputDisabled || disabled));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-segmented-button--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-segmented-button--disabled'],
-            observable: this.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-segmented-button--checked': toSignal(this.checked$),
+            'et-segmented-button--disabled': toSignal(this.disabled$),
         });
     }
     get value() {
@@ -7898,23 +7866,18 @@ const SEGMENTED_BUTTON_FIELD_TOKEN = new InjectionToken('ET_SEGMENTED_BUTTON_FIE
 class SegmentedButtonFieldDirective {
     constructor() {
         this.inputState = inject(InputStateService);
-        this._bindings = createReactiveBindings();
-    }
-    ngAfterContentInit() {
-        if (!this._segmentedButton) {
-            return;
-        }
-        this._bindings.push({
-            attribute: 'class.et-segmented-button-field--checked',
-            observable: this._segmentedButton.changes.pipe(startWith(this._segmentedButton)).pipe(switchMap((buttons) => combineLatest(buttons.filter((radio) => !!radio).map((button) => button.checked$))), map((checked) => checked.some((value) => value))),
-        });
-        this._bindings.push({
-            attribute: 'class.et-segmented-button-field--disabled',
-            observable: this._segmentedButton.changes.pipe(startWith(this._segmentedButton)).pipe(switchMap((buttons) => combineLatest(buttons.filter((radio) => !!radio).map((button) => button.disabled$))), map((disabled) => disabled.some((value) => value))),
+        this._segmentedButton$ = new BehaviorSubject(null);
+        this.segmentedButtonQueryList$ = this._segmentedButton$.pipe(switchQueryListChanges());
+        this.hostClassBindings = signalHostClasses({
+            'et-segmented-button-field--checked': toSignal(this.segmentedButtonQueryList$.pipe(switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.disabled$)) : of([]))), map((checked) => checked.some((value) => value)))),
+            'et-segmented-button-field--disabled': toSignal(this.segmentedButtonQueryList$.pipe(switchMap((buttons) => (buttons?.length ? combineLatest(buttons.map((radio) => radio.disabled$)) : of([]))), map((disabled) => disabled.some((value) => value)))),
         });
     }
+    set segmentedButton(segmentedButton) {
+        this._segmentedButton$.next(segmentedButton);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SegmentedButtonFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }], queries: [{ propertyName: "_segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SegmentedButtonFieldDirective, isStandalone: true, providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }], queries: [{ propertyName: "segmentedButton", predicate: i0.forwardRef(function () { return SEGMENTED_BUTTON_TOKEN; }), descendants: true }], exportAs: ["etSegmentedButtonField"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SegmentedButtonFieldDirective, decorators: [{
             type: Directive,
@@ -7923,7 +7886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                     providers: [{ provide: SEGMENTED_BUTTON_FIELD_TOKEN, useExisting: SegmentedButtonFieldDirective }],
                     exportAs: 'etSegmentedButtonField',
                 }]
-        }], propDecorators: { _segmentedButton: [{
+        }], propDecorators: { segmentedButton: [{
                 type: ContentChildren,
                 args: [forwardRef(() => SEGMENTED_BUTTON_TOKEN), { descendants: true }]
             }] } });
@@ -7936,14 +7899,8 @@ class SegmentedButtonGroupDirective {
         this._inputStateService = inject(InputStateService);
         this._destroy$ = createDestroy();
         this.name = `et-segmented-button-group-${++nextUniqueId$2}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-labelledby',
-            observable: this._formGroupStateService.describedBy$.pipe(map((describedBy) => {
-                return {
-                    render: !!describedBy,
-                    value: `${describedBy}`,
-                };
-            })),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-labelledby': toSignal(this._formGroupStateService.describedBy$),
         });
     }
     ngAfterContentInit() {
@@ -8078,7 +8035,7 @@ const SegmentedButtonImports = [
 const SELECT_FIELD_TOKEN = new InjectionToken('ET_SELECT_FIELD_DIRECTIVE_TOKEN');
 class SelectFieldDirective {
     constructor() {
-        this._bindings = createReactiveBindings();
+        this.elementRef = inject(ElementRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SelectFieldDirective, isStandalone: true, providers: [{ provide: SELECT_FIELD_TOKEN, useExisting: SelectFieldDirective }], exportAs: ["etSelectField"], ngImport: i0 }); }
@@ -8501,6 +8458,7 @@ class ComboboxDirective {
         this._selectField = inject(SELECT_FIELD_TOKEN);
         this._animatedOverlay = inject(AnimatedOverlayDirective);
         this._comboboxConfig = inject(COMBOBOX_CONFIG_TOKEN, { optional: true });
+        this._themeProvider = inject(THEME_PROVIDER, { optional: true });
         this._initialValue$ = new BehaviorSubject(null);
         this._filterInternal$ = new BehaviorSubject(false);
         this._loading$ = new BehaviorSubject(false);
@@ -8526,6 +8484,7 @@ class ComboboxDirective {
         this.activeOptionId$ = new BehaviorSubject(null);
         this._currentFilter$ = new BehaviorSubject('');
         this.isOpen$ = this._animatedOverlay.isMounted$;
+        this.isOpen = toSignal(this.isOpen$);
         this._selectionModel = new SelectionModel();
         this._activeSelectionModel = new ActiveSelectionModel();
         this._backspaceKeyPressManager = new KeyPressManager(BACKSPACE);
@@ -8540,21 +8499,16 @@ class ComboboxDirective {
         this._bodyErrorTemplate$ = new BehaviorSubject(null);
         this._bodyEmptyTemplate$ = new BehaviorSubject(null);
         this._bodyMoreItemsHintTemplate$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox--loading',
-            observable: this._loading$,
-        }, {
-            attribute: 'class.et-combobox--error',
-            observable: this._error$.pipe(map((v) => !!v)),
-        }, {
-            attribute: 'class.et-combobox--open',
-            observable: this.isOpen$,
-        }, {
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        }, {
-            attribute: 'class.et-select-field--open',
-            observable: this.isOpen$,
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox--loading': toSignal(this._loading$),
+            'et-combobox--error': toSignal(this._error$.pipe(map((v) => !!v))),
+            'et-combobox--open': toSignal(this.isOpen$),
+            'et-select-field--multiple': toSignal(this.multiple$),
+            'et-select-field--open': this.isOpen,
+        });
+        this.fieldHostClassBindings = signalClasses(this._selectField.elementRef, {
+            'et-select-field--open': toSignal(this.isOpen$),
+            'et-select-field--multiple': toSignal(this.multiple$),
         });
         this._comboboxBodyComponent = null;
         //#endregion
@@ -8576,14 +8530,7 @@ class ComboboxDirective {
         this._animatedOverlay.placement = 'bottom';
         this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
         this._animatedOverlay.autoResize = true;
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--open',
-            observable: this.isOpen$,
-        });
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        });
+        this._input._setEmptyHelper(this._currentFilter$);
     }
     ngOnInit() {
         this._initDispatchFilterChanges();
@@ -8623,6 +8570,7 @@ class ComboboxDirective {
         const bodyRef = this._animatedOverlay.mount({
             component: this._comboboxBodyComponent,
             mirrorWidth: true,
+            themeProvider: this._themeProvider,
         });
         if (!bodyRef)
             return;
@@ -9026,27 +8974,14 @@ class ComboboxOptionComponent {
         this.disabled$ = this._option$.pipe(map((opt) => isOptionDisabled(opt)));
         this.selected$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionSelected(opt)));
         this.active$ = this._option$.pipe(switchMap((opt) => this.combobox.isOptionActive(opt)));
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox-option--selected',
-            observable: this.selected$,
-        }, {
-            attribute: 'class.et-combobox-option--disabled',
-            observable: this.disabled$,
-        }, {
-            attribute: 'class.et-combobox-option--active',
-            observable: this.active$,
-        }, {
-            attribute: 'aria-selected',
-            observable: this.selected$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
-        }, {
-            attribute: 'aria-diabled',
-            observable: this.disabled$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox-option--selected': toSignal(this.selected$),
+            'et-combobox-option--disabled': toSignal(this.disabled$),
+            'et-combobox-option--active': toSignal(this.active$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-selected': toSignal(this.selected$),
+            'aria-disabled': toSignal(this.disabled$),
         });
     }
     get option() {
@@ -9099,26 +9034,16 @@ class ComboboxBodyComponent {
         this.id = `et-combobox-body-${_uniqueId++}`;
         this._destroy$ = createDestroy();
         this._clickOutside = inject(ClickOutsideDirective);
+        this._themeProvider = inject(THEME_PROVIDER);
         this.combobox = inject(COMBOBOX_TOKEN);
         this._options$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-combobox-body--loading',
-            observable: this.combobox.loading$,
-        }, {
-            attribute: 'class.et-combobox-body--multiple',
-            observable: this.combobox.multiple$,
-        }, {
-            attribute: 'aria-multiselectable',
-            observable: this.combobox.multiple$.pipe(map((multiple) => ({
-                render: true,
-                value: multiple,
-            }))),
-        }, {
-            attribute: 'aria-labelledby',
-            observable: this.combobox._input.labelId$.pipe(map((labelId) => ({
-                render: !!labelId,
-                value: labelId,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-combobox-body--loading': toSignal(this.combobox.loading$),
+            'et-combobox-body--multiple': toSignal(this.combobox.multiple$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-multiselectable': toSignal(this.combobox.multiple$),
+            'aria-labelledby': toSignal(this.combobox._input.labelId$),
         });
         this._bodyTemplate = null;
         this.trackByFn = (index, item) => this.combobox._selectionModel.getKey(item);
@@ -9131,13 +9056,16 @@ class ComboboxBodyComponent {
             .pipe(takeUntil(this._destroy$), tap(() => this.combobox.close()))
             .subscribe();
     }
+    _setThemeFromProvider(provider) {
+        this._themeProvider.syncWithProvider(provider);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ComboboxBodyComponent, isStandalone: true, selector: "et-combobox-body", host: { attributes: { "tabindex": "-1", "role": "listbox" }, properties: { "attr.id": "id" }, classAttribute: "et-combobox-body et-with-default-animation" }, providers: [
             {
                 provide: COMBOBOX_BODY_TOKEN,
                 useExisting: ComboboxBodyComponent,
             },
-        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_containerElementRef", first: true, predicate: ["containerElement"], descendants: true, read: ElementRef, static: true }, { propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }, { propertyName: "_options", predicate: ComboboxOptionComponent, descendants: true }], hostDirectives: [{ directive: i1$2.ClickOutsideDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ComboboxOptionComponent, selector: "et-combobox-option", inputs: ["option"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AnimatedLifecycleDirective, selector: "[etAnimatedLifecycle]", exportAs: ["etAnimatedLifecycle"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ComboboxBodyComponent, decorators: [{
             type: Component,
@@ -9155,12 +9083,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                         AsyncPipe,
                         AnimatedLifecycleDirective,
                         NgIf,
-                    ], hostDirectives: [ClickOutsideDirective], providers: [
+                    ], hostDirectives: [ClickOutsideDirective, ProvideThemeDirective], providers: [
                         {
                             provide: COMBOBOX_BODY_TOKEN,
                             useExisting: ComboboxBodyComponent,
                         },
-                    ], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+                    ], template: "<div #containerElement class=\"et-combobox-body-container\" etAnimatedLifecycle>\n  <ng-container *etLet=\"combobox.options$ | async as options\">\n    <ng-container *ngIf=\"!options?.length && !combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyEmptyTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyEmptyComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p class=\"et-combobox-body--empty\">{{ combobox._tempEmptyText }}</p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.error && !combobox.loading\">\n      <ng-container *ngIf=\"combobox.customBodyErrorTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl; context: { error: combobox.error }\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyErrorComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp; inputs: { error: combobox.error }\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"combobox.loading$ | async\">\n      <ng-container *ngIf=\"combobox.customBodyLoadingTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyLoadingComponent$ | async as comp\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n      </ng-template>\n    </ng-container>\n\n    <et-combobox-option *ngFor=\"let option of options; trackBy: trackByFn\" [option]=\"option\" />\n\n    <ng-container *ngIf=\"options?.length && combobox.showBodyMoreItemsHint\">\n      <ng-container *ngIf=\"combobox.customBodyMoreItemsHintTpl$ | async as tpl; else componentOrNone\">\n        <ng-container *ngTemplateOutlet=\"tpl\" />\n      </ng-container>\n      <ng-template #componentOrNone>\n        <ng-container *ngIf=\"combobox.customBodyMoreItemsHintComponent$ | async as comp; else default\">\n          <ng-container *ngComponentOutlet=\"comp\" />\n        </ng-container>\n        <ng-template #default>\n          <p *ngIf=\"combobox.bodyMoreItemsHintText\" class=\"et-combobox-body--more-items-hint\">\n            {{ combobox.bodyMoreItemsHintText }}\n          </p>\n        </ng-template>\n      </ng-template>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { _containerElementRef: [{
                 type: ViewChild,
                 args: ['containerElement', { static: true, read: ElementRef }]
@@ -9406,21 +9334,16 @@ class SelectOptionDirective {
             }
             return selectValue === optionValue;
         }));
+        this.isSelected = toSignal(this.isSelected$);
         this.viewValue$ = this._viewValue$.asObservable();
         this.disabled$ = this._disabled$.asObservable();
         this.isActive$ = this._isActive$.asObservable();
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-select-option--selected',
-            observable: this.isSelected$,
-        }, {
-            attribute: 'class.et-select-option--active',
-            observable: this._isActive$,
-        }, {
-            attribute: 'aria-selected',
-            observable: this.isSelected$.pipe(map((selected) => ({
-                render: true,
-                value: selected,
-            }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-select-option--selected': this.isSelected,
+            'et-select-option--active': toSignal(this._isActive$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-selected': this.isSelected,
         });
     }
     get value() {
@@ -9435,6 +9358,9 @@ class SelectOptionDirective {
     set disabled(value) {
         this._disabled$.next(booleanAttribute(value));
     }
+    get viewValue() {
+        return this._viewValue$.value;
+    }
     ngAfterContentInit() {
         this._updateViewValue();
     }
@@ -9522,17 +9448,19 @@ class SelectDirective {
         this._destroy$ = createDestroy();
         this._liveAnnouncer = inject(LiveAnnouncer);
         this._selectField = inject(SELECT_FIELD_TOKEN);
+        this._themeProvider = inject(THEME_PROVIDER, { optional: true });
         this.input = inject(INPUT_TOKEN);
         this._selectBodyId$ = new BehaviorSubject(null);
         this._isOpen$ = new BehaviorSubject(false);
+        this.elementRef = inject(ElementRef);
+        this._selectionModel = new SelectionModel();
+        this._activeSelectionModel = new ActiveSelectionModel();
         this._multiple$ = new BehaviorSubject(false);
         this._selectOptionsQueryList$ = new BehaviorSubject(null);
-        this.selectOptions$ = this._selectOptionsQueryList$.pipe(switchMap((queryList) => queryList?.changes.pipe(startWith(queryList)) ?? of(null)), switchMap((queryList) => {
+        this.selectOptions$ = this._selectOptionsQueryList$.pipe(switchQueryListChanges(), switchMap((queryList) => {
             if (!queryList)
                 return of(null);
-            const items = queryList
-                .filter((i) => !!i)
-                .map((opt) => combineLatest([opt.isSelected$, opt.isActive$]).pipe(map(([selected, active]) => ({ opt, selected, active }))));
+            const items = queryList.map((opt) => combineLatest([opt.isSelected$, opt.isActive$]).pipe(map(([selected, active]) => ({ opt, selected, active }))));
             return combineLatest(items ?? of(null));
         }));
         this.activeOption$ = this.selectOptions$.pipe(map((options) => {
@@ -9559,6 +9487,7 @@ class SelectDirective {
         this.selectedOption$ = this.selectedOptions$.pipe(map((options) => options?.[0] ?? null));
         this.selectBodyId$ = this._selectBodyId$.asObservable();
         this.isOpen$ = this._isOpen$.asObservable();
+        this.isOpen = toSignal(this.isOpen$);
         this.multiple$ = this._multiple$.asObservable();
         this.selectCurrentValueId = `et-select-current-value-${uniqueId$1++}`;
         this.ariaViewValue$ = this.selectedOptions$.pipe(switchMap((options) => {
@@ -9586,25 +9515,26 @@ class SelectDirective {
             const ids = [labelId, this.selectCurrentValueId];
             return ids.filter((id) => !!id).join(' ');
         }));
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-select--is-open',
-            observable: this.isOpen$,
-        }, {
-            attribute: 'class.et-select--disabled',
-            observable: this.input.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-select--is-open': this.isOpen,
+            'et-select--disabled': toSignal(this.input.disabled$),
+        });
+        this.fieldHostClassBindings = signalClasses(this._selectField.elementRef, {
+            'et-select-field--open': this.isOpen,
+            'et-select-field--multiple': toSignal(this.multiple$),
         });
         this.trackByFn = (_, item) => item.id;
         this._animatedOverlay.placement = 'bottom';
         this._animatedOverlay.fallbackPlacements = ['bottom', 'top'];
         this._animatedOverlay.autoResize = true;
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--open',
-            observable: this._isOpen$,
-        });
-        this._selectField._bindings.push({
-            attribute: 'class.et-select-field--multiple',
-            observable: this.multiple$,
-        });
+        this.input._setEmptyHelper(this.ariaViewValue$);
+        this._selectionModel
+            .setOptionsFromQueryList$(this._selectOptionsQueryList$)
+            .setLabelBinding((v) => v.viewValue)
+            .setValueBinding((v) => v.value)
+            .setDisabledBinding((v) => v.disabled);
+        this._activeSelectionModel.setSelectionModel(this._selectionModel);
+        //TODO: TO BE CONTINUED...
     }
     ngOnInit() {
         this._unmountSelectBodyOnDisable();
@@ -9622,6 +9552,7 @@ class SelectDirective {
         const instance = this._animatedOverlay.mount({
             component: this._selectBodyConfig.component,
             mirrorWidth: true,
+            themeProvider: this._themeProvider,
             data: { _bodyTemplate: this._selectBodyConfig.template },
         });
         if (!instance)
@@ -9960,18 +9891,9 @@ class SelectBodyDirective {
         this._select = inject(SELECT_TOKEN);
         this._clickOutside = inject(ClickOutsideDirective);
         this.id = `et-select-body-${uniqueId++}`;
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-multiselectable',
-            observable: this._select.multiple$.pipe(map((multiple) => ({
-                render: true,
-                value: multiple,
-            }))),
-        }, {
-            attribute: 'aria-labelledby',
-            observable: this._select.input.labelId$.pipe(map((labelId) => ({
-                render: !!labelId,
-                value: labelId,
-            }))),
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-multiselectable': toSignal(this._select.multiple$),
+            'aria-labelledby': toSignal(this._select.input.labelId$),
         });
     }
     ngOnInit() {
@@ -10009,10 +9931,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
 class SelectBodyComponent {
     constructor() {
         this.selectBody = inject(SELECT_BODY_TOKEN);
+        this._themeProvider = inject(THEME_PROVIDER);
         this._bodyTemplate = null;
     }
+    _setThemeFromProvider(provider) {
+        this._themeProvider.syncWithProvider(provider);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SelectBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectBodyComponent, isStandalone: true, selector: "et-select-body", host: { classAttribute: "et-select-body et-with-default-animation" }, viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: SelectBodyDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: SelectBodyComponent, isStandalone: true, selector: "et-select-body", host: { classAttribute: "et-select-body et-with-default-animation" }, viewQueries: [{ propertyName: "_animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, static: true }], hostDirectives: [{ directive: SelectBodyDirective }, { directive: i2$1.ProvideThemeDirective }], ngImport: i0, template: `
     <div class="et-select-body-container" etAnimatedLifecycle>
       <ng-container [ngTemplateOutlet]="_bodyTemplate" />
     </div>
@@ -10026,7 +9952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
     </div>
   `, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-select-body et-with-default-animation',
-                    }, imports: [AnimatedLifecycleDirective, NgTemplateOutlet], hostDirectives: [SelectBodyDirective], styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"] }]
+                    }, imports: [AnimatedLifecycleDirective, NgTemplateOutlet], hostDirectives: [SelectBodyDirective, ProvideThemeDirective], styles: [".et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-from,.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-to{opacity:0;transform:scaleY(0)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-enter-active{transition:transform 125ms var(--ease-out-5),opacity 125ms var(--ease-out-5)}.et-select-body.et-with-default-animation .et-select-body-container.et-animation-leave-active{transition:transform 50ms var(--ease-in-5),opacity 50ms var(--ease-in-5)}.et-select-body.et-with-default-animation[et-floating-placement^=top] .et-select-body-container{transform-origin:bottom}.et-select-body.et-with-default-animation[et-floating-placement^=bottom] .et-select-body-container{transform-origin:top}.et-select-body{transform:var(--et-floating-translate);will-change:transform}.et-select-body-container{display:block;background-color:#3d3d3d;color:#fff;max-height:min(200px,var(--et-floating-max-height, 200px));overflow:auto}@supports (overflow: overlay){.et-select-body-container{overflow:overlay}}.et-select-body{width:100%;display:grid}\n"] }]
         }], propDecorators: { _animatedLifecycle: [{
                 type: ViewChild,
                 args: [ANIMATED_LIFECYCLE_TOKEN, { static: true }]
@@ -10414,12 +10340,9 @@ class SlideToggleDirective {
     constructor() {
         this.input = inject(INPUT_TOKEN);
         this.checked$ = this.input.value$.pipe(map((value) => !!value));
-        this._bindings = createReactiveBindings({
-            attribute: ['class.et-slide-toggle--checked'],
-            observable: this.checked$,
-        }, {
-            attribute: ['class.et-slide-toggle--disabled'],
-            observable: this.input.disabled$,
+        this.hostClassBindings = signalHostClasses({
+            'et-slide-toggle--checked': toSignal(this.checked$),
+            'et-slide-toggle--disabled': toSignal(this.input.disabled$),
         });
     }
     _onInputInteraction(event) {
@@ -10604,45 +10527,21 @@ class SliderComponent {
         this.disableAnimations$ = new BehaviorSubject(false);
         this.touchId$ = new BehaviorSubject(null);
         this.lastPointerEvent$ = new BehaviorSubject(null);
-        this._bindings = createReactiveBindings({
-            attribute: 'aria-orientation',
-            observable: this._vertical$.pipe(map((vertical) => ({
-                render: true,
-                value: vertical ? 'vertical' : 'horizontal',
-            }))),
-        }, {
-            attribute: 'aria-disabled',
-            observable: this._input.disabled$,
-        }, {
-            attribute: 'aria-valuenow',
-            observable: this._value$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuemin',
-            observable: this._min$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuemax',
-            observable: this._max$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'aria-valuetext',
-            observable: this.valueText$.pipe(map((value) => ({ render: true, value }))),
-        }, {
-            attribute: 'tabindex',
-            observable: this._input.disabled$.pipe(map((disabled) => ({ render: true, value: disabled ? -1 : 0 }))),
-        }, {
-            attribute: 'class.et-slider--is-sliding',
-            observable: this.isSlidingVia$.pipe(map((isSlidingVia) => !!isSlidingVia)),
-        }, {
-            attribute: 'class.et-slider--inverted',
-            observable: this._inverted$,
-        }, {
-            attribute: 'class.et-slider--disable-animations',
-            observable: this.disableAnimations$,
-        }, {
-            attribute: 'aria-labeledby',
-            observable: this._formFieldStateService.labelId$.pipe(map((labelId) => ({ render: !!labelId, value: labelId ?? '' }))),
-        }, {
-            attribute: 'aria-describedby',
-            observable: this._formFieldStateService.describedBy$.pipe(map((describedBy) => ({ render: !!describedBy, value: describedBy ?? '' }))),
+        this.hostClassBindings = signalHostClasses({
+            'et-slider--is-sliding': toSignal(this.isSlidingVia$),
+            'et-slider--inverted': toSignal(this._inverted$),
+            'et-slider--disable-animations': toSignal(this.disableAnimations$),
+        });
+        this.hostAttributeBindings = signalHostAttributes({
+            'aria-orientation': toSignal(this._vertical$.pipe(map((vertical) => (vertical ? 'vertical' : 'horizontal')))),
+            'aria-disabled': toSignal(this._input.disabled$),
+            'aria-valuenow': toSignal(this._value$),
+            'aria-valuemin': toSignal(this._min$),
+            'aria-valuemax': toSignal(this._max$),
+            'aria-valuetext': toSignal(this.valueText$),
+            tabindex: toSignal(this._input.disabled$.pipe(map((disabled) => (disabled ? -1 : 0)))),
+            'aria-labeledby': this._formFieldStateService.labelId,
+            'aria-describedby': this._formFieldStateService.describedBy,
         });
         this._updateValueFromPosition = (pos, sliderDimensions, shouldInvertMouseCoords) => {
             const offset = this.vertical ? sliderDimensions.top : sliderDimensions.left;
@@ -10932,12 +10831,9 @@ class MasonryComponent {
         this._didResize$ = new BehaviorSubject(false);
         this._didInitialize$ = new BehaviorSubject(false);
         this._hideOverflow$ = new BehaviorSubject(false);
-        this._bindings = createReactiveBindings({
-            attribute: 'class.et-masonry--initialized',
-            observable: this._didInitialize$,
-        }, {
-            attribute: 'class.et-masonry--hide-overflow',
-            observable: this._hideOverflow$,
+        this.hostClassBindings = signalHostClasses({
+            'et-masonry--initialized': toSignal(this._didInitialize$),
+            'et-masonry--hide-overflow': toSignal(this._hideOverflow$),
         });
         this._state = {
             preferredColumnWidth: 0,
@@ -11483,6 +11379,9 @@ class PictureComponent {
         this.trackBySrc = (_, item) => item.srcset;
     }
     combineWithConfig(src) {
+        if (isDevMode() && src.type === '') {
+            console.warn(`The type attribute is missing for the following source`, src.srcset, this);
+        }
         if (!this.config?.baseUrl || src.srcset.startsWith('http')) {
             return src;
         }
@@ -11493,7 +11392,7 @@ class PictureComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [src]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: PictureComponent, isStandalone: true, selector: "et-picture", inputs: { sources: "sources" }, host: { classAttribute: "et-picture" }, hostDirectives: [{ directive: PictureDataDirective, inputs: ["imgClass", "imgClass", "hasPriority", "hasPriority", "figureClass", "figureClass", "pictureClass", "pictureClass", "figcaptionClass", "figcaptionClass", "defaultSrc", "defaultSrc", "alt", "alt", "figcaption", "figcaption", "width", "width", "height", "height", "sizes", "sizes"] }], ngImport: i0, template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n", dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LetDirective, selector: "[etLet]", inputs: ["etLet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PictureComponent, decorators: [{
             type: Component,
@@ -11516,7 +11415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                                 'sizes',
                             ],
                         },
-                    ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [src]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n" }]
+                    ], template: "<figure [ngClass]=\"pictureData.figureClass\" class=\"et-picture-figure\">\n  <picture [ngClass]=\"pictureData.pictureClass\" class=\"et-picture-picture\">\n    <ng-container *ngFor=\"let source of sources; trackBy: trackBySrc\">\n      <source\n        *etLet=\"combineWithConfig(source) as s\"\n        [type]=\"s.type\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.sizes]=\"pictureData.sizes\"\n      />\n    </ng-container>\n\n    <ng-container *ngIf=\"pictureData.defaultSrc as source\">\n      <img\n        *etLet=\"combineWithConfig(source) as s\"\n        [attr.loading]=\"pictureData.hasPriority ? 'eager' : 'lazy'\"\n        [attr.fetchpriority]=\"pictureData.hasPriority ? 'high' : 'auto'\"\n        [ngClass]=\"pictureData.imgClass\"\n        [attr.srcset]=\"s.srcset\"\n        [attr.type]=\"s.type\"\n        [attr.alt]=\"pictureData.alt\"\n        [attr.width]=\"pictureData.width\"\n        [attr.height]=\"pictureData.height\"\n        [attr.sizes]=\"pictureData.sizes\"\n        class=\"et-picture-img\"\n      />\n    </ng-container>\n  </picture>\n\n  <figcaption *ngIf=\"pictureData.figcaption\" [ngClass]=\"pictureData.figcaptionClass\" class=\"et-picture-figcaption\">\n    {{ pictureData.figcaption }}\n  </figcaption>\n</figure>\n" }]
         }], propDecorators: { sources: [{
                 type: Input
             }] } });
@@ -12616,7 +12515,7 @@ class TableComponent extends CdkTable {
         this._isShowingTableBusy = shouldShow;
         this._cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$1.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableComponent, deps: [{ token: i0.IterableDiffers }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: 'role', attribute: true }, { token: i1$4.Directionality, optional: true }, { token: DOCUMENT }, { token: i2$2.Platform }, { token: _VIEW_REPEATER_STRATEGY }, { token: _COALESCED_STYLE_SCHEDULER }, { token: i3.ViewportRuler }, { token: STICKY_POSITIONING_LISTENER, optional: true, skipSelf: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TableComponent, isStandalone: true, selector: "et-table, table[et-table]", inputs: { busy: "busy" }, host: { properties: { "class.et-table-fixed-layout": "fixedLayout", "attr.aria-busy": "this._attrAriaBusy" }, classAttribute: "et-table et-data-table__table" }, providers: [
             { provide: CdkTable, useExisting: TableComponent },
             { provide: CDK_TABLE, useExisting: TableComponent },
@@ -12665,7 +12564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 }] }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: i2$1.Platform }, { type: undefined, decorators: [{
+                }] }, { type: i2$2.Platform }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [_VIEW_REPEATER_STRATEGY]
                 }] }, { type: i1$3._CoalescedStyleScheduler, decorators: [{