@ethlete/components 0.1.0-beta.4 → 0.1.0-next.10

package/fesm2022/ethlete-components.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, input, booleanAttribute, signal, effect, numberAttribute, computed, inject, ElementRef, InjectionToken, afterNextRender, untracked, DestroyRef, model, viewChild, Injector, output, ApplicationRef, EnvironmentInjector, DOCUMENT, createEnvironmentInjector, createComponent, TemplateRef, linkedSignal, afterRenderEffect, contentChild, inputBinding, PLATFORM_ID, isDevMode, contentChildren } from '@angular/core';
+import { ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, input, booleanAttribute, signal, effect, numberAttribute, computed, inject, ElementRef, InjectionToken, afterNextRender, untracked, DestroyRef, model, viewChild, Injector, output, ApplicationRef, EnvironmentInjector, DOCUMENT as DOCUMENT$1, createEnvironmentInjector, createComponent, TemplateRef, linkedSignal, afterRenderEffect, contentChild, inputBinding, PLATFORM_ID, isDevMode, contentChildren } from '@angular/core';
 import * as i2 from '@ethlete/core';
-import { injectStyleManager, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, RuntimeError, injectErrorTheme, signalElementDimensions, createProvider, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, ProvideSurfaceDirective, SURFACE_PROVIDER, injectSurfaceThemes, resolveSurfaceByElevation, ColorInteractiveHasFocusDirective, createStaticRootProvider, signalHostElementDimensions, signalHostStyles, DragHandleDirective, injectRenderer, injectLocale, ResizeHandlesComponent, ANIMATED_LIFECYCLE_TOKEN, injectSurfaceContextTracker, AnimatedLifecycleDirective, createRootProvider, injectOverlayRuntime, typedBreakpointTransform, signalElementChildren, signalElementScrollState, signalElementIntersection, signalHostAttributes, signalHostClasses, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, ScrollObserverDirective, ScrollObserverStartDirective, ScrollObserverEndDirective, injectViewportSize, createFlipAnimation, signalHostElementIntersection, injectHostElement, setInputSignal, SurfaceInteractiveDirective, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, COLOR_PROVIDER, injectFocusVisibleTracker } from '@ethlete/core';
-import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, ProvideColorDirective, RuntimeError, injectErrorTheme, signalElementDimensions, createProvider, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, ProvideSurfaceDirective, SURFACE_PROVIDER, injectSurfaceThemes, resolveSurfaceByElevation, ColorInteractiveHasFocusDirective, injectRenderer, htmlToMarkdown, markdownToHtml, createStaticRootProvider, signalHostElementDimensions, DragHandleDirective, injectLocale, ResizeHandlesComponent, ANIMATED_LIFECYCLE_TOKEN, injectSurfaceContextTracker, AnimatedLifecycleDirective, createRootProvider, injectOverlayRuntime, typedBreakpointTransform, signalElementChildren, signalElementScrollState, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, ScrollObserverDirective, ScrollObserverStartDirective, ScrollObserverEndDirective, injectViewportSize, createFlipAnimation, signalHostElementIntersection, injectHostElement, setInputSignal, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory, COLOR_PROVIDER, injectFocusVisibleTracker } from '@ethlete/core';
+import { NgTemplateOutlet, DOCUMENT, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
 import { toObservable, takeUntilDestroyed, outputToObservable, outputFromObservable, rxResource } from '@angular/core/rxjs-interop';
-import { switchMap, EMPTY, filter, tap, take, of, timer, animationFrameScheduler, Subject, fromEvent, debounceTime, map, exhaustMap, takeUntil, finalize, distinctUntilChanged, Observable, shareReplay, catchError, interval } from 'rxjs';
+import { switchMap, EMPTY, filter, tap, fromEvent, timer, take, of, animationFrameScheduler, Subject, debounceTime, map, exhaustMap, takeUntil, finalize, distinctUntilChanged, Observable, shareReplay, catchError, interval } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
+import { tap as tap$1 } from 'rxjs/operators';
 import * as i1 from '@angular/router';
 import { RouterLinkActive, NavigationEnd, RouterLink } from '@angular/router';
 
@@ -374,21 +375,27 @@ class ButtonDirective {
         this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         this.pressed = input(false, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.emitAriaPressed = input(true, { ...(ngDevMode ? { debugName: "emitAriaPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        // Opt-in: keep the button visually neutral (surface-themed) until it's pressed, only picking
+        // up the provided color theme once active — for toggle-style buttons (e.g. a formatting
+        // toolbar) where every button always being tinted by the ambient color theme reads as noise.
+        this.mutedUntilPressed = input(false, { ...(ngDevMode ? { debugName: "mutedUntilPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.IS_BUTTON = this.elementRef.nativeElement.tagName === 'BUTTON';
         this.IS_ANCHOR = this.elementRef.nativeElement.tagName === 'A';
         this.isInactive = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isInactive" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: ButtonDirective, isStandalone: true, selector: "[etButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, emitAriaPressed: { classPropertyName: "emitAriaPressed", publicName: "emitAriaPressed", isSignal: true, isRequired: false, transformFunction: null }, mutedUntilPressed: { classPropertyName: "mutedUntilPressed", publicName: "mutedUntilPressed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-loading": "loading() ? true : null", "attr.data-pressed": "pressed() ? true : null", "attr.data-muted-until-pressed": "mutedUntilPressed() ? true : null", "attr.disabled": "IS_BUTTON && isInactive() ? \"\" : null", "attr.aria-busy": "loading() ? true : null", "attr.aria-disabled": "isInactive() ? true : null", "attr.aria-pressed": "emitAriaPressed() && pressed() ? true : null", "attr.type": "IS_BUTTON ? type() : null", "attr.tabindex": "IS_ANCHOR && isInactive() ? -1 : null" } }, exportAs: ["etButton"], hostDirectives: [{ directive: i2.SurfaceInteractiveDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etButton]',
                     exportAs: 'etButton',
+                    hostDirectives: [SurfaceInteractiveDirective],
                     host: {
                         '[attr.data-loading]': 'loading() ? true : null',
                         '[attr.data-pressed]': 'pressed() ? true : null',
+                        '[attr.data-muted-until-pressed]': 'mutedUntilPressed() ? true : null',
                         '[attr.disabled]': 'IS_BUTTON && isInactive() ? "" : null',
                         '[attr.aria-busy]': 'loading() ? true : null',
                         '[attr.aria-disabled]': 'isInactive() ? true : null',
@@ -397,7 +404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.tabindex]': 'IS_ANCHOR && isInactive() ? -1 : null',
                     },
                 }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }] } });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], emitAriaPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitAriaPressed", required: false }] }], mutedUntilPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mutedUntilPressed", required: false }] }] } });
 
 const BUTTON_SIZES = {
     XS: 'xs',
@@ -440,7 +447,7 @@ class ButtonComponent {
         this.pressedVariant = computed(() => (this.buttonDir.pressed() ? PRESSED_VARIANT_MAP$2[this.variant()] : null), ...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: ButtonComponent, isStandalone: true, selector: "[et-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconAlignment: { classPropertyName: "iconAlignment", publicName: "iconAlignment", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-icon-alignment": "iconAlignment()", "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed", "mutedUntilPressed", "mutedUntilPressed"] }, { directive: ButtonStylesDirective }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
     @if (iconAlignment() === 'start') {
       <div class="et-button-icon">
         <ng-container *ngTemplateOutlet="iconTpl" />
@@ -470,7 +477,7 @@ class ButtonComponent {
     <ng-template #iconTpl>
       <ng-content select="[etIcon]" />
     </ng-template>
-  `, isInline: true, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -507,7 +514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type', 'pressed'],
+                            inputs: ['disabled', 'loading', 'type', 'pressed', 'mutedUntilPressed'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -523,7 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.data-size]': 'size()',
                         '[attr.data-pressed-variant]': 'pressedVariant()',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
+                    }, styles: [".et-button{--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent;display:inline-flex;position:relative;align-items:center;justify-content:center;gap:var(--et-button-gap);background:var(--_et-button-background);color:var(--_et-button-color);border-radius:var(--et-button-border-radius);padding:var(--et-button-padding);font-size:var(--et-button-font-size);font-weight:var(--et-button-font-weight);border:var(--et-button-border-width, .1rem) solid var(--_et-button-border-color);box-shadow:var(--et-button-shadow, 0 0 #0000);cursor:var(--et-button-cursor);text-decoration:none;appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;line-height:var(--et-button-line-height);white-space:nowrap}.et-button[data-can-animate]{transition:background .12s ease,color .12s ease,border-color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-button:where([data-size=xs]){--et-button-padding: .2rem .8rem;--et-button-font-size: 1.2rem;--et-button-border-radius: .3rem;--et-button-gap: .4rem}.et-button:where([data-size=sm]){--et-button-padding: .4rem 1.2rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .5rem}.et-button:where([data-size=md]){--et-button-padding: .8rem 1.6rem;--et-button-font-size: 1.4rem;--et-button-border-radius: .4rem;--et-button-gap: .6rem}.et-button:where([data-size=lg]){--et-button-padding: 1rem 2rem;--et-button-font-size: 1.6rem;--et-button-border-radius: .6rem;--et-button-gap: .7rem}.et-button:where([data-size=xl]){--et-button-padding: 1.4rem 2.8rem;--et-button-font-size: 1.8rem;--et-button-border-radius: .8rem;--et-button-gap: .8rem}.et-button:where([disabled]),.et-button:where([aria-disabled=true]){cursor:not-allowed;pointer-events:none}.et-button:where([disabled],[aria-disabled=true]):where([data-variant=outline]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=tonal]),.et-button:where([disabled],[aria-disabled=true]):where([data-variant=transparent]),.et-button:where([disabled],[aria-disabled=true])[data-pressed=true]{opacity:var(--et-button-opacity-disabled)}.et-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: var(--et-theme-color-ink-solid)}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button[data-pressed=true]:where([data-pressed-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=outline])[data-loading=true]:not([disabled],[aria-disabled=true]){--_et-button-color: var(--et-theme-color-primary-solid);--_et-button-border-color: var(--et-theme-color-primary-solid)}.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):hover{--et-theme-color-primary-opacity: .24}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):focus-visible{--et-theme-color-primary-opacity: .28}:is(.et-button:where([data-variant=tonal]),.et-button[data-pressed=true]:where([data-pressed-variant=tonal])):active{--et-theme-color-primary-opacity: .32}.et-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-ink-solid);--_et-button-border-color: transparent}.et-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-button-background: var(--et-theme-color-primary);--_et-button-color: var(--et-theme-color-on-primary);--_et-button-border-color: transparent}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: 1}.et-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: 1}.et-button[data-muted-until-pressed]:not([data-pressed=true]){--_et-button-color: currentColor}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 40%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 44%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 48%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){--_et-button-background: transparent;--_et-button-border-color: var(--et-surface-interaction-solid)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent);--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 24%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 28%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 32%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){--_et-button-background: transparent;--_et-button-border-color: transparent}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 12%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 16%, transparent)}.et-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{--_et-button-background: color-mix(in srgb, var(--et-surface-interaction-solid) 20%, transparent)}.et-button .et-button-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .12s ease}.et-button .et-button-icon:empty{display:none}.et-button .et-button-icon .et-icon{width:1em;height:1em}.et-button .et-button-contents{display:inline-flex;align-items:center;min-width:0;transition:opacity .12s ease}.et-button[data-loading=true] .et-button-icon,.et-button[data-loading=true] .et-button-contents{opacity:0}.et-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconAlignment", required: false }] }] } });
 
 class FabComponent {
@@ -635,7 +642,7 @@ class IconButtonComponent {
         this.pressedVariant = computed(() => (this.buttonDir.pressed() ? PRESSED_VARIANT_MAP$1[this.variant()] : null), ...(ngDevMode ? [{ debugName: "pressedVariant" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed"] }, { directive: ButtonStylesDirective }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: IconButtonComponent, isStandalone: true, selector: "[et-icon-button]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant()", "attr.data-size": "size()", "attr.data-pressed-variant": "pressedVariant()", "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-icon-button" }, hostDirectives: [{ directive: ButtonDirective, inputs: ["disabled", "disabled", "loading", "loading", "type", "type", "pressed", "pressed", "mutedUntilPressed", "mutedUntilPressed"] }, { directive: ButtonStylesDirective }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: `
     <div class="et-icon-button-icon">
       <ng-content select="[etIcon]" />
     </div>
@@ -649,7 +656,7 @@ class IconButtonComponent {
         />
       </div>
     }
-  `, isInline: true, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.8rem;height:2.8rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.6rem;height:3.6rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:4rem;height:4rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.8rem;height:4.8rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.6rem;height:5.6rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.8rem;height:2.8rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.6rem;height:3.6rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:4rem;height:4rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.8rem;height:4.8rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.6rem;height:5.6rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconButtonComponent, decorators: [{
             type: Component,
@@ -670,7 +677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
   `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SpinnerComponent], hostDirectives: [
                         {
                             directive: ButtonDirective,
-                            inputs: ['disabled', 'loading', 'type', 'pressed'],
+                            inputs: ['disabled', 'loading', 'type', 'pressed', 'mutedUntilPressed'],
                         },
                         ButtonStylesDirective,
                         ColorInteractiveDirective,
@@ -685,7 +692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.data-size]': 'size()',
                         '[attr.data-pressed-variant]': 'pressedVariant()',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.8rem;height:2.8rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.6rem;height:3.6rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:4rem;height:4rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.8rem;height:4.8rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.6rem;height:5.6rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
+                    }, styles: ["@property --_et-icon-button-icon-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}.et-icon-button{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--et-theme-color-primary);color:var(--et-theme-color-ink-solid);border:none;border-radius:9999px;padding:0;font-size:var(--et-button-font-size);cursor:var(--et-button-cursor);appearance:none;box-sizing:border-box;-webkit-user-select:none;user-select:none;overflow:hidden;flex-shrink:0;--et-theme-color-primary-opacity: 0}.et-icon-button[data-can-animate]{transition:background .12s ease,color .12s ease,box-shadow .12s ease,outline-color .12s ease,opacity .12s ease}.et-icon-button:where([data-size=xs]){width:2.8rem;height:2.8rem;--_et-icon-button-icon-size: 1.4rem}.et-icon-button:where([data-size=sm]){width:3.6rem;height:3.6rem;--_et-icon-button-icon-size: 1.8rem}.et-icon-button:where([data-size=md]){width:4rem;height:4rem;--_et-icon-button-icon-size: 2rem}.et-icon-button:where([data-size=lg]){width:4.8rem;height:4.8rem;--_et-icon-button-icon-size: 2.4rem}.et-icon-button:where([data-size=xl]){width:5.6rem;height:5.6rem;--_et-icon-button-icon-size: 2.8rem}.et-icon-button:where([disabled]),.et-icon-button:where([aria-disabled=true]){opacity:var(--et-button-opacity-disabled);cursor:not-allowed;pointer-events:none}.et-icon-button:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button:where([data-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button:where([data-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button:where([data-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;border:var(--et-button-border-width, .1rem) solid var(--et-theme-color-ink-solid)}.et-icon-button:where([data-variant=outline]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=outline]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=outline]):active{--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button:where([data-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button:where([data-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button:where([data-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button:where([data-variant=transparent]){--et-theme-color-primary-opacity: 0}.et-icon-button:where([data-variant=transparent]):hover{--et-theme-color-primary-opacity: .08}.et-icon-button:where([data-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .12}.et-icon-button:where([data-variant=transparent]):active{--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=transparent]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]){--et-theme-color-primary-opacity: .16}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):hover{--et-theme-color-primary-opacity: .24}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):focus-visible{--et-theme-color-primary-opacity: .28}.et-icon-button[data-pressed=true]:where([data-pressed-variant=tonal]):active{--et-theme-color-primary-opacity: .32}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]){--et-theme-color-primary-opacity: 1;color:var(--et-theme-color-on-primary)}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):hover{--et-theme-color-primary-opacity: .92}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):focus-visible{--et-theme-color-primary-opacity: .88}.et-icon-button[data-pressed=true]:where([data-pressed-variant=filled]):active{--et-theme-color-primary-opacity: .84}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]){color:currentColor}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 40%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 44%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=filled]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 48%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]){background:transparent;border-color:var(--et-surface-interaction-solid)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=outline]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 24%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 28%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=tonal]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 32%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]){background:transparent}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):hover:not([disabled]):not([aria-disabled=true]){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-icon-button[data-muted-until-pressed]:not([data-pressed=true]):where([data-variant=transparent]):active{background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-icon-button .et-icon-button-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transition:opacity .12s ease}.et-icon-button .et-icon-button-icon .et-icon{width:var(--_et-icon-button-icon-size);height:var(--_et-icon-button-icon-size)}.et-icon-button[data-loading=true] .et-icon-button-icon{opacity:0}.et-icon-button[data-loading=true] .et-button-loader{opacity:1}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 class TextButtonComponent {
@@ -871,6 +878,7 @@ const FORM_FIELD_ERROR_CODES = {
 
 const FORM_FIELD_CONTROL_TYPES = {
     TEXT_INPUT: 'text-input',
+    RICH_TEXT: 'rich-text',
     CHECKBOX: 'checkbox',
     RADIO: 'radio',
     SWITCH: 'switch',
@@ -910,7 +918,8 @@ class FormFieldDirective {
         this.controlType = computed(() => this.registeredControl()?.controlType() ?? FORM_FIELD_CONTROL_TYPES.TEXT_INPUT, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
         this.focused = computed(() => this.registeredControl()?.focused?.() ?? false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
         this.hasValue = computed(() => this.registeredControl()?.hasValue?.() ?? false, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
-        this.usesTextFieldShell = computed(() => this.controlType() === FORM_FIELD_CONTROL_TYPES.TEXT_INPUT, ...(ngDevMode ? [{ debugName: "usesTextFieldShell" }] : /* istanbul ignore next */ []));
+        this.usesTextFieldShell = computed(() => this.controlType() === FORM_FIELD_CONTROL_TYPES.TEXT_INPUT ||
+            this.controlType() === FORM_FIELD_CONTROL_TYPES.RICH_TEXT, ...(ngDevMode ? [{ debugName: "usesTextFieldShell" }] : /* istanbul ignore next */ []));
         this.shouldFloatLabel = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "shouldFloatLabel" }] : /* istanbul ignore next */ []));
         this.describedById = computed(() => {
             if (this.shouldDisplayError() && this.errors().length > 0) {
@@ -1277,7 +1286,7 @@ class CheckboxComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-checkbox{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: CheckboxComponent, isStandalone: true, selector: "et-checkbox", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox" }, viewQueries: [{ propertyName: "checkmarkEl", first: true, predicate: ["checkmark"], descendants: true, isSignal: true }, { propertyName: "indeterminateEl", first: true, predicate: ["indeterminate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: CheckboxDirective, inputs: ["checked", "checked", "indeterminate", "indeterminate", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "indeterminateChange", "indeterminateChange", "touchedChange", "touchedChange"] }, { directive: i2.ColorInteractiveDirective }, { directive: FocusRingDirective }], ngImport: i0, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -1292,7 +1301,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     ], host: {
                         class: 'et-checkbox',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-checkbox{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"] }]
+                    }, template: "<div class=\"et-checkbox-box\">\n  <svg\n    #checkmark\n    [style.color]=\"frozenCheckmarkColor()\"\n    class=\"et-checkbox-checkmark\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <polyline\n      class=\"et-checkbox-checkmark-path\"\n      points=\"3.5 8 6.5 11 12.5 5\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n  <svg\n    #indeterminate\n    [style.color]=\"frozenIndeterminateColor()\"\n    class=\"et-checkbox-indeterminate\"\n    viewBox=\"0 0 16 16\"\n    aria-hidden=\"true\"\n  >\n    <line\n      class=\"et-checkbox-indeterminate-path\"\n      x1=\"4\"\n      y1=\"8\"\n      x2=\"12\"\n      y2=\"8\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n    />\n  </svg>\n</div>\n", styles: ["@property --et-checkbox-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-checkbox{display:inline-flex;align-items:center;cursor:pointer;border-radius:var(--et-checkbox-border-radius);transition:opacity .15s ease,outline-color .15s ease}et-checkbox[aria-disabled=true]{opacity:var(--et-checkbox-opacity-disabled);pointer-events:none;cursor:default}et-checkbox .et-checkbox-box{position:relative;display:grid;place-items:center;width:var(--et-checkbox-size);height:var(--et-checkbox-size);border:var(--et-checkbox-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-checkbox-border-radius)}et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor)}:where(et-choice-field[data-error]) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}:where(et-choice-field[data-error]) et-checkbox:hover:not([aria-disabled=true]) .et-checkbox-box,:where(et-choice-field[data-error]:has(.et-choice-field-label-area:hover)) et-checkbox:not([aria-disabled=true]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-color-solid, currentColor)}et-checkbox:focus-visible:is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]){--_et-focus-ring-color: var(--et-theme-color-primary-solid)}et-choice-field[data-error] et-checkbox:focus-visible:not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-theme-color-primary-solid)}et-checkbox:active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):not([aria-checked=true]):not([aria-checked=mixed]) .et-checkbox-box{border-color:var(--et-surface-interaction-hover-solid, currentColor);transform:scale(.95)}et-checkbox:active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,et-checkbox.et-focus-ring--active:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:active)) et-checkbox:not([aria-disabled=true]):is([aria-checked=true],[aria-checked=mixed]) .et-checkbox-box{transform:scale(.95)}et-checkbox .et-checkbox-checkmark{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-checkmark-path{stroke-dasharray:18;stroke-dashoffset:18}et-checkbox .et-checkbox-indeterminate{position:absolute;inset:0;width:100%;height:100%;color:var(--et-theme-color-on-primary-solid, white);opacity:0}et-checkbox .et-checkbox-indeterminate-path{stroke-dasharray:8;stroke-dashoffset:8}et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=true] .et-checkbox-checkmark{opacity:1}et-checkbox[aria-checked=true] .et-checkbox-checkmark-path{stroke-dashoffset:0}et-checkbox[aria-checked=true]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=true] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate{opacity:1}et-checkbox[aria-checked=mixed] .et-checkbox-indeterminate-path{stroke-dashoffset:0}et-checkbox[aria-checked=mixed]:hover .et-checkbox-box,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-checkbox[aria-checked=mixed] .et-checkbox-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox[data-can-animate]{transition:opacity var(--et-checkbox-transition-duration) ease,outline-color var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-box{transition:background-color var(--et-checkbox-transition-duration) ease,border-color var(--et-checkbox-transition-duration) ease,transform var(--et-checkbox-transition-duration) ease}et-checkbox[data-can-animate] .et-checkbox-checkmark{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-checkmark-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate] .et-checkbox-indeterminate{transition:opacity 0s calc(var(--et-checkbox-transition-duration) * 1.5)}et-checkbox[data-can-animate] .et-checkbox-indeterminate-path{transition:stroke-dashoffset calc(var(--et-checkbox-transition-duration) * 1.5) ease}et-checkbox[data-can-animate][aria-checked=true] .et-checkbox-checkmark{transition:opacity 0s 0s}et-checkbox[data-can-animate][aria-checked=mixed] .et-checkbox-indeterminate{transition:opacity 0s 0s}\n"] }]
         }], ctorParameters: () => [], propDecorators: { checkmarkEl: [{ type: i0.ViewChild, args: ['checkmark', { isSignal: true }] }], indeterminateEl: [{ type: i0.ViewChild, args: ['indeterminate', { isSignal: true }] }] } });
 
 const CHECKBOX_IMPORTS = [CheckboxComponent, CheckboxDirective];
@@ -1645,7 +1654,8 @@ class FormFieldComponent {
         }
         const target = event.target;
         const tagName = target.tagName;
-        if (tagName === 'INPUT' ||
+        if (target.isContentEditable ||
+            tagName === 'INPUT' ||
             tagName === 'TEXTAREA' ||
             tagName === 'SELECT' ||
             tagName === 'BUTTON' ||
@@ -1656,7 +1666,7 @@ class FormFieldComponent {
         this.formFieldDir.activate();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i2.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i2.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <ng-content select=\"[etInputSuffix]\" />\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-stack\">\n      @if (shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.errorId()\"\n          [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"errorActive() || null\"\n          [attr.data-direction]=\"errorDirection()\"\n          [attr.data-state]=\"errorState()\"\n          [etProvideColor]=\"errorColorTheme\"\n          class=\"et-form-field-support-content et-form-field-errors\"\n          etAnimatable\n        >\n          @for (error of visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.hintId()\"\n          [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n          [attr.data-active]=\"hintActive() || null\"\n          [attr.data-direction]=\"hintDirection()\"\n          [attr.data-state]=\"hintState()\"\n          class=\"et-form-field-support-content et-form-field-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: FormFieldComponent, isStandalone: true, selector: "et-form-field", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, labelMode: { classPropertyName: "labelMode", publicName: "labelMode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-control-type": "formFieldDir.controlType()", "attr.data-error": "displaysError() || null", "attr.data-appearance": "formFieldDir.usesTextFieldShell() ? appearance() : null", "attr.data-fill": "formFieldDir.usesTextFieldShell() ? fill() : null", "attr.data-label-floated": "hasFloatingTextLabel() && formFieldDir.shouldFloatLabel() ? \"\" : null", "attr.data-label-mode": "formFieldDir.usesTextFieldShell() ? labelMode() : null", "attr.data-size": "formFieldDir.usesTextFieldShell() ? size() : null", "attr.data-text-shell": "formFieldDir.usesTextFieldShell() || null", "style.--_et-form-field-prefix-offset": "prefixOffset()" }, classAttribute: "et-form-field" }, viewQueries: [{ propertyName: "errorContent", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContent", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "prefixEl", first: true, predicate: ["prefixEl"], descendants: true, isSignal: true }, { propertyName: "errorAnimatable", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatable", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: i2.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i2.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }, { directive: i2.ColorInteractiveHasFocusDirective }], ngImport: i0, template: "<div class=\"et-form-field-shell\">\n  <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <ng-content select=\"[etInputSuffix]\" />\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-stack\">\n      @if (shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.errorId()\"\n          [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"errorActive() || null\"\n          [attr.data-direction]=\"errorDirection()\"\n          [attr.data-state]=\"errorState()\"\n          [etProvideColor]=\"errorColorTheme\"\n          class=\"et-form-field-support-content et-form-field-errors\"\n          etAnimatable\n        >\n          @for (error of visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.hintId()\"\n          [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n          [attr.data-active]=\"hintActive() || null\"\n          [attr.data-direction]=\"hintDirection()\"\n          [attr.data-state]=\"hintState()\"\n          class=\"et-form-field-support-content et-form-field-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "directive", type: ColorInteractiveExcludeDirective, selector: "[etColorInteractiveExclude]" }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
@@ -1677,7 +1687,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.data-size]': 'formFieldDir.usesTextFieldShell() ? size() : null',
                         '[attr.data-text-shell]': 'formFieldDir.usesTextFieldShell() || null',
                         '[style.--_et-form-field-prefix-offset]': 'prefixOffset()',
-                    }, template: "<div class=\"et-form-field-shell\">\n  <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <ng-content select=\"[etInputSuffix]\" />\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-stack\">\n      @if (shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.errorId()\"\n          [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"errorActive() || null\"\n          [attr.data-direction]=\"errorDirection()\"\n          [attr.data-state]=\"errorState()\"\n          [etProvideColor]=\"errorColorTheme\"\n          class=\"et-form-field-support-content et-form-field-errors\"\n          etAnimatable\n        >\n          @for (error of visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.hintId()\"\n          [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n          [attr.data-active]=\"hintActive() || null\"\n          [attr.data-direction]=\"hintDirection()\"\n          [attr.data-state]=\"hintState()\"\n          class=\"et-form-field-support-content et-form-field-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"] }]
+                    }, template: "<div class=\"et-form-field-shell\">\n  <div (mousedown)=\"handleFramePointerDown($event)\" class=\"et-form-field-control-frame\">\n    <div #prefixEl class=\"et-form-field-affix et-form-field-prefix\">\n      <ng-content select=\"[etInputPrefix]\" />\n    </div>\n\n    <div class=\"et-form-field-control-area\">\n      <div\n        [class.et-form-field-label-area--floating]=\"hasFloatingTextLabel()\"\n        [class.et-form-field-label-area--inline]=\"hasInlineLabel()\"\n        class=\"et-form-field-label-area\"\n      >\n        <ng-content select=\"et-label\" />\n      </div>\n\n      <div class=\"et-form-field-control-slot\">\n        <ng-content />\n      </div>\n    </div>\n\n    <div class=\"et-form-field-affix et-form-field-suffix\">\n      <ng-content select=\"[etInputSuffix]\" />\n    </div>\n  </div>\n</div>\n\n@if (shouldRenderSupport()) {\n  <div [style.block-size.px]=\"supportHeight()\" class=\"et-form-field-support\" etColorInteractiveExclude>\n    <div class=\"et-form-field-support-stack\">\n      @if (shouldRenderError()) {\n        <div\n          #errorContent\n          #errorAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.errorId()\"\n          [attr.aria-atomic]=\"errorActive() ? 'true' : null\"\n          [attr.aria-hidden]=\"!errorActive() ? 'true' : null\"\n          [attr.aria-live]=\"errorActive() ? 'polite' : null\"\n          [attr.data-active]=\"errorActive() || null\"\n          [attr.data-direction]=\"errorDirection()\"\n          [attr.data-state]=\"errorState()\"\n          [etProvideColor]=\"errorColorTheme\"\n          class=\"et-form-field-support-content et-form-field-errors\"\n          etAnimatable\n        >\n          @for (error of visibleErrors(); track $index) {\n            <et-form-error [error]=\"error\" />\n          }\n        </div>\n      }\n\n      @if (shouldRenderHint()) {\n        <div\n          #hintContent\n          #hintAnimatable=\"etAnimatable\"\n          [id]=\"formFieldDir.hintId()\"\n          [attr.aria-hidden]=\"!hintActive() ? 'true' : null\"\n          [attr.data-active]=\"hintActive() || null\"\n          [attr.data-direction]=\"hintDirection()\"\n          [attr.data-state]=\"hintState()\"\n          class=\"et-form-field-support-content et-form-field-hint\"\n          etAnimatable\n        >\n          <ng-content select=\"et-hint\" />\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: ["@property --et-form-field-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-form-field-control-border-width{syntax: \"<length>\"; inherits: true; initial-value: 1px;}@property --et-form-field-control-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-control-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-control-line-height{syntax: \"<number>\"; inherits: true; initial-value: 1.5;}@property --et-form-field-control-affix-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-form-field-control-disabled-opacity{syntax: \"<number>\"; inherits: true; initial-value: .5;}@property --et-form-field-control-min-height{syntax: \"<length>\"; inherits: true; initial-value: 40px;}@property --et-form-field-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-form-field-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-form-field-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-form-field-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-form-field{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--_et-form-field-control-background: transparent;--_et-form-field-control-focus-ring: color-mix(in srgb, var(--et-theme-color-primary-solid) 18%, transparent);--_et-form-field-floating-label-scale: .75;display:flex;flex-direction:column;gap:var(--et-form-field-gap);color:var(--et-surface-color-solid, currentColor)}et-form-field:where([data-size=sm]){--et-form-field-gap: 4px;--et-form-field-control-border-radius: 4px;--et-form-field-control-padding-block: 4px;--et-form-field-control-padding-inline: 10px;--et-form-field-control-affix-gap: 6px;--et-form-field-control-font-size: 12px;--et-form-field-control-min-height: 42px;--et-form-field-label-font-size: 12px}et-form-field:where([data-size=md]){--et-form-field-gap: 5px;--et-form-field-control-border-radius: 5px;--et-form-field-control-padding-block: 6px;--et-form-field-control-padding-inline: 12px;--et-form-field-control-affix-gap: 8px;--et-form-field-control-font-size: 14px;--et-form-field-control-min-height: 50px;--et-form-field-label-font-size: 13px}et-form-field:where([data-size=lg]){--et-form-field-gap: 6px;--et-form-field-control-border-radius: 6px;--et-form-field-control-padding-block: 8px;--et-form-field-control-padding-inline: 14px;--et-form-field-control-affix-gap: 10px;--et-form-field-control-font-size: 16px;--et-form-field-control-min-height: 58px;--et-form-field-label-font-size: 14px}et-form-field[data-fill=filled]{--_et-form-field-control-background: var(--et-surface-background-solid, var(--et-surface-base-solid, transparent))}et-form-field .et-form-field-shell{display:flex;flex-direction:column;gap:var(--et-form-field-gap);min-inline-size:0;overflow:visible}et-form-field .et-form-field-label-area{display:flex;align-items:center;font-size:var(--et-form-field-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);cursor:text;-webkit-user-select:none;user-select:none;min-inline-size:0;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-label-area et-label{display:inline;min-inline-size:0}et-form-field .et-form-field-label-area--floating{position:absolute;inset-block-start:50%;inset-inline-start:0;z-index:1;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-50%);transform-origin:left top;pointer-events:none}et-form-field[data-can-animate] .et-form-field-label-area--floating{transition:color .15s ease,opacity .15s ease,inset-block-start .15s ease,inset-inline-start .15s ease,transform .15s ease}et-form-field .et-form-field-control-frame{position:relative;display:flex;align-items:center;box-sizing:border-box;gap:var(--et-form-field-control-affix-gap);min-inline-size:0;min-block-size:var(--et-form-field-control-min-height);padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);border:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor);border-radius:var(--et-form-field-control-border-radius);background:var(--_et-form-field-control-background);font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease;cursor:text}et-form-field .et-form-field-affix{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--et-surface-color-muted-solid, currentColor);opacity:.78;pointer-events:none;transition:color .15s ease,opacity .15s ease}et-form-field .et-form-field-affix:empty{display:none}et-form-field .et-form-field-affix>*{pointer-events:none}et-form-field .et-form-field-affix>:is(button,a[href],input,select,textarea,summary,label,[role=button],[tabindex]:not([tabindex=\"-1\"])){pointer-events:auto}et-form-field .et-form-field-affix button{font:inherit;color:inherit;border:none;background:transparent;padding:0;cursor:pointer}et-form-field .et-form-field-control-area{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field .et-form-field-control-area>*{min-inline-size:0}et-form-field .et-form-field-control-slot{display:flex;align-items:center;flex:1;min-inline-size:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-control-area{position:static}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static] .et-form-field-label-area{position:absolute;inset-block-start:0;inset-inline-start:var(--et-form-field-control-padding-inline);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=static][data-appearance=underline][data-fill=transparent] .et-form-field-label-area{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-frame{align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-area{position:static;gap:var(--et-form-field-control-affix-gap);align-items:stretch}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-control-slot{display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline] .et-form-field-label-area--inline{position:static;flex-shrink:0;transform:none;white-space:nowrap;pointer-events:auto;font-size:var(--et-form-field-control-font-size);line-height:var(--et-form-field-control-line-height);display:flex;align-items:center;margin-block:calc(var(--et-form-field-control-padding-block) * -1)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=underline] .et-form-field-label-area--inline:after{content:\":\"}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=inline][data-appearance=box] .et-form-field-label-area--inline{padding-inline-end:var(--et-form-field-control-padding-inline);margin-inline-end:calc(var(--et-form-field-control-padding-inline) - var(--et-form-field-control-affix-gap));border-inline-end:var(--et-form-field-control-border-width) solid var(--et-surface-border-solid, currentColor)}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]) .et-input-native::placeholder{transition:color .15s ease}:is(et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside],et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside]):not([data-label-floated]) .et-input-native::placeholder{color:transparent}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside] .et-form-field-shell{padding-block-start:calc(var(--et-form-field-label-font-size) * 1.2 + var(--et-form-field-gap))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-outside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:0;inset-inline-start:calc(var(--_et-form-field-prefix-offset, 0px) * -1);transform:translateY(calc(-100% - var(--et-form-field-gap) - var(--et-form-field-control-border-width) - var(--et-form-field-control-padding-block)))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside]{--_et-form-field-float-inside-extra-padding: calc( var(--et-form-field-label-font-size) * var(--_et-form-field-floating-label-scale) + 2px )}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-area{align-self:stretch;display:flex;align-items:center;padding-block-start:var(--_et-form-field-float-inside-extra-padding)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-label-area--floating{inset-inline-start:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside][data-label-floated] .et-form-field-label-area--floating{inset-block-start:4px;transform:scale(var(--_et-form-field-floating-label-scale))}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-label-mode=floating-inside] .et-form-field-control-slot{font-size:calc(var(--et-form-field-control-font-size) * .96)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]) .et-form-field-label-area{max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-control-frame{border-color:var(--et-surface-interaction-hover-solid, currentColor)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:hover:not(:has(.et-color-interactive-exclude:hover))) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-label-area,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):where(:has(:focus-visible)) .et-form-field-affix{color:var(--et-surface-color-solid, currentColor);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-control-frame{border-color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-label-area{color:var(--et-theme-color-primary-solid)}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-error] .et-form-field-affix{color:var(--et-theme-color-primary-solid);opacity:1}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-control-frame{opacity:var(--et-form-field-control-disabled-opacity);pointer-events:none;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text]):has(:disabled) .et-form-field-label-area{cursor:not-allowed}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline] .et-form-field-control-frame{border-top:none;border-inline:none;border-radius:0;box-shadow:none}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-control-frame{padding-inline:0}et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-errors,et-form-field:where([data-control-type=text-input],[data-control-type=rich-text])[data-appearance=underline][data-fill=transparent] .et-form-field-hint{padding-inline-start:0}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-frame{align-items:stretch;padding:0;cursor:auto}et-form-field:where([data-control-type=rich-text]) .et-form-field-control-area,et-form-field:where([data-control-type=rich-text]) .et-form-field-control-slot{align-items:stretch}et-form-field .et-form-field-support{overflow:clip;block-size:0}et-form-field .et-form-field-support-stack{position:relative;display:grid}et-form-field .et-form-field-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-form-field .et-form-field-support-content[data-active]{opacity:1;transform:translateY(0)}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-above]{position:absolute;inset:0;opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1));pointer-events:none}et-form-field .et-form-field-support-content[data-state=leaving][data-direction=to-below]{position:absolute;inset:0;opacity:0;transform:translateY(var(--et-form-field-support-offset));pointer-events:none}et-form-field .et-form-field-errors{display:flex;flex-direction:column;gap:2px;font-size:var(--et-form-field-error-font-size);color:var(--et-theme-color-primary-solid);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width))}et-form-field .et-form-field-hint{font-size:var(--et-form-field-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor);padding-inline-start:calc(var(--et-form-field-control-padding-inline) + var(--et-form-field-control-border-width));transition:color .15s ease}et-form-field .et-form-field-hint:empty{display:none}et-form-field:has(:disabled) .et-form-field-hint{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-form-field[data-can-animate] .et-form-field-support{transition:block-size var(--et-form-field-support-duration) ease}et-form-field[data-can-animate] .et-form-field-support-content{transition:opacity var(--et-form-field-support-duration) ease,transform var(--et-form-field-support-duration) ease}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-above]{opacity:0;transform:translateY(calc(var(--et-form-field-support-offset) * -1))}}@starting-style{et-form-field[data-can-animate] .et-form-field-support-content[data-active][data-direction=from-below]{opacity:0;transform:translateY(var(--et-form-field-support-offset))}}@media(prefers-reduced-motion:reduce){et-form-field{--et-form-field-support-duration: 1ms;--et-form-field-support-offset: 0px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], labelMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelMode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], errorContent: [{ type: i0.ViewChild, args: ['errorContent', { isSignal: true }] }], hintContent: [{ type: i0.ViewChild, args: ['hintContent', { isSignal: true }] }], prefixEl: [{ type: i0.ViewChild, args: ['prefixEl', { isSignal: true }] }], errorAnimatable: [{ type: i0.ViewChild, args: ['errorAnimatable', { isSignal: true }] }], hintAnimatable: [{ type: i0.ViewChild, args: ['hintAnimatable', { isSignal: true }] }] } });
 
 class InputPrefixDirective {
@@ -1813,181 +1823,1468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
 
 const INPUT_IMPORTS = [InputComponent, InputDirective];
 
-const SELECTION_LIST_TOKEN = new InjectionToken('SELECTION_LIST_TOKEN');
-const SELECTION_LIST_MULTIPLE = new InjectionToken('SELECTION_LIST_MULTIPLE');
-
-class SelectionListControlDirective {
-    constructor() {
-        this.list = inject(SELECTION_LIST_TOKEN);
-        this.checked = computed(() => this.list.allSelected(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
-        this.indeterminate = computed(() => this.list.someSelected(), ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-        this.labelId = signal(`et-selection-list-control-label-${uniqueControlLabelId++}`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
-        this.ariaChecked = computed(() => {
-            if (this.indeterminate()) {
-                return 'mixed';
+const richTextEditorDomFactory = () => {
+    const renderer = injectRenderer();
+    const doc = inject(DOCUMENT);
+    /** The contenteditable element, set by the owning directive once its view exists. */
+    const root = signal(null, ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
+    const getSelection = () => {
+        const el = root();
+        if (!el) {
+            return null;
+        }
+        const selection = doc.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return null;
+        }
+        const range = selection.getRangeAt(0);
+        if (!el.contains(range.commonAncestorContainer)) {
+            return null;
+        }
+        return { selection, range };
+    };
+    const closestWithin = (node, selector) => {
+        const el = root();
+        if (!el) {
+            return null;
+        }
+        let current = node instanceof HTMLElement ? node : (node?.parentElement ?? null);
+        while (current && el.contains(current)) {
+            if (current.matches(selector)) {
+                return current;
             }
-            return this.checked();
-        }, ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
-    }
-    toggle() {
-        if (this.list.disabled()) {
+            current = current.parentElement;
+        }
+        return null;
+    };
+    const selectNodeContents = (node) => {
+        const selection = doc.getSelection();
+        if (!selection) {
             return;
         }
-        this.list.toggleAll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SelectionListControlDirective, isStandalone: true, selector: "[etSelectionListControl]", host: { listeners: { "click": "toggle()", "keydown.space": "toggle(); $event.preventDefault()", "keydown.enter": "toggle(); $event.preventDefault()" }, properties: { "attr.role": "\"option\"", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "list.disabled() || null", "attr.tabindex": "list.disabled() ? -1 : 0" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etSelectionListControl]',
-                    host: {
-                        '[attr.role]': '"option"',
-                        '[attr.aria-checked]': 'ariaChecked()',
-                        '[attr.aria-disabled]': 'list.disabled() || null',
-                        '[attr.tabindex]': 'list.disabled() ? -1 : 0',
-                        '(click)': 'toggle()',
-                        '(keydown.space)': 'toggle(); $event.preventDefault()',
-                        '(keydown.enter)': 'toggle(); $event.preventDefault()',
-                    },
-                }]
-        }] });
-let uniqueControlLabelId = 0;
-
-class SelectionListDirective {
-    constructor() {
-        this.formField = inject(FORM_FIELD_TOKEN, { optional: true });
-        this.destroyRef = inject(DestroyRef);
-        this.multipleOverride = inject(SELECTION_LIST_MULTIPLE, { optional: true });
-        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-        this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
-        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-        this.multiple = computed(() => this.multipleOverride ?? this.multipleInput(), ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.shouldDisplayError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
-        this.role = computed(() => (this.multiple() ? 'group' : 'radiogroup'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
-        this.describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
-        this.controlType = signal(FORM_FIELD_CONTROL_TYPES.SELECTION_LIST, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
-        this.describedById = computed(() => this.describedBy(), ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
-        this.labelId = computed(() => this.formField?.registeredLabel()?.id() ?? null, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
-        this.allSelected = computed(() => {
-            const list = this.items();
-            if (list.length === 0) {
-                return false;
+        const range = doc.createRange();
+        range.selectNodeContents(node);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+    const selectAcross = (first, last) => {
+        const selection = doc.getSelection();
+        if (!selection) {
+            return;
+        }
+        const range = doc.createRange();
+        range.setStartBefore(first);
+        range.setEndAfter(last);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+    const collapseInto = (node, offset) => {
+        const selection = doc.getSelection();
+        if (!selection) {
+            return;
+        }
+        const range = doc.createRange();
+        range.setStart(node, offset);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+    const unwrapElement = (el) => {
+        const parent = el.parentNode;
+        if (!parent) {
+            return;
+        }
+        while (el.firstChild) {
+            renderer.insertBefore(parent, el.firstChild, el);
+        }
+        renderer.removeChild(parent, el);
+    };
+    const replaceWith = (oldEl, newNodes) => {
+        const parent = oldEl.parentNode;
+        if (!parent) {
+            return;
+        }
+        newNodes.forEach((node) => renderer.insertBefore(parent, node, oldEl));
+        renderer.removeChild(parent, oldEl);
+    };
+    const collectDescendants = (node, selector) => {
+        const out = [];
+        node.childNodes.forEach((child) => {
+            if (child instanceof HTMLElement) {
+                if (child.matches(selector)) {
+                    out.push(child);
+                }
+                out.push(...collectDescendants(child, selector));
             }
-            return list.every((item) => item.checked());
-        }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
-        this.someSelected = computed(() => {
-            const list = this.items();
-            if (list.length === 0) {
-                return false;
+        });
+        return out;
+    };
+    const childrenByTag = (parent, tag) => {
+        const out = [];
+        Array.from(parent.children).forEach((child) => {
+            if (child instanceof HTMLElement && child.tagName.toLowerCase() === tag) {
+                out.push(child);
             }
-            const checkedCount = list.filter((item) => item.checked()).length;
-            return checkedCount > 0 && checkedCount < list.length;
-        }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
-        this.formField?.registerControl(this);
-        this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
-        effect(() => {
-            const currentValue = this.value();
-            const currentItems = this.items();
-            if (currentItems.length === 0) {
+        });
+        return out;
+    };
+    const blocksInRange = (range) => {
+        const el = root();
+        const blocks = [];
+        el?.childNodes.forEach((child) => {
+            if (range.intersectsNode(child)) {
+                blocks.push(child);
+            }
+        });
+        return blocks;
+    };
+    const isBlockEmpty = (el) => (el.textContent ?? '').trim().length === 0;
+    // An inline wrapper must stay inside its block: extracting a range that crosses <li>/<p>
+    // boundaries clones the partially covered blocks into the wrapper (an <em> holding <li>s inside
+    // the list), which is invalid markup and serializes to broken markdown. Split such a range into
+    // one slice per covered block so each slice can be wrapped within its own block. Whitespace-only
+    // slices (e.g. an empty <li> swept up by an imprecise drag) are dropped entirely.
+    const blockSlices = (range) => {
+        const el = root();
+        // Boundaries resolving to no block are root-level inline flow — the root is their block, so
+        // two null boundaries count as the same block just like two boundaries in the same <li>/<p>.
+        const startBlock = closestWithin(range.startContainer, 'li, p');
+        const endBlock = closestWithin(range.endContainer, 'li, p');
+        if (!el || startBlock === endBlock) {
+            return [range];
+        }
+        const leaves = [];
+        el.childNodes.forEach((child) => {
+            if (!range.intersectsNode(child)) {
                 return;
             }
-            untracked(() => {
-                if (this.multiple()) {
-                    const valueArray = Array.isArray(currentValue) ? currentValue : [];
-                    for (const item of currentItems) {
-                        item.checked.set(valueArray.includes(item.value()));
-                    }
-                }
-                else {
-                    for (const item of currentItems) {
-                        item.checked.set(item.value() === currentValue);
+            if (child instanceof HTMLElement && (child.tagName === 'UL' || child.tagName === 'OL')) {
+                child.childNodes.forEach((item) => {
+                    if (range.intersectsNode(item)) {
+                        leaves.push(item);
                     }
+                });
+            }
+            else {
+                leaves.push(child);
+            }
+        });
+        const slices = [];
+        leaves.forEach((leaf) => {
+            const slice = doc.createRange();
+            slice.selectNodeContents(leaf);
+            if (leaf.contains(range.startContainer)) {
+                slice.setStart(range.startContainer, range.startOffset);
+            }
+            if (leaf.contains(range.endContainer)) {
+                slice.setEnd(range.endContainer, range.endOffset);
+            }
+            trimRangeWhitespace(slice);
+            if (!slice.collapsed && slice.toString().trim().length > 0) {
+                slices.push(slice);
+            }
+        });
+        return slices;
+    };
+    const wrapInline = (range, tag) => {
+        const wrappers = [];
+        blockSlices(range).forEach((slice) => {
+            const wrapper = renderer.createElement(tag);
+            try {
+                slice.surroundContents(wrapper);
+            }
+            catch {
+                renderer.appendChild(wrapper, slice.extractContents());
+                slice.insertNode(wrapper);
+            }
+            collectDescendants(wrapper, tag).forEach((nested) => unwrapElement(nested));
+            wrappers.push(wrapper);
+        });
+        const first = wrappers[0];
+        const last = wrappers[wrappers.length - 1];
+        if (!first || !last) {
+            return;
+        }
+        if (first === last) {
+            selectNodeContents(first);
+            return;
+        }
+        // Anchor the restored selection inside the first/last wrapper rather than before/after them
+        // (selectAcross) — markStates() resolves the active marks from the selection's start
+        // container, so a boundary outside the wrapper would leave the toolbar button unpressed
+        // until the user re-selects.
+        const selection = doc.getSelection();
+        if (!selection) {
+            return;
+        }
+        const restored = doc.createRange();
+        restored.setStart(first, 0);
+        restored.setEnd(last, last.childNodes.length);
+        selection.removeAllRanges();
+        selection.addRange(restored);
+    };
+    const pathFromAncestor = (ancestor, node) => {
+        const path = [];
+        let current = node;
+        while (current && current !== ancestor) {
+            const parent = current.parentNode;
+            if (!parent) {
+                return null;
+            }
+            path.unshift(Array.from(parent.childNodes).indexOf(current));
+            current = parent;
+        }
+        return current === ancestor ? path : null;
+    };
+    const resolvePath = (ancestor, path) => {
+        let current = ancestor;
+        for (const index of path) {
+            const next = current.childNodes[index];
+            if (!next) {
+                return null;
+            }
+            current = next;
+        }
+        return current;
+    };
+    // `range.cloneContents()` collapses to plain text whenever the range's start and end share a
+    // container (the common case when the whole marked run is selected) — it can't reconstruct any
+    // ancestor elements in that situation, so nested marks (e.g. an <em> inside the <strong> being
+    // unbolded) would be silently dropped. Work around it by trimming a clone of `markEl` down to
+    // the selected span instead, which preserves every nested element other than `markEl` itself.
+    const extractMarkedMiddle = (markEl, range) => {
+        const startPath = pathFromAncestor(markEl, range.startContainer);
+        const endPath = pathFromAncestor(markEl, range.endContainer);
+        if (!startPath || !endPath) {
+            return Array.from(range.cloneContents().childNodes);
+        }
+        const clone = markEl.cloneNode(true);
+        const clonedStart = resolvePath(clone, startPath);
+        const clonedEnd = resolvePath(clone, endPath);
+        if (!clonedStart || !clonedEnd) {
+            return Array.from(range.cloneContents().childNodes);
+        }
+        const trimAfter = doc.createRange();
+        trimAfter.setStart(clonedEnd, range.endOffset);
+        trimAfter.setEnd(clone, clone.childNodes.length);
+        trimAfter.deleteContents();
+        const trimBefore = doc.createRange();
+        trimBefore.setStart(clone, 0);
+        trimBefore.setEnd(clonedStart, range.startOffset);
+        trimBefore.deleteContents();
+        return Array.from(clone.childNodes);
+    };
+    // A mark wrapping nothing but whitespace has no markdown representation (`** **` isn't valid
+    // CommonMark emphasis), so a before/after split must never leave one behind — fall through to
+    // plain, unwrapped text for a whitespace-only slice instead of re-wrapping it in `tag`.
+    const markSegmentNodes = (frag, tag) => {
+        const text = frag.textContent ?? '';
+        if (text.length === 0) {
+            return [];
+        }
+        if (text.trim().length === 0) {
+            return Array.from(frag.childNodes);
+        }
+        const wrapper = renderer.createElement(tag);
+        renderer.appendChild(wrapper, frag);
+        return [wrapper];
+    };
+    const unwrapInline = (range, tag) => {
+        const startEl = closestWithin(range.startContainer, tag);
+        const endEl = closestWithin(range.endContainer, tag);
+        if (startEl && startEl === endEl) {
+            const beforeRange = doc.createRange();
+            beforeRange.selectNodeContents(startEl);
+            beforeRange.setEnd(range.startContainer, range.startOffset);
+            const afterRange = doc.createRange();
+            afterRange.selectNodeContents(startEl);
+            afterRange.setStart(range.endContainer, range.endOffset);
+            const beforeFrag = beforeRange.cloneContents();
+            const afterFrag = afterRange.cloneContents();
+            const selectedNodes = extractMarkedMiddle(startEl, range);
+            const replacement = [];
+            replacement.push(...markSegmentNodes(beforeFrag, tag));
+            selectedNodes.forEach((node) => replacement.push(node));
+            replacement.push(...markSegmentNodes(afterFrag, tag));
+            replaceWith(startEl, replacement);
+            const first = selectedNodes[0];
+            const last = selectedNodes[selectedNodes.length - 1];
+            if (first && last) {
+                selectAcross(first, last);
+            }
+            return;
+        }
+        const affected = new Set();
+        if (startEl)
+            affected.add(startEl);
+        if (endEl)
+            affected.add(endEl);
+        const el = root();
+        if (el) {
+            collectDescendants(el, tag).forEach((marked) => {
+                if (range.intersectsNode(marked)) {
+                    affected.add(marked);
                 }
             });
+        }
+        affected.forEach((marked) => unwrapElement(marked));
+    };
+    const unwrapList = (list) => {
+        const paragraphs = [];
+        childrenByTag(list, 'li').forEach((li) => {
+            const paragraph = renderer.createElement('p');
+            while (li.firstChild) {
+                renderer.appendChild(paragraph, li.firstChild);
+            }
+            paragraphs.push(paragraph);
         });
-    }
-    registerItem(item) {
-        this.items.update((items) => [...items, item]);
-    }
-    unregisterItem(item) {
-        this.items.update((items) => items.filter((i) => i !== item));
-    }
-    markTouched() {
-        this.touched.set(true);
-    }
-    select(item) {
-        if (this.disabled() || item.disabled()) {
+        replaceWith(list, paragraphs);
+        const first = paragraphs[0];
+        const last = paragraphs[paragraphs.length - 1];
+        if (first && last) {
+            selectAcross(first, last);
+        }
+    };
+    const exitListItem = (li) => {
+        const list = li.parentElement;
+        const parent = list?.parentNode;
+        if (!list || !parent) {
             return;
         }
-        if (this.multiple()) {
-            item.checked.update((v) => !v);
-            this.value.set(this.items()
-                .filter((i) => i.checked())
-                .map((i) => i.value()));
+        const tag = list.tagName.toLowerCase();
+        // Element siblings after the empty item move into a continuation list of the same type.
+        const trailing = [];
+        let sibling = li.nextElementSibling;
+        while (sibling) {
+            trailing.push(sibling);
+            sibling = sibling.nextElementSibling;
+        }
+        const paragraph = renderer.createElement('p');
+        const refAfterList = list.nextSibling;
+        // Carry over whatever the (empty) item held — typically the <br> a browser inserts so an
+        // empty line still has a caret-able line box. Without one, a bare <p> can end up with no
+        // line box at all, and the caret falls through to the next focusable position instead.
+        while (li.firstChild) {
+            renderer.appendChild(paragraph, li.firstChild);
+        }
+        if (!paragraph.firstChild) {
+            renderer.appendChild(paragraph, renderer.createElement('br'));
+        }
+        if (trailing.length > 0) {
+            const continuation = renderer.createElement(tag);
+            trailing.forEach((item) => renderer.appendChild(continuation, item));
+            renderer.insertBefore(parent, continuation, refAfterList);
+            renderer.insertBefore(parent, paragraph, continuation);
         }
         else {
-            for (const i of this.items()) {
-                i.checked.set(i === item);
+            renderer.insertBefore(parent, paragraph, refAfterList);
+        }
+        renderer.removeChild(list, li);
+        if (childrenByTag(list, 'li').length === 0) {
+            renderer.removeChild(parent, list);
+        }
+        collapseInto(paragraph, 0);
+    };
+    const mergeParagraphIntoPreviousList = (paragraph) => {
+        const previous = paragraph.previousElementSibling;
+        const tag = previous?.tagName.toLowerCase();
+        if (!previous || (tag !== 'ul' && tag !== 'ol')) {
+            return false;
+        }
+        const items = childrenByTag(previous, 'li');
+        const lastLi = items[items.length - 1];
+        if (!lastLi) {
+            return false;
+        }
+        const parent = paragraph.parentNode;
+        if (parent) {
+            renderer.removeChild(parent, paragraph);
+        }
+        const selection = doc.getSelection();
+        if (selection) {
+            const range = doc.createRange();
+            range.selectNodeContents(lastLi);
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        return true;
+    };
+    // The selection may be anchored on an element boundary rather than in a text node — e.g. the
+    // restored selection after a cross-block wrap starts at (wrapper, 0). Marks *below* such an
+    // anchor (a <strong> inside the <em> wrapper) are invisible to an ancestor walk, so descend to
+    // the deepest node at the selection's start position first.
+    const resolveStartNode = (range) => {
+        let node = range.startContainer;
+        let offset = range.startOffset;
+        while (node.nodeType === Node.ELEMENT_NODE && node.childNodes.length > 0) {
+            node = node.childNodes[Math.min(offset, node.childNodes.length - 1)];
+            offset = 0;
+        }
+        return node;
+    };
+    const markStates = () => {
+        const editable = getSelection();
+        if (!editable) {
+            return null;
+        }
+        const node = resolveStartNode(editable.range);
+        return {
+            bold: !!closestWithin(node, 'strong'),
+            italic: !!closestWithin(node, 'em'),
+            strike: !!closestWithin(node, 'del'),
+            unorderedList: !!closestWithin(node, 'ul'),
+            orderedList: !!closestWithin(node, 'ol'),
+            link: !!closestWithin(node, 'a'),
+        };
+    };
+    // wrapInline's surroundContents fallback can leave behind an untouched sibling with the same
+    // tag right next to the new wrapper (e.g. selecting partway into an already-bold word produces
+    // two adjacent `<strong>` elements). Left unmerged, markdown serialization emits a delimiter per
+    // element (duplicated `**` markers), so collapse adjacent same-tag runs back into one.
+    const mergeAdjacentSameTag = (tag) => {
+        const el = root();
+        if (!el) {
+            return;
+        }
+        let merged = true;
+        while (merged) {
+            merged = false;
+            for (const node of collectDescendants(el, tag)) {
+                const next = node.nextSibling;
+                if (next instanceof HTMLElement && next.tagName.toLowerCase() === tag) {
+                    while (next.firstChild) {
+                        renderer.appendChild(node, next.firstChild);
+                    }
+                    renderer.removeChild(next.parentNode, next);
+                    merged = true;
+                    break;
+                }
             }
-            this.value.set(item.value());
         }
-    }
-    focusItem(item) {
-        item.elementRef.nativeElement.focus();
-    }
-    toggleAll() {
-        if (this.disabled()) {
+    };
+    // wrapInline's surroundContents fallback uses Range.extractContents(), which — per spec —
+    // leaves the original ancestor element in place (now empty) whenever the range's boundary
+    // fully consumes that ancestor's content, since only a clone of it travels into the extracted
+    // fragment. That empty shell can be of any of the three inline tags, not just the one being
+    // toggled (e.g. italicizing text that starts inside a <strong> can strand an empty <strong>).
+    const pruneEmptyInline = () => {
+        const el = root();
+        if (!el) {
             return;
         }
-        const shouldCheck = !this.allSelected();
-        for (const item of this.items()) {
-            if (!item.disabled()) {
-                item.checked.set(shouldCheck);
+        const tags = ['strong', 'em', 'del'];
+        let removed = true;
+        while (removed) {
+            removed = false;
+            for (const t of tags) {
+                for (const node of collectDescendants(el, t)) {
+                    // extractContents() fully drains a wholly-selected text node's data via replaceData
+                    // rather than removing the node, so an "empty" shell can still hold a zero-length
+                    // Text child — check textContent, not childNodes.length, to catch that case too.
+                    if ((node.textContent ?? '').length === 0) {
+                        renderer.removeChild(node.parentNode, node);
+                        removed = true;
+                    }
+                }
             }
         }
-        this.value.set(this.items()
-            .filter((i) => i.checked())
-            .map((i) => i.value()));
-    }
-    activate() {
-        const firstItem = this.items().find((i) => !i.disabled());
-        if (firstItem) {
-            this.select(firstItem);
-            this.focusItem(firstItem);
+    };
+    // A mark applied to whitespace at the very edge of the selection is invisible and has no
+    // markdown representation, so shrink the range inward past any leading/trailing whitespace
+    // before (un)marking it — matching how most rich text editors ignore edge whitespace on toggle.
+    const trimRangeWhitespace = (range) => {
+        if (range.collapsed) {
+            return;
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: SelectionListDirective, isStandalone: true, selector: "[etSelectionList]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "attr.role": "role()", "attr.aria-invalid": "shouldDisplayError() || null", "attr.aria-required": "required() || null", "attr.aria-describedby": "describedById() || null", "attr.aria-labelledby": "labelId() || null", "attr.data-disabled": "disabled() || null" } }, providers: [{ provide: SELECTION_LIST_TOKEN, useExisting: SelectionListDirective }], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[etSelectionList]',
-                    providers: [{ provide: SELECTION_LIST_TOKEN, useExisting: SelectionListDirective }],
-                    host: {
-                        '[attr.role]': 'role()',
-                        '[attr.aria-invalid]': 'shouldDisplayError() || null',
-                        '[attr.aria-required]': 'required() || null',
-                        '[attr.aria-describedby]': 'describedById() || null',
-                        '[attr.aria-labelledby]': 'labelId() || null',
-                        '[attr.data-disabled]': 'disabled() || null',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
-
-let uniqueOptionLabelId = 0;
-class SelectionOptionDirective {
-    constructor() {
-        this.list = inject(SELECTION_LIST_TOKEN, { optional: true });
-        this.destroyRef = inject(DestroyRef);
+        const { startContainer, endContainer } = range;
+        if (startContainer.nodeType === Node.TEXT_NODE) {
+            const data = startContainer.textContent ?? '';
+            const limit = startContainer === endContainer ? range.endOffset : data.length;
+            let offset = range.startOffset;
+            while (offset < limit && /\s/.test(data[offset] ?? '')) {
+                offset++;
+            }
+            range.setStart(startContainer, offset);
+        }
+        if (range.collapsed) {
+            return;
+        }
+        if (endContainer.nodeType === Node.TEXT_NODE) {
+            const data = endContainer.textContent ?? '';
+            const limit = endContainer === startContainer ? range.startOffset : 0;
+            let offset = range.endOffset;
+            while (offset > limit && /\s/.test(data[offset - 1] ?? '')) {
+                offset--;
+            }
+            range.setEnd(endContainer, offset);
+        }
+    };
+    const toggleInline = (tag) => {
+        const editable = getSelection();
+        const el = root();
+        if (!el || !editable || editable.range.collapsed) {
+            return;
+        }
+        trimRangeWhitespace(editable.range);
+        if (editable.range.collapsed) {
+            return;
+        }
+        const { range } = editable;
+        const fullyMarked = !!closestWithin(range.startContainer, tag) && !!closestWithin(range.endContainer, tag);
+        if (fullyMarked) {
+            unwrapInline(range, tag);
+        }
+        else {
+            wrapInline(range, tag);
+        }
+        pruneEmptyInline();
+        mergeAdjacentSameTag(tag);
+        el.normalize();
+    };
+    const toggleList = (listTag) => {
+        const editable = getSelection();
+        const el = root();
+        if (!el || !editable) {
+            return;
+        }
+        const existingList = closestWithin(editable.range.startContainer, listTag);
+        if (existingList) {
+            unwrapList(existingList);
+            el.normalize();
+            return;
+        }
+        // Caret inside a list of the other type: switch the list's type in place. Falling through to
+        // the block-wrapping path below would treat the whole list as one block and nest its <li>s
+        // inside a new <li>, going one level deeper on every toggle.
+        const otherList = closestWithin(editable.range.startContainer, listTag === 'ul' ? 'ol' : 'ul');
+        if (otherList) {
+            const converted = renderer.createElement(listTag);
+            while (otherList.firstChild) {
+                renderer.appendChild(converted, otherList.firstChild);
+            }
+            replaceWith(otherList, [converted]);
+            selectNodeContents(converted);
+            el.normalize();
+            return;
+        }
+        const blocks = blocksInRange(editable.range);
+        const list = renderer.createElement(listTag);
+        // An empty editor has no blocks to wrap — start a fresh list with one empty item instead.
+        // The <br> gives the item a line box so the caret has somewhere to land (see exitListItem).
+        if (blocks.length === 0) {
+            const li = renderer.createElement('li');
+            renderer.appendChild(li, renderer.createElement('br'));
+            renderer.appendChild(list, li);
+            renderer.appendChild(el, list);
+            collapseInto(li, 0);
+            return;
+        }
+        blocks.forEach((block) => {
+            // A block that is itself a list (a selection spanning a paragraph and a list of the other
+            // type) contributes its items directly — wrapping it would nest its <li>s inside a new <li>.
+            if (block instanceof HTMLElement && (block.tagName === 'UL' || block.tagName === 'OL')) {
+                childrenByTag(block, 'li').forEach((item) => renderer.appendChild(list, item));
+                return;
+            }
+            const li = renderer.createElement('li');
+            if (block.nodeType === Node.TEXT_NODE) {
+                renderer.appendChild(li, block.cloneNode(true));
+            }
+            else {
+                while (block.firstChild) {
+                    renderer.appendChild(li, block.firstChild);
+                }
+            }
+            renderer.appendChild(list, li);
+        });
+        renderer.insertBefore(el, list, blocks[0] ?? null);
+        blocks.forEach((block) => {
+            if (block.parentNode === el) {
+                renderer.removeChild(el, block);
+            }
+        });
+        selectNodeContents(list);
+        el.normalize();
+    };
+    const applyLink = (href) => {
+        const editable = getSelection();
+        if (!editable) {
+            return;
+        }
+        const existing = closestWithin(editable.range.startContainer, 'a');
+        if (existing) {
+            renderer.setAttribute(existing, 'href', href);
+            return;
+        }
+        if (editable.range.collapsed) {
+            return;
+        }
+        const el = root();
+        const anchor = renderer.createElement('a');
+        renderer.setAttribute(anchor, 'href', href);
+        try {
+            editable.range.surroundContents(anchor);
+        }
+        catch {
+            // The range crosses an existing <a> boundary (e.g. it starts before the anchor and ends
+            // inside it) — surroundContents throws, so fall back to extract + insert. That fallback can
+            // pull the whole existing anchor's content into the new one (nesting an <a> inside an <a>)
+            // and, per Range.extractContents()'s spec, strand the drained original anchor as an empty
+            // shell — both of which produce broken markdown (nested/empty link syntax).
+            renderer.appendChild(anchor, editable.range.extractContents());
+            editable.range.insertNode(anchor);
+        }
+        collectDescendants(anchor, 'a').forEach((nested) => unwrapElement(nested));
+        if (el) {
+            collectDescendants(el, 'a')
+                .filter((node) => (node.textContent ?? '').length === 0)
+                .forEach((empty) => renderer.removeChild(empty.parentNode, empty));
+            el.normalize();
+        }
+        selectNodeContents(anchor);
+    };
+    const removeLink = () => {
+        const editable = getSelection();
+        const anchor = editable ? closestWithin(editable.range.startContainer, 'a') : null;
+        const el = root();
+        if (anchor && el) {
+            unwrapElement(anchor);
+            el.normalize();
+        }
+    };
+    const insertToken = (node) => {
+        const editable = getSelection();
+        if (!editable) {
+            return;
+        }
+        const { selection, range } = editable;
+        range.deleteContents();
+        range.insertNode(node);
+        range.setStartAfter(node);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    };
+    const handleBackspace = () => {
+        const editable = getSelection();
+        if (!editable || !editable.range.collapsed) {
+            return false;
+        }
+        const node = editable.range.startContainer;
+        const li = closestWithin(node, 'li');
+        if (li && isBlockEmpty(li)) {
+            exitListItem(li);
+            return true;
+        }
+        const paragraph = closestWithin(node, 'p');
+        if (paragraph && isBlockEmpty(paragraph)) {
+            return mergeParagraphIntoPreviousList(paragraph);
+        }
+        return false;
+    };
+    return {
+        root,
+        getSelection,
+        closestWithin,
+        markStates,
+        toggleInline,
+        toggleList,
+        applyLink,
+        removeLink,
+        insertToken,
+        handleBackspace,
+    };
+};
+const [provideRichTextEditorDom, injectRichTextEditorDom] = createProvider(richTextEditorDomFactory, {
+    name: 'RichTextEditorDom',
+});
+
+class RichTextEditorDirective {
+    constructor() {
+        this.formField = inject(FORM_FIELD_TOKEN, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.shouldDisplayError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
+        this.hasValue = computed(() => this.value().trim().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+        this.describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.controlType = signal(FORM_FIELD_CONTROL_TYPES.RICH_TEXT, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
+        this.focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.labelId = computed(() => this.formField?.registeredLabel()?.id() ?? null, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.describedById = computed(() => this.describedBy(), ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+        this.boldActive = signal(false, ...(ngDevMode ? [{ debugName: "boldActive" }] : /* istanbul ignore next */ []));
+        this.italicActive = signal(false, ...(ngDevMode ? [{ debugName: "italicActive" }] : /* istanbul ignore next */ []));
+        this.strikeActive = signal(false, ...(ngDevMode ? [{ debugName: "strikeActive" }] : /* istanbul ignore next */ []));
+        this.unorderedListActive = signal(false, ...(ngDevMode ? [{ debugName: "unorderedListActive" }] : /* istanbul ignore next */ []));
+        this.orderedListActive = signal(false, ...(ngDevMode ? [{ debugName: "orderedListActive" }] : /* istanbul ignore next */ []));
+        this.linkActive = signal(false, ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
+        /** @internal */
+        this.lastEmittedMarkdown = null;
+        /** @internal */
+        this.editorDom = injectRichTextEditorDom();
+        this.formField?.registerControl(this);
+        this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
+    }
+    activate() {
+        if (this.disabled())
+            return;
+        const el = this.editorDom.root();
+        // Re-focusing a contenteditable that already holds the caret collapses the selection to its
+        // start, so only focus when the editor isn't already focused (e.g. a click on the frame padding).
+        if (!el || el.ownerDocument.activeElement === el)
+            return;
+        el.focus();
+    }
+    syncFromDom() {
+        const root = this.editorDom.root();
+        if (!root)
+            return;
+        // Browsers create <div> line wrappers in contenteditable; map them to <p> so htmlToMarkdown
+        // treats them as paragraph breaks instead of stripping the tags and merging lines.
+        const html = root.innerHTML.replace(/<div>/gi, '<p>').replace(/<\/div>/gi, '</p>');
+        const markdown = htmlToMarkdown(html);
+        this.lastEmittedMarkdown = markdown;
+        this.value.set(markdown);
+        this.refreshActiveMarks();
+    }
+    refreshActiveMarks() {
+        const states = this.editorDom.markStates();
+        this.boldActive.set(states?.bold ?? false);
+        this.italicActive.set(states?.italic ?? false);
+        this.strikeActive.set(states?.strike ?? false);
+        this.unorderedListActive.set(states?.unorderedList ?? false);
+        this.orderedListActive.set(states?.orderedList ?? false);
+        this.linkActive.set(states?.link ?? false);
+    }
+    toggleBold() {
+        this.runCommand(() => this.editorDom.toggleInline('strong'));
+    }
+    toggleItalic() {
+        this.runCommand(() => this.editorDom.toggleInline('em'));
+    }
+    toggleStrikethrough() {
+        this.runCommand(() => this.editorDom.toggleInline('del'));
+    }
+    toggleUnorderedList() {
+        this.runCommand(() => this.editorDom.toggleList('ul'));
+    }
+    toggleOrderedList() {
+        this.runCommand(() => this.editorDom.toggleList('ol'));
+    }
+    setLink(href) {
+        const url = href.trim();
+        this.runCommand(() => (url ? this.editorDom.applyLink(url) : this.editorDom.removeLink()));
+    }
+    handleBackspace() {
+        if (this.disabled() || this.readonly() || !this.editorDom.root())
+            return false;
+        const handled = this.editorDom.handleBackspace();
+        if (handled) {
+            this.syncFromDom();
+        }
+        return handled;
+    }
+    /**
+     * @internal Extension seam for the follow-up `@`/`#` autocomplete: inserts an atomic inline
+     * node (a mention/placeholder token) at the caret, then re-syncs.
+     */
+    insertAtomicToken(node) {
+        if (this.disabled() || this.readonly() || !this.editorDom.root())
+            return;
+        this.editorDom.insertToken(node);
+        this.syncFromDom();
+    }
+    runCommand(command) {
+        if (this.disabled() || this.readonly() || !this.editorDom.root())
+            return;
+        command();
+        this.syncFromDom();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RichTextEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: RichTextEditorDirective, isStandalone: true, selector: "[etRichTextEditor]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, providers: [provideRichTextEditorDom()], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RichTextEditorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etRichTextEditor]',
+                    providers: [provideRichTextEditorDom()],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+const ARROW_OUT_UP_RIGHT_ICON = {
+    name: 'et-arrow-out-up-right',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M5 6.75A1.75 1.75 0 0 1 6.75 5h4.5a.75.75 0 0 1 0 1.5h-4.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-4.5a.75.75 0 0 1 1.5 0v4.5A1.75 1.75 0 0 1 17.25 19H6.75A1.75 1.75 0 0 1 5 17.25V6.75Z"
+      />
+      <path
+        fill="currentColor"
+        d="M11.5 5.75c0-.414.336-.75.75-.75h6c.414 0 .75.336.75.75v6a.75.75 0 0 1-1.5 0V7.56l-6.72 6.72a.75.75 0 1 1-1.06-1.06l6.72-6.72h-4.19a.75.75 0 0 1-.75-.75Z"
+      />
+    </svg>
+  `,
+};
+
+const ARROW_RIGHT_ICON = {
+    name: 'et-arrow-right',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M4 12h14"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M13 7l5 5-5 5"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};
+
+// Custom icon.
+const BOLD_ICON = {
+    name: 'et-bold',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <text x="8" y="12" font-size="12" font-weight="700" text-anchor="middle" fill="currentColor">B</text>
+    </svg>
+  `,
+};
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+const CHEVRON_ICON = {
+    name: 'et-chevron',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M244.7 116.7c6.2-6.2 16.4-6.2 22.6 0l192 192c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 150.6 75.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l192-192z"
+      />
+    </svg>
+  `,
+};
+
+const CLIPBOARD_CHECK_ICON = {
+    name: 'et-clipboard-check',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M9 4.5h6"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+      <path
+        d="M9 3h6a1.5 1.5 0 0 1 1.5 1.5V6H18a2 2 0 0 1 2 2v10.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5V8a2 2 0 0 1 2-2h1.5V4.5A1.5 1.5 0 0 1 9 3z"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8.5 13l2.2 2.2 4.8-4.9"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};
+
+const FLOPPY_DISK_ICON = {
+    name: 'et-floppy-disk',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M5 3h11l3 3v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3z"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 3v6h7V3"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 17h8"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+};
+
+const FOCUS_FRAME_ICON = {
+    name: 'et-focus-frame',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
+        clip-rule="evenodd"
+      />
+      <rect x="8" y="8" width="8" height="8" rx="1.25" fill="currentColor" />
+    </svg>
+  `,
+};
+
+const GRID_2X2_ICON = {
+    name: 'et-grid-2x2',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
+        clip-rule="evenodd"
+      />
+      <rect x="11.25" y="5.5" width="1.5" height="13" fill="currentColor" />
+      <rect x="5.5" y="11.25" width="13" height="1.5" fill="currentColor" />
+    </svg>
+  `,
+};
+
+const ICON_ERROR_CODES = {
+    NO_ICONS_PROVIDED: 1800,
+    ICON_NOT_FOUND: 1801,
+    INVALID_SVG: 1802,
+    MISSING_XMLNS: 1803,
+    MISSING_DIMENSIONS: 1804,
+    HARDCODED_COLOR: 1805,
+    DUPLICATE_ICON_NAME: 1806,
+};
+
+const ICONS_TOKEN = new InjectionToken('ET_ICONS_TOKEN');
+const provideIcons = (...icons) => {
+    const map = {};
+    for (const def of icons) {
+        if (map[def.name]) {
+            throw new RuntimeError(ICON_ERROR_CODES.DUPLICATE_ICON_NAME, `[provideIcons] Icon with name "${def.name}" already exists. Please provide unique icon names.`);
+        }
+        map[def.name] = def;
+    }
+    return {
+        provide: ICONS_TOKEN,
+        useValue: map,
+    };
+};
+
+const ICON_DIRECTIVE_TOKEN = new InjectionToken('ET_ICON_DIRECTIVE_TOKEN');
+const SVG_COLOR_ATTRIBUTES = ['fill', 'stroke', 'stop-color', 'stop-opacity'];
+class IconDirective {
+    constructor() {
+        this.icons = inject(ICONS_TOKEN, { optional: true });
+        this.sanitizer = inject(DomSanitizer);
+        this.iconNameToUse = input.required({ ...(ngDevMode ? { debugName: "iconNameToUse" } : /* istanbul ignore next */ {}), alias: 'etIcon' });
+        this.allowHardcodedColor = input(false, { ...(ngDevMode ? { debugName: "allowHardcodedColor" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.iconSrc = computed(() => {
+            if (!this.icons) {
+                return null;
+            }
+            const icon = this.icons[this.iconNameToUse()];
+            if (!icon) {
+                throw new RuntimeError(ICON_ERROR_CODES.ICON_NOT_FOUND, `[IconDirective] Icon "${this.iconNameToUse()}" not found. Available icons: ${Object.keys(this.icons).join(', ')}.`);
+            }
+            const svg = icon.data.trim();
+            if (ngDevMode) {
+                if (!svg.includes('<svg')) {
+                    throw new RuntimeError(ICON_ERROR_CODES.INVALID_SVG, `[IconDirective] Icon "${this.iconNameToUse()}" is not a valid SVG. The data must contain an <svg> element.`);
+                }
+                if (!svg.includes('xmlns="http://www.w3.org/2000/svg"')) {
+                    throw new RuntimeError(ICON_ERROR_CODES.MISSING_XMLNS, `[IconDirective] Icon "${this.iconNameToUse()}" is missing xmlns="http://www.w3.org/2000/svg". Add the attribute to the <svg> element.`);
+                }
+                if (!svg.includes('width="100%"') || !svg.includes('height="100%"')) {
+                    throw new RuntimeError(ICON_ERROR_CODES.MISSING_DIMENSIONS, `[IconDirective] Icon "${this.iconNameToUse()}" is missing width="100%" and/or height="100%". Add both attributes to the <svg> element.`);
+                }
+                if (!this.allowHardcodedColor()) {
+                    for (const colorAttribute of SVG_COLOR_ATTRIBUTES) {
+                        if (svg.includes(`${colorAttribute}="`) && !svg.includes(`${colorAttribute}="currentColor"`)) {
+                            throw new RuntimeError(ICON_ERROR_CODES.HARDCODED_COLOR, `[IconDirective] Icon "${this.iconNameToUse()}" uses a hardcoded value for "${colorAttribute}". Use currentColor instead, or set [allowHardcodedColor]="true".`);
+                        }
+                    }
+                }
+            }
+            return this.sanitizer.bypassSecurityTrustHtml(svg);
+        }, ...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
+        this.hostClasses = computed(() => `et-icon et-icon--${this.iconNameToUse()}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+        if (!this.icons) {
+            throw new RuntimeError(ICON_ERROR_CODES.NO_ICONS_PROVIDED, '[IconDirective] No icons provided. Register icons via provideIcons() in the component or application providers.');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "innerHTML": "iconSrc()", "class": "hostClasses()" }, styleAttribute: "display: flex; align-items: center; justify-content: center;" }, providers: [
+            {
+                provide: ICON_DIRECTIVE_TOKEN,
+                useExisting: IconDirective,
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etIcon]',
+                    providers: [
+                        {
+                            provide: ICON_DIRECTIVE_TOKEN,
+                            useExisting: IconDirective,
+                        },
+                    ],
+                    host: {
+                        '[innerHTML]': 'iconSrc()',
+                        'aria-hidden': 'true',
+                        '[class]': 'hostClasses()',
+                        style: 'display: flex; align-items: center; justify-content: center;',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { iconNameToUse: [{ type: i0.Input, args: [{ isSignal: true, alias: "etIcon", required: true }] }], allowHardcodedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHardcodedColor", required: false }] }] } });
+
+// Custom icon.
+const ITALIC_ICON = {
+    name: 'et-italic',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <text
+        x="8"
+        y="12"
+        font-size="12"
+        font-style="italic"
+        font-family="serif"
+        text-anchor="middle"
+        fill="currentColor"
+      >I</text>
+    </svg>
+  `,
+};
+
+// Custom icon.
+const LINK_ICON = {
+    name: 'et-link',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M6.5 9.5l3-3M7 4.5l1-1a2.5 2.5 0 013.5 3.5l-1 1M9 11.5l-1 1A2.5 2.5 0 014.5 9l1-1"
+        stroke="currentColor"
+        stroke-width="1.4"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  `,
+};
+
+// Custom icon.
+const LIST_BULLETED_ICON = {
+    name: 'et-list-bulleted',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+      <circle cx="2.5" cy="4" r="1.2" fill="currentColor" />
+      <circle cx="2.5" cy="8" r="1.2" fill="currentColor" />
+      <circle cx="2.5" cy="12" r="1.2" fill="currentColor" />
+      <path d="M6 4h8M6 8h8M6 12h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+    </svg>
+  `,
+};
+
+// Custom icon.
+const LIST_NUMBERED_ICON = {
+    name: 'et-list-numbered',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+      <path d="M6 4h8M6 8h8M6 12h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" />
+      <text x="1" y="5.4" font-size="5" fill="currentColor">1</text>
+      <text x="1" y="9.6" font-size="5" fill="currentColor">2</text>
+      <text x="1" y="13.8" font-size="5" fill="currentColor">3</text>
+    </svg>
+  `,
+};
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+const LOCK_ICON = {
+    name: 'et-lock',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path
+        fill="currentColor"
+        d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 48 0c26.5 0 48 21.5 48 48l0 224c0 26.5-21.5 48-48 48L32 512c-26.5 0-48-21.5-48-48L-16 240c0-26.5 21.5-48 48-48l48 0zm144 184c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z"
+      />
+    </svg>
+  `,
+};
+
+const PENCIL_ICON = {
+    name: 'et-pencil',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M4 20l4.2-1 9.3-9.3a1.8 1.8 0 0 0 0-2.5l-.7-.7a1.8 1.8 0 0 0-2.5 0L5 15.8 4 20z"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12.8 7.2l4 4"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+};
+
+const PLUS_ICON = {
+    name: 'et-plus',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+      <path
+        d="M12 5v14"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+      <path
+        d="M5 12h14"
+        stroke="currentColor"
+        stroke-width="1.8"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+};
+
+// Custom icon.
+const STRIKETHROUGH_ICON = {
+    name: 'et-strikethrough',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+      <text
+        x="8"
+        y="12"
+        font-size="12"
+        text-decoration="line-through"
+        text-anchor="middle"
+        fill="currentColor"
+      >S</text>
+    </svg>
+  `,
+};
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+const TIMES_ICON = {
+    name: 'et-times',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+      <path
+        fill="currentColor"
+        d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"
+      />
+    </svg>
+  `,
+};
+
+// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
+const TRIANGLE_EXCLAMATION_ICON = {
+    name: 'et-triangle-exclamation',
+    data: `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+      <path
+        fill="currentColor"
+        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S489.3 480 475.1 480H36.9c-14.3 0-27.6-7.7-34.8-20.2s-7-27.6 .2-40.1l216-368C225.6 39.5 238.7 32 252.9 32h3.1zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"
+      />
+    </svg>
+  `,
+};
+
+const ICON_IMPORTS = [IconDirective];
+
+class RichTextEditorComponent {
+    constructor() {
+        this.dir = inject(RichTextEditorDirective);
+        this.document = inject(DOCUMENT);
+        this.editable = viewChild.required('editable');
+        afterNextRender(() => {
+            this.dir.editorDom.root.set(this.editable().nativeElement ?? null);
+            this.renderExternalValue();
+        });
+        // Keep the toolbar's active-mark highlighting in sync with caret movement. The directive
+        // ignores selection changes that land outside its editable root.
+        fromEvent(this.document, 'selectionchange')
+            .pipe(tap(() => this.dir.refreshActiveMarks()), takeUntilDestroyed())
+            .subscribe();
+        // Render programmatic (external) value changes into the DOM. Skip the user's own edits -
+        // those already match `lastEmittedMarkdown`, so re-rendering would reset the caret.
+        effect(() => {
+            const markdown = this.dir.value();
+            if (markdown === this.dir.lastEmittedMarkdown)
+                return;
+            this.renderExternalValue(markdown);
+        });
+    }
+    onInput() {
+        this.dir.syncFromDom();
+    }
+    onKeydown(event) {
+        if (event.key !== 'Backspace')
+            return;
+        if (this.dir.handleBackspace()) {
+            event.preventDefault();
+        }
+    }
+    onBeforeInput(event) {
+        // Keep keyboard shortcuts (Ctrl/Cmd+B, …) running through our Selection/Range commands
+        // instead of the browser's deprecated execCommand-backed formatting.
+        switch (event.inputType) {
+            case 'formatBold':
+                event.preventDefault();
+                this.dir.toggleBold();
+                break;
+            case 'formatItalic':
+                event.preventDefault();
+                this.dir.toggleItalic();
+                break;
+            case 'formatStrikeThrough':
+                event.preventDefault();
+                this.dir.toggleStrikethrough();
+                break;
+        }
+    }
+    promptForLink() {
+        // Mirror the other toolbar buttons' toggle behavior: with the caret already inside a link,
+        // clicking again removes it instead of re-prompting for a URL to edit it.
+        if (this.dir.linkActive()) {
+            this.dir.setLink('');
+            return;
+        }
+        const url = this.document.defaultView?.prompt('Link URL');
+        if (url === null || url === undefined)
+            return;
+        this.dir.setLink(url);
+    }
+    renderExternalValue(markdown = this.dir.value()) {
+        const el = this.editable()?.nativeElement;
+        if (!el)
+            return;
+        el.innerHTML = markdownToHtml(markdown);
+        this.dir.lastEmittedMarkdown = markdown;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: RichTextEditorComponent, isStandalone: true, selector: "et-rich-text-editor", host: { listeners: { "click": "dir.activate()" }, classAttribute: "et-rich-text-editor" }, providers: [
+            provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON),
+        ], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"onInput()\"\n  (beforeinput)=\"onBeforeInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RichTextEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-rich-text-editor', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconButtonComponent, IconDirective], providers: [
+                        provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON),
+                    ], hostDirectives: [
+                        {
+                            directive: RichTextEditorDirective,
+                            inputs: ['value', 'disabled', 'readonly', 'hidden', 'invalid', 'errors', 'required', 'name', 'placeholder'],
+                            outputs: ['valueChange', 'touchedChange'],
+                        },
+                    ], host: {
+                        class: 'et-rich-text-editor',
+                        '(click)': 'dir.activate()',
+                    }, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"onInput()\"\n  (beforeinput)=\"onBeforeInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editable: [{ type: i0.ViewChild, args: ['editable', { isSignal: true }] }] } });
+
+const RICH_TEXT_EDITOR_IMPORTS = [RichTextEditorComponent, RichTextEditorDirective];
+
+const SELECTION_LIST_TOKEN = new InjectionToken('SELECTION_LIST_TOKEN');
+const SELECTION_LIST_MULTIPLE = new InjectionToken('SELECTION_LIST_MULTIPLE');
+
+class SelectionListControlDirective {
+    constructor() {
+        this.list = inject(SELECTION_LIST_TOKEN);
+        this.checked = computed(() => this.list.allSelected(), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+        this.indeterminate = computed(() => this.list.someSelected(), ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.labelId = signal(`et-selection-list-control-label-${uniqueControlLabelId++}`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.ariaChecked = computed(() => {
+            if (this.indeterminate()) {
+                return 'mixed';
+            }
+            return this.checked();
+        }, ...(ngDevMode ? [{ debugName: "ariaChecked" }] : /* istanbul ignore next */ []));
+    }
+    toggle() {
+        if (this.list.disabled()) {
+            return;
+        }
+        this.list.toggleAll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: SelectionListControlDirective, isStandalone: true, selector: "[etSelectionListControl]", host: { listeners: { "click": "toggle()", "keydown.space": "toggle(); $event.preventDefault()", "keydown.enter": "toggle(); $event.preventDefault()" }, properties: { "attr.role": "\"option\"", "attr.aria-checked": "ariaChecked()", "attr.aria-disabled": "list.disabled() || null", "attr.tabindex": "list.disabled() ? -1 : 0" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etSelectionListControl]',
+                    host: {
+                        '[attr.role]': '"option"',
+                        '[attr.aria-checked]': 'ariaChecked()',
+                        '[attr.aria-disabled]': 'list.disabled() || null',
+                        '[attr.tabindex]': 'list.disabled() ? -1 : 0',
+                        '(click)': 'toggle()',
+                        '(keydown.space)': 'toggle(); $event.preventDefault()',
+                        '(keydown.enter)': 'toggle(); $event.preventDefault()',
+                    },
+                }]
+        }] });
+let uniqueControlLabelId = 0;
+
+class SelectionListDirective {
+    constructor() {
+        this.formField = inject(FORM_FIELD_TOKEN, { optional: true });
+        this.destroyRef = inject(DestroyRef);
+        this.multipleOverride = inject(SELECTION_LIST_MULTIPLE, { optional: true });
+        this.value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+        this.multiple = computed(() => this.multipleOverride ?? this.multipleInput(), ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        this.items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.shouldDisplayError = computed(() => this.touched() && this.invalid(), ...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
+        this.role = computed(() => (this.multiple() ? 'group' : 'radiogroup'), ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+        this.describedBy = signal(null, ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+        this.controlType = signal(FORM_FIELD_CONTROL_TYPES.SELECTION_LIST, ...(ngDevMode ? [{ debugName: "controlType" }] : /* istanbul ignore next */ []));
+        this.describedById = computed(() => this.describedBy(), ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+        this.labelId = computed(() => this.formField?.registeredLabel()?.id() ?? null, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+        this.allSelected = computed(() => {
+            const list = this.items();
+            if (list.length === 0) {
+                return false;
+            }
+            return list.every((item) => item.checked());
+        }, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
+        this.someSelected = computed(() => {
+            const list = this.items();
+            if (list.length === 0) {
+                return false;
+            }
+            const checkedCount = list.filter((item) => item.checked()).length;
+            return checkedCount > 0 && checkedCount < list.length;
+        }, ...(ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []));
+        this.formField?.registerControl(this);
+        this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
+        effect(() => {
+            const currentValue = this.value();
+            const currentItems = this.items();
+            if (currentItems.length === 0) {
+                return;
+            }
+            untracked(() => {
+                if (this.multiple()) {
+                    const valueArray = Array.isArray(currentValue) ? currentValue : [];
+                    for (const item of currentItems) {
+                        item.checked.set(valueArray.includes(item.value()));
+                    }
+                }
+                else {
+                    for (const item of currentItems) {
+                        item.checked.set(item.value() === currentValue);
+                    }
+                }
+            });
+        });
+    }
+    registerItem(item) {
+        this.items.update((items) => [...items, item]);
+    }
+    unregisterItem(item) {
+        this.items.update((items) => items.filter((i) => i !== item));
+    }
+    markTouched() {
+        this.touched.set(true);
+    }
+    select(item) {
+        if (this.disabled() || item.disabled()) {
+            return;
+        }
+        if (this.multiple()) {
+            item.checked.update((v) => !v);
+            this.value.set(this.items()
+                .filter((i) => i.checked())
+                .map((i) => i.value()));
+        }
+        else {
+            for (const i of this.items()) {
+                i.checked.set(i === item);
+            }
+            this.value.set(item.value());
+        }
+    }
+    focusItem(item) {
+        item.elementRef.nativeElement.focus();
+    }
+    toggleAll() {
+        if (this.disabled()) {
+            return;
+        }
+        const shouldCheck = !this.allSelected();
+        for (const item of this.items()) {
+            if (!item.disabled()) {
+                item.checked.set(shouldCheck);
+            }
+        }
+        this.value.set(this.items()
+            .filter((i) => i.checked())
+            .map((i) => i.value()));
+    }
+    activate() {
+        const firstItem = this.items().find((i) => !i.disabled());
+        if (firstItem) {
+            this.select(firstItem);
+            this.focusItem(firstItem);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: SelectionListDirective, isStandalone: true, selector: "[etSelectionList]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, multipleInput: { classPropertyName: "multipleInput", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { properties: { "attr.role": "role()", "attr.aria-invalid": "shouldDisplayError() || null", "attr.aria-required": "required() || null", "attr.aria-describedby": "describedById() || null", "attr.aria-labelledby": "labelId() || null", "attr.data-disabled": "disabled() || null" } }, providers: [{ provide: SELECTION_LIST_TOKEN, useExisting: SelectionListDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SelectionListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etSelectionList]',
+                    providers: [{ provide: SELECTION_LIST_TOKEN, useExisting: SelectionListDirective }],
+                    host: {
+                        '[attr.role]': 'role()',
+                        '[attr.aria-invalid]': 'shouldDisplayError() || null',
+                        '[attr.aria-required]': 'required() || null',
+                        '[attr.aria-describedby]': 'describedById() || null',
+                        '[attr.aria-labelledby]': 'labelId() || null',
+                        '[attr.data-disabled]': 'disabled() || null',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], multipleInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }] } });
+
+let uniqueOptionLabelId = 0;
+class SelectionOptionDirective {
+    constructor() {
+        this.list = inject(SELECTION_LIST_TOKEN, { optional: true });
+        this.destroyRef = inject(DestroyRef);
         this.el = inject(ElementRef);
         this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
@@ -2141,7 +3438,7 @@ class CheckboxOptionComponent {
         this.canAnimate = createCanAnimateSignal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box\">\n  <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n    <path\n      d=\"M1 5L4.5 8.5L11 1.5\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-checkbox-option{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;transform:scale(.5);color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-option:hover .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1;transform:scale(1)}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: CheckboxOptionComponent, isStandalone: true, selector: "et-checkbox-option", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-checkbox-option" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-checkbox-option-box\">\n  <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n    <path\n      d=\"M1 5L4.5 8.5L11 1.5\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;transform:scale(.5);color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-option:hover .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1;transform:scale(1)}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: CheckboxOptionComponent, decorators: [{
             type: Component,
@@ -2155,7 +3452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     ], host: {
                         class: 'et-checkbox-option',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, template: "<div class=\"et-checkbox-option-box\">\n  <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n    <path\n      d=\"M1 5L4.5 8.5L11 1.5\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-checkbox-option{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;transform:scale(.5);color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-option:hover .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1;transform:scale(1)}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"] }]
+                    }, template: "<div class=\"et-checkbox-option-box\">\n  <svg class=\"et-checkbox-option-check\" viewBox=\"0 0 12 10\" fill=\"none\">\n    <path\n      d=\"M1 5L4.5 8.5L11 1.5\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</div>\n<div class=\"et-checkbox-option-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-checkbox-option-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-checkbox-option-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-checkbox-option-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-checkbox-option-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 4px;}@property --et-checkbox-option-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-checkbox-option-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-checkbox-option-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-checkbox-option{display:flex;align-items:flex-start;gap:var(--et-checkbox-option-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-checkbox-option .et-checkbox-option-box{flex-shrink:0;inline-size:var(--et-checkbox-option-size);block-size:var(--et-checkbox-option-size);border-radius:var(--et-checkbox-option-border-radius);border:var(--et-checkbox-option-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-checkbox-option .et-checkbox-option-check{inline-size:12px;block-size:10px;opacity:0;transform:scale(.5);color:var(--et-theme-color-on-primary-solid, white)}et-checkbox-option .et-checkbox-option-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-checkbox-option .et-checkbox-option-label{color:var(--et-surface-color-muted-solid, currentColor)}et-checkbox-option:hover .et-checkbox-option-box{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-checkbox-option:focus-visible .et-checkbox-option-box{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-checkbox-option[aria-disabled=true]{opacity:var(--et-checkbox-option-opacity-disabled);pointer-events:none;cursor:default}et-checkbox-option[aria-disabled=true] .et-checkbox-option-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-checkbox-option[aria-checked=true] .et-checkbox-option-box .et-checkbox-option-check{opacity:1;transform:scale(1)}et-checkbox-option[data-can-animate] .et-checkbox-option-box{transition:border-color var(--et-checkbox-option-transition-duration) ease,background-color var(--et-checkbox-option-transition-duration) ease}et-checkbox-option[data-can-animate] .et-checkbox-option-check{transition:opacity var(--et-checkbox-option-transition-duration) ease,transform var(--et-checkbox-option-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-checkbox-option{--et-checkbox-option-transition-duration: 1ms}}\n"] }]
         }] });
 
 class RadioGroupComponent {
@@ -2199,7 +3496,7 @@ class RadioComponent {
         this.canAnimate = createCanAnimateSignal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: RadioComponent, isStandalone: true, selector: "et-radio", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: false; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-radio{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{color:var(--et-surface-color-muted-solid, currentColor)}et-radio:hover .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: RadioComponent, isStandalone: true, selector: "et-radio", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-radio" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: false; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{color:var(--et-surface-color-muted-solid, currentColor)}et-radio:hover .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -2213,7 +3510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     ], host: {
                         class: 'et-radio',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: false; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-radio{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{color:var(--et-surface-color-muted-solid, currentColor)}et-radio:hover .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"] }]
+                    }, template: "<div class=\"et-radio-circle\"></div>\n<div class=\"et-radio-content\">\n  <span [attr.id]=\"optionDirective.labelId()\" class=\"et-radio-label\">\n    <ng-content />\n  </span>\n  <ng-content select=\"et-description\" />\n</div>\n", styles: ["@property --et-radio-size{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-radio-dot-size{syntax: \"<length>\"; inherits: false; initial-value: 10px;}@property --et-radio-border-width{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-radio-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-radio-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}@property --et-radio-gap{syntax: \"<length>\"; inherits: false; initial-value: 8px;}et-radio{display:flex;align-items:flex-start;gap:var(--et-radio-gap);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}et-radio .et-radio-circle{flex-shrink:0;inline-size:var(--et-radio-size);block-size:var(--et-radio-size);border-radius:50%;border:var(--et-radio-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));display:grid;place-items:center;margin-block-start:2px}et-radio .et-radio-circle:after{content:\"\";inline-size:var(--et-radio-dot-size);block-size:var(--et-radio-dot-size);border-radius:50%;background-color:var(--et-theme-color-primary-solid, currentColor);transform:scale(0)}et-radio .et-radio-content{display:flex;flex-direction:column;gap:2px;min-inline-size:0}et-radio .et-radio-label{color:var(--et-surface-color-muted-solid, currentColor)}et-radio:hover .et-radio-circle{border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-radio:focus-visible .et-radio-circle{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-radio[aria-disabled=true]{opacity:var(--et-radio-opacity-disabled);pointer-events:none;cursor:default}et-radio[aria-disabled=true] .et-radio-label{color:var(--et-surface-interaction-disabled-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle{border-color:var(--et-theme-color-primary-solid, currentColor)}et-radio[aria-checked=true] .et-radio-circle:after{transform:scale(1)}et-radio[data-can-animate] .et-radio-circle{transition:border-color var(--et-radio-transition-duration) ease}et-radio[data-can-animate] .et-radio-circle:after{transition:transform var(--et-radio-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-radio{--et-radio-transition-duration: 1ms}}\n"] }]
         }] });
 
 class SegmentedButtonGroupComponent {
@@ -2257,7 +3554,7 @@ class SegmentedButtonComponent {
         this.canAnimate = createCanAnimateSignal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SegmentedButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SegmentedButtonComponent, isStandalone: true, selector: "et-segmented-button", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-segmented-button" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-segmented-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-segmented-button{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);cursor:pointer;outline:none;border:var(--et-segmented-button-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background:transparent;color:inherit;-webkit-user-select:none;user-select:none}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]){border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-segmented-button:focus-visible{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:-1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true]:hover{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button[data-can-animate]{transition:background-color var(--et-segmented-button-transition-duration) ease,border-color var(--et-segmented-button-transition-duration) ease,color var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SegmentedButtonComponent, isStandalone: true, selector: "et-segmented-button", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-segmented-button" }, hostDirectives: [{ directive: SelectionOptionDirective, inputs: ["value", "value", "checked", "checked", "disabled", "disabled"], outputs: ["checkedChange", "checkedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-segmented-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-segmented-button{display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);cursor:pointer;outline:none;border:var(--et-segmented-button-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background:transparent;color:inherit;-webkit-user-select:none;user-select:none}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]){border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-segmented-button:focus-visible{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:-1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true]:hover{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button[data-can-animate]{transition:background-color var(--et-segmented-button-transition-duration) ease,border-color var(--et-segmented-button-transition-duration) ease,color var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SegmentedButtonComponent, decorators: [{
             type: Component,
@@ -2271,7 +3568,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     ], host: {
                         class: 'et-segmented-button',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-segmented-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-segmented-button{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);cursor:pointer;outline:none;border:var(--et-segmented-button-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background:transparent;color:inherit;-webkit-user-select:none;user-select:none}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]){border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-segmented-button:focus-visible{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:-1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true]:hover{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button[data-can-animate]{transition:background-color var(--et-segmented-button-transition-duration) ease,border-color var(--et-segmented-button-transition-duration) ease,color var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"] }]
+                    }, styles: ["@property --et-segmented-button-padding-x{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-segmented-button-padding-y{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-segmented-button-border-width{syntax: \"<length>\"; inherits: false; initial-value: 1px;}@property --et-segmented-button-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-segmented-button-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-segmented-button{display:inline-flex;align-items:center;justify-content:center;padding:var(--et-segmented-button-padding-y) var(--et-segmented-button-padding-x);cursor:pointer;outline:none;border:var(--et-segmented-button-border-width) solid var(--_et-control-border, var(--et-surface-border-solid, currentColor));background:transparent;color:inherit;-webkit-user-select:none;user-select:none}et-segmented-button[aria-disabled=true]{opacity:var(--et-segmented-button-opacity-disabled);pointer-events:none;cursor:default}et-segmented-button:hover:not([aria-disabled=true]){border-color:var(--_et-control-border, var(--et-surface-interaction-hover-solid, currentColor))}et-segmented-button:focus-visible{border-color:var(--et-theme-color-primary-solid);outline:1px solid var(--et-theme-color-primary-solid);outline-offset:-1px}et-segmented-button:active:not([aria-disabled=true]){transform:scale(.97)}et-segmented-button[aria-checked=true]{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor);color:var(--et-theme-color-on-primary-solid, white)}et-segmented-button[aria-checked=true]:hover{background-color:var(--et-theme-color-primary-solid, currentColor);border-color:var(--et-theme-color-primary-solid, currentColor)}et-segmented-button[data-can-animate]{transition:background-color var(--et-segmented-button-transition-duration) ease,border-color var(--et-segmented-button-transition-duration) ease,color var(--et-segmented-button-transition-duration) ease}@media(prefers-reduced-motion:reduce){et-segmented-button{--et-segmented-button-transition-duration: 1ms}}\n"] }]
         }] });
 
 class SwitchDirective {
@@ -2334,7 +3631,7 @@ class SwitchComponent {
         this.canAnimate = createCanAnimateSignal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "touchedChange", "touchedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: false; initial-value: 36px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-switch{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:var(--_et-control-border, var(--et-surface-border-solid, currentColor));opacity:.4}et-switch:hover:not([aria-disabled=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-track{opacity:.55}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]) .et-switch-track{background-color:var(--et-theme-color-primary-solid);opacity:.4}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch:active:not([aria-disabled=true]) .et-switch-track{transform:scale(.95)}et-switch .et-switch-thumb{position:absolute;top:var(--et-switch-thumb-offset);left:var(--et-switch-thumb-offset);width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);border-radius:50%;background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[aria-checked=true] .et-switch-thumb{left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset))}et-switch[aria-checked=true]:hover .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease,opacity var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:left var(--et-switch-transition-duration) ease}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: SwitchComponent, isStandalone: true, selector: "et-switch", host: { properties: { "attr.data-can-animate": "canAnimate.state() || null" }, classAttribute: "et-switch" }, hostDirectives: [{ directive: SwitchDirective, inputs: ["checked", "checked", "disabled", "disabled", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["checkedChange", "checkedChange", "touchedChange", "touchedChange"] }, { directive: i2.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: false; initial-value: 36px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:var(--_et-control-border, var(--et-surface-border-solid, currentColor));opacity:.4}et-switch:hover:not([aria-disabled=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-track{opacity:.55}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]) .et-switch-track{background-color:var(--et-theme-color-primary-solid);opacity:.4}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch:active:not([aria-disabled=true]) .et-switch-track{transform:scale(.95)}et-switch .et-switch-thumb{position:absolute;top:var(--et-switch-thumb-offset);left:var(--et-switch-thumb-offset);width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);border-radius:50%;background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[aria-checked=true] .et-switch-thumb{left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset))}et-switch[aria-checked=true]:hover .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease,opacity var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:left var(--et-switch-transition-duration) ease}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
@@ -2348,7 +3645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     ], host: {
                         class: 'et-switch',
                         '[attr.data-can-animate]': 'canAnimate.state() || null',
-                    }, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: false; initial-value: 36px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-switch{--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:var(--_et-control-border, var(--et-surface-border-solid, currentColor));opacity:.4}et-switch:hover:not([aria-disabled=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-track{opacity:.55}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]) .et-switch-track{background-color:var(--et-theme-color-primary-solid);opacity:.4}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch:active:not([aria-disabled=true]) .et-switch-track{transform:scale(.95)}et-switch .et-switch-thumb{position:absolute;top:var(--et-switch-thumb-offset);left:var(--et-switch-thumb-offset);width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);border-radius:50%;background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[aria-checked=true] .et-switch-thumb{left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset))}et-switch[aria-checked=true]:hover .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease,opacity var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:left var(--et-switch-transition-duration) ease}\n"] }]
+                    }, template: "<div class=\"et-switch-track\">\n  <div class=\"et-switch-thumb\"></div>\n</div>\n", styles: ["@property --et-switch-track-width{syntax: \"<length>\"; inherits: false; initial-value: 36px;}@property --et-switch-track-height{syntax: \"<length>\"; inherits: false; initial-value: 20px;}@property --et-switch-thumb-size{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-switch-thumb-offset{syntax: \"<length>\"; inherits: false; initial-value: 2px;}@property --et-switch-transition-duration{syntax: \"<time>\"; inherits: false; initial-value: .15s;}@property --et-switch-opacity-disabled{syntax: \"<number>\"; inherits: false; initial-value: .5;}et-switch{display:inline-flex;align-items:center;cursor:pointer;outline:none}et-switch[aria-disabled=true]{opacity:var(--et-switch-opacity-disabled);pointer-events:none;cursor:default}et-switch .et-switch-track{position:relative;width:var(--et-switch-track-width);height:var(--et-switch-track-height);border-radius:calc(var(--et-switch-track-height) / 2);background-color:var(--_et-control-border, var(--et-surface-border-solid, currentColor));opacity:.4}et-switch:hover:not([aria-disabled=true]) .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch:not([aria-disabled=true]) .et-switch-track{opacity:.55}:where(et-choice-field[data-error]) et-switch:not([aria-disabled=true]) .et-switch-track{background-color:var(--et-theme-color-primary-solid);opacity:.4}et-switch:focus-visible .et-switch-track{outline:2px solid var(--et-theme-color-primary-solid);outline-offset:2px}et-switch:active:not([aria-disabled=true]) .et-switch-track{transform:scale(.95)}et-switch .et-switch-thumb{position:absolute;top:var(--et-switch-thumb-offset);left:var(--et-switch-thumb-offset);width:var(--et-switch-thumb-size);height:var(--et-switch-thumb-size);border-radius:50%;background-color:var(--et-theme-color-on-primary-solid, white)}et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[aria-checked=true] .et-switch-thumb{left:calc(var(--et-switch-track-width) - var(--et-switch-thumb-size) - var(--et-switch-thumb-offset))}et-switch[aria-checked=true]:hover .et-switch-track,:where(et-choice-field:has(.et-choice-field-label-area:hover)) et-switch[aria-checked=true] .et-switch-track{background-color:var(--et-theme-color-primary-solid, currentColor);opacity:1}et-switch[data-can-animate] .et-switch-track{transition:background-color var(--et-switch-transition-duration) ease,opacity var(--et-switch-transition-duration) ease}et-switch[data-can-animate] .et-switch-thumb{transition:left var(--et-switch-transition-duration) ease}\n"] }]
         }] });
 
 const SWITCH_IMPORTS = [SwitchComponent, SwitchDirective];
@@ -2384,14 +3681,38 @@ const itemsCollide = (a, b) => {
  * Returns the first item that collides with the given position, or undefined if none.
  */
 const findCollision = (options) => options.entries.find((entry) => entry.id !== options.excludeId && itemsCollide(entry.position, options.position));
+/**
+ * Clamps a position so it fits horizontally within the given column count.
+ * Reduces an over-wide span and slides an out-of-bounds column back in range.
+ */
+const clampToColumns = (position, columns) => {
+    const colSpan = Math.max(1, Math.min(position.colSpan, columns));
+    const col = Math.max(0, Math.min(position.col, columns - colSpan));
+    return { ...position, col, colSpan };
+};
 /**
  * Compacts the layout vertically (moves items up as far as possible without collision).
+ *
+ * Also acts as a self-healing normaliser: positions that overflow the grid horizontally
+ * (e.g. stale data from a wider breakpoint clamped into a narrower one — a colSpan of 12
+ * or a col of 8 in a 6-column grid) are first clamped back into bounds, then any items
+ * left overlapping are pushed down before the upward compaction runs. This guarantees the
+ * returned layout is always in-bounds and overlap-free regardless of the input — clamping
+ * a column alone is not enough, because it can drop an item on top of an existing one.
  */
-const compactLayout = (entries, _columns) => {
-    const sorted = [...entries].sort((a, b) => a.position.row - b.position.row || a.position.col - b.position.col);
+const compactLayout = (entries, columns) => {
+    const sorted = [...entries]
+        .map((entry) => ({ ...entry, position: clampToColumns(entry.position, columns) }))
+        .sort((a, b) => a.position.row - b.position.row || a.position.col - b.position.col);
     const compacted = [];
     for (const entry of sorted) {
         const candidate = { ...entry, position: { ...entry.position } };
+        // Push down past any already-placed item it overlaps. This resolves overlaps introduced
+        // by clamping out-of-bounds columns (which the upward pass below cannot fix on its own).
+        while (findCollision({ entries: compacted, position: candidate.position, excludeId: candidate.id })) {
+            candidate.position.row += 1;
+        }
+        // Then pull up as far as possible without colliding.
         while (candidate.position.row > 0) {
             const moved = { ...candidate, position: { ...candidate.position, row: candidate.position.row - 1 } };
             if (findCollision({ entries: compacted, position: moved.position, excludeId: candidate.id })) {
@@ -2620,6 +3941,17 @@ const deserializeGridLayout = (state, breakpointMinWidths) => {
     return { breakpoints, items, rowHeight: state.rowHeight };
 };
 
+const positionsEqual = (a, b) => a.col === b.col && a.row === b.row && a.colSpan === b.colSpan && a.rowSpan === b.rowSpan;
+const layoutsEqual = (a, b) => {
+    const aKeys = Object.keys(a);
+    if (aKeys.length !== Object.keys(b).length)
+        return false;
+    return aKeys.every((k) => {
+        const ap = a[k];
+        const bp = b[k];
+        return ap !== undefined && bp !== undefined && positionsEqual(ap, bp);
+    });
+};
 const DEFAULT_CONSTRAINTS = {
     minColSpan: 1,
     maxColSpan: 12,
@@ -2719,14 +4051,41 @@ class GridDirective {
                     this.itemConfigs.set(initial);
                     return;
                 }
-                const currentIds = new Set(current.map((c) => c.id));
-                const newItems = initial.filter((item) => !currentIds.has(item.id));
+                const currentById = new Map(current.map((c) => [c.id, c]));
+                const initialIds = new Set(initial.map((i) => i.id));
+                const newItems = initial.filter((item) => !currentById.has(item.id));
+                const removedIds = current.filter((c) => !initialIds.has(c.id)).map((c) => c.id);
+                // Pure layout update — same item set but positions changed (e.g. the host
+                // reset its signal to a saved snapshot after the user cancelled edits).
+                // A structural add/remove takes precedence and is handled below.
+                if (newItems.length === 0 && removedIds.length === 0) {
+                    const anyLayoutChanged = initial.some((incoming) => {
+                        const existing = currentById.get(incoming.id);
+                        return existing && !layoutsEqual(existing.layout, incoming.layout);
+                    });
+                    if (anyLayoutChanged) {
+                        // Restore itemConfigs from the incoming snapshot.
+                        this.itemConfigs.set(initial);
+                        // Rebuild layoutOverrides for every breakpoint that has already been
+                        // visited so the grid renders the restored positions immediately without
+                        // waiting for a breakpoint switch.
+                        const visitedBps = Object.keys(this.layoutOverrides());
+                        if (visitedBps.length > 0) {
+                            const restored = {};
+                            for (const bp of visitedBps) {
+                                restored[bp] = initial.map((item) => ({
+                                    id: item.id,
+                                    position: item.layout[bp] ?? { col: 0, row: 0, colSpan: 1, rowSpan: 1 },
+                                }));
+                            }
+                            this.layoutOverrides.set(restored);
+                        }
+                    }
+                    return;
+                }
                 for (const item of newItems) {
                     this.placeItem(item);
                 }
-                // Remove items no longer in initial
-                const initialIds = new Set(initial.map((i) => i.id));
-                const removedIds = current.filter((c) => !initialIds.has(c.id)).map((c) => c.id);
                 for (const id of removedIds) {
                     this.removeItem(id);
                 }
@@ -2799,27 +4158,33 @@ class GridDirective {
         // On first registration the item may have been auto-placed with 1×1 defaults
         // (because addItem runs before the GridItemDirective initialises). If so,
         // re-place it now at the correct minimum size.
-        const breakpoint = this.activeBreakpoint();
-        const existing = this.layoutOverrides()[breakpoint];
-        if (!existing)
-            return;
-        const entry = existing.find((e) => e.id === id);
-        if (!entry)
-            return;
-        const pos = entry.position;
-        if (pos.colSpan >= constraints.minColSpan && pos.rowSpan >= constraints.minRowSpan)
-            return;
-        const cols = this.activeColumns();
-        const others = existing.filter((e) => e.id !== id);
-        const newPosition = autoPlace({
-            entries: others,
-            colSpan: Math.max(pos.colSpan, constraints.minColSpan),
-            rowSpan: Math.max(pos.rowSpan, constraints.minRowSpan),
-            columns: cols,
+        // All signal reads are wrapped in untracked() to prevent this method from
+        // inadvertently becoming a dependency of the caller's reactive context
+        // (e.g. GridItemDirective's registration effect), which would cause the
+        // layoutOverrides.update() write below to re-trigger that effect in a loop.
+        untracked(() => {
+            const breakpoint = this.activeBreakpoint();
+            const existing = this.layoutOverrides()[breakpoint];
+            if (!existing)
+                return;
+            const entry = existing.find((e) => e.id === id);
+            if (!entry)
+                return;
+            const pos = entry.position;
+            if (pos.colSpan >= constraints.minColSpan && pos.rowSpan >= constraints.minRowSpan)
+                return;
+            const cols = this.activeColumns();
+            const others = existing.filter((e) => e.id !== id);
+            const newPosition = autoPlace({
+                entries: others,
+                colSpan: Math.max(pos.colSpan, constraints.minColSpan),
+                rowSpan: Math.max(pos.rowSpan, constraints.minRowSpan),
+                columns: cols,
+            });
+            const updated = existing.map((e) => (e.id === id ? { ...e, position: newPosition } : e));
+            const compacted = compactLayout(updated, cols);
+            this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: compacted }));
         });
-        const updated = existing.map((e) => (e.id === id ? { ...e, position: newPosition } : e));
-        const compacted = compactLayout(updated, cols);
-        this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: compacted }));
     }
     registerItem(id, options) {
         this.itemElements.set(id, options.el);
@@ -2960,6 +4325,7 @@ class GridDirective {
                 const currentLayout = this.baseLayout().filter((e) => e.id !== id);
                 const compacted = compactLayout(currentLayout, columns);
                 this.updateLayoutForCurrentBreakpoint(compacted);
+                this.compactOtherBreakpoints(id);
                 this.emitLayoutChange();
                 this.animateLayoutTransition({ excludeIds: new Set([id]) });
             };
@@ -2970,6 +4336,7 @@ class GridDirective {
             const currentLayout = this.baseLayout().filter((e) => e.id !== id);
             const compacted = compactLayout(currentLayout, columns);
             this.updateLayoutForCurrentBreakpoint(compacted);
+            this.compactOtherBreakpoints(id);
             this.emitLayoutChange();
         }
     }
@@ -3022,8 +4389,22 @@ class GridDirective {
         this.resizeBaseLayout.set(null);
     }
     getSerializedState() {
+        const overrides = this.layoutOverrides();
+        // layoutOverrides is the authoritative source for any breakpoint that has been visited.
+        // itemConfigs.layout[bp] lags behind for breakpoints that haven't been written back
+        // yet (e.g. items pushed by moveItem/resizeItem collision resolution, or items whose
+        // non-current-breakpoint positions haven't been visited since the last change).
+        const items = this.itemConfigs().map((item) => {
+            const layout = { ...item.layout };
+            for (const [bp, entries] of Object.entries(overrides)) {
+                const entry = entries.find((e) => e.id === item.id);
+                if (entry)
+                    layout[bp] = entry.position;
+            }
+            return { ...item, layout };
+        });
         return serializeGridLayout({
-            items: this.itemConfigs(),
+            items,
             breakpoints: this.breakpoints(),
             rowHeight: this.rowHeight(),
         });
@@ -3052,24 +4433,45 @@ class GridDirective {
         this.layoutOverrides.set(overrides);
     }
     placeItem(config) {
-        const breakpoint = this.activeBreakpoint();
+        const activeBp = this.activeBreakpoint();
         const columns = this.activeColumns();
         const currentLayout = this.baseLayout();
         const constraints = this.getConstraints(config.id);
-        const position = config.layout[breakpoint] ??
+        const allBreakpoints = this.breakpoints();
+        const overrides = this.layoutOverrides();
+        const existingItems = this.itemConfigs();
+        // Start from any layouts already in the config (e.g. when re-adding from API data).
+        const layout = { ...config.layout };
+        // Place on the active breakpoint first so other breakpoints can use it as a reference.
+        const position = layout[activeBp] ??
             autoPlace({
                 entries: currentLayout,
                 colSpan: constraints.minColSpan,
                 rowSpan: constraints.minRowSpan,
                 columns,
             });
-        const itemWithLayout = {
-            ...config,
-            layout: {
-                ...config.layout,
-                [breakpoint]: position,
-            },
-        };
+        layout[activeBp] = position;
+        // Auto-place on every other breakpoint that has no position yet.
+        // This ensures the emitted layoutChange always carries all breakpoints so
+        // the host's gridItems signal never loses sm/md positions for new items.
+        for (const bp of allBreakpoints) {
+            if (bp.name === activeBp || layout[bp.name])
+                continue;
+            // Effective layout for this breakpoint: prefer layoutOverrides (already visited),
+            // fall back to itemConfigs.layout[bp] (original API positions).
+            const bpEntries = overrides[bp.name] ??
+                existingItems.map((item) => ({
+                    id: item.id,
+                    position: item.layout[bp.name] ?? { col: 0, row: 0, colSpan: 1, rowSpan: 1 },
+                }));
+            layout[bp.name] = autoPlace({
+                entries: bpEntries,
+                colSpan: Math.min(constraints.minColSpan, bp.columns),
+                rowSpan: constraints.minRowSpan,
+                columns: bp.columns,
+            });
+        }
+        const itemWithLayout = { ...config, layout };
         this.itemConfigs.update((items) => [...items, itemWithLayout]);
         this.updateLayoutForCurrentBreakpoint([...currentLayout, { id: config.id, position }]);
         this.emitLayoutChange();
@@ -3153,6 +4555,19 @@ class GridDirective {
             return collides ? original : entry;
         });
     }
+    /** Compact all visited breakpoints (layoutOverrides entries) after an item is removed. */
+    compactOtherBreakpoints(removedId) {
+        const activeBp = this.activeBreakpoint();
+        const bpColumns = new Map(this.breakpoints().map((b) => [b.name, b.columns]));
+        for (const [bp, entries] of Object.entries(this.layoutOverrides())) {
+            if (bp === activeBp)
+                continue;
+            const withoutItem = entries.filter((e) => e.id !== removedId);
+            const cols = bpColumns.get(bp) ?? 1;
+            const compacted = compactLayout(withoutItem, cols);
+            this.layoutOverrides.update((prev) => ({ ...prev, [bp]: compacted }));
+        }
+    }
     updateLayoutForCurrentBreakpoint(entries) {
         const breakpoint = this.activeBreakpoint();
         this.layoutOverrides.update((prev) => ({ ...prev, [breakpoint]: entries }));
@@ -3207,10 +4622,8 @@ class GridItemDirective {
         this.currentRow = computed(() => this.renderPosition()?.row ?? 0, ...(ngDevMode ? [{ debugName: "currentRow" }] : /* istanbul ignore next */ []));
         this.currentColSpan = computed(() => this.renderPosition()?.colSpan ?? 1, ...(ngDevMode ? [{ debugName: "currentColSpan" }] : /* istanbul ignore next */ []));
         this.currentRowSpan = computed(() => this.renderPosition()?.rowSpan ?? 1, ...(ngDevMode ? [{ debugName: "currentRowSpan" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            'grid-column': computed(() => `${this.currentCol() + 1} / span ${this.currentColSpan()}`),
-            'grid-row': computed(() => `${this.currentRow() + 1} / span ${this.currentRowSpan()}`),
-        });
+        this.gridColumn = computed(() => `${this.currentCol() + 1} / span ${this.currentColSpan()}`, ...(ngDevMode ? [{ debugName: "gridColumn" }] : /* istanbul ignore next */ []));
+        this.gridRow = computed(() => `${this.currentRow() + 1} / span ${this.currentRowSpan()}`, ...(ngDevMode ? [{ debugName: "gridRow" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const id = this.itemId();
             const el = this.hostElement.nativeElement;
@@ -3241,7 +4654,7 @@ class GridItemDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: GridItemDirective, isStandalone: true, selector: "[etGridItem]", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, minColSpan: { classPropertyName: "minColSpan", publicName: "minColSpan", isSignal: true, isRequired: false, transformFunction: null }, maxColSpan: { classPropertyName: "maxColSpan", publicName: "maxColSpan", isSignal: true, isRequired: false, transformFunction: null }, minRowSpan: { classPropertyName: "minRowSpan", publicName: "minRowSpan", isSignal: true, isRequired: false, transformFunction: null }, maxRowSpan: { classPropertyName: "maxRowSpan", publicName: "maxRowSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-grid-item" }, exportAs: ["etGridItem"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: GridItemDirective, isStandalone: true, selector: "[etGridItem]", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, minColSpan: { classPropertyName: "minColSpan", publicName: "minColSpan", isSignal: true, isRequired: false, transformFunction: null }, maxColSpan: { classPropertyName: "maxColSpan", publicName: "maxColSpan", isSignal: true, isRequired: false, transformFunction: null }, minRowSpan: { classPropertyName: "minRowSpan", publicName: "minRowSpan", isSignal: true, isRequired: false, transformFunction: null }, maxRowSpan: { classPropertyName: "maxRowSpan", publicName: "maxRowSpan", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.grid-column": "gridColumn()", "style.grid-row": "gridRow()" }, classAttribute: "et-grid-item" }, exportAs: ["etGridItem"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemDirective, decorators: [{
             type: Directive,
@@ -3250,6 +4663,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     exportAs: 'etGridItem',
                     host: {
                         class: 'et-grid-item',
+                        '[style.grid-column]': 'gridColumn()',
+                        '[style.grid-row]': 'gridRow()',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: true }] }], minColSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minColSpan", required: false }] }], maxColSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxColSpan", required: false }] }], minRowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRowSpan", required: false }] }], maxRowSpan: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRowSpan", required: false }] }] } });
@@ -3264,12 +4679,10 @@ class GridDragDirective {
         this.renderer = injectRenderer();
         this.dragStartClient = signal(null, ...(ngDevMode ? [{ debugName: "dragStartClient" }] : /* istanbul ignore next */ []));
         this.dragPixelOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragPixelOffset" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            transform: computed(() => {
-                const offset = this.dragPixelOffset();
-                return `translate(${offset.x}px, ${offset.y}px)`;
-            }),
-        });
+        this.dragTransform = computed(() => {
+            const offset = this.dragPixelOffset();
+            return `translate(${offset.x}px, ${offset.y}px)`;
+        }, ...(ngDevMode ? [{ debugName: "dragTransform" }] : /* istanbul ignore next */ []));
         outputToObservable(this.dragHandle.dragStarted)
             .pipe(filter(() => !this.grid.readOnly()), tap(() => {
             this.dragPixelOffset.set({ x: 0, y: 0 });
@@ -3383,7 +4796,7 @@ class GridDragDirective {
         this.renderer.removeStyles(el, 'position', 'left', 'top', 'width', 'height');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDragDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: GridDragDirective, isStandalone: true, selector: "[etGridDrag]", host: { properties: { "class.et-grid-drag--active": "!grid.readOnly() && dragHandle.isDragging()", "attr.aria-grabbed": "!grid.readOnly() && dragHandle.isDragging()" }, classAttribute: "et-grid-drag" }, hostDirectives: [{ directive: i2.DragHandleDirective, outputs: ["dragStarted", "dragStarted", "dragMoved", "dragMoved", "dragEnded", "dragEnded"] }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.13", type: GridDragDirective, isStandalone: true, selector: "[etGridDrag]", host: { properties: { "class.et-grid-drag--active": "!grid.readOnly() && dragHandle.isDragging()", "attr.aria-grabbed": "!grid.readOnly() && dragHandle.isDragging()", "style.transform": "dragTransform()" }, classAttribute: "et-grid-drag" }, hostDirectives: [{ directive: i2.DragHandleDirective, outputs: ["dragStarted", "dragStarted", "dragMoved", "dragMoved", "dragEnded", "dragEnded"] }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDragDirective, decorators: [{
             type: Directive,
@@ -3399,6 +4812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         class: 'et-grid-drag',
                         '[class.et-grid-drag--active]': '!grid.readOnly() && dragHandle.isDragging()',
                         '[attr.aria-grabbed]': '!grid.readOnly() && dragHandle.isDragging()',
+                        '[style.transform]': 'dragTransform()',
                     },
                 }]
         }], ctorParameters: () => [] });
@@ -3518,75 +4932,37 @@ const fromGridPosition = (pos) => ({
     rows: pos.rowSpan,
 });
 
-class GridComponent {
-    constructor() {
-        this.grid = inject(GridDirective);
-        this.ghostRef = viewChild('ghostRef', ...(ngDevMode ? [{ debugName: "ghostRef" }] : /* istanbul ignore next */ []));
-        this.gridConfig = injectGridConfig();
-        this.locale = injectLocale();
-        this.ariaLabel = computed(() => {
-            const label = this.grid.readOnly() ? this.gridConfig.readonlyAriaLabel : this.gridConfig.interactiveAriaLabel;
-            return this.gridConfig.transformer(label, this.locale.currentLocale());
-        }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-        this.hostStyles = signalHostStyles({
-            '--_et-grid-columns': computed(() => `${this.grid.activeColumns()}`),
-            '--et-grid-gap': computed(() => `${this.grid.gap()}px`),
-            '--et-grid-row-height': computed(() => `${this.grid.rowHeight()}px`),
-        });
-        effect(() => {
-            this.grid.setGhostElement(this.ghostRef()?.nativeElement ?? null);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "ariaLabel()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
-    <ng-content />
-    @if (grid.ghostPosition(); as ghost) {
-      <div
-        #ghostRef
-        [style.grid-column]="ghost.col + 1 + ' / span ' + ghost.colSpan"
-        [style.grid-row]="ghost.row + 1 + ' / span ' + ghost.rowSpan"
-        class="et-grid-ghost"
-      ></div>
-    }
-  `, isInline: true, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'et-grid, [et-grid]', template: `
-    <ng-content />
-    @if (grid.ghostPosition(); as ghost) {
-      <div
-        #ghostRef
-        [style.grid-column]="ghost.col + 1 + ' / span ' + ghost.colSpan"
-        [style.grid-row]="ghost.row + 1 + ' / span ' + ghost.rowSpan"
-        class="et-grid-ghost"
-      ></div>
-    }
-  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: GridDirective,
-                            inputs: ['breakpoints', 'rowHeight', 'gap', 'initialItems', 'readOnly'],
-                            outputs: ['layoutChange'],
-                        },
-                    ], host: {
-                        class: 'et-grid',
-                        role: 'region',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    }, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ghostRef: [{ type: i0.ViewChild, args: ['ghostRef', { isSignal: true }] }] } });
-
 class GridItemComponent {
     constructor() {
         this.grid = inject(GRID_TOKEN);
         this.gridItem = inject(GridItemDirective);
+        this.provideSurface = inject(ProvideSurfaceDirective);
+        this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.gridDrag = inject(GridDragDirective);
         this.gridResize = inject(GridResizeDirective);
         this.ariaLabel = input('Grid item', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.removed = output();
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.gridConfig = injectGridConfig();
         this.locale = injectLocale();
         this.isReadOnly = computed(() => this.grid.readOnly(), ...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
         this.dragHandleAriaLabel = computed(() => this.gridConfig.transformer(this.gridConfig.dragHandleAriaLabel, this.locale.currentLocale()), ...(ngDevMode ? [{ debugName: "dragHandleAriaLabel" }] : /* istanbul ignore next */ []));
+        this.resolvedSurface = computed(() => {
+            const themes = this.surfaceThemes;
+            const parent = this.parentSurfaceProvider;
+            if (!themes || !parent)
+                return null;
+            return resolveSurfaceByElevation(themes, parent.surfaceType() ?? 'dark', parent.elevation() + 1);
+        }, ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const surface = this.resolvedSurface();
+            if (surface) {
+                this.provideSurface.forceSurface(surface.name);
+            }
+            else {
+                this.provideSurface.clearForcedSurface();
+            }
+        });
     }
     applyKeyboardShortcut(event) {
         if (this.isReadOnly())
@@ -3650,7 +5026,7 @@ class GridItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "applyKeyboardShortcut($event)" }, properties: { "class.et-grid-item--dragging": "!isReadOnly() && gridDrag.dragHandle.isDragging()", "class.et-grid-item--resizing": "gridResize.isResizing()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel()", "attr.tabindex": "\"0\"" }, classAttribute: "et-grid-item" }, hostDirectives: [{ directive: GridItemDirective, inputs: ["itemId", "itemId", "minColSpan", "minColSpan", "maxColSpan", "maxColSpan", "minRowSpan", "minRowSpan", "maxRowSpan", "maxRowSpan"] }, { directive: GridDragDirective }, { directive: GridResizeDirective }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "applyKeyboardShortcut($event)" }, properties: { "class.et-grid-item--dragging": "!isReadOnly() && gridDrag.dragHandle.isDragging()", "class.et-grid-item--resizing": "gridResize.isResizing()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel()", "attr.tabindex": "\"0\"" }, classAttribute: "et-grid-item" }, hostDirectives: [{ directive: GridItemDirective, inputs: ["itemId", "itemId", "minColSpan", "minColSpan", "maxColSpan", "maxColSpan", "minRowSpan", "minRowSpan", "maxRowSpan", "maxRowSpan"] }, { directive: GridDragDirective }, { directive: GridResizeDirective }, { directive: i2.ProvideSurfaceDirective }], ngImport: i0, template: `
     <div [attr.aria-label]="dragHandleAriaLabel()" class="et-grid-item__drag-handle">
       <ng-content select="[etGridItemDragHandle]" />
     </div>
@@ -3671,7 +5047,7 @@ class GridItemComponent {
     <div (pointerdown)="$event.stopPropagation()" class="et-grid-item__actions">
       <ng-content select="[etGridItemAction]" />
     </div>
-  `, isInline: true, styles: ["@property --et-grid-item-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-grid-item-bg{syntax: \"<color>\"; inherits: false; initial-value: rgb(var(--et-surface-background, 255 255 255));}@property --et-grid-item-shadow{syntax: \"*\"; inherits: false; initial-value: 0 1px 3px rgba(0,0,0,.12);}@property --et-grid-item-drag-handle-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}.et-grid-item{position:relative;border-radius:var(--et-grid-item-border-radius);background:var(--et-grid-item-bg);box-shadow:var(--et-grid-item-shadow);border:1px solid rgb(var(--et-surface-border, 229 229 229));color:rgb(var(--et-surface-color, 23 23 23));overflow:hidden;display:flex;flex-direction:column;outline:none;will-change:transform}.et-grid-item:focus-visible{box-shadow:0 0 0 2px var(--et-grid-item-focus-ring-color, #2563eb)}.et-grid-item:is(.et-grid-item--dragging){z-index:100;box-shadow:0 12px 32px #0003;opacity:.95;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:rgb(var(--et-surface-color, 23 23 23) / .2);transition:opacity .15s ease}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{height:var(--et-grid-item-drag-handle-height);cursor:grab;display:flex;align-items:center;padding-inline:8px;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;overflow:hidden;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"], dependencies: [{ kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{cursor:grab;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"], dependencies: [{ kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridItemComponent, decorators: [{
             type: Component,
@@ -3703,6 +5079,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         },
                         GridDragDirective,
                         GridResizeDirective,
+                        ProvideSurfaceDirective,
                     ], host: {
                         class: 'et-grid-item',
                         '[class.et-grid-item--dragging]': '!isReadOnly() && gridDrag.dragHandle.isDragging()',
@@ -3711,327 +5088,467 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.tabindex]': '"0"',
                         '(keydown)': 'applyKeyboardShortcut($event)',
-                    }, styles: ["@property --et-grid-item-border-radius{syntax: \"<length>\"; inherits: false; initial-value: 8px;}@property --et-grid-item-bg{syntax: \"<color>\"; inherits: false; initial-value: rgb(var(--et-surface-background, 255 255 255));}@property --et-grid-item-shadow{syntax: \"*\"; inherits: false; initial-value: 0 1px 3px rgba(0,0,0,.12);}@property --et-grid-item-drag-handle-height{syntax: \"<length>\"; inherits: false; initial-value: 32px;}.et-grid-item{position:relative;border-radius:var(--et-grid-item-border-radius);background:var(--et-grid-item-bg);box-shadow:var(--et-grid-item-shadow);border:1px solid rgb(var(--et-surface-border, 229 229 229));color:rgb(var(--et-surface-color, 23 23 23));overflow:hidden;display:flex;flex-direction:column;outline:none;will-change:transform}.et-grid-item:focus-visible{box-shadow:0 0 0 2px var(--et-grid-item-focus-ring-color, #2563eb)}.et-grid-item:is(.et-grid-item--dragging){z-index:100;box-shadow:0 12px 32px #0003;opacity:.95;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:rgb(var(--et-surface-color, 23 23 23) / .2);transition:opacity .15s ease}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{height:var(--et-grid-item-drag-handle-height);cursor:grab;display:flex;align-items:center;padding-inline:8px;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;overflow:hidden;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
-        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
-
-const GRID_ERROR_CODES = {
-    MISSING_GRID: 1900,
-    MISSING_GRID_ITEM: 1901,
-    DUPLICATE_ITEM_ID: 1902,
-    INVALID_LAYOUT_STATE: 1903,
-};
-
-const GridImports = [GridComponent, GridItemComponent];
-
-const ARROW_OUT_UP_RIGHT_ICON = {
-    name: 'et-arrow-out-up-right',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        d="M5 6.75A1.75 1.75 0 0 1 6.75 5h4.5a.75.75 0 0 1 0 1.5h-4.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-4.5a.75.75 0 0 1 1.5 0v4.5A1.75 1.75 0 0 1 17.25 19H6.75A1.75 1.75 0 0 1 5 17.25V6.75Z"
-      />
-      <path
-        fill="currentColor"
-        d="M11.5 5.75c0-.414.336-.75.75-.75h6c.414 0 .75.336.75.75v6a.75.75 0 0 1-1.5 0V7.56l-6.72 6.72a.75.75 0 1 1-1.06-1.06l6.72-6.72h-4.19a.75.75 0 0 1-.75-.75Z"
-      />
-    </svg>
-  `,
-};
-
-const ARROW_RIGHT_ICON = {
-    name: 'et-arrow-right',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M4 12h14"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M13 7l5 5-5 5"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  `,
-};
-
-// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
-const CHEVRON_ICON = {
-    name: 'et-chevron',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M244.7 116.7c6.2-6.2 16.4-6.2 22.6 0l192 192c6.2 6.2 6.2 16.4 0 22.6s-16.4 6.2-22.6 0L256 150.6 75.3 331.3c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l192-192z"
-      />
-    </svg>
-  `,
-};
-
-const CLIPBOARD_CHECK_ICON = {
-    name: 'et-clipboard-check',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M9 4.5h6"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-      />
-      <path
-        d="M9 3h6a1.5 1.5 0 0 1 1.5 1.5V6H18a2 2 0 0 1 2 2v10.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18.5V8a2 2 0 0 1 2-2h1.5V4.5A1.5 1.5 0 0 1 9 3z"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M8.5 13l2.2 2.2 4.8-4.9"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  `,
-};
-
-const FLOPPY_DISK_ICON = {
-    name: 'et-floppy-disk',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M5 3h11l3 3v13a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3z"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M8 3v6h7V3"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M8 17h8"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-      />
-    </svg>
-  `,
-};
+                    }, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{cursor:grab;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
 
-const FOCUS_FRAME_ICON = {
-    name: 'et-focus-frame',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
-        clip-rule="evenodd"
-      />
-      <rect x="8" y="8" width="8" height="8" rx="1.25" fill="currentColor" />
-    </svg>
-  `,
-};
+class GridComponent {
+    constructor() {
+        this.grid = inject(GridDirective);
+        this.ghostRef = viewChild('ghostRef', ...(ngDevMode ? [{ debugName: "ghostRef" }] : /* istanbul ignore next */ []));
+        this.gridConfig = injectGridConfig();
+        this.locale = injectLocale();
+        this.isReadOnly = computed(() => this.grid.readOnly(), ...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
+        this.dragHandleComponent = computed(() => this.gridConfig.dragHandleComponent, ...(ngDevMode ? [{ debugName: "dragHandleComponent" }] : /* istanbul ignore next */ []));
+        this.actionsComponent = computed(() => this.gridConfig.actionsComponent, ...(ngDevMode ? [{ debugName: "actionsComponent" }] : /* istanbul ignore next */ []));
+        this.registeredItems = computed(() => {
+            const registrations = this.gridConfig.registrations;
+            return this.grid.items().flatMap((item) => {
+                const reg = registrations.find((r) => r.type === item.type);
+                return reg ? [{ item, reg }] : [];
+            });
+        }, ...(ngDevMode ? [{ debugName: "registeredItems" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => {
+            const label = this.grid.readOnly() ? this.gridConfig.readonlyAriaLabel : this.gridConfig.interactiveAriaLabel;
+            return this.gridConfig.transformer(label, this.locale.currentLocale());
+        }, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.gridColumns = computed(() => this.grid.activeColumns(), ...(ngDevMode ? [{ debugName: "gridColumns" }] : /* istanbul ignore next */ []));
+        this.gridGap = computed(() => `${this.grid.gap()}px`, ...(ngDevMode ? [{ debugName: "gridGap" }] : /* istanbul ignore next */ []));
+        this.gridRowHeight = computed(() => `${this.grid.rowHeight()}px`, ...(ngDevMode ? [{ debugName: "gridRowHeight" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.grid.setGhostElement(this.ghostRef()?.nativeElement ?? null);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "ariaLabel()", "style.--_et-grid-columns": "gridColumns()", "style.--et-grid-gap": "gridGap()", "style.--et-grid-row-height": "gridRowHeight()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
+    @for (entry of registeredItems(); track entry.item.id) {
+      <et-grid-item
+        [itemId]="entry.item.id"
+        [minColSpan]="entry.reg.constraints?.minColSpan ?? 1"
+        [maxColSpan]="entry.reg.constraints?.maxColSpan ?? 12"
+        [minRowSpan]="entry.reg.constraints?.minRowSpan ?? 1"
+        [maxRowSpan]="entry.reg.constraints?.maxRowSpan ?? 4"
+      >
+        @if (dragHandleComponent()) {
+          <div etGridItemDragHandle>
+            <ng-container
+              [ngComponentOutlet]="dragHandleComponent()!"
+              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
+            />
+          </div>
+        } @else {
+          <div etGridItemDragHandle></div>
+        }
+        <ng-container [ngComponentOutlet]="entry.reg.component" [ngComponentOutletInputs]="{ data: entry.item.data }" />
+        @if (actionsComponent()) {
+          <div etGridItemAction>
+            <ng-container
+              [ngComponentOutlet]="actionsComponent()!"
+              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
+            />
+          </div>
+        } @else if (!isReadOnly()) {
+          <button (click)="grid.removeItem(entry.item.id)" etGridItemAction>✕</button>
+        }
+      </et-grid-item>
+    }
+    <ng-content />
+    @if (grid.ghostPosition(); as ghost) {
+      <div
+        #ghostRef
+        [style.grid-column]="ghost.col + 1 + ' / span ' + ghost.colSpan"
+        [style.grid-row]="ghost.row + 1 + ' / span ' + ghost.rowSpan"
+        class="et-grid-ghost"
+      ></div>
+    }
+  `, isInline: true, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], dependencies: [{ kind: "component", type: GridItemComponent, selector: "et-grid-item, [et-grid-item]", inputs: ["ariaLabel"], outputs: ["removed"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-grid, [et-grid]', template: `
+    @for (entry of registeredItems(); track entry.item.id) {
+      <et-grid-item
+        [itemId]="entry.item.id"
+        [minColSpan]="entry.reg.constraints?.minColSpan ?? 1"
+        [maxColSpan]="entry.reg.constraints?.maxColSpan ?? 12"
+        [minRowSpan]="entry.reg.constraints?.minRowSpan ?? 1"
+        [maxRowSpan]="entry.reg.constraints?.maxRowSpan ?? 4"
+      >
+        @if (dragHandleComponent()) {
+          <div etGridItemDragHandle>
+            <ng-container
+              [ngComponentOutlet]="dragHandleComponent()!"
+              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
+            />
+          </div>
+        } @else {
+          <div etGridItemDragHandle></div>
+        }
+        <ng-container [ngComponentOutlet]="entry.reg.component" [ngComponentOutletInputs]="{ data: entry.item.data }" />
+        @if (actionsComponent()) {
+          <div etGridItemAction>
+            <ng-container
+              [ngComponentOutlet]="actionsComponent()!"
+              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
+            />
+          </div>
+        } @else if (!isReadOnly()) {
+          <button (click)="grid.removeItem(entry.item.id)" etGridItemAction>✕</button>
+        }
+      </et-grid-item>
+    }
+    <ng-content />
+    @if (grid.ghostPosition(); as ghost) {
+      <div
+        #ghostRef
+        [style.grid-column]="ghost.col + 1 + ' / span ' + ghost.colSpan"
+        [style.grid-row]="ghost.row + 1 + ' / span ' + ghost.rowSpan"
+        class="et-grid-ghost"
+      ></div>
+    }
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GridItemComponent, NgComponentOutlet], hostDirectives: [
+                        {
+                            directive: GridDirective,
+                            inputs: ['breakpoints', 'rowHeight', 'gap', 'initialItems', 'readOnly'],
+                            outputs: ['layoutChange'],
+                        },
+                    ], host: {
+                        class: 'et-grid',
+                        role: 'region',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[style.--_et-grid-columns]': 'gridColumns()',
+                        '[style.--et-grid-gap]': 'gridGap()',
+                        '[style.--et-grid-row-height]': 'gridRowHeight()',
+                    }, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ghostRef: [{ type: i0.ViewChild, args: ['ghostRef', { isSignal: true }] }] } });
 
-const GRID_2X2_ICON = {
-    name: 'et-grid-2x2',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        fill-rule="evenodd"
-        d="M5.75 4A1.75 1.75 0 0 0 4 5.75v12.5C4 19.216 4.784 20 5.75 20h12.5A1.75 1.75 0 0 0 20 18.25V5.75A1.75 1.75 0 0 0 18.25 4H5.75Zm0 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V5.75a.25.25 0 0 0-.25-.25H5.75Z"
-        clip-rule="evenodd"
-      />
-      <rect x="11.25" y="5.5" width="1.5" height="13" fill="currentColor" />
-      <rect x="5.5" y="11.25" width="13" height="1.5" fill="currentColor" />
-    </svg>
-  `,
+const posEq = (a, b) => {
+    if (!a && !b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.col === b.col && a.row === b.row && a.colSpan === b.colSpan && a.rowSpan === b.rowSpan;
 };
+/**
+ * Development-only debug overlay for an `et-grid` instance.
+ *
+ * ```html
+ * <et-grid #myGrid [initialItems]="items()" ...></et-grid>
+ * <et-grid-debug [grid]="myGrid" [externalItems]="items()" />
+ * ```
+ *
+ * Pass `externalItems` to detect divergence between the host signal
+ * and the grid's internal itemConfigs. The **Copy JSON** button writes
+ * a full diagnostic snapshot to the clipboard without any console output.
+ */
+class GridDebugComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        this.externalItems = input(null, ...(ngDevMode ? [{ debugName: "externalItems" }] : /* istanbul ignore next */ []));
+        this.activeBreakpoint = computed(() => this.grid().grid.activeBreakpoint(), ...(ngDevMode ? [{ debugName: "activeBreakpoint" }] : /* istanbul ignore next */ []));
+        this.containerWidth = computed(() => this.grid().grid.containerWidth(), ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
+        this.breakpoints = computed(() => this.grid().grid.breakpoints(), ...(ngDevMode ? [{ debugName: "breakpoints" }] : /* istanbul ignore next */ []));
+        this.items = computed(() => this.grid().grid.items(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.layout = computed(() => this.grid().grid.layout(), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.hasDrag = computed(() => this.grid().grid.dragState() !== null, ...(ngDevMode ? [{ debugName: "hasDrag" }] : /* istanbul ignore next */ []));
+        this.hasExternal = computed(() => this.externalItems() !== null, ...(ngDevMode ? [{ debugName: "hasExternal" }] : /* istanbul ignore next */ []));
+        this.copied = signal(false, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+        this.rows = computed(() => {
+            const bps = this.breakpoints().map((b) => b.name);
+            const internalItems = this.items();
+            const external = this.externalItems();
+            const extById = external ? new Map(external.map((i) => [i.id, i])) : null;
+            return internalItems.map((item) => ({
+                id: item.id,
+                type: item.type,
+                cells: bps.map((bp) => {
+                    const int = item.layout[bp];
+                    const ext = extById?.get(item.id)?.layout[bp];
+                    return {
+                        bp,
+                        int,
+                        ext,
+                        intMissing: !int,
+                        extMissing: extById !== null && !ext,
+                        mismatch: extById !== null && !posEq(int, ext),
+                    };
+                }),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+        this.issueCount = computed(() => this.rows().reduce((n, row) => n + row.cells.filter((c) => c.intMissing || c.mismatch).length, 0), ...(ngDevMode ? [{ debugName: "issueCount" }] : /* istanbul ignore next */ []));
+    }
+    fmtPos(pos) {
+        return pos ? `(${pos.col},${pos.row}) ${pos.colSpan}×${pos.rowSpan}` : '—';
+    }
+    copyJson($event) {
+        $event.stopPropagation();
+        const issues = [];
+        for (const row of this.rows()) {
+            for (const cell of row.cells) {
+                if (cell.intMissing)
+                    issues.push({ type: 'missing-internal-layout', itemId: row.id, breakpoint: cell.bp });
+                if (cell.mismatch)
+                    issues.push({ type: 'external-internal-mismatch', itemId: row.id, breakpoint: cell.bp });
+            }
+        }
+        const external = this.externalItems();
+        const snapshot = {
+            timestamp: new Date().toISOString(),
+            activeBreakpoint: this.activeBreakpoint(),
+            containerWidth: this.containerWidth(),
+            breakpoints: this.breakpoints(),
+            internalItems: this.items().map((i) => ({ id: i.id, type: i.type, layout: i.layout })),
+            activeLayout: this.layout(),
+            ...(external ? { externalItems: external.map((i) => ({ id: i.id, type: i.type, layout: i.layout })) } : {}),
+            issues,
+        };
+        navigator.clipboard.writeText(JSON.stringify(snapshot, null, 2)).catch(() => {
+            /* clipboard unavailable in this context */
+        });
+        this.copied.set(true);
+        timer(2000)
+            .pipe(takeUntilDestroyed(this.destroyRef), tap$1(() => this.copied.set(false)))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridDebugComponent, isStandalone: true, selector: "et-grid-debug", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, externalItems: { classPropertyName: "externalItems", publicName: "externalItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <details
+      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
+    >
+      <summary
+        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
+      >
+        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
 
-const ICON_ERROR_CODES = {
-    NO_ICONS_PROVIDED: 1800,
-    ICON_NOT_FOUND: 1801,
-    INVALID_SVG: 1802,
-    MISSING_XMLNS: 1803,
-    MISSING_DIMENSIONS: 1804,
-    HARDCODED_COLOR: 1805,
-    DUPLICATE_ICON_NAME: 1806,
-};
+        <span style="color: #6b7280">
+          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
+          &nbsp;·&nbsp; {{ items().length }} items
+          @if (hasDrag()) {
+            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+          }
+        </span>
 
-const ICONS_TOKEN = new InjectionToken('ET_ICONS_TOKEN');
-const provideIcons = (...icons) => {
-    const map = {};
-    for (const def of icons) {
-        if (map[def.name]) {
-            throw new RuntimeError(ICON_ERROR_CODES.DUPLICATE_ICON_NAME, `[provideIcons] Icon with name "${def.name}" already exists. Please provide unique icon names.`);
+        @if (issueCount() > 0) {
+          <span style="color: #dc2626; font-weight: 700"
+            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
+          >
         }
-        map[def.name] = def;
-    }
-    return {
-        provide: ICONS_TOKEN,
-        useValue: map,
-    };
-};
 
-const ICON_DIRECTIVE_TOKEN = new InjectionToken('ET_ICON_DIRECTIVE_TOKEN');
-const SVG_COLOR_ATTRIBUTES = ['fill', 'stroke', 'stop-color', 'stop-opacity'];
-class IconDirective {
-    constructor() {
-        this.icons = inject(ICONS_TOKEN, { optional: true });
-        this.sanitizer = inject(DomSanitizer);
-        this.iconNameToUse = input.required({ ...(ngDevMode ? { debugName: "iconNameToUse" } : /* istanbul ignore next */ {}), alias: 'etIcon' });
-        this.allowHardcodedColor = input(false, { ...(ngDevMode ? { debugName: "allowHardcodedColor" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.iconSrc = computed(() => {
-            if (!this.icons) {
-                return null;
-            }
-            const icon = this.icons[this.iconNameToUse()];
-            if (!icon) {
-                throw new RuntimeError(ICON_ERROR_CODES.ICON_NOT_FOUND, `[IconDirective] Icon "${this.iconNameToUse()}" not found. Available icons: ${Object.keys(this.icons).join(', ')}.`);
-            }
-            const svg = icon.data.trim();
-            if (ngDevMode) {
-                if (!svg.includes('<svg')) {
-                    throw new RuntimeError(ICON_ERROR_CODES.INVALID_SVG, `[IconDirective] Icon "${this.iconNameToUse()}" is not a valid SVG. The data must contain an <svg> element.`);
-                }
-                if (!svg.includes('xmlns="http://www.w3.org/2000/svg"')) {
-                    throw new RuntimeError(ICON_ERROR_CODES.MISSING_XMLNS, `[IconDirective] Icon "${this.iconNameToUse()}" is missing xmlns="http://www.w3.org/2000/svg". Add the attribute to the <svg> element.`);
-                }
-                if (!svg.includes('width="100%"') || !svg.includes('height="100%"')) {
-                    throw new RuntimeError(ICON_ERROR_CODES.MISSING_DIMENSIONS, `[IconDirective] Icon "${this.iconNameToUse()}" is missing width="100%" and/or height="100%". Add both attributes to the <svg> element.`);
+        <button
+          (click)="copyJson($event)"
+          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
+        >
+          Copy JSON
+        </button>
+
+        @if (copied()) {
+          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+        }
+      </summary>
+
+      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+        <!-- Breakpoint legend -->
+        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+          @for (bp of breakpoints(); track bp.name) {
+            <span
+              [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
+              [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
+              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
+            >
+          }
+        </div>
+
+        <!-- Layout table -->
+        <table style="border-collapse: collapse; white-space: nowrap">
+          <thead>
+            <tr style="background: #f3f4f6">
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+              @for (bp of breakpoints(); track bp.name) {
+                <th
+                  [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                >
+                  {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
+                </th>
+                @if (hasExternal()) {
+                  <th
+                    [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                  >
+                    {{ bp.name }} ext
+                  </th>
                 }
-                if (!this.allowHardcodedColor()) {
-                    for (const colorAttribute of SVG_COLOR_ATTRIBUTES) {
-                        if (svg.includes(`${colorAttribute}="`) && !svg.includes(`${colorAttribute}="currentColor"`)) {
-                            throw new RuntimeError(ICON_ERROR_CODES.HARDCODED_COLOR, `[IconDirective] Icon "${this.iconNameToUse()}" uses a hardcoded value for "${colorAttribute}". Use currentColor instead, or set [allowHardcodedColor]="true".`);
-                        }
-                    }
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.id) {
+              <tr>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                @for (cell of row.cells; track cell.bp) {
+                  <td
+                    [style.color]="cell.intMissing ? '#dc2626' : '#111'"
+                    [title]="cell.intMissing ? 'MISSING — layout.' + cell.bp + ' undefined in internal state' : ''"
+                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                  >
+                    {{ fmtPos(cell.int) }}
+                  </td>
+                  @if (hasExternal()) {
+                    <td
+                      [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
+                      [title]="cell.mismatch ? 'MISMATCH — ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
+                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    >
+                      {{ fmtPos(cell.ext) }}
+                    </td>
+                  }
                 }
+              </tr>
             }
-            return this.sanitizer.bypassSecurityTrustHtml(svg);
-        }, ...(ngDevMode ? [{ debugName: "iconSrc" }] : /* istanbul ignore next */ []));
-        this.hostClasses = computed(() => `et-icon et-icon--${this.iconNameToUse()}`, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-        if (!this.icons) {
-            throw new RuntimeError(ICON_ERROR_CODES.NO_ICONS_PROVIDED, '[IconDirective] No icons provided. Register icons via provideIcons() in the component or application providers.');
+          </tbody>
+        </table>
+
+        @if (hasExternal()) {
+          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+            int = grid.items() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
+            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
+            <span style="color: #d97706">orange = mismatch</span>
+          </p>
         }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "innerHTML": "iconSrc()", "class": "hostClasses()" }, styleAttribute: "display: flex; align-items: center; justify-content: center;" }, providers: [
-            {
-                provide: ICON_DIRECTIVE_TOKEN,
-                useExisting: IconDirective,
-            },
-        ], ngImport: i0 }); }
+      </div>
+    </details>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: IconDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridDebugComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[etIcon]',
-                    providers: [
-                        {
-                            provide: ICON_DIRECTIVE_TOKEN,
-                            useExisting: IconDirective,
-                        },
-                    ],
-                    host: {
-                        '[innerHTML]': 'iconSrc()',
-                        'aria-hidden': 'true',
-                        '[class]': 'hostClasses()',
-                        style: 'display: flex; align-items: center; justify-content: center;',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { iconNameToUse: [{ type: i0.Input, args: [{ isSignal: true, alias: "etIcon", required: true }] }], allowHardcodedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHardcodedColor", required: false }] }] } });
+                    selector: 'et-grid-debug',
+                    template: `
+    <details
+      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
+    >
+      <summary
+        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
+      >
+        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
 
-// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
-const LOCK_ICON = {
-    name: 'et-lock',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-      <path
-        fill="currentColor"
-        d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 48 0c26.5 0 48 21.5 48 48l0 224c0 26.5-21.5 48-48 48L32 512c-26.5 0-48-21.5-48-48L-16 240c0-26.5 21.5-48 48-48l48 0zm144 184c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z"
-      />
-    </svg>
-  `,
-};
+        <span style="color: #6b7280">
+          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
+          &nbsp;·&nbsp; {{ items().length }} items
+          @if (hasDrag()) {
+            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+          }
+        </span>
 
-const PENCIL_ICON = {
-    name: 'et-pencil',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M4 20l4.2-1 9.3-9.3a1.8 1.8 0 0 0 0-2.5l-.7-.7a1.8 1.8 0 0 0-2.5 0L5 15.8 4 20z"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M12.8 7.2l4 4"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-      />
-    </svg>
-  `,
-};
+        @if (issueCount() > 0) {
+          <span style="color: #dc2626; font-weight: 700"
+            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
+          >
+        }
 
-const PLUS_ICON = {
-    name: 'et-plus',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path
-        d="M12 5v14"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-      />
-      <path
-        d="M5 12h14"
-        stroke="currentColor"
-        stroke-width="1.8"
-        stroke-linecap="round"
-      />
-    </svg>
-  `,
-};
+        <button
+          (click)="copyJson($event)"
+          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
+        >
+          Copy JSON
+        </button>
+
+        @if (copied()) {
+          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+        }
+      </summary>
+
+      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+        <!-- Breakpoint legend -->
+        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+          @for (bp of breakpoints(); track bp.name) {
+            <span
+              [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
+              [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
+              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
+            >
+          }
+        </div>
 
-// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
-const TIMES_ICON = {
-    name: 'et-times',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-      <path
-        fill="currentColor"
-        d="M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"
-      />
-    </svg>
-  `,
-};
+        <!-- Layout table -->
+        <table style="border-collapse: collapse; white-space: nowrap">
+          <thead>
+            <tr style="background: #f3f4f6">
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
+              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+              @for (bp of breakpoints(); track bp.name) {
+                <th
+                  [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                >
+                  {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
+                </th>
+                @if (hasExternal()) {
+                  <th
+                    [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
+                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                  >
+                    {{ bp.name }} ext
+                  </th>
+                }
+              }
+            </tr>
+          </thead>
+          <tbody>
+            @for (row of rows(); track row.id) {
+              <tr>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
+                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                @for (cell of row.cells; track cell.bp) {
+                  <td
+                    [style.color]="cell.intMissing ? '#dc2626' : '#111'"
+                    [title]="cell.intMissing ? 'MISSING — layout.' + cell.bp + ' undefined in internal state' : ''"
+                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                  >
+                    {{ fmtPos(cell.int) }}
+                  </td>
+                  @if (hasExternal()) {
+                    <td
+                      [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
+                      [title]="cell.mismatch ? 'MISMATCH — ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
+                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    >
+                      {{ fmtPos(cell.ext) }}
+                    </td>
+                  }
+                }
+              </tr>
+            }
+          </tbody>
+        </table>
 
-// Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.
-const TRIANGLE_EXCLAMATION_ICON = {
-    name: 'et-triangle-exclamation',
-    data: `
-    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-      <path
-        fill="currentColor"
-        d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S489.3 480 475.1 480H36.9c-14.3 0-27.6-7.7-34.8-20.2s-7-27.6 .2-40.1l216-368C225.6 39.5 238.7 32 252.9 32h3.1zm0 128c-13.3 0-24 10.7-24 24v112c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0-64 0 32 32 0 1 0 64 0z"
-      />
-    </svg>
+        @if (hasExternal()) {
+          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+            int = grid.items() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
+            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
+            <span style="color: #d97706">orange = mismatch</span>
+          </p>
+        }
+      </div>
+    </details>
   `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: true }] }], externalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalItems", required: false }] }] } });
+
+const GRID_ERROR_CODES = {
+    MISSING_GRID: 1900,
+    MISSING_GRID_ITEM: 1901,
+    DUPLICATE_ITEM_ID: 1902,
+    INVALID_LAYOUT_STATE: 1903,
 };
 
-const ICON_IMPORTS = [IconDirective];
+const GridImports = [GridComponent, GridItemComponent, GridDebugComponent];
 
 const NOTIFICATION_ERROR_CODES = {
     ACTION_OUTSIDE_NOTIFICATION: 1700,
@@ -4525,7 +6042,7 @@ const [provideNotificationManagerInstance, injectNotificationManager] = createRo
     const appRef = inject(ApplicationRef);
     const envInjector = inject(EnvironmentInjector);
     const destroyRef = inject(DestroyRef);
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     const notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
     const visibleNotifications = computed(() => {
@@ -6102,7 +7619,7 @@ const DEFAULT_PIP_CHROME_CONFIG = {
 };
 
 const [provideStreamManager, injectStreamManager] = createRootProvider(() => {
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     const container = renderer.createElement('div');
     renderer.addClass(container, 'et-stream-manager');
@@ -6257,7 +7774,7 @@ const [provideStreamManager, injectStreamManager] = createRootProvider(() => {
 }, { name: 'Stream Manager' });
 
 const [providePipManager, injectPipManager] = createRootProvider(() => {
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     const streamManager = injectStreamManager();
     const viewportSize = injectViewportSize();
@@ -6868,7 +8385,7 @@ const PIP_WINDOW_ASPECT_RATIO_TOKEN = new InjectionToken('PIP_WINDOW_ASPECT_RATI
 
 class PipPlayerComponent {
     constructor() {
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.el = inject(ElementRef);
         this.pipCell = inject(PipCellDirective, { optional: true });
         this.entry = input(...(ngDevMode ? [undefined, { debugName: "entry" }] : /* istanbul ignore next */ []));
@@ -7092,7 +8609,7 @@ const createPipWindowPosition = (options) => {
     const { params, titleBarH, size, resizeHandles, dragHandle, forcedTitleBar } = options;
     const el = inject(ElementRef);
     const renderer = injectRenderer();
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const destroyRef = inject(DestroyRef);
     const viewportSize = injectViewportSize();
     const isDragging = computed(() => dragHandle().isDragging(), ...(ngDevMode ? [{ debugName: "isDragging" }] : /* istanbul ignore next */ []));
@@ -7688,7 +9205,7 @@ const [providePipChromeManager, injectPipChromeManager] = createRootProvider(()
     const appRef = inject(ApplicationRef);
     const envInjector = inject(EnvironmentInjector);
     const destroyRef = inject(DestroyRef);
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const renderer = injectRenderer();
     let pipChromeRef = null;
     const destroyPipChrome = () => {
@@ -8269,7 +9786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }], propDecorators: { videoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoId", required: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
 const [, injectStreamScriptLoader] = createRootProvider(() => {
-    const document = inject(DOCUMENT);
+    const document = inject(DOCUMENT$1);
     const cache = new Map();
     const mountedScripts = new Set();
     const renderer = injectRenderer();
@@ -8312,7 +9829,7 @@ const FACEBOOK_PLAYER_TOKEN = new InjectionToken('FACEBOOK_PLAYER_TOKEN');
 class FacebookPlayerDirective {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.params = inject(FacebookPlayerParamsDirective);
         this.el = injectHostElement();
         this.scriptLoader = injectStreamScriptLoader();
@@ -8557,7 +10074,7 @@ const KICK_PLAYER_TOKEN = new InjectionToken('KICK_PLAYER_TOKEN');
 class KickPlayerDirective {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.params = inject(KickPlayerParamsDirective);
         this.el = injectHostElement();
         this.renderer = injectRenderer();
@@ -9186,7 +10703,7 @@ const TWITCH_PLAYER_TOKEN = new InjectionToken('TWITCH_PLAYER_TOKEN');
 class TwitchPlayerDirective {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.params = inject(TwitchPlayerParamsDirective);
         this.el = injectHostElement();
         this.scriptLoader = injectStreamScriptLoader();
@@ -9441,7 +10958,7 @@ const VIMEO_PLAYER_TOKEN = new InjectionToken('VIMEO_PLAYER_TOKEN');
 class VimeoPlayerDirective {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.params = inject(VimeoPlayerParamsDirective);
         this.el = injectHostElement();
         this.scriptLoader = injectStreamScriptLoader();
@@ -9697,7 +11214,7 @@ const waitForYtReady = (win) => {
 class YoutubePlayerDirective {
     constructor() {
         this.platformId = inject(PLATFORM_ID);
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.params = inject(YoutubePlayerParamsDirective);
         this.el = injectHostElement();
         this.scriptLoader = injectStreamScriptLoader();
@@ -11323,7 +12840,7 @@ const createTooltipId = (prefix = 'et-tooltip') => {
 const DEFAULT_TOOLTIP_DELAY = 300;
 class TooltipDirective {
     constructor() {
-        this.document = inject(DOCUMENT);
+        this.document = inject(DOCUMENT$1);
         this.destroyRef = inject(DestroyRef);
         this.elementRef = inject(ElementRef);
         this.colorProvider = inject(COLOR_PROVIDER, { optional: true });
@@ -11538,5 +13055,5 @@ const TOOLTIP_IMPORTS = [TooltipDirective, TooltipComponent];
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDirective, GridItemRef, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_ERROR_CODES, OVERLAY_IMPORTS, OVERLAY_REF, OverlayAnchorDirective, OverlayDirective, OverlaySurfaceDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RadioComponent, RadioGroupComponent, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, createGridAdapter, createNotificationRef, createOverlayRef, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, fromGridPosition, injectFormSupport, injectGridConfig, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, provideFormSupport, provideGridConfig, provideIcons, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlayManager, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, toGridPosition };
+export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BOLD_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDirective, GridItemRef, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_ERROR_CODES, OVERLAY_IMPORTS, OVERLAY_REF, OverlayAnchorDirective, OverlayDirective, OverlaySurfaceDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RICH_TEXT_EDITOR_IMPORTS, RadioComponent, RadioGroupComponent, RichTextEditorComponent, RichTextEditorDirective, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, STRIKETHROUGH_ICON, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, createGridAdapter, createNotificationRef, createOverlayRef, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, fromGridPosition, injectFormSupport, injectGridConfig, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, provideFormSupport, provideGridConfig, provideIcons, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlayManager, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, toGridPosition };
 //# sourceMappingURL=ethlete-components.mjs.map