@ethlete/components 1.0.0-next.70 → 1.0.0-next.72

package/fesm2022/ethlete-components.mjs

@@ -1759,7 +1759,7 @@ class AccordionComponent {
         ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-accordion" }, providers: [provideIcons(CHEVRON_ICON)], hostDirectives: [{ directive: AccordionDirective, inputs: ["isOpen", "isOpen", "isOpenByDefault", "isOpenByDefault", "disabled", "disabled"], outputs: ["isOpenChange", "isOpenChange"] }], ngImport: i0, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"], dependencies: [{ kind: "directive", type: AccordionPanelDirective, selector: "[etAccordionPanel]", exportAs: ["etAccordionPanel"] }, { kind: "directive", type: AccordionTriggerDirective, selector: "[etAccordionTrigger]", exportAs: ["etAccordionTrigger"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AccordionComponent, isStandalone: true, selector: "et-accordion", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-accordion" }, providers: [provideIcons(CHEVRON_ICON)], hostDirectives: [{ directive: AccordionDirective, inputs: ["isOpen", "isOpen", "isOpenByDefault", "isOpenByDefault", "disabled", "disabled"], outputs: ["isOpenChange", "isOpenChange"] }], ngImport: i0, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"], dependencies: [{ kind: "directive", type: AccordionPanelDirective, selector: "[etAccordionPanel]", exportAs: ["etAccordionPanel"] }, { kind: "directive", type: AccordionTriggerDirective, selector: "[etAccordionTrigger]", exportAs: ["etAccordionTrigger"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AccordionComponent, decorators: [{
             type: Component,
@@ -1771,7 +1771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-accordion',
-                    }, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"] }]
+                    }, template: "<div [attr.aria-level]=\"headingLevel()\" class=\"et-accordion-heading\" role=\"heading\">\n  <button class=\"et-accordion-trigger\" etAccordionTrigger type=\"button\">\n    <span class=\"et-accordion-label\">\n      @if (accordion.labelTemplate(); as labelTemplate) {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate.templateRef\" />\n      } @else {\n        {{ label() }}\n      }\n    </span>\n\n    @if (accordion.hintTemplate(); as hintTemplate) {\n      &ngsp;<span class=\"et-accordion-hint\">\n        <ng-container [ngTemplateOutlet]=\"hintTemplate.templateRef\" />\n      </span>\n    }\n\n    <i class=\"et-accordion-chevron\" etIcon=\"et-chevron\"></i>\n  </button>\n</div>\n\n<div class=\"et-accordion-panel\" etAccordionPanel>\n  <div class=\"et-accordion-panel-clip\">\n    <div class=\"et-accordion-panel-body\">\n      <ng-content />\n\n      @if (accordion.contentTemplate(); as contentTemplate) {\n        @if (accordion.hasBeenOpened()) {\n          <ng-container [ngTemplateOutlet]=\"contentTemplate.templateRef\" />\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: ["@layer components{@property --et-accordion-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-accordion-chevron-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-accordion-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-accordion-duration{syntax: \"<time>\"; inherits: true; initial-value: .24s;}@property --et-accordion-color-duration{syntax: \"<time>\"; inherits: true; initial-value: .12s;}.et-accordion{--_et-accordion-border-color: var(--et-surface-border-solid, rgb(128 128 128 / .25));display:block;color:var(--et-surface-color-solid, CanvasText);border-block-end:1px solid var(--_et-accordion-border-color);transition:border-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion:has(.et-accordion-trigger:hover:not([aria-disabled=true])){--_et-accordion-border-color: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 35%, var(--et-surface-border-solid, rgb(128 128 128 / .25)) )}}.et-accordion-heading{display:block}.et-accordion-trigger{--_et-accordion-secondary-color: var(--et-surface-color-muted-solid, GrayText);display:flex;align-items:center;gap:var(--et-accordion-gap);inline-size:100%;padding:var(--et-accordion-padding-block) var(--et-accordion-padding-inline);border:0;border-radius:var(--et-accordion-radius);background:transparent;color:inherit;font:inherit;font-weight:500;text-align:start;cursor:pointer;transition:background-color var(--et-accordion-color-duration) ease}@media(hover:hover){.et-accordion-trigger:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 7%,transparent)}.et-accordion-trigger:hover:not([aria-disabled=true]){--_et-accordion-secondary-color: var(--et-surface-color-solid, CanvasText)}}.et-accordion-trigger:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 14%,transparent)}.et-accordion-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-accordion-trigger:where([aria-disabled=true]){color:var(--et-surface-color-muted-solid, GrayText);cursor:default}.et-accordion-trigger:where([aria-disabled=true]):hover,.et-accordion-trigger:where([aria-disabled=true]):active{background:transparent}.et-accordion-trigger .et-accordion-label{flex:1;min-inline-size:0}.et-accordion-trigger .et-accordion-hint{flex:none;color:var(--_et-accordion-secondary-color);font-weight:400;transition:color var(--et-accordion-color-duration) ease}.et-accordion-trigger .et-accordion-chevron{flex:none;inline-size:var(--et-accordion-chevron-size);block-size:var(--et-accordion-chevron-size);color:var(--_et-accordion-secondary-color);rotate:180deg;transition:rotate var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),color var(--et-accordion-color-duration) ease}.et-accordion-trigger[aria-expanded=true] .et-accordion-chevron{rotate:0deg}.et-accordion-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear var(--et-accordion-duration)}.et-accordion-panel:where([data-open]){grid-template-rows:1fr;visibility:visible;transition:grid-template-rows var(--et-accordion-duration) cubic-bezier(.25,0,.1,1),visibility 0s linear 0s}.et-accordion-panel-clip{min-block-size:0;overflow:hidden}.et-accordion-panel-body{padding-block-end:var(--et-accordion-padding-block);padding-inline:var(--et-accordion-padding-inline)}@media(prefers-reduced-motion:reduce){.et-accordion-panel,.et-accordion-panel:where([data-open]){transition:none}.et-accordion-trigger .et-accordion-chevron{transition:color var(--et-accordion-color-duration) ease}}}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
 
 /** The accordion, its group, the slot templates, and the headless directives to build your own. */
@@ -2035,7 +2035,7 @@ class BadgeComponent {
       </div>
     }
 
-    <ng-content />
+    <span class="et-badge-label"><ng-content /></span>
 
     @if (iconAlignment() === 'end') {
       <div class="et-badge-icon">
@@ -2046,7 +2046,7 @@ class BadgeComponent {
     <ng-template #iconTpl>
       <ng-content select="[etIcon]" />
     </ng-template>
-  `, isInline: true, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-label{text-box:trim-both cap alphabetic}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
@@ -2057,7 +2057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       </div>
     }
 
-    <ng-content />
+    <span class="et-badge-label"><ng-content /></span>
 
     @if (iconAlignment() === 'end') {
       <div class="et-badge-icon">
@@ -2078,7 +2078,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.data-variant]': 'variant()',
                         '[attr.data-size]': 'size()',
                         '[attr.data-icon-alignment]': 'iconAlignment()',
-                    }, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\n"] }]
+                    }, styles: ["@layer components{@property --et-badge-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-badge-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-badge-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-badge-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-badge-font-size{syntax: \"<length>\"; inherits: true; initial-value: 11px;}@property --et-badge-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}.et-badge{--_et-badge-background: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));--_et-badge-color: var(--et-theme-color-ink-solid);--_et-badge-border-color: transparent;display:inline-flex;align-self:start;justify-self:start;align-items:center;justify-content:center;gap:var(--et-badge-gap);padding-inline:var(--et-badge-padding-inline);min-block-size:var(--et-badge-min-block-size);border-radius:var(--et-badge-border-radius);font-size:var(--et-badge-font-size);font-weight:var(--et-badge-font-weight);line-height:1.4;box-sizing:border-box;max-inline-size:100%;background:var(--_et-badge-background);color:var(--_et-badge-color);border:1px solid var(--_et-badge-border-color);white-space:nowrap;-webkit-user-select:none;user-select:none}.et-badge:where([data-variant=filled]){--et-theme-color-primary-opacity: 1;--_et-badge-color: var(--et-theme-color-on-primary);--_et-badge-border-color: transparent}.et-badge:where([data-variant=tonal]){--et-theme-color-primary-opacity: .16;--_et-badge-border-color: transparent}.et-badge:where([data-variant=outline]){--et-theme-color-primary-opacity: 0;--_et-badge-border-color: var(--et-theme-color-ink-solid)}.et-badge:where([data-size=sm]){--et-badge-gap: 3px;--et-badge-padding-inline: 6px;--et-badge-min-block-size: 16px;--et-badge-font-size: 10px}.et-badge:where([data-size=lg]){--et-badge-gap: 5px;--et-badge-padding-inline: 10px;--et-badge-min-block-size: 24px;--et-badge-font-size: 12px}.et-badge .et-badge-label{text-box:trim-both cap alphabetic}.et-badge .et-badge-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.et-badge .et-badge-icon:empty{display:none}.et-badge .et-badge-icon .et-icon{inline-size:1em;block-size:1em}}\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 }] }] } });
 
 const BADGE_IMPORTS = [BadgeComponent];
@@ -2434,21 +2434,23 @@ class SpinnerComponent {
         />
       </svg>
     } @else {
-      <div class="et-spinner-indeterminate-container" aria-hidden="true">
-        <div class="et-spinner-layer">
-          <div class="et-spinner-circle-clipper et-spinner-circle-left">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-gap-patch">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-circle-clipper et-spinner-circle-right">
-            <ng-container [ngTemplateOutlet]="circle" />
+      <div class="et-spinner-indeterminate" animate.leave="et-spinner-indeterminate--leave">
+        <div class="et-spinner-indeterminate-container" aria-hidden="true">
+          <div class="et-spinner-layer">
+            <div class="et-spinner-circle-clipper et-spinner-circle-left">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-gap-patch">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-circle-clipper et-spinner-circle-right">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
           </div>
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate--leave{opacity:0;transition:opacity .15s ease}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{transition:opacity .15s ease}@starting-style{.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{opacity:0}}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
@@ -2510,16 +2512,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         />
       </svg>
     } @else {
-      <div class="et-spinner-indeterminate-container" aria-hidden="true">
-        <div class="et-spinner-layer">
-          <div class="et-spinner-circle-clipper et-spinner-circle-left">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-gap-patch">
-            <ng-container [ngTemplateOutlet]="circle" />
-          </div>
-          <div class="et-spinner-circle-clipper et-spinner-circle-right">
-            <ng-container [ngTemplateOutlet]="circle" />
+      <div class="et-spinner-indeterminate" animate.leave="et-spinner-indeterminate--leave">
+        <div class="et-spinner-indeterminate-container" aria-hidden="true">
+          <div class="et-spinner-layer">
+            <div class="et-spinner-circle-clipper et-spinner-circle-left">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-gap-patch">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
+            <div class="et-spinner-circle-clipper et-spinner-circle-right">
+              <ng-container [ngTemplateOutlet]="circle" />
+            </div>
           </div>
         </div>
       </div>
@@ -2540,7 +2544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.aria-valuenow]': 'determinate() ? clampedValue() : null',
                         '[attr.aria-valuemin]': 'determinate() ? 0 : null',
                         '[attr.aria-valuemax]': 'determinate() ? 100 : null',
-                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
+                    }, styles: ["@layer components{@property --et-spinner-size{syntax: \"<length>\"; inherits: false; initial-value: 18px;}@property --et-spinner-stroke-width{syntax: \"<length>\"; inherits: false; initial-value: 2.25px;}@property --et-spinner-color{syntax: \"<color>\"; inherits: true; initial-value: currentColor;}@property --et-spinner-duration{syntax: \"<time>\"; inherits: true; initial-value: 1333ms;}@keyframes et-spinner-rotate{to{transform:rotate(360deg)}}@keyframes et-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(1080deg)}}@keyframes et-spinner-left-spin{0%{transform:rotate(260deg)}50%{transform:rotate(130deg)}to{transform:rotate(260deg)}}@keyframes et-spinner-right-spin{0%{transform:rotate(-260deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-260deg)}}.et-spinner{position:relative;display:inline-block;width:var(--et-spinner-size);height:var(--et-spinner-size);color:var(--et-spinner-color);direction:ltr;vertical-align:middle;line-height:0;overflow:hidden}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-indeterminate,.et-spinner .et-spinner-indeterminate-container,.et-spinner .et-spinner-layer,.et-spinner .et-spinner-circle-graphic{position:absolute;inset:0;width:100%;height:100%}.et-spinner .et-spinner-track-container{transform:rotate(-90deg)}.et-spinner .et-spinner-track-graphic,.et-spinner .et-spinner-circle-graphic{fill:none}.et-spinner .et-spinner-track-circle,.et-spinner .et-spinner-circle-graphic circle{fill:none;stroke:currentColor}.et-spinner .et-spinner-track-circle{stroke:var(--et-spinner-track-color, color-mix(in srgb, currentColor 24%, transparent));stroke-linecap:round}.et-spinner .et-spinner-circle-graphic circle{stroke-linecap:round;stroke-linejoin:round}.et-spinner .et-spinner-indeterminate--leave{opacity:0;transition:opacity .15s ease}.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{transition:opacity .15s ease}@starting-style{.et-spinner .et-spinner-track-container,.et-spinner .et-spinner-determinate-graphic{opacity:0}}.et-spinner .et-spinner-indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;animation:et-spinner-rotate calc(var(--et-spinner-duration) * 1568 / 1333) linear infinite}.et-spinner .et-spinner-layer{animation:et-spinner-layer-rotate calc(var(--et-spinner-duration) * 4) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.et-spinner .et-spinner-gap-patch .et-spinner-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.et-spinner .et-spinner-circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.et-spinner .et-spinner-circle-clipper .et-spinner-circle-graphic{width:200%}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{left:-100%}.et-spinner .et-spinner-circle-left .et-spinner-circle-graphic{animation:et-spinner-left-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-circle-right .et-spinner-circle-graphic{animation:et-spinner-right-spin var(--et-spinner-duration) cubic-bezier(.4,0,.2,1) infinite both}.et-spinner .et-spinner-determinate-graphic{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);fill:none}.et-spinner .et-spinner-determinate-circle{fill:none;stroke:currentColor;stroke-linecap:round;transition:stroke-dashoffset .2s linear}.et-spinner:where(.et-spinner--themed){--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}}\n"] }]
         }], propDecorators: { diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 const LOADER_IMPORTS = [SpinnerComponent, ProgressBarComponent];
@@ -2774,8 +2778,17 @@ class QueryButtonDirective {
         this.query = input.required({ ...(ngDevMode ? { debugName: "query" } : /* istanbul ignore next */ {}), alias: 'etQueryButton' });
         /** Whether the spinner shows the query's progress percentage when it reports one. */
         this.showProgress = input(true, { ...(ngDevMode ? { debugName: "showProgress" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.state = computed(() => readQueryButtonSource(this.query()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        // Never falls back within one run: after the upload, a download restarts at 0 or reports no length.
+        this.state = linkedSignal({ ...(ngDevMode ? { debugName: "state" } : /* istanbul ignore next */ {}), source: () => readQueryButtonSource(this.query()),
+            computation: (state, previous) => {
+                if (!state.loading)
+                    return IDLE_STATE;
+                const reported = state.progress !== null && Number.isFinite(state.progress) ? state.progress : null;
+                const held = previous?.value.loading ? previous.value.progress : null;
+                if (held === null || reported === null)
+                    return { loading: true, progress: reported ?? held };
+                return { loading: true, progress: Math.max(held, reported) };
+            } });
         this.loading = computed(() => this.state().loading, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.progress = computed(() => (this.showProgress() ? this.state().progress : null), /* @ts-ignore */
@@ -2896,6 +2909,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const MENU_TRIGGER_ROOT_ALIGNMENT = new InjectionToken('MENU_TRIGGER_ROOT_ALIGNMENT');
+
 class SplitButtonTriggerDirective {
     constructor() {
         this.splitButton = inject(SplitButtonDirective, { optional: true });
@@ -2910,13 +2925,14 @@ class SplitButtonTriggerDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonTriggerDirective, isStandalone: true, selector: "[etSplitButtonTrigger]", host: { classAttribute: "et-split-button-trigger" }, exportAs: ["etSplitButtonTrigger"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonTriggerDirective, isStandalone: true, selector: "[etSplitButtonTrigger]", host: { classAttribute: "et-split-button-trigger" }, providers: [{ provide: MENU_TRIGGER_ROOT_ALIGNMENT, useValue: 'end' }], exportAs: ["etSplitButtonTrigger"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[etSplitButtonTrigger]',
                     exportAs: 'etSplitButtonTrigger',
+                    providers: [{ provide: MENU_TRIGGER_ROOT_ALIGNMENT, useValue: 'end' }],
                     host: {
                         class: 'et-split-button-trigger',
                     },
@@ -6816,13 +6832,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 
 class SplitButtonComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SplitButtonComponent, isStandalone: true, selector: "et-split-button", host: { classAttribute: "et-split-button" }, hostDirectives: [{ directive: SplitButtonDirective }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}.et-split-button .et-split-button-trigger[aria-expanded=true]{--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));z-index:1}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=filled]){--et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta))}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=outline],[data-variant=transparent]){--et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta)}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=tonal]){--et-theme-color-primary-opacity: calc(.16 + var(--et-button-variant-opacity-hover-delta))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-split-button', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, hostDirectives: [SplitButtonDirective], host: {
                         class: 'et-split-button',
-                    }, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}}\n"] }]
+                    }, styles: ["@layer components{@property --et-split-button-divider-color{syntax: \"*\"; inherits: true;}.et-split-button{display:inline-flex;align-items:stretch}.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger{position:relative}:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):focus-visible{z-index:1}@media(hover:hover){:is(.et-split-button .et-split-button-action,.et-split-button .et-split-button-trigger):hover{z-index:1}}.et-split-button .et-split-button-action{border-start-end-radius:0;border-end-end-radius:0}.et-split-button .et-split-button-trigger{height:auto;border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--et-button-border-radius);border-end-end-radius:var(--et-button-border-radius)}.et-split-button .et-split-button-trigger:where([data-size=xs]){--et-button-border-radius: .3rem}.et-split-button .et-split-button-trigger:where([data-size=sm]),.et-split-button .et-split-button-trigger:where([data-size=md]){--et-button-border-radius: .4rem}.et-split-button .et-split-button-trigger:where([data-size=lg]){--et-button-border-radius: .6rem}.et-split-button .et-split-button-trigger:where([data-size=xl]){--et-button-border-radius: .8rem}.et-split-button .et-split-button-trigger:not([data-variant=outline]){border-inline-start:var(--et-button-border-width, .1rem) solid var(--et-split-button-divider-color, color-mix(in srgb, currentColor 32%, transparent))}.et-split-button .et-split-button-trigger:where([data-variant=outline]){margin-inline-start:calc(var(--et-button-border-width, .1rem) * -1)}.et-split-button .et-icon-button.et-split-button-trigger:where([data-variant=filled]):where([disabled],[aria-disabled=true]){opacity:1}.et-split-button .et-split-button-trigger[aria-expanded=true]{--et-theme-color-primary-rgb: var(--et-color-primary-hover, var(--et-color-primary));--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-on-primary-rgb: var(--et-color-on-primary-hover, var(--et-color-on-primary));--et-theme-color-on-primary-solid: rgb(var(--et-theme-color-on-primary-rgb));--et-theme-color-ink-rgb: var( --et-color-primary-ink-hover, var(--et-color-primary-ink, var(--et-color-primary-hover, var(--et-color-primary))) );--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));z-index:1}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=filled]){--et-theme-color-primary-opacity: calc(1 - var(--et-button-variant-opacity-hover-delta))}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=outline],[data-variant=transparent]){--et-theme-color-primary-opacity: var(--et-button-variant-opacity-hover-delta)}.et-split-button .et-split-button-trigger[aria-expanded=true]:where([data-variant=tonal]){--et-theme-color-primary-opacity: calc(.16 + var(--et-button-variant-opacity-hover-delta))}}\n"] }]
         }] });
 
 class TextButtonComponent {
@@ -17220,7 +17236,7 @@ class CarouselComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CarouselComponent, isStandalone: true, selector: "et-carousel", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-carousel--can-animate": "canAnimate.state()" }, classAttribute: "et-carousel" }, providers: [provideIcons(CHEVRON_ICON, PLAY_ICON, PAUSE_ICON)], viewQueries: [{ propertyName: "track", first: true, predicate: ScrollableComponent, descendants: true, read: ScrollableDirective, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "labels", "labels", "slideAlign", "slideAlign", "transition", "transition", "transitionDriver", "transitionDriver", "activeIndex", "activeIndex"], outputs: ["activeIndexChange", "activeIndexChange"] }, { directive: CarouselAutoplayDirective, inputs: ["autoplayTime", "autoplayTime", "pauseOnHover", "pauseOnHover", "pauseOnFocus", "pauseOnFocus", "pauseOnOffScreen", "pauseOnOffScreen", "playOnInit", "playOnInit"] }], ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: CarouselItemDirective, selector: "[etCarouselItem]", inputs: ["autoplayTime", "isClone"], exportAs: ["etCarouselItem"] }, { kind: "directive", type: CarouselNextDirective, selector: "[etCarouselNext]", exportAs: ["etCarouselNext"] }, { kind: "directive", type: CarouselPlayToggleDirective, selector: "[etCarouselPlayToggle]", exportAs: ["etCarouselPlayToggle"] }, { kind: "directive", type: CarouselPreviousDirective, selector: "[etCarouselPrevious]", exportAs: ["etCarouselPrevious"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["focusRingDisabled"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["etScrollableDrag"] }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["etScrollableSnap", "snapOrigin"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: CarouselComponent, isStandalone: true, selector: "et-carousel", inputs: { itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, autoplay: { classPropertyName: "autoplay", publicName: "autoplay", isSignal: true, isRequired: false, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-carousel--can-animate": "canAnimate.state()" }, classAttribute: "et-carousel" }, providers: [provideIcons(CHEVRON_ICON, PLAY_ICON, PAUSE_ICON)], viewQueries: [{ propertyName: "track", first: true, predicate: ScrollableComponent, descendants: true, read: ScrollableDirective, isSignal: true }], hostDirectives: [{ directive: CarouselDirective, inputs: ["loop", "loop", "labels", "labels", "slideAlign", "slideAlign", "transition", "transition", "transitionDriver", "transitionDriver", "activeIndex", "activeIndex"], outputs: ["activeIndexChange", "activeIndexChange"] }, { directive: CarouselAutoplayDirective, inputs: ["autoplayTime", "autoplayTime", "pauseOnHover", "pauseOnHover", "pauseOnFocus", "pauseOnFocus", "pauseOnOffScreen", "pauseOnOffScreen", "playOnInit", "playOnInit"] }], ngImport: i0, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-slide-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel-track .et-scrollable-container{gap:var(--et-carousel-slide-gap)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: CarouselItemDirective, selector: "[etCarouselItem]", inputs: ["autoplayTime", "isClone"], exportAs: ["etCarouselItem"] }, { kind: "directive", type: CarouselNextDirective, selector: "[etCarouselNext]", exportAs: ["etCarouselNext"] }, { kind: "directive", type: CarouselPlayToggleDirective, selector: "[etCarouselPlayToggle]", exportAs: ["etCarouselPlayToggle"] }, { kind: "directive", type: CarouselPreviousDirective, selector: "[etCarouselPrevious]", exportAs: ["etCarouselPrevious"] }, { kind: "directive", type: FocusRingDirective, selector: "[etFocusRing]", inputs: ["focusRingDisabled"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollableComponent, selector: "et-scrollable", inputs: ["renderMasks", "maskVariant", "showLoadingTemplate", "loadingTemplatePosition", "scrollableRole", "scrollableClass"], outputs: ["intersectionChange", "scrollStateChange"] }, { kind: "directive", type: ScrollableDragDirective, selector: "[etScrollableDrag]", inputs: ["etScrollableDrag"] }, { kind: "directive", type: ScrollableSnapDirective, selector: "[etScrollableSnap]", inputs: ["etScrollableSnap", "snapOrigin"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: CarouselComponent, decorators: [{
             type: Component,
@@ -17248,7 +17264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], host: {
                         class: 'et-carousel',
                         '[class.et-carousel--can-animate]': 'canAnimate.state()',
-                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"] }]
+                    }, template: "<et-scrollable\n  [itemSize]=\"itemSize()\"\n  [snapOrigin]=\"carousel.slideAlign()\"\n  class=\"et-carousel-track\"\n  renderMasks=\"false\"\n  etScrollableDrag\n  etScrollableSnap\n  scrollMode=\"element\"\n>\n  @for (view of slideViews(); track view.key) {\n    <div [isClone]=\"view.isClone\" [autoplayTime]=\"view.autoplayTime\" etCarouselItem>\n      <div class=\"et-carousel-slide-content\">\n        <ng-container *ngTemplateOutlet=\"slideTemplate(); context: view.context\" />\n      </div>\n    </div>\n  }\n</et-scrollable>\n\n@if (showControls() || showDots() || isAutoplayEnabled()) {\n  <div class=\"et-carousel-controls\">\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselPrevious size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--previous\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n\n    @if (showDots()) {\n      <div class=\"et-carousel-dots\">\n        @for (dot of dots(); track dot.index) {\n          <button\n            [attr.aria-label]=\"dot.label\"\n            [attr.aria-current]=\"dot.isActive ? 'true' : null\"\n            [attr.data-active]=\"dot.isActive ? '' : null\"\n            [attr.data-counting]=\"dot.isActive && isAutoplayRunning() ? '' : null\"\n            (click)=\"carousel.goTo(dot.index)\"\n            class=\"et-carousel-dot\"\n            etFocusRing\n            type=\"button\"\n          >\n            @if (isAutoplayEnabled()) {\n              <span\n                [style.--_et-carousel-autoplay-duration.ms]=\"autoplayDuration()\"\n                class=\"et-carousel-dot-progress\"\n                aria-hidden=\"true\"\n              >\n                <span class=\"et-carousel-dot-progress-half\"></span>\n                <span class=\"et-carousel-dot-progress-half\"></span>\n              </span>\n            }\n          </button>\n        }\n      </div>\n    }\n\n    @if (isAutoplayEnabled()) {\n      <button\n        [attr.data-playing]=\"isAutoplayRunning() ? '' : null\"\n        class=\"et-carousel-control et-carousel-play-toggle\"\n        et-icon-button\n        etCarouselPlayToggle\n        size=\"sm\"\n        variant=\"transparent\"\n      >\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-play\" aria-hidden=\"true\"></i>\n        <i class=\"et-carousel-control-icon et-carousel-play-toggle-icon\" etIcon=\"et-pause\" aria-hidden=\"true\"></i>\n      </button>\n    }\n\n    @if (showControls()) {\n      <button class=\"et-carousel-control\" et-icon-button etCarouselNext size=\"sm\" variant=\"transparent\">\n        <i class=\"et-carousel-control-icon et-carousel-control-icon--next\" etIcon=\"et-chevron\"></i>\n      </button>\n    }\n  </div>\n}\n", styles: ["@layer components{@property --et-carousel-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-carousel-slide-gap{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-carousel-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-carousel-dot-target-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-carousel-edge-fade{syntax: \"<length>\"; inherits: true; initial-value: 32px;}.et-carousel{display:flex;flex-direction:column;gap:var(--et-carousel-gap)}.et-carousel-track{display:block}.et-carousel-track .et-scrollable-container{gap:var(--et-carousel-slide-gap)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]){-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel:where([data-slide-align=center]) .et-carousel-track:not([item-size=full]):where([direction=vertical]){-webkit-mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,black var(--et-carousel-edge-fade),black calc(100% - var(--et-carousel-edge-fade)),transparent 100%)}.et-carousel-slide-content{display:block;block-size:100%}.et-carousel-controls{display:flex;align-items:center;justify-content:center;gap:4px}.et-carousel-control:where([aria-disabled=true]){opacity:.4;cursor:default}.et-carousel-control-icon{inline-size:14px;block-size:14px}.et-carousel-control-icon:where(.et-carousel-control-icon--previous){rotate:-90deg}.et-carousel-control-icon:where(.et-carousel-control-icon--next){rotate:90deg}.et-carousel-dots{display:flex;align-items:center;justify-content:center}.et-carousel-dot{display:grid;place-items:center;inline-size:var(--et-carousel-dot-target-size);block-size:var(--et-carousel-dot-target-size);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.et-carousel-dot:before{content:\"\";inline-size:var(--et-carousel-dot-size);block-size:var(--et-carousel-dot-size);border-radius:50%;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent)}.et-carousel-dot:hover:before{background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 55%,transparent)}.et-carousel-dot:where([data-active]):before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel-dot:where([data-active]):hover:before{background:var(--et-theme-color-primary-solid, currentColor)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot:before{transition:background-color .16s var(--ease-3, ease-out),scale .22s var(--ease-3, ease-out)}.et-carousel:where(.et-carousel--can-animate) .et-carousel-dot{transition:outline-color .16s var(--ease-3, ease-out)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { itemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSize", required: false }] }], autoplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoplay", required: false }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: false }] }], showDots: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDots", required: false }] }], track: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ScrollableComponent), { ...{ read: ScrollableDirective }, isSignal: true }] }] } });
 
 /** The carousel, its slide template, and the headless directives to build your own out of a scrollable. */
@@ -21059,7 +21075,7 @@ class ChipComponent {
         this.labelId = createChipLabelId();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChipComponent, isStandalone: true, selector: "et-chip", host: { classAttribute: "et-chip" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: ChipDirective, inputs: ["disabled", "disabled", "removable", "removable"], outputs: ["remove", "remove"] }], ngImport: i0, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"], dependencies: [{ kind: "directive", type: ChipRemoveDirective, selector: "[etChipRemove]", inputs: ["removeLabel"], exportAs: ["etChipRemove"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChipComponent, isStandalone: true, selector: "et-chip", host: { classAttribute: "et-chip" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: ChipDirective, inputs: ["disabled", "disabled", "removable", "removable"], outputs: ["remove", "remove"] }], ngImport: i0, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:clip;overflow-clip-margin:.3em;text-overflow:ellipsis;text-box:trim-both cap alphabetic;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"], dependencies: [{ kind: "directive", type: ChipRemoveDirective, selector: "[etChipRemove]", inputs: ["removeLabel"], exportAs: ["etChipRemove"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
@@ -21071,7 +21087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-chip',
-                    }, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"] }]
+                    }, template: "<span [id]=\"labelId\" class=\"et-chip-label\">\n  <ng-content />\n</span>\n\n@if (chip.removable()) {\n  <button [attr.aria-describedby]=\"labelId\" class=\"et-chip-remove-button\" etChipRemove>\n    <i etIcon=\"et-times\"></i>\n  </button>\n}\n", styles: ["@layer components{@property --et-chip-gap{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-chip-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-chip-min-block-size{syntax: \"<length>\"; inherits: true; initial-value: 24px;}@property --et-chip-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 999px;}@property --et-chip-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-chip-remove-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-chip-opacity-disabled{syntax: \"<number>\"; inherits: true; initial-value: .4;}.et-chip{display:inline-flex;align-items:center;gap:var(--et-chip-gap);padding-inline:var(--et-chip-padding-inline);min-block-size:var(--et-chip-min-block-size);border-radius:var(--et-chip-border-radius);font-size:var(--et-chip-font-size);line-height:1.4;max-inline-size:100%;box-sizing:border-box;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);color:var(--et-surface-color-solid, currentColor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.et-chip:where([data-disabled]){opacity:var(--et-chip-opacity-disabled);pointer-events:none}.et-chip:where([role=checkbox],[role=radio]){cursor:pointer;transition:background .12s ease,color .12s ease}@media(hover:hover){.et-chip:where([role=checkbox],[role=radio]):hover:not([aria-checked=true]):not([data-readonly]){background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 22%,transparent)}}.et-chip:where([role=checkbox],[role=radio]):focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip:where([role=checkbox],[role=radio]):where([data-readonly]){cursor:default}.et-chip:where([aria-checked=true]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 16%,transparent);color:var(--et-theme-color-ink-solid, currentColor)}@media(hover:hover){.et-chip:where([aria-checked=true]):hover:not([data-readonly]){background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 24%,transparent)}}.et-chip:where([data-removable]){padding-inline-end:calc(var(--et-chip-padding-inline) / 2)}.et-chip .et-chip-label{overflow:clip;overflow-clip-margin:.3em;text-overflow:ellipsis;text-box:trim-both cap alphabetic;white-space:nowrap;min-inline-size:0}.et-chip .et-chip-remove-button{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-chip-remove-size);block-size:var(--et-chip-remove-size);border-radius:50%;border:none;padding:0;margin:0;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;appearance:none}@media(hover:hover){.et-chip .et-chip-remove-button:hover{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 20%,transparent);color:var(--et-surface-color-solid, currentColor)}}.et-chip .et-chip-remove-button:active{background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 28%,transparent)}.et-chip .et-chip-remove-button:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:1px}.et-chip .et-chip-remove-button .et-icon{inline-size:calc(var(--et-chip-remove-size) - 6px);block-size:calc(var(--et-chip-remove-size) - 6px)}}\n"] }]
         }] });
 
 const CHIP_IMPORTS = [ChipComponent, ChipDirective, ChipRemoveDirective];
@@ -22988,7 +23004,24 @@ class FloatingActionDirective {
      */
     scrollToTop(options) {
         const target = this.top()?.elementRef.nativeElement ?? this.elementRef.nativeElement;
-        target.scrollIntoView(options ?? { behavior: 'smooth', block: 'start' });
+        const { behavior = 'smooth', block = 'start' } = options ?? {};
+        const container = findScrollContainer(target);
+        const isDocument = container === target.ownerDocument.scrollingElement || container === target.ownerDocument.documentElement;
+        const containerTop = isDocument ? 0 : container.getBoundingClientRect().top + container.clientTop;
+        const viewport = container.clientHeight;
+        const { top: targetTop, height } = target.getBoundingClientRect();
+        const start = targetTop - containerTop + container.scrollTop;
+        const offsets = {
+            start,
+            center: start - (viewport - height) / 2,
+            end: start - (viewport - height),
+            nearest: targetTop < containerTop
+                ? start
+                : targetTop + height > containerTop + viewport
+                    ? start - (viewport - height)
+                    : container.scrollTop,
+        };
+        container.scrollTo({ top: Math.max(0, offsets[block]), behavior });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FloatingActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: FloatingActionDirective, isStandalone: true, selector: "[etFloatingAction]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "state()" }, classAttribute: "et-floating-action" }, providers: [{ provide: FLOATING_ACTION_TOKEN, useExisting: FloatingActionDirective }], exportAs: ["etFloatingAction"], ngImport: i0 }); }
@@ -23005,6 +23038,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+const findScrollContainer = (target) => {
+    for (let el = target.parentElement; el; el = el.parentElement) {
+        const { overflowY } = getComputedStyle(el);
+        if ((overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+            el.scrollHeight > el.clientHeight) {
+            return el;
+        }
+    }
+    return target.ownerDocument.scrollingElement ?? target.ownerDocument.documentElement;
+};
 
 const FLOATING_ACTION_IMPORTS = [
     FloatingActionDirective,
@@ -42107,6 +42150,9 @@ class MenuDirective {
         this.depth = (this.parent?.depth ?? -1) + 1;
         this.isRoot = this.parent === null;
         /** @internal */
+        this.rootAlignment = signal('start', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rootAlignment" }] : /* istanbul ignore next */ []));
+        /** @internal */
         this.registeredTrigger = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registeredTrigger" }] : /* istanbul ignore next */ []));
         /** @internal */
@@ -42738,7 +42784,7 @@ class MenuDirective {
             return placement;
         }
         if (this.isRoot && !this.anchorPoint()) {
-            return 'bottom-start';
+            return `bottom-${this.rootAlignment()}`;
         }
         return `${this.inlineEndSide()}-start`;
     }
@@ -42748,7 +42794,9 @@ class MenuDirective {
             return fallbackPlacements;
         }
         if (this.isRoot && !this.anchorPoint()) {
-            return ['bottom-end', 'top-start', 'top-end'];
+            return this.rootAlignment() === 'end'
+                ? ['bottom-start', 'top-end', 'top-start']
+                : ['bottom-end', 'top-start', 'top-end'];
         }
         const end = this.inlineEndSide();
         const start = end === 'right' ? 'left' : 'right';
@@ -42905,12 +42953,16 @@ class MenuTriggerDirective {
         this.menu = inject(MenuDirective, { optional: true });
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
+        this.rootAlignment = inject(MENU_TRIGGER_ROOT_ALIGNMENT, { optional: true, self: true });
         /** @internal The same-element menu item this trigger is combined with, if any. Set by the item. */
         this.hostItem = null;
         const element = this.elementRef.nativeElement;
         if (!element.id) {
             element.id = createComponentId('et-menu-trigger');
         }
+        if (this.rootAlignment) {
+            this.menu?.rootAlignment.set(this.rootAlignment);
+        }
         this.menu?.registeredTrigger.set(this);
         this.destroyRef.onDestroy(() => {
             this.menu?.unregisterTrigger(this);
@@ -57132,6 +57184,7 @@ class NotificationDirective {
         ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         this.ariaRole = computed(() => (this.status() === 'error' ? 'alert' : 'status'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaRole" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => this.animatedLifecycle?.enter());
         toObservable(computed(() => this.entry().isDismissing))
             .pipe(filter(Boolean), take(1), switchMap(() => {
             const lifecycle = this.animatedLifecycle;
@@ -57901,7 +57954,6 @@ const createNotificationRef = (config, { managerConfig, beforeChange }) => {
 class NotificationComponent {
     constructor() {
         this.notification = inject(NotificationDirective);
-        this.animatedLifecycle = inject(ANIMATED_LIFECYCLE_TOKEN);
         this.provideTheme = inject(ProvideColorDirective);
         this.provideSurface = inject(ProvideSurfaceDirective);
         this.managerConfig = injectNotificationManagerConfig();
@@ -57969,9 +58021,6 @@ class NotificationComponent {
                 this.provideSurface.clearForcedSurface();
             });
         });
-        afterNextRender(() => {
-            this.animatedLifecycle.enter();
-        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NotificationComponent, isStandalone: true, selector: "et-notification", host: { listeners: { "keydown.escape": "notification.ref().dismiss()", "mouseenter": "notification.ref().pauseTimer(\"hover\")", "mouseleave": "notification.ref().resumeTimer(\"hover\")", "focusin": "notification.ref().pauseTimer(\"focus\")", "focusout": "notification.ref().resumeTimer(\"focus\")" }, classAttribute: "et-notification" }, providers: [provideIcons(TIMES_ICON, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: NotificationDirective, inputs: ["ref", "ref"] }, { directive: NotificationSwipeToDismissDirective }, { directive: i1.AnimatedLifecycleDirective }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }, { directive: i1.ProvideSurfaceDirective, inputs: ["etProvideSurface", "surface"] }], ngImport: i0, template: "<div class=\"et-notification-content\">\n  <div class=\"et-notification-header\">\n    @if (statusIcon(); as icon) {\n      <i [etIcon]=\"icon\" class=\"et-notification-icon\"></i>\n    } @else if (notification.isLoading()) {\n      <et-spinner class=\"et-notification-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n    }\n\n    <span class=\"et-notification-title\">{{ notification.title() }}</span>\n\n    <button\n      [color]=\"controlsColor()\"\n      [attr.aria-label]=\"dismissLabel()\"\n      class=\"et-notification-dismiss-btn\"\n      et-icon-button\n      etNotificationDismiss\n      size=\"xs\"\n      type=\"button\"\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </div>\n\n  @if (notification.message()) {\n    <p class=\"et-notification-message\">{{ notification.message() }}</p>\n  }\n\n  @if (notification.progress() !== undefined) {\n    <et-progress-bar [value]=\"notification.progress()\" class=\"et-notification-progress-bar\" />\n  }\n\n  @if (notification.action() || notification.secondaryAction()) {\n    <div class=\"et-notification-footer\">\n      @if (notification.action(); as action) {\n        <button et-text-button etNotificationAction size=\"xs\" type=\"button\">{{ action.label }}</button>\n      }\n\n      @if (notification.secondaryAction(); as secondaryAction) {\n        <button\n          class=\"et-notification-secondary-action\"\n          et-text-button\n          etNotificationAction=\"secondary\"\n          size=\"xs\"\n          type=\"button\"\n        >\n          {{ secondaryAction.label }}\n        </button>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer components{@property --et-notification-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-notification-padding{syntax: \"*\"; inherits: true; initial-value: 12px 12px 12px 14px;}@property --et-notification-min-width{syntax: \"<length>\"; inherits: true; initial-value: 300px;}@property --et-notification-max-width{syntax: \"<length>\"; inherits: true; initial-value: 420px;}@property --et-notification-shadow{syntax: \"*\"; inherits: true; initial-value: 0 4px 16px rgb(var(--et-shadow-color-rgb, 0 0 0) / 10%),0 0 0 1px rgb(var(--et-shadow-color-rgb, 0 0 0) / 5%);}@property --et-notification-border-width{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-notification-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-notification-line-height{syntax: \"<length>\"; inherits: true; initial-value: 20px;}@property --et-notification-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-notification-title-font-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-notification-message-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-notification-message-line-height{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-notification-message-opacity{syntax: \"<number>\"; inherits: true; initial-value: .65;}@property --et-notification-progress-bar-height{syntax: \"<length>\"; inherits: true; initial-value: 3px;}@property --et-notification-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}.et-notification{display:block;pointer-events:all;opacity:var(--_et-notification-swipe-opacity, 1);background:var(--et-surface-background-solid, #fff);color:var(--et-surface-color-solid, #111);border-radius:var(--et-notification-border-radius);padding:var(--et-notification-padding);box-shadow:var(--et-notification-shadow);min-width:var(--et-notification-min-width);max-width:var(--et-notification-max-width);border-inline-start:var(--et-notification-border-width) solid var(--et-theme-color-primary-solid, #d1d5db);font-family:inherit;font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height);--_et-notification-slide-x: 1rem;--_et-notification-dir-sign: 1}.et-notification:dir(rtl){--_et-notification-dir-sign: -1}.et-notification.et-animation-enter-from{opacity:0;transform:translate(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)))}.et-notification.et-animation-enter-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-active{transition:opacity .2s ease,transform .2s ease}.et-notification.et-animation-leave-to{opacity:0;transform:translate(calc(var(--_et-notification-slide-x) * var(--_et-notification-dir-sign)))}.et-notification[data-swiped-away].et-animation-leave-to{transform:translate(var(--_et-notification-swipe-exit-x, 0px))!important;opacity:0}.et-notification-stack[data-position=bottom-start] .et-notification,.et-notification-stack[data-position=top-start] .et-notification{--_et-notification-slide-x: -1rem}.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=bottom-center] .et-notification.et-animation-leave-to{transform:translateY(1rem)}.et-notification-stack[data-position=top-center] .et-notification.et-animation-enter-from,.et-notification-stack[data-position=top-center] .et-notification.et-animation-leave-to{transform:translateY(-1rem)}.et-notification-header{display:flex;align-items:center;justify-content:space-between;gap:var(--et-notification-gap)}.et-notification-spinner{flex-shrink:0;--et-spinner-color: var(--et-theme-color-primary-solid, currentColor)}.et-notification-icon{flex-shrink:0;width:var(--et-notification-icon-size);height:var(--et-notification-icon-size);color:var(--et-theme-color-primary-solid, currentColor)}.et-notification-title{flex:1;font-weight:var(--et-notification-title-font-weight);font-size:var(--et-notification-font-size);line-height:var(--et-notification-line-height)}.et-notification-dismiss-btn{flex-shrink:0;opacity:.4;transition:opacity .12s ease}@media(hover:hover){.et-notification-dismiss-btn:hover{opacity:.8}}.et-notification-message{margin:.4rem 0 0;color:var(--et-surface-color-muted-solid, inherit);opacity:var(--et-notification-message-opacity);font-size:var(--et-notification-message-font-size);line-height:var(--et-notification-message-line-height)}.et-notification-progress-bar{margin-top:.8rem;color:var(--et-theme-color-primary-solid, currentColor);--et-progress-bar-height: var(--et-notification-progress-bar-height)}.et-notification-footer{display:flex;align-items:center;gap:1.2rem;margin-top:.8rem}.et-notification .et-notification-secondary-action{color:var(--et-surface-color-muted-solid, inherit)}@media(max-width:480px){.et-notification{min-width:0;max-width:none}}@media(prefers-reduced-motion:reduce){.et-notification.et-animation-enter-from{transform:none}.et-notification.et-animation-enter-active,.et-notification.et-animation-leave-active{transition:opacity .2s ease}.et-notification.et-animation-leave-to{transform:none}}}\n"], dependencies: [{ kind: "directive", type: NotificationActionDirective, selector: "[etNotificationAction]", inputs: ["etNotificationAction"], exportAs: ["etNotificationAction"] }, { kind: "directive", type: NotificationDismissDirective, selector: "[etNotificationDismiss]", exportAs: ["etNotificationDismiss"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value"] }, { kind: "component", type: ProgressBarComponent, selector: "et-progress-bar", inputs: ["value"] }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -59336,7 +59385,7 @@ class QueryErrorComponent {
         ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryErrorComponent, isStandalone: true, selector: "et-query-error", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-query-error-host" }, providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: QueryErrorDirective, inputs: ["error", "error", "query", "query", "alwaysAllowRetry", "alwaysAllowRetry", "labels", "labels"], outputs: ["retryRequest", "retryRequest"] }], ngImport: i0, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{padding-inline-start:1.5em}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "et-banner", inputs: ["heading", "description", "type", "dismissible", "liveRegion", "color"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: QueryErrorComponent, isStandalone: true, selector: "et-query-error", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-query-error-host" }, providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [{ directive: QueryErrorDirective, inputs: ["error", "error", "query", "query", "alwaysAllowRetry", "alwaysAllowRetry", "labels", "labels"], outputs: ["retryRequest", "retryRequest"] }], ngImport: i0, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{margin:0;padding-inline-start:1.2em;list-style:disc outside}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"], dependencies: [{ kind: "component", type: BannerComponent, selector: "et-banner", inputs: ["heading", "description", "type", "dismissible", "liveRegion", "color"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: QueryErrorComponent, decorators: [{
             type: Component,
@@ -59348,7 +59397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         },
                     ], host: {
                         class: 'et-query-error-host',
-                    }, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{padding-inline-start:1.5em}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"] }]
+                    }, template: "@if (queryError.view(); as error) {\n  <!-- [liveRegion]=\"null\": the host already carries `role=\"alert\"`, and a live region inside one announces twice. -->\n  <et-banner [color]=\"color()\" [liveRegion]=\"null\" type=\"error\">\n    <span etIcon=\"et-triangle-exclamation\"></span>\n\n    <h3 class=\"et-query-error-title\" etBannerHeading>\n      @if (queryError.titleSlot(); as titleSlot) {\n        <ng-container [ngTemplateOutlet]=\"titleSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      } @else {\n        {{ error.title }}\n      }\n    </h3>\n\n    @if (error.isList) {\n      <ul class=\"et-query-error-list\" etBannerBody>\n        @for (message of error.messages; track $index) {\n          <li class=\"et-query-error-list-item\">{{ message }}</li>\n        }\n      </ul>\n    } @else {\n      <p class=\"et-query-error-message\" etBannerBody>{{ error.messages[0] }}</p>\n    }\n\n    @if (queryError.actionsSlot(); as actionsSlot) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <ng-container [ngTemplateOutlet]=\"actionsSlot\" [ngTemplateOutletContext]=\"{ $implicit: error, error }\" />\n      </div>\n    } @else if (error.canRetry) {\n      <div class=\"et-query-error-actions\" etBannerAction>\n        <!-- No [color]: the banner provides the error colour scope, which the button inherits. -->\n        <button (click)=\"queryError.retry()\" et-button type=\"button\">\n          {{ queryError.resolvedLabels().retry }}\n        </button>\n      </div>\n    }\n  </et-banner>\n}\n", styles: ["@layer components{.et-query-error-host{display:block}.et-query-error-host .et-query-error-list{margin:0;padding-inline-start:1.2em;list-style:disc outside}.et-query-error-host .et-query-error-list .et-query-error-list-item{margin-block:.15em}.et-query-error-host .et-query-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}}\n"] }]
         }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 const QUERY_ERROR_IMPORTS = [
@@ -63713,11 +63762,11 @@ const STREAM_LABELS = /* @__PURE__ */ toToken(STREAM_LABELS_DEF);
  */
 class StreamOverlayCardStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamOverlayCardStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StreamOverlayCardStylesComponent, isStandalone: true, selector: "et-stream-overlay-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{display:flex;flex-direction:column;align-items:center;gap:var(--et-stream-overlay-card-gap, 12px);padding:var(--et-stream-overlay-card-padding, 32px);border-radius:var(--et-stream-overlay-card-border-radius, 16px);max-width:36rem;text-align:center;background:var(--et-surface-background-solid, inherit)}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: StreamOverlayCardStylesComponent, isStandalone: true, selector: "et-stream-overlay-card-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--et-stream-overlay-card-gap, 12px);inline-size:100%;block-size:100%;padding:var(--et-stream-overlay-card-padding, 16px);overflow:auto;border-radius:var(--et-stream-overlay-card-border-radius, 0px);text-align:center;background:var(--et-surface-background-solid, inherit);container-type:size}.et-stream-consent-card>*,.et-stream-player-error-card>*,.et-pip-slot-placeholder-card>*{flex:none;max-inline-size:36rem}@container (max-height: 200px){.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{display:none}}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamOverlayCardStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-stream-overlay-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{display:flex;flex-direction:column;align-items:center;gap:var(--et-stream-overlay-card-gap, 12px);padding:var(--et-stream-overlay-card-padding, 32px);border-radius:var(--et-stream-overlay-card-border-radius, 16px);max-width:36rem;text-align:center;background:var(--et-surface-background-solid, inherit)}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"] }]
+            args: [{ selector: 'et-stream-overlay-card-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-stream-consent-card,.et-stream-player-error-card,.et-pip-slot-placeholder-card{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:var(--et-stream-overlay-card-gap, 12px);inline-size:100%;block-size:100%;padding:var(--et-stream-overlay-card-padding, 16px);overflow:auto;border-radius:var(--et-stream-overlay-card-border-radius, 0px);text-align:center;background:var(--et-surface-background-solid, inherit);container-type:size}.et-stream-consent-card>*,.et-stream-player-error-card>*,.et-pip-slot-placeholder-card>*{flex:none;max-inline-size:36rem}@container (max-height: 200px){.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{display:none}}.et-stream-consent-icon,.et-stream-player-error-icon,.et-pip-slot-placeholder-icon{width:var(--et-stream-overlay-card-icon-size, 36px);height:var(--et-stream-overlay-card-icon-size, 36px);color:var(--et-surface-color-subtle-solid, currentColor)}.et-stream-consent-heading,.et-stream-player-error-heading{margin:0;font-size:var(--et-stream-overlay-card-heading-size, 16px);font-weight:var(--et-stream-overlay-card-heading-weight, 600);line-height:var(--et-stream-overlay-card-heading-line-height, 122%);letter-spacing:var(--et-stream-overlay-card-heading-letter-spacing, .2px);color:var(--et-surface-color-solid, currentColor)}.et-stream-consent-description,.et-stream-player-error-description,.et-pip-slot-placeholder-message{margin:0;font-size:var(--et-stream-overlay-card-description-size, 14px);font-weight:var(--et-stream-overlay-card-description-weight, 400);line-height:var(--et-stream-overlay-card-description-line-height, 150%);color:var(--et-surface-color-muted-solid, currentColor)}}\n"] }]
         }] });
 /** @internal */
 const mountStreamOverlayCardStyles = () => injectStyleManager().mount(StreamOverlayCardStylesComponent);
@@ -63760,7 +63809,7 @@ class StreamConsentComponent {
         {{ acceptLabel() }}
       </button>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "directive", type: StreamConsentAcceptDirective, selector: "[etStreamConsentAccept]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "directive", type: StreamConsentAcceptDirective, selector: "[etStreamConsentAccept]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamConsentComponent, decorators: [{
             type: Component,
@@ -63777,7 +63826,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         class: 'et-stream-consent',
                         role: 'group',
                         '[attr.aria-labelledby]': 'HEADING_ID',
-                    }, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"] }]
+                    }, styles: ["@layer components{@property --et-stream-consent-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-consent-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-consent-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-consent-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-consent-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-consent-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-consent-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-consent-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-consent-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-consent-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-consent{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit)}.et-stream-consent-card{--et-stream-overlay-card-padding: var(--et-stream-consent-padding);--et-stream-overlay-card-gap: var(--et-stream-consent-gap);--et-stream-overlay-card-icon-size: var(--et-stream-consent-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-consent-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-consent-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-consent-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-consent-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-consent-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-consent-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-consent-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-consent-description-line-height)}.et-stream-consent-icon{margin-block-end:.4rem}.et-stream-consent-description{margin-block-end:.8rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 const STREAM_PLAYER_ERROR_CONTEXT_TOKEN = new InjectionToken('STREAM_PLAYER_ERROR_CONTEXT_TOKEN');
@@ -63846,7 +63895,7 @@ class StreamPlayerErrorComponent {
         {{ retryLabel() }}
       </button>
     </div>
-  `, isInline: true, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamPlayerErrorComponent, decorators: [{
             type: Component,
@@ -63862,7 +63911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
   `, encapsulation: ViewEncapsulation.None, imports: [ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(TRIANGLE_EXCLAMATION_ICON)], hostDirectives: [StreamPlayerErrorDirective], host: {
                         class: 'et-stream-player-error',
                         role: 'alert',
-                    }, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"] }]
+                    }, styles: ["@layer components{@property --et-stream-player-error-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-stream-player-error-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-stream-player-error-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-stream-player-error-heading-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-stream-player-error-heading-weight{syntax: \"<number>\"; inherits: true; initial-value: 600;}@property --et-stream-player-error-heading-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 122%;}@property --et-stream-player-error-heading-letter-spacing{syntax: \"<length>\"; inherits: true; initial-value: .2px;}@property --et-stream-player-error-description-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-stream-player-error-description-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-stream-player-error-description-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}.et-stream-player-error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:1}.et-stream-player-error-card{--et-stream-overlay-card-padding: var(--et-stream-player-error-padding);--et-stream-overlay-card-gap: var(--et-stream-player-error-gap);--et-stream-overlay-card-icon-size: var(--et-stream-player-error-icon-size);--et-stream-overlay-card-border-radius: var(--et-stream-player-error-border-radius);--et-stream-overlay-card-heading-size: var(--et-stream-player-error-heading-size);--et-stream-overlay-card-heading-weight: var(--et-stream-player-error-heading-weight);--et-stream-overlay-card-heading-line-height: var(--et-stream-player-error-heading-line-height);--et-stream-overlay-card-heading-letter-spacing: var(--et-stream-player-error-heading-letter-spacing);--et-stream-overlay-card-description-size: var(--et-stream-player-error-description-size);--et-stream-overlay-card-description-weight: var(--et-stream-player-error-description-weight);--et-stream-overlay-card-description-line-height: var(--et-stream-player-error-description-line-height)}.et-stream-player-error-icon{margin-block-end:.4rem}.et-stream-player-error-description{margin-block-end:.8rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 const DEFAULT_STREAM_PLAYER_LOADING_CONFIG = {
@@ -65553,12 +65602,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                 }]
         }] });
 
+/** @internal */
+class PipStageStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: PipStageStylesComponent, isStandalone: true, selector: "et-pip-stage-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{et-pip-window:has(.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)):not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-pip-window:has(.et-stream-pip-chrome__stage--grid):not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell--featured{transform:none}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:after{pointer-events:auto}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible{outline:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-pip-stage-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{et-pip-window:has(.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)):not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-pip-window:has(.et-stream-pip-chrome__stage--grid):not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell--featured{transform:none}.et-stream-pip-chrome__stage:not(.et-stream-pip-chrome__stage--grid)>.et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:after{pointer-events:auto}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell:focus-visible{outline:none}.et-stream-pip-chrome__stage--grid>.et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"] }]
+        }] });
+/** @internal */
+const mountPipStageStyles = () => injectStyleManager().mount(PipStageStylesComponent);
+
 class PipStageDirective {
     constructor() {
         this.chrome = inject(PIP_CHROME_REF_TOKEN);
+        mountPipStageStyles();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PipStageDirective, isStandalone: true, selector: "[etPipStage]", host: { properties: { "style.--et-pip-grid-cols": "chrome.state.gridCols()", "style.--et-pip-grid-rows": "chrome.state.gridRows()" }, classAttribute: "et-stream-pip-chrome__stage" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: PipStageDirective, isStandalone: true, selector: "[etPipStage]", host: { properties: { "class.et-stream-pip-chrome__stage--grid": "chrome.state.multiView()", "style.--et-pip-grid-cols": "chrome.state.gridCols()", "style.--et-pip-grid-rows": "chrome.state.gridRows()" }, classAttribute: "et-stream-pip-chrome__stage" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipStageDirective, decorators: [{
             type: Directive,
@@ -65566,11 +65628,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     selector: '[etPipStage]',
                     host: {
                         class: 'et-stream-pip-chrome__stage',
+                        '[class.et-stream-pip-chrome__stage--grid]': 'chrome.state.multiView()',
                         '[style.--et-pip-grid-cols]': 'chrome.state.gridCols()',
                         '[style.--et-pip-grid-rows]': 'chrome.state.gridRows()',
                     },
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // codes 1600-1699
 const STREAM_ERROR_CODES = {
@@ -65748,7 +65811,7 @@ class StreamPipChromeComponent {
                     return chrome.state.windowAspectRatio;
                 },
             },
-        ], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"], dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "stageRef", first: true, predicate: PipStageDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "pipWindowRef", first: true, predicate: PipWindowComponent, descendants: true, isSignal: true }, { propertyName: "gridBtnRef", first: true, predicate: PipGridToggleDirective, descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "component", type: PipWindowComponent, selector: "et-pip-window" }, { kind: "component", type: PipPlayerComponent, selector: "et-pip-player", inputs: ["entry", "showThumbnail"] }, { kind: "directive", type: PipBackDirective, selector: "[etPipBack]", inputs: ["entry"] }, { kind: "directive", type: PipGridToggleDirective, selector: "[etPipGridToggle]" }, { kind: "directive", type: PipStageDirective, selector: "[etPipStage]" }, { kind: "directive", type: PipTitleBarTemplateDirective, selector: "ng-template[etPipTitleBar]" }, { kind: "directive", type: PipCellDirective, selector: "[etPipCell]", inputs: ["etPipCell"] }, { kind: "directive", type: PipCloseDirective, selector: "[etPipClose]", inputs: ["entry"] }, { kind: "component", type: WindowControlButtonComponent, selector: "[et-window-control-button]", inputs: ["size", "kind"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: StreamPipChromeComponent, decorators: [{
             type: Component,
@@ -65776,7 +65839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ], hostDirectives: [ProvideSurfaceDirective], host: {
                         class: 'et-stream-pip-chrome',
                         '[class.et-stream-pip-chrome--grid]': 'state.multiView()',
-                    }, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n", styles: ["@layer components{et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) et-pip-window:not(:has(.et-stream-pip-chrome__cell--featured .et-pip-player--ready)){visibility:hidden;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid et-pip-window:not(:has(.et-stream-pip-chrome__cell .et-pip-player--ready)){visibility:hidden;pointer-events:none}.et-stream-pip-chrome__stage{position:absolute;inset:0;overflow:hidden;clip-path:inset(0)}.et-stream-pip-chrome__cell{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;will-change:transform;overflow:hidden;transform:translate(calc(((var(--et-cell-col, 1) - 1) + var(--et-cell-exit-h, 0) * var(--et-pip-grid-cols, 1)) / var(--et-pip-grid-cols, 1) * 100%),calc((2 * (var(--et-cell-row, 1) - 1) + var(--et-pip-grid-cols, 1) - var(--et-pip-grid-rows, 1)) / (2 * var(--et-pip-grid-cols, 1)) * 100% + var(--et-cell-exit-v, 0) * 100%)) scale(calc(1 / var(--et-pip-grid-cols, 1)))}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell--featured{transform:none}et-stream-pip-chrome:not(.et-stream-pip-chrome--grid) .et-stream-pip-chrome__cell:not(.et-stream-pip-chrome__cell--featured){transform:translate(calc(var(--et-cell-exit-h, 0) * 100%),calc(var(--et-cell-exit-v, 0) * 100%))}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell{cursor:pointer}.et-stream-pip-chrome__cell:after{content:\"\";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 5px transparent;transition:box-shadow .15s;pointer-events:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:after{pointer-events:auto}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}@media(hover:hover){et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:hover:after{box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 35%,transparent)}}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell:focus-visible{outline:none}et-stream-pip-chrome.et-stream-pip-chrome--grid .et-stream-pip-chrome__cell--featured:after{box-shadow:inset 0 0 0 5px var(--et-stream-pip-chrome-featured-ring-color, var(--et-theme-color-primary-solid, #3b82f6))}et-pip-player iframe{width:100%!important;height:100%!important;display:block}}\n"] }]
+                    }, template: "<et-pip-window>\n  <ng-template etPipTitleBar>\n    @if (state.showBackButton()) {\n      <button [color]=\"controlsColor()\" [size]=\"WINDOW_CONTROL_BUTTON_SIZE\" et-window-control-button etPipBack>\n        <i etIcon=\"et-arrow-out-up-right\"></i>\n      </button>\n    }\n    <span class=\"et-pip-window__title-bar-spacer\"></span>\n    @if (state.hasMultiplePips()) {\n      <button\n        [color]=\"controlsColor()\"\n        [pressed]=\"state.multiView()\"\n        [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n        et-window-control-button\n        etPipGridToggle\n      >\n        @if (state.multiView()) {\n          <i etIcon=\"et-focus-frame\"></i>\n        } @else {\n          <i etIcon=\"et-grid-2x2\"></i>\n        }\n      </button>\n    }\n    <button\n      [color]=\"controlsColor()\"\n      [kind]=\"CLOSE_KIND\"\n      [size]=\"WINDOW_CONTROL_BUTTON_SIZE\"\n      et-window-control-button\n      etPipClose\n    >\n      <i etIcon=\"et-times\"></i>\n    </button>\n  </ng-template>\n\n  <div etPipStage>\n    @for (c of state.cells(); track c.playerId) {\n      <div [etPipCell]=\"c\">\n        <et-pip-player />\n      </div>\n    }\n  </div>\n</et-pip-window>\n" }]
         }], ctorParameters: () => [], propDecorators: { stageRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipStageDirective), { ...{ read: ElementRef }, isSignal: true }] }], pipWindowRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipWindowComponent), { isSignal: true }] }], gridBtnRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipGridToggleDirective), { ...{
                             read: ElementRef,
                         }, isSignal: true }] }] } });
@@ -65850,7 +65913,7 @@ class PipSlotPlaceholderComponent {
         </div>
       </div>
     }
-  `, isInline: true, styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"], dependencies: [{ kind: "directive", type: PipBringBackDirective, selector: "[etPipBringBack]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"], dependencies: [{ kind: "directive", type: PipBringBackDirective, selector: "[etPipBringBack]" }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideSurfaceDirective, selector: "[etProvideSurface]", inputs: ["etProvideSurface"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PipSlotPlaceholderComponent, decorators: [{
             type: Component,
@@ -65866,7 +65929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </div>
       </div>
     }
-  `, encapsulation: ViewEncapsulation.None, imports: [PipBringBackDirective, ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(ARROW_OUT_UP_RIGHT_ICON)], styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 32px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [PipBringBackDirective, ButtonComponent, IconDirective, ProvideSurfaceDirective], providers: [provideIcons(ARROW_OUT_UP_RIGHT_ICON)], styles: ["@layer components{@property --et-pip-slot-placeholder-gap{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-pip-slot-placeholder-padding{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-pip-slot-placeholder-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-pip-slot-placeholder-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --et-pip-slot-placeholder-message-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-pip-slot-placeholder-message-weight{syntax: \"<number>\"; inherits: true; initial-value: 400;}@property --et-pip-slot-placeholder-message-line-height{syntax: \"<percentage>\"; inherits: true; initial-value: 150%;}et-pip-slot-placeholder{display:contents}.et-pip-slot-placeholder-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--et-surface-background-solid, inherit);color:var(--et-surface-color-solid, inherit);z-index:20}.et-pip-slot-placeholder-card{--et-stream-overlay-card-gap: var(--et-pip-slot-placeholder-gap);--et-stream-overlay-card-padding: var(--et-pip-slot-placeholder-padding);--et-stream-overlay-card-icon-size: var(--et-pip-slot-placeholder-icon-size);--et-stream-overlay-card-border-radius: var(--et-pip-slot-placeholder-border-radius);--et-stream-overlay-card-description-size: var(--et-pip-slot-placeholder-message-size);--et-stream-overlay-card-description-weight: var(--et-pip-slot-placeholder-message-weight);--et-stream-overlay-card-description-line-height: var(--et-pip-slot-placeholder-message-line-height)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { bringBackDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PipBringBackDirective), { isSignal: true }] }] } });
 
 const PIP_CHROME_MANAGER_DEF = /* @__PURE__ */ defineRootProvider(() => {
@@ -75244,10 +75307,14 @@ class NavTabLinkDirective {
             this.routerLinkIsActive.set(active);
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe();
+        // Reads no selection state: with two links active at once (RouterLinkActive settles in a microtask
+        // after NavigationEnd), each would select itself in turn and freeze change detection.
         effect(() => {
-            if (this.isActive() && this.tabBar?.activeTrigger() !== this.trigger) {
-                this.tabBar?.selectTrigger(this.trigger);
-            }
+            const tabBar = this.tabBar;
+            if (!tabBar || !this.isActive())
+                return;
+            tabBar.triggers();
+            untracked(() => tabBar.selectTrigger(this.trigger));
         });
         if (ngDevMode) {
             afterNextRender(() => {
@@ -77110,7 +77177,7 @@ const provideUnsavedChangesAlertDialog = () => provideUnsavedChangesConfirm(() =
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.70';
+const COMPONENTS_VERSION = '1.0.0-next.72';
 
 /**
  * Generated bundle index. Do not edit.