@ethlete/components 0.1.0-next.12 → 0.1.0-next.13

package/fesm2022/ethlete-components.mjs

@@ -46,8 +46,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class FocusRingDirective {
     constructor() {
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.styleManager = injectStyleManager();
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.active = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
         effect(() => {
@@ -1411,6 +1411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class ChoiceFieldComponent {
     constructor() {
+        this.support = injectFormSupport();
         this.errorContentRef = viewChild('errorContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorContentRef" }] : /* istanbul ignore next */ []));
         this.hintContentRef = viewChild('hintContent', /* @ts-ignore */
@@ -1419,7 +1420,6 @@ class ChoiceFieldComponent {
         ...(ngDevMode ? [{ debugName: "errorAnimatableRef" }] : /* istanbul ignore next */ []));
         this.hintAnimatableRef = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatableRef" }] : /* istanbul ignore next */ []));
-        this.support = injectFormSupport();
         this.canAnimate = createCanAnimateSignal();
         effect(() => {
             this.support.errorContent.set(this.errorContentRef());
@@ -1583,6 +1583,8 @@ class FormFieldComponent {
         this.provideSurface = inject(ProvideSurfaceDirective);
         this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.formFieldDir = inject(FormFieldDirective);
+        this.errorColorTheme = injectErrorTheme();
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.appearance = input(FORM_FIELD_APPEARANCES.BOX, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
         this.fill = input(FORM_FIELD_FILLS.TRANSPARENT, /* @ts-ignore */
@@ -1601,8 +1603,6 @@ class FormFieldComponent {
         ...(ngDevMode ? [{ debugName: "errorAnimatable" }] : /* istanbul ignore next */ []));
         this.hintAnimatable = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatable" }] : /* istanbul ignore next */ []));
-        this.errorColorTheme = injectErrorTheme();
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.errorDimensions = signalElementDimensions(this.errorContent);
         this.hintDimensions = signalElementDimensions(this.hintContent);
         this.prefixDimensions = signalElementDimensions(this.prefixEl);
@@ -2642,6 +2642,8 @@ class RichTextEditorDirective {
         this.formField = inject(FORM_FIELD_TOKEN, { optional: true });
         this.destroyRef = inject(DestroyRef);
         this.document = inject(DOCUMENT);
+        /** @internal */
+        this.editorDom = injectRichTextEditorDom();
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.touched = model(false, /* @ts-ignore */
@@ -2690,8 +2692,6 @@ class RichTextEditorDirective {
         ...(ngDevMode ? [{ debugName: "linkActive" }] : /* istanbul ignore next */ []));
         /** @internal */
         this.lastEmittedMarkdown = null;
-        /** @internal */
-        this.editorDom = injectRichTextEditorDom();
         this.formField?.registerControl(this);
         this.destroyRef.onDestroy(() => this.formField?.unregisterControl(this));
     }
@@ -3230,7 +3230,7 @@ class RichTextEditorFloatingToolbarComponent {
                 this.renderer.listen(root, 'pointerdown', () => (this.pointerSelectingInContent = true)),
                 this.renderer.listen(root, 'keyup', () => this.evaluate()),
                 this.renderer.listen(root, 'blur', () => this.hide()),
-                this.renderer.listen(this.document, 'pointerup', () => this.onDocumentPointerUp()),
+                this.renderer.listen(this.document, 'pointerup', () => this.finishContentPointerSelection()),
                 this.renderer.listen(this.document, 'selectionchange', () => this.reposition()),
             ];
             onCleanup(() => listeners.forEach((off) => off()));
@@ -3242,7 +3242,7 @@ class RichTextEditorFloatingToolbarComponent {
         const usable = !!range && !range.collapsed && this.dir.focused() && !this.dir.disabled() && !this.dir.readonly();
         return usable ? range : null;
     }
-    onDocumentPointerUp() {
+    finishContentPointerSelection() {
         if (!this.pointerSelectingInContent)
             return;
         this.pointerSelectingInContent = false;
@@ -3341,17 +3341,17 @@ class RichTextEditorComponent {
             this.renderExternalValue(markdown);
         });
     }
-    onInput() {
+    syncValueFromDom() {
         this.dir.syncFromDom();
     }
-    onKeydown(event) {
+    interceptBackspaceKey(event) {
         if (event.key !== 'Backspace')
             return;
         if (this.dir.handleBackspace()) {
             event.preventDefault();
         }
     }
-    onBeforeInput(event) {
+    interceptFormattingCommand(event) {
         // Keep keyboard shortcuts (Ctrl/Cmd+B, …) running through our Selection/Range commands
         // instead of the browser's deprecated execCommand-backed formatting.
         switch (event.inputType) {
@@ -3379,7 +3379,7 @@ class RichTextEditorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: RichTextEditorComponent, isStandalone: true, selector: "et-rich-text-editor", host: { listeners: { "click": "dir.activate()" }, classAttribute: "et-rich-text-editor" }, providers: [
             provideIcons(BOLD_ICON, ITALIC_ICON, STRIKETHROUGH_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON),
-        ], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"onInput()\"\n  (beforeinput)=\"onBeforeInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "component", type: RichTextEditorFloatingToolbarComponent, selector: "et-rich-text-editor-floating-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }], ngImport: i0, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"syncValueFromDom()\"\n  (beforeinput)=\"interceptFormattingCommand($event)\"\n  (keydown)=\"interceptBackspaceKey($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }, { kind: "component", type: RichTextEditorFloatingToolbarComponent, selector: "et-rich-text-editor-floating-toolbar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, decorators: [{
             type: Component,
@@ -3394,7 +3394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'et-rich-text-editor',
                         '(click)': 'dir.activate()',
-                    }, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"onInput()\"\n  (beforeinput)=\"onBeforeInput($event)\"\n  (keydown)=\"onKeydown($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"] }]
+                    }, template: "<div class=\"et-rte-toolbar\" role=\"toolbar\" aria-label=\"Text formatting\">\n  <button\n    [pressed]=\"dir.boldActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleBold()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bold\"\n  >\n    <i etIcon=\"et-bold\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.italicActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleItalic()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Italic\"\n  >\n    <i etIcon=\"et-italic\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.strikeActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleStrikethrough()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Strikethrough\"\n  >\n    <i etIcon=\"et-strikethrough\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.unorderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleUnorderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Bulleted list\"\n  >\n    <i etIcon=\"et-list-bulleted\"></i>\n  </button>\n\n  <button\n    [pressed]=\"dir.orderedListActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.toggleOrderedList()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Numbered list\"\n  >\n    <i etIcon=\"et-list-numbered\"></i>\n  </button>\n\n  <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n\n  <button\n    [pressed]=\"dir.linkActive()\"\n    [disabled]=\"dir.disabled() || dir.readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"dir.promptForLink()\"\n    mutedUntilPressed\n    et-icon-button\n    size=\"xs\"\n    type=\"button\"\n    aria-label=\"Link\"\n  >\n    <i [allowHardcodedColor]=\"true\" etIcon=\"et-link\"></i>\n  </button>\n</div>\n\n<div\n  #editable\n  [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n  [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n  [attr.data-placeholder]=\"dir.placeholder() || null\"\n  [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n  [attr.aria-describedby]=\"dir.describedById() || null\"\n  [attr.aria-labelledby]=\"dir.labelId() || null\"\n  [attr.aria-disabled]=\"dir.disabled() || null\"\n  [attr.aria-readonly]=\"dir.readonly() || null\"\n  (input)=\"syncValueFromDom()\"\n  (beforeinput)=\"interceptFormattingCommand($event)\"\n  (keydown)=\"interceptBackspaceKey($event)\"\n  (focus)=\"dir.focused.set(true)\"\n  (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n  class=\"et-rte-content\"\n  role=\"textbox\"\n  aria-multiline=\"true\"\n></div>\n\n<et-rich-text-editor-floating-toolbar />\n", styles: ["@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-toolbar .et-icon-button{border-radius:var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}\n"] }]
         }], ctorParameters: () => [], propDecorators: { editable: [{ type: i0.ViewChild, args: ['editable', { isSignal: true }] }] } });
 
 const RICH_TEXT_EDITOR_IMPORTS = [RichTextEditorComponent, RichTextEditorDirective];
@@ -3716,6 +3716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class CheckboxGroupComponent {
     constructor() {
+        this.support = injectFormSupport();
         this.errorContentRef = viewChild('errorContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorContentRef" }] : /* istanbul ignore next */ []));
         this.hintContentRef = viewChild('hintContent', /* @ts-ignore */
@@ -3724,7 +3725,6 @@ class CheckboxGroupComponent {
         ...(ngDevMode ? [{ debugName: "errorAnimatableRef" }] : /* istanbul ignore next */ []));
         this.hintAnimatableRef = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatableRef" }] : /* istanbul ignore next */ []));
-        this.support = injectFormSupport();
         this.canAnimate = createCanAnimateSignal();
         effect(() => {
             this.support.errorContent.set(this.errorContentRef());
@@ -3778,6 +3778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class RadioGroupComponent {
     constructor() {
+        this.support = injectFormSupport();
         this.errorContentRef = viewChild('errorContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorContentRef" }] : /* istanbul ignore next */ []));
         this.hintContentRef = viewChild('hintContent', /* @ts-ignore */
@@ -3786,7 +3787,6 @@ class RadioGroupComponent {
         ...(ngDevMode ? [{ debugName: "errorAnimatableRef" }] : /* istanbul ignore next */ []));
         this.hintAnimatableRef = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatableRef" }] : /* istanbul ignore next */ []));
-        this.support = injectFormSupport();
         this.canAnimate = createCanAnimateSignal();
         effect(() => {
             this.support.errorContent.set(this.errorContentRef());
@@ -3840,6 +3840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class SegmentedButtonGroupComponent {
     constructor() {
+        this.support = injectFormSupport();
         this.errorContentRef = viewChild('errorContent', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "errorContentRef" }] : /* istanbul ignore next */ []));
         this.hintContentRef = viewChild('hintContent', /* @ts-ignore */
@@ -3848,7 +3849,6 @@ class SegmentedButtonGroupComponent {
         ...(ngDevMode ? [{ debugName: "errorAnimatableRef" }] : /* istanbul ignore next */ []));
         this.hintAnimatableRef = viewChild('hintAnimatable', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hintAnimatableRef" }] : /* istanbul ignore next */ []));
-        this.support = injectFormSupport();
         this.canAnimate = createCanAnimateSignal();
         effect(() => {
             this.support.errorContent.set(this.errorContentRef());
@@ -3995,7 +3995,7 @@ const DEFAULT_GRID_CONFIG = {
     registrations: [],
     interactiveAriaLabel: 'Interactive grid layout',
     readonlyAriaLabel: 'Grid layout',
-    dragHandleAriaLabel: 'Drag to reorder',
+    removeActionAriaLabel: 'Remove item',
     transformer: (text) => text,
 };
 const [provideGridConfig, injectGridConfig] = createStaticRootProvider(DEFAULT_GRID_CONFIG, {
@@ -4282,6 +4282,25 @@ const deserializeGridLayout = (state, breakpointMinWidths) => {
     return { breakpoints, items, rowHeight: state.rowHeight };
 };
 
+const GRID_DEBUG_STORAGE_KEY = 'et-grid-debug';
+let cachedGridDebug = null;
+const isGridDebugEnabled = () => {
+    if (cachedGridDebug === null) {
+        try {
+            cachedGridDebug = globalThis.localStorage?.getItem(GRID_DEBUG_STORAGE_KEY) === 'true';
+        }
+        catch {
+            cachedGridDebug = false;
+        }
+    }
+    return cachedGridDebug;
+};
+const gridDebug = (...args) => {
+    if (!isGridDebugEnabled())
+        return;
+    const timestamp = (globalThis.performance?.now() ?? 0).toFixed(1);
+    console.log(`\x1B[36m[et-grid ${timestamp}ms]\x1B[m`, ...args);
+};
 const positionsEqual = (a, b) => a.col === b.col && a.row === b.row && a.colSpan === b.colSpan && a.rowSpan === b.rowSpan;
 const layoutsEqual = (a, b) => {
     const aKeys = Object.keys(a);
@@ -4312,6 +4331,8 @@ const resolveItemConstraints = (id, context) => {
 class GridDirective {
     constructor() {
         this.injector = inject(Injector);
+        this.renderer = injectRenderer();
+        this.gridConfig = injectGridConfig();
         this.breakpoints = input(DEFAULT_BREAKPOINTS, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "breakpoints" }] : /* istanbul ignore next */ []));
         this.rowHeight = input(100, /* @ts-ignore */
@@ -4322,7 +4343,6 @@ class GridDirective {
         ...(ngDevMode ? [{ debugName: "initialItems" }] : /* istanbul ignore next */ []));
         this.readOnly = input(false, { ...(ngDevMode ? { debugName: "readOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.layoutChange = output();
-        this.gridConfig = injectGridConfig();
         this.registrations = computed(() => this.gridConfig.registrations, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registrations" }] : /* istanbul ignore next */ []));
         this.dimensions = signalHostElementDimensions();
@@ -4336,7 +4356,9 @@ class GridDirective {
         this.resizeBaseLayout = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizeBaseLayout" }] : /* istanbul ignore next */ []));
         this.itemElements = new Map();
+        this.contentElements = new Map();
         this.ghostElement = null;
+        this.lastFlipAt = 0;
         this.rectSnapshot = new Map();
         this.containerWidth = computed(() => this.dimensions().client?.width ?? 0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []));
@@ -4549,8 +4571,18 @@ class GridDirective {
     }
     unregisterItem(id) {
         this.itemElements.delete(id);
+        this.contentElements.delete(id);
         this.constraintsRegistry.delete(id);
     }
+    /**
+     * The item's inner content wrapper. Used by the counter-scaled resize FLIP so the
+     * box can scale while the content takes the inverse scale and stays undistorted.
+     */
+    registerContentElement(id, el) {
+        if (this.contentElements.get(id) !== el) {
+            this.contentElements.set(id, el);
+        }
+    }
     setGhostElement(el) {
         if (this.ghostElement !== el) {
             this.ghostElement = el;
@@ -4575,51 +4607,116 @@ class GridDirective {
     }
     animateLayoutTransition(options) {
         const excludeIds = options?.excludeIds ?? new Set();
+        const durationMs = options?.durationMs ?? 250;
         const snapshot = new Map(this.rectSnapshot);
         const ghostEl = this.ghostElement;
+        const debug = isGridDebugEnabled();
+        const scheduledAt = debug ? performance.now() : 0;
         afterNextRender(() => {
+            const t0 = debug ? performance.now() : 0;
+            // Phase 1 — read every "from" rect together (no writes in between, so the
+            // browser can serve them from a single layout pass).
+            //  - Mid-animation elements: their snapshot (taken a frame earlier) is stale, so
+            //    read the actual current on-screen rect and continue from exactly there.
+            //  - Otherwise: use the snapshot, which holds the pre-layout-change position.
+            const flips = [];
             for (const [id, el] of this.itemElements) {
                 if (excludeIds.has(id))
                     continue;
-                const oldRect = snapshot.get(id);
-                if (!oldRect)
-                    continue;
-                const newRect = el.getBoundingClientRect();
-                const dx = oldRect.left - newRect.left;
-                const dy = oldRect.top - newRect.top;
-                const scaleX = oldRect.width / newRect.width;
-                const scaleY = oldRect.height / newRect.height;
-                const hasMoved = Math.abs(dx) > 1 || Math.abs(dy) > 1;
-                const hasResized = Math.abs(scaleX - 1) > 0.01 || Math.abs(scaleY - 1) > 0.01;
-                if (!hasMoved && !hasResized)
+                const running = el.getAnimations();
+                const fromRect = running.length > 0 ? el.getBoundingClientRect() : snapshot.get(id);
+                if (!fromRect)
                     continue;
-                el.getAnimations().forEach((a) => a.cancel());
-                if (hasResized) {
-                    el.animate([
-                        { transform: `translate(${dx}px, ${dy}px) scale(${scaleX}, ${scaleY})`, transformOrigin: 'top left' },
-                        { transform: 'translate(0px, 0px) scale(1, 1)', transformOrigin: 'top left' },
-                    ], { duration: 250, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
+                flips.push({ el, content: this.contentElements.get(id) ?? null, running, fromRect });
+            }
+            const ghostRunning = ghostEl ? ghostEl.getAnimations() : [];
+            let ghostFrom;
+            if (ghostEl) {
+                ghostFrom = ghostRunning.length > 0 ? ghostEl.getBoundingClientRect() : snapshot.get('__ghost__');
+            }
+            const interrupted = debug ? flips.filter((f) => f.running.length > 0).length : 0;
+            const t1 = debug ? performance.now() : 0;
+            // Phase 2 — cancel all in-flight animations (writes only).
+            for (const flip of flips) {
+                flip.running.forEach((a) => a.cancel());
+                flip.content?.getAnimations().forEach((a) => a.cancel());
+            }
+            ghostRunning.forEach((a) => a.cancel());
+            const t2 = debug ? performance.now() : 0;
+            // Phase 3 — read every target rect together (single layout pass).
+            const targets = flips.map((flip) => flip.el.getBoundingClientRect());
+            const ghostTarget = ghostEl ? ghostEl.getBoundingClientRect() : null;
+            const t3 = debug ? performance.now() : 0;
+            let animated = 0;
+            let maxDx = 0;
+            let maxDy = 0;
+            // Phase 4 — start the animations (writes only).
+            flips.forEach((flip, i) => {
+                const { el, content, fromRect } = flip;
+                const newRect = targets[i];
+                if (!newRect)
+                    return;
+                const dx = fromRect.left - newRect.left;
+                const dy = fromRect.top - newRect.top;
+                const scaleX = newRect.width > 0 ? fromRect.width / newRect.width : 1;
+                const scaleY = newRect.height > 0 ? fromRect.height / newRect.height : 1;
+                const moved = Math.abs(dx) > 1 || Math.abs(dy) > 1;
+                const resized = Math.abs(scaleX - 1) > 0.01 || Math.abs(scaleY - 1) > 0.01;
+                if (!moved && !resized)
+                    return;
+                if (debug) {
+                    animated++;
+                    maxDx = Math.max(maxDx, Math.abs(dx));
+                    maxDy = Math.max(maxDy, Math.abs(dy));
+                }
+                if (resized) {
+                    // Counter-scaled FLIP: the box scales from its old to new size while the
+                    // content wrapper takes the inverse scale, so text/children never distort.
+                    // Easing is baked into sampled keyframes (played linearly) so the outer and
+                    // inner scales multiply to ~1 on every frame, not just at the endpoints.
+                    this.animateCounterScaled({ el, content, dx, dy, scaleX, scaleY, durationMs });
                 }
                 else {
                     el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0px, 0px)' }], {
-                        duration: 250,
+                        duration: durationMs,
+                        easing: 'cubic-bezier(0.2, 0, 0, 1)',
+                    });
+                }
+            });
+            if (ghostEl && ghostFrom && ghostTarget) {
+                const dx = ghostFrom.left - ghostTarget.left;
+                const dy = ghostFrom.top - ghostTarget.top;
+                if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
+                    ghostEl.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0px, 0px)' }], {
+                        duration: 200,
                         easing: 'cubic-bezier(0.2, 0, 0, 1)',
                     });
                 }
             }
-            if (ghostEl) {
-                const oldRect = snapshot.get('__ghost__');
-                if (oldRect) {
-                    const newRect = ghostEl.getBoundingClientRect();
-                    const dx = oldRect.left - newRect.left;
-                    const dy = oldRect.top - newRect.top;
-                    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
-                        ghostEl.getAnimations().forEach((a) => a.cancel());
-                        ghostEl.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: 'translate(0px, 0px)' }], {
-                            duration: 200,
-                            easing: 'cubic-bezier(0.2, 0, 0, 1)',
-                        });
-                    }
+            if (debug) {
+                const t4 = performance.now();
+                const gapSinceLast = this.lastFlipAt ? t0 - this.lastFlipAt : -1;
+                this.lastFlipAt = t0;
+                const round = (n) => Math.round(n * 100) / 100;
+                const info = {
+                    items: flips.length,
+                    interrupted, // items already mid-animation when this FLIP started
+                    animated, // items that actually started a new animation
+                    maxDx: round(maxDx),
+                    maxDy: round(maxDy),
+                    renderDelay: round(t0 - scheduledAt), // schedule → afterNextRender gap
+                    readFrom: round(t1 - t0),
+                    cancel: round(t2 - t1),
+                    readTarget: round(t3 - t2),
+                    startAnim: round(t4 - t3),
+                    total: round(t4 - t0),
+                    gapSinceLast: round(gapSinceLast), // time between consecutive FLIPs
+                };
+                if (info.total > 6 || (gapSinceLast >= 0 && gapSinceLast < 12)) {
+                    gridDebug('flip ⚠', info);
+                }
+                else {
+                    gridDebug('flip', info);
                 }
             }
         }, { injector: this.injector });
@@ -4936,6 +5033,38 @@ class GridDirective {
     emitLayoutChange() {
         this.layoutChange.emit(this.getSerializedState());
     }
+    animateCounterScaled(options) {
+        const { el, content, dx, dy, scaleX, scaleY, durationMs } = options;
+        const steps = 14;
+        const outer = [];
+        const inner = [];
+        for (let i = 0; i <= steps; i++) {
+            const t = i / steps;
+            const eased = 1 - Math.pow(1 - t, 3); // easeOutCubic — matches the translate easing feel
+            const sx = scaleX + (1 - scaleX) * eased;
+            const sy = scaleY + (1 - scaleY) * eased;
+            const tx = dx * (1 - eased);
+            const ty = dy * (1 - eased);
+            outer.push({
+                offset: t,
+                transform: `translate(${tx}px, ${ty}px) scale(${sx}, ${sy})`,
+                transformOrigin: 'top left',
+            });
+            inner.push({ offset: t, transform: `scale(${1 / sx}, ${1 / sy})`, transformOrigin: 'top left' });
+        }
+        // Clip the box for the duration. When the item grows back (scaleX/scaleY < 1) the
+        // content wrapper is counter-scaled UP past the box, and browsers count transformed
+        // descendants in an ancestor's scrollable overflow — so without clipping the content
+        // spills out and flashes scrollbars. overflow:hidden turns it into a clean reveal.
+        // Only counter-scale sets this, and nothing else touches inline overflow, so
+        // restoring to '' (back to the CSS value) on finish/cancel is safe.
+        this.renderer.setStyle(el, { overflow: 'hidden' });
+        const restore = () => this.renderer.removeStyles(el, 'overflow');
+        const outerAnim = el.animate(outer, { duration: durationMs, easing: 'linear' });
+        outerAnim.onfinish = restore;
+        outerAnim.oncancel = restore;
+        content?.animate(inner, { duration: durationMs, easing: 'linear' });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: GridDirective, isStandalone: true, selector: "[etGrid]", inputs: { breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, initialItems: { classPropertyName: "initialItems", publicName: "initialItems", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange" }, host: { properties: { "class.et-grid--readonly": "readOnly()" }, classAttribute: "et-grid" }, providers: [{ provide: GRID_TOKEN, useExisting: GridDirective }], exportAs: ["etGrid"], ngImport: i0 }); }
 }
@@ -5049,6 +5178,8 @@ class GridDragDirective {
         ...(ngDevMode ? [{ debugName: "dragStartClient" }] : /* istanbul ignore next */ []));
         this.dragPixelOffset = signal({ x: 0, y: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dragPixelOffset" }] : /* istanbul ignore next */ []));
+        this.dragMoveCount = 0;
+        this.lastGhostMoveAt = 0;
         this.dragTransform = computed(() => {
             const offset = this.dragPixelOffset();
             return `translate(${offset.x}px, ${offset.y}px)`;
@@ -5087,20 +5218,37 @@ class GridDragDirective {
                 return;
             const newCol = Math.max(0, Math.min(originPos.col + colDelta, columns - originPos.colSpan));
             const newRow = Math.max(0, originPos.row + rowDelta);
-            const currentGhost = this.grid.ghostPosition();
-            const ghostWillMove = !currentGhost || currentGhost.col !== newCol || currentGhost.row !== newRow;
-            if (ghostWillMove) {
-                this.grid.snapshotRects();
-            }
+            // Gate on whether the RAW target cell changed — not on ghostPosition(), which
+            // is the collision-resolved position. During a swap, resolution relocates the
+            // dragged item so the resolved ghost never equals the raw target, which made
+            // this fire on every pointermove and restart every neighbour's animation ~120×/s
+            // (the chop). layout() is a pure function of targetPosition, so if that cell is
+            // unchanged nothing needs re-animating.
+            const prevTarget = this.grid.dragState()?.targetPosition;
+            const targetChanged = !prevTarget || prevTarget.col !== newCol || prevTarget.row !== newRow;
+            this.dragMoveCount++;
+            if (!targetChanged)
+                return;
+            this.grid.snapshotRects();
             this.grid.updateDragTarget({
                 col: newCol,
                 row: newRow,
                 colSpan: originPos.colSpan,
                 rowSpan: originPos.rowSpan,
             });
-            if (ghostWillMove) {
-                this.grid.animateLayoutTransition({ excludeIds: new Set([this.gridItem.itemId()]) });
+            if (isGridDebugEnabled()) {
+                const now = performance.now();
+                const sinceLast = this.lastGhostMoveAt ? Math.round((now - this.lastGhostMoveAt) * 100) / 100 : -1;
+                gridDebug('ghost→', {
+                    col: newCol,
+                    row: newRow,
+                    movesSinceLastGhostMove: this.dragMoveCount, // raw pointermoves between cell crossings
+                    msSinceLastGhostMove: sinceLast,
+                });
+                this.lastGhostMoveAt = now;
+                this.dragMoveCount = 0;
             }
+            this.grid.animateLayoutTransition({ excludeIds: new Set([this.gridItem.itemId()]) });
         }), takeUntilDestroyed())
             .subscribe();
         outputToObservable(this.dragHandle.dragEnded)
@@ -5188,29 +5336,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const GROW_THRESHOLD = 0.25;
 class GridResizeDirective {
     constructor() {
         this.grid = inject(GRID_TOKEN);
         this.gridItem = inject(GridItemDirective);
+        this.injector = inject(Injector);
+        this.elementRef = inject(ElementRef);
+        this.renderer = injectRenderer();
         this.isResizing = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
         this.resizeEdges = computed(() => ['n', 'e', 's', 'w', 'ne', 'nw', 'se', 'sw'], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizeEdges" }] : /* istanbul ignore next */ []));
         this.resizeStartPos = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resizeStartPos" }] : /* istanbul ignore next */ []));
+        this.liftedRect = null;
+        this.lastSnap = null;
     }
     beginResize() {
         if (this.grid.readOnly())
             return;
         const pos = this.gridItem.currentPosition();
-        if (pos) {
-            this.resizeStartPos.set({ col: pos.col, row: pos.row, colSpan: pos.colSpan, rowSpan: pos.rowSpan });
-            this.isResizing.set(true);
-        }
+        if (!pos)
+            return;
+        this.resizeStartPos.set({ col: pos.col, row: pos.row, colSpan: pos.colSpan, rowSpan: pos.rowSpan });
+        this.lastSnap = null;
+        this.isResizing.set(true);
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.liftedRect = { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+        this.applyFixed(this.liftedRect);
     }
     updateResize(event) {
         const start = this.resizeStartPos();
-        if (!start)
+        const startRect = this.liftedRect;
+        if (!start || !startRect)
             return;
         const columns = this.grid.activeColumns();
         const containerWidth = this.grid.containerWidth();
@@ -5218,53 +5377,143 @@ class GridResizeDirective {
         const gap = this.grid.gap();
         const cellWidth = (containerWidth - gap * (columns - 1)) / columns;
         const cellHeight = rowHeight + gap;
+        // 1. Live pixel size — the item follows the pointer 1:1, clamped to the span
+        //    constraints in pixels so it can't grow/shrink past its allowed size.
+        const spanWidth = (span) => span * cellWidth + (span - 1) * gap;
+        const spanHeight = (span) => span * rowHeight + (span - 1) * gap;
+        const minW = spanWidth(this.gridItem.minColSpan());
+        const maxW = spanWidth(this.gridItem.maxColSpan());
+        const minH = spanHeight(this.gridItem.minRowSpan());
+        const maxH = spanHeight(this.gridItem.maxRowSpan());
+        const live = { ...startRect };
+        if (event.edge === 'e' || event.edge === 'se' || event.edge === 'ne') {
+            live.width = Math.min(maxW, Math.max(minW, startRect.width + event.dx));
+        }
+        if (event.edge === 'w' || event.edge === 'sw' || event.edge === 'nw') {
+            const rightEdge = startRect.left + startRect.width;
+            live.width = Math.min(maxW, Math.max(minW, startRect.width - event.dx));
+            live.left = rightEdge - live.width;
+        }
+        if (event.edge === 's' || event.edge === 'se' || event.edge === 'sw') {
+            live.height = Math.min(maxH, Math.max(minH, startRect.height + event.dy));
+        }
+        if (event.edge === 'n' || event.edge === 'ne' || event.edge === 'nw') {
+            const bottomEdge = startRect.top + startRect.height;
+            live.height = Math.min(maxH, Math.max(minH, startRect.height - event.dy));
+            live.top = bottomEdge - live.height;
+        }
+        this.applyFixed(live);
+        // liftedRect stays the gesture-start anchor — event.dx/dy are cumulative from start.
+        // 2. Snapped span — drives neighbour reflow. The snap is biased toward the growth
+        //    direction (a cell is claimed once the edge is GROW_THRESHOLD into it) so
+        //    neighbours slide out of the way early and the growing item barely overlaps them.
+        //    growPos: for edges that grow with a positive delta (east/south).
+        //    growNeg: for edges that grow with a negative delta (west/north).
+        const growPos = (px, cell) => Math.floor(px / cell + (1 - GROW_THRESHOLD));
+        const growNeg = (px, cell) => Math.ceil(px / cell - (1 - GROW_THRESHOLD));
         let newColSpan = start.colSpan;
         let newRowSpan = start.rowSpan;
         let newCol = start.col;
         let newRow = start.row;
-        // East edges: grow/shrink span to the right
         if (event.edge === 'e' || event.edge === 'se' || event.edge === 'ne') {
-            newColSpan = Math.max(1, start.colSpan + Math.round(event.dx / cellWidth));
+            newColSpan = Math.max(1, start.colSpan + growPos(event.dx, cellWidth));
         }
-        // West edges: move col left and grow span, keeping right edge fixed
         if (event.edge === 'w' || event.edge === 'sw' || event.edge === 'nw') {
             const rightEdge = start.col + start.colSpan;
-            const colDelta = Math.round(event.dx / cellWidth);
-            newCol = Math.max(0, start.col + colDelta);
+            newCol = Math.max(0, start.col + growNeg(event.dx, cellWidth));
             newColSpan = rightEdge - newCol;
-            // Clamp against constraints and recalculate col to keep right edge fixed
             newColSpan = Math.min(this.gridItem.maxColSpan(), Math.max(this.gridItem.minColSpan(), newColSpan));
             newCol = rightEdge - newColSpan;
         }
-        // South edges: grow/shrink span downward
         if (event.edge === 's' || event.edge === 'se' || event.edge === 'sw') {
-            newRowSpan = Math.max(1, start.rowSpan + Math.round(event.dy / cellHeight));
+            newRowSpan = Math.max(1, start.rowSpan + growPos(event.dy, cellHeight));
         }
-        // North edges: move row up and grow span, keeping bottom edge fixed
         if (event.edge === 'n' || event.edge === 'ne' || event.edge === 'nw') {
             const bottomEdge = start.row + start.rowSpan;
-            const rowDelta = Math.round(event.dy / cellHeight);
-            newRow = Math.max(0, start.row + rowDelta);
+            newRow = Math.max(0, start.row + growNeg(event.dy, cellHeight));
             newRowSpan = bottomEdge - newRow;
-            // Clamp against constraints and recalculate row to keep bottom edge fixed
             newRowSpan = Math.min(this.gridItem.maxRowSpan(), Math.max(this.gridItem.minRowSpan(), newRowSpan));
             newRow = bottomEdge - newRowSpan;
         }
-        const currentPos = this.gridItem.currentPosition();
-        if (currentPos &&
-            currentPos.colSpan === newColSpan &&
-            currentPos.rowSpan === newRowSpan &&
-            currentPos.col === newCol &&
-            currentPos.row === newRow)
+        // Gate on the raw snapped target changing — not on the resized item's resolved
+        // position (which compaction can shift), so we don't re-run the reflow and restart
+        // every neighbour's animation on every pointermove.
+        if (this.lastSnap &&
+            this.lastSnap.colSpan === newColSpan &&
+            this.lastSnap.rowSpan === newRowSpan &&
+            this.lastSnap.col === newCol &&
+            this.lastSnap.row === newRow)
             return;
+        this.lastSnap = { col: newCol, row: newRow, colSpan: newColSpan, rowSpan: newRowSpan };
+        // The snapped span crossed into a new cell: reflow the neighbours. The resized
+        // item is excluded from the FLIP because its own fixed element drives the size.
+        // A shorter duration than a drag keeps pushed neighbours tracking the live-resizing
+        // edge closely during a fast resize, instead of trailing it with a long glide.
         this.grid.snapshotRects();
         this.grid.resizeItem({ id: this.gridItem.itemId(), newColSpan, newRowSpan, newCol, newRow });
-        this.grid.animateLayoutTransition({ scaleIds: new Set([this.gridItem.itemId()]) });
+        this.grid.animateLayoutTransition({ excludeIds: new Set([this.gridItem.itemId()]), durationMs: 160 });
     }
     finishResize() {
         this.resizeStartPos.set(null);
+        this.lastSnap = null;
         this.isResizing.set(false);
         this.grid.commitResize();
+        const liveRect = this.liftedRect ? this.currentFixedRect() : null;
+        this.liftedRect = null;
+        if (!liveRect) {
+            this.releaseFixed();
+            return;
+        }
+        // Settle: drop back into grid flow, measure the final slot, then animate the
+        // fixed element from its free pixel rect to that slot. Real width/height/left/top
+        // are animated (never scale) so the content stays crisp during the settle.
+        afterNextRender(() => {
+            const el = this.elementRef.nativeElement;
+            this.releaseFixed();
+            const finalRect = el.getBoundingClientRect();
+            this.applyFixed({ left: finalRect.left, top: finalRect.top, width: finalRect.width, height: finalRect.height });
+            el.getAnimations().forEach((a) => a.cancel());
+            const moved = Math.abs(liveRect.left - finalRect.left) > 1 || Math.abs(liveRect.top - finalRect.top) > 1;
+            const resized = Math.abs(liveRect.width - finalRect.width) > 1 || Math.abs(liveRect.height - finalRect.height) > 1;
+            const release = () => this.releaseFixed();
+            if (!moved && !resized) {
+                release();
+                return;
+            }
+            const anim = el.animate([
+                {
+                    left: `${liveRect.left}px`,
+                    top: `${liveRect.top}px`,
+                    width: `${liveRect.width}px`,
+                    height: `${liveRect.height}px`,
+                },
+                {
+                    left: `${finalRect.left}px`,
+                    top: `${finalRect.top}px`,
+                    width: `${finalRect.width}px`,
+                    height: `${finalRect.height}px`,
+                },
+            ], { duration: 250, easing: 'cubic-bezier(0.2, 0, 0, 1)' });
+            anim.onfinish = release;
+            anim.oncancel = release;
+        }, { injector: this.injector });
+    }
+    currentFixedRect() {
+        const rect = this.elementRef.nativeElement.getBoundingClientRect();
+        return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
+    }
+    applyFixed(rect) {
+        this.renderer.setStyle(this.elementRef.nativeElement, {
+            position: 'fixed',
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            zIndex: '100',
+        });
+    }
+    releaseFixed() {
+        this.renderer.removeStyles(this.elementRef.nativeElement, 'position', 'left', 'top', 'width', 'height', 'zIndex');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridResizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: GridResizeDirective, isStandalone: true, selector: "[etGridResize]", host: { properties: { "class.et-grid-resize--active": "isResizing()" }, classAttribute: "et-grid-resize" }, ngImport: i0 }); }
@@ -5306,6 +5555,67 @@ const fromGridPosition = (pos) => ({
     rows: pos.rowSpan,
 });
 
+class GridItemToolbarComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: GridItemToolbarComponent, isStandalone: true, selector: "et-grid-item-toolbar, [et-grid-item-toolbar]", host: { listeners: { "pointerdown": "$event.stopPropagation()" }, classAttribute: "et-grid-item-toolbar" }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".et-grid-item-toolbar{display:inline-flex;align-items:center;gap:var(--et-grid-item-toolbar-gap, 4px);padding:var(--et-grid-item-toolbar-padding, 4px);border-radius:var(--et-grid-item-toolbar-radius, 8px);background:var(--et-grid-item-toolbar-background, transparent)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-grid-item-toolbar, [et-grid-item-toolbar]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'et-grid-item-toolbar',
+                        '(pointerdown)': '$event.stopPropagation()',
+                    }, styles: [".et-grid-item-toolbar{display:inline-flex;align-items:center;gap:var(--et-grid-item-toolbar-gap, 4px);padding:var(--et-grid-item-toolbar-padding, 4px);border-radius:var(--et-grid-item-toolbar-radius, 8px);background:var(--et-grid-item-toolbar-background, transparent)}\n"] }]
+        }] });
+
+class GridItemDefaultActionsComponent {
+    constructor() {
+        this.grid = inject(GRID_TOKEN);
+        this.gridConfig = injectGridConfig();
+        this.locale = injectLocale();
+        this.itemId = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemId" }] : /* istanbul ignore next */ []));
+        this.data = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "data" }] : /* istanbul ignore next */ []));
+        this.removeAriaLabel = computed(() => this.gridConfig.transformer(this.gridConfig.removeActionAriaLabel, this.locale.currentLocale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []));
+    }
+    remove() {
+        this.grid.removeItem(this.itemId());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemDefaultActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: GridItemDefaultActionsComponent, isStandalone: true, selector: "et-grid-item-default-actions", inputs: { itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons(TIMES_ICON)], ngImport: i0, template: `
+    <et-grid-item-toolbar>
+      <button
+        [attr.aria-label]="removeAriaLabel()"
+        (click)="remove()"
+        class="et-grid-item-default-actions__remove"
+        et-icon-button
+        size="xs"
+        type="button"
+      >
+        <i etIcon="et-times"></i>
+      </button>
+    </et-grid-item-toolbar>
+  `, isInline: true, styles: ["et-grid-item-default-actions .et-grid-item-default-actions__remove{color:rgb(var(--et-surface-color-muted))}et-grid-item-default-actions .et-grid-item-default-actions__remove:hover{color:rgb(var(--et-surface-color))}\n"], dependencies: [{ kind: "component", type: GridItemToolbarComponent, selector: "et-grid-item-toolbar, [et-grid-item-toolbar]" }, { kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "allowHardcodedColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemDefaultActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-grid-item-default-actions', template: `
+    <et-grid-item-toolbar>
+      <button
+        [attr.aria-label]="removeAriaLabel()"
+        (click)="remove()"
+        class="et-grid-item-default-actions__remove"
+        et-icon-button
+        size="xs"
+        type="button"
+      >
+        <i etIcon="et-times"></i>
+      </button>
+    </et-grid-item-toolbar>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GridItemToolbarComponent, IconButtonComponent, ...ICON_IMPORTS], providers: [provideIcons(TIMES_ICON)], styles: ["et-grid-item-default-actions .et-grid-item-default-actions__remove{color:rgb(var(--et-surface-color-muted))}et-grid-item-default-actions .et-grid-item-default-actions__remove:hover{color:rgb(var(--et-surface-color))}\n"] }]
+        }], propDecorators: { itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
 class GridItemComponent {
     constructor() {
         this.grid = inject(GRID_TOKEN);
@@ -5314,16 +5624,14 @@ class GridItemComponent {
         this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.gridDrag = inject(GridDragDirective);
         this.gridResize = inject(GridResizeDirective);
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.ariaLabel = input('Grid item', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
         this.removed = output();
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
-        this.gridConfig = injectGridConfig();
-        this.locale = injectLocale();
+        this.itemContent = viewChild('itemContent', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemContent" }] : /* istanbul ignore next */ []));
         this.isReadOnly = computed(() => this.grid.readOnly(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
-        this.dragHandleAriaLabel = computed(() => this.gridConfig.transformer(this.gridConfig.dragHandleAriaLabel, this.locale.currentLocale()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dragHandleAriaLabel" }] : /* istanbul ignore next */ []));
         this.resolvedSurface = computed(() => {
             const themes = this.surfaceThemes;
             const parent = this.parentSurfaceProvider;
@@ -5341,6 +5649,17 @@ class GridItemComponent {
                 this.provideSurface.clearForcedSurface();
             }
         });
+        effect(() => {
+            const el = this.itemContent()?.nativeElement;
+            if (el) {
+                this.grid.registerContentElement(this.gridItem.itemId(), el);
+            }
+        });
+    }
+    blockPointerDownWhenReadOnly(event) {
+        if (this.isReadOnly()) {
+            event.stopPropagation();
+        }
     }
     applyKeyboardShortcut(event) {
         if (this.isReadOnly())
@@ -5374,6 +5693,7 @@ class GridItemComponent {
         }
         if (event.shiftKey) {
             let handled = true;
+            this.grid.snapshotRects();
             switch (event.key) {
                 case 'ArrowRight':
                     this.grid.resizeItem({ id: this.gridItem.itemId(), newColSpan: pos.colSpan + 1, newRowSpan: pos.rowSpan });
@@ -5391,9 +5711,16 @@ class GridItemComponent {
                     handled = false;
             }
             if (handled) {
+                // Discrete keyboard step: animate the neighbours (translate-only) and commit
+                // so the resize base doesn't carry over into the next keypress or gesture.
+                this.grid.animateLayoutTransition({ excludeIds: new Set([this.gridItem.itemId()]) });
+                this.grid.commitResize();
                 event.preventDefault();
                 event.stopPropagation();
             }
+            else {
+                this.grid.commitResize();
+            }
         }
         if (event.key === 'Delete' || event.key === 'Backspace') {
             if (event.ctrlKey || event.metaKey) {
@@ -5404,12 +5731,8 @@ class GridItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "applyKeyboardShortcut($event)" }, properties: { "class.et-grid-item--dragging": "!isReadOnly() && gridDrag.dragHandle.isDragging()", "class.et-grid-item--resizing": "gridResize.isResizing()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel()", "attr.tabindex": "\"0\"" }, classAttribute: "et-grid-item" }, hostDirectives: [{ directive: GridItemDirective, inputs: ["itemId", "itemId", "minColSpan", "minColSpan", "maxColSpan", "maxColSpan", "minRowSpan", "minRowSpan", "maxRowSpan", "maxRowSpan"] }, { directive: GridDragDirective }, { directive: GridResizeDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: `
-    <div [attr.aria-label]="dragHandleAriaLabel()" class="et-grid-item__drag-handle">
-      <ng-content select="[etGridItemDragHandle]" />
-    </div>
-
-    <div (pointerdown)="$event.stopPropagation()" class="et-grid-item__content">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: GridItemComponent, isStandalone: true, selector: "et-grid-item, [et-grid-item]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removed: "removed" }, host: { listeners: { "keydown": "applyKeyboardShortcut($event)" }, properties: { "class.et-grid-item--dragging": "!isReadOnly() && gridDrag.dragHandle.isDragging()", "class.et-grid-item--resizing": "gridResize.isResizing()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel()", "attr.tabindex": "\"0\"" }, classAttribute: "et-grid-item" }, viewQueries: [{ propertyName: "itemContent", first: true, predicate: ["itemContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridItemDirective, inputs: ["itemId", "itemId", "minColSpan", "minColSpan", "maxColSpan", "maxColSpan", "minRowSpan", "minRowSpan", "maxRowSpan", "maxRowSpan"] }, { directive: GridDragDirective }, { directive: GridResizeDirective }, { directive: i1.ProvideSurfaceDirective }], ngImport: i0, template: `
+    <div #itemContent (pointerdown)="blockPointerDownWhenReadOnly($event)" class="et-grid-item__content">
       <ng-content />
     </div>
 
@@ -5425,16 +5748,12 @@ class GridItemComponent {
     <div (pointerdown)="$event.stopPropagation()" class="et-grid-item__actions">
       <ng-content select="[etGridItemAction]" />
     </div>
-  `, isInline: true, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{cursor:grab;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"], dependencies: [{ kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__content{flex:1;min-height:0}.et-grid:not(.et-grid--readonly) .et-grid-item__content{cursor:grab}.et-grid-item--dragging .et-grid-item__content{cursor:grabbing}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"], dependencies: [{ kind: "component", type: ResizeHandlesComponent, selector: "et-resize-handles", inputs: ["edges", "disabled"], outputs: ["resizeStarted", "resizeMoved", "resizeEnded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-grid-item, [et-grid-item]', template: `
-    <div [attr.aria-label]="dragHandleAriaLabel()" class="et-grid-item__drag-handle">
-      <ng-content select="[etGridItemDragHandle]" />
-    </div>
-
-    <div (pointerdown)="$event.stopPropagation()" class="et-grid-item__content">
+    <div #itemContent (pointerdown)="blockPointerDownWhenReadOnly($event)" class="et-grid-item__content">
       <ng-content />
     </div>
 
@@ -5466,21 +5785,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         '[attr.aria-label]': 'ariaLabel()',
                         '[attr.tabindex]': '"0"',
                         '(keydown)': 'applyKeyboardShortcut($event)',
-                    }, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__drag-handle{cursor:grab;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.et-grid-item--dragging .et-grid-item__drag-handle{cursor:grabbing}.et-grid-item__content{flex:1;min-height:0}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }] } });
+                    }, styles: [".et-grid-item{position:relative;display:flex;flex-direction:column;outline:none;will-change:transform;border-radius:var(--et-grid-item-radius, 0);background:var(--et-grid-item-bg, var(--et-surface-background-solid))}.et-grid-item:is(.et-grid-item--dragging){z-index:100;cursor:grabbing;-webkit-user-select:none;user-select:none}.et-grid-item:is(.et-grid-item--resizing){z-index:100;-webkit-user-select:none;user-select:none}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--nw:after{content:\"\";position:absolute;border-radius:2px;background:var(--et-grid-item-resize-handle-color, var(--et-surface-color-solid));opacity:.2}.et-grid-item:hover .et-resize-handle--e:after,.et-grid-item--resizing .et-resize-handle--e:after{right:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--w:after,.et-grid-item--resizing .et-resize-handle--w:after{left:2px;top:50%;transform:translateY(-50%);width:3px;height:24px}.et-grid-item:hover .et-resize-handle--s:after,.et-grid-item--resizing .et-resize-handle--s:after{bottom:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--n:after,.et-grid-item--resizing .et-resize-handle--n:after{top:2px;left:50%;transform:translate(-50%);height:3px;width:24px}.et-grid-item:hover .et-resize-handle--se:after,.et-grid-item--resizing .et-resize-handle--se:after{bottom:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--sw:after,.et-grid-item--resizing .et-resize-handle--sw:after{bottom:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--ne:after,.et-grid-item--resizing .et-resize-handle--ne:after{top:3px;right:3px;width:8px;height:8px;border-radius:1px}.et-grid-item:hover .et-resize-handle--nw:after,.et-grid-item--resizing .et-resize-handle--nw:after{top:3px;left:3px;width:8px;height:8px;border-radius:1px}.et-grid-item__content{flex:1;min-height:0}.et-grid:not(.et-grid--readonly) .et-grid-item__content{cursor:grab}.et-grid-item--dragging .et-grid-item__content{cursor:grabbing}.et-grid-item__actions{position:absolute;top:4px;right:4px;display:flex;gap:4px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], removed: [{ type: i0.Output, args: ["removed"] }], itemContent: [{ type: i0.ViewChild, args: ['itemContent', { isSignal: true }] }] } });
 
 class GridComponent {
     constructor() {
         this.grid = inject(GridDirective);
-        this.ghostRef = viewChild('ghostRef', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "ghostRef" }] : /* istanbul ignore next */ []));
         this.gridConfig = injectGridConfig();
         this.locale = injectLocale();
-        this.isReadOnly = computed(() => this.grid.readOnly(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isReadOnly" }] : /* istanbul ignore next */ []));
-        this.dragHandleComponent = computed(() => this.gridConfig.dragHandleComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dragHandleComponent" }] : /* istanbul ignore next */ []));
-        this.actionsComponent = computed(() => this.gridConfig.actionsComponent, /* @ts-ignore */
+        this.ghostRef = viewChild('ghostRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ghostRef" }] : /* istanbul ignore next */ []));
+        this.actionsComponent = computed(() => {
+            const configured = this.gridConfig.actionsComponent;
+            return configured === undefined ? GridItemDefaultActionsComponent : configured;
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "actionsComponent" }] : /* istanbul ignore next */ []));
         this.registeredItems = computed(() => {
             const registrations = this.gridConfig.registrations;
@@ -5506,7 +5824,7 @@ class GridComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "attr.aria-label": "ariaLabel()", "style.--_et-grid-columns": "gridColumns()", "style.--et-grid-gap": "gridGap()", "style.--et-grid-row-height": "gridRowHeight()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: GridComponent, isStandalone: true, selector: "et-grid, [et-grid]", host: { attributes: { "role": "region" }, properties: { "class.et-grid--readonly": "grid.readOnly()", "attr.aria-label": "ariaLabel()", "style.--_et-grid-columns": "gridColumns()", "style.--et-grid-gap": "gridGap()", "style.--et-grid-row-height": "gridRowHeight()" }, classAttribute: "et-grid" }, viewQueries: [{ propertyName: "ghostRef", first: true, predicate: ["ghostRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: GridDirective, inputs: ["breakpoints", "breakpoints", "rowHeight", "rowHeight", "gap", "gap", "initialItems", "initialItems", "readOnly", "readOnly"], outputs: ["layoutChange", "layoutChange"] }], ngImport: i0, template: `
     @for (entry of registeredItems(); track entry.item.id) {
       <et-grid-item
         [itemId]="entry.item.id"
@@ -5515,16 +5833,6 @@ class GridComponent {
         [minRowSpan]="entry.reg.constraints?.minRowSpan ?? 1"
         [maxRowSpan]="entry.reg.constraints?.maxRowSpan ?? 4"
       >
-        @if (dragHandleComponent()) {
-          <div etGridItemDragHandle>
-            <ng-container
-              [ngComponentOutlet]="dragHandleComponent()!"
-              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
-            />
-          </div>
-        } @else {
-          <div etGridItemDragHandle></div>
-        }
         <ng-container [ngComponentOutlet]="entry.reg.component" [ngComponentOutletInputs]="{ data: entry.item.data }" />
         @if (actionsComponent()) {
           <div etGridItemAction>
@@ -5533,8 +5841,6 @@ class GridComponent {
               [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
             />
           </div>
-        } @else if (!isReadOnly()) {
-          <button (click)="grid.removeItem(entry.item.id)" etGridItemAction>✕</button>
         }
       </et-grid-item>
     }
@@ -5547,7 +5853,7 @@ class GridComponent {
         class="et-grid-ghost"
       ></div>
     }
-  `, isInline: true, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], dependencies: [{ kind: "component", type: GridItemComponent, selector: "et-grid-item, [et-grid-item]", inputs: ["ariaLabel"], outputs: ["removed"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"], dependencies: [{ kind: "component", type: GridItemComponent, selector: "et-grid-item, [et-grid-item]", inputs: ["ariaLabel"], outputs: ["removed"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
@@ -5560,16 +5866,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         [minRowSpan]="entry.reg.constraints?.minRowSpan ?? 1"
         [maxRowSpan]="entry.reg.constraints?.maxRowSpan ?? 4"
       >
-        @if (dragHandleComponent()) {
-          <div etGridItemDragHandle>
-            <ng-container
-              [ngComponentOutlet]="dragHandleComponent()!"
-              [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
-            />
-          </div>
-        } @else {
-          <div etGridItemDragHandle></div>
-        }
         <ng-container [ngComponentOutlet]="entry.reg.component" [ngComponentOutletInputs]="{ data: entry.item.data }" />
         @if (actionsComponent()) {
           <div etGridItemAction>
@@ -5578,8 +5874,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
               [ngComponentOutletInputs]="{ data: entry.item.data, itemId: entry.item.id }"
             />
           </div>
-        } @else if (!isReadOnly()) {
-          <button (click)="grid.removeItem(entry.item.id)" etGridItemAction>✕</button>
         }
       </et-grid-item>
     }
@@ -5601,11 +5895,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     ], host: {
                         class: 'et-grid',
                         role: 'region',
+                        '[class.et-grid--readonly]': 'grid.readOnly()',
                         '[attr.aria-label]': 'ariaLabel()',
                         '[style.--_et-grid-columns]': 'gridColumns()',
                         '[style.--et-grid-gap]': 'gridGap()',
                         '[style.--et-grid-row-height]': 'gridRowHeight()',
-                    }, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__drag-handle{cursor:default;pointer-events:none}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
+                    }, styles: ["@property --et-grid-gap{syntax: \"<length>\"; inherits: false; initial-value: 16px;}@property --et-grid-row-height{syntax: \"<length>\"; inherits: false; initial-value: 100px;}@property --et-grid-padding{syntax: \"<length>\"; inherits: false; initial-value: 0px;}.et-grid{display:grid;grid-template-columns:repeat(var(--_et-grid-columns, 12),1fr);grid-auto-rows:var(--et-grid-row-height);gap:var(--et-grid-gap);padding:var(--et-grid-padding);position:relative;min-height:0}.et-grid:has(.et-grid-item--dragging,.et-grid-item--resizing){-webkit-user-select:none;user-select:none;cursor:grabbing}.et-grid:has(.et-grid-item--resizing){cursor:nwse-resize}.et-grid-ghost{border-radius:8px;background:rgb(var(--et-surface-color, 23 23 23) / .08);border:2px dashed rgb(var(--et-surface-color, 23 23 23) / .2);pointer-events:none;transition:grid-column 0s,grid-row 0s}.et-grid--readonly .et-grid-item__actions{display:none}.et-grid--readonly .et-grid-item:hover .et-resize-handle--e:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--s:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--w:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--n:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--se:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--sw:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--ne:after,.et-grid--readonly .et-grid-item:hover .et-resize-handle--nw:after{content:unset}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ghostRef: [{ type: i0.ViewChild, args: ['ghostRef', { isSignal: true }] }] } });
 
 const posEq = (a, b) => {
@@ -5947,7 +6242,13 @@ const GRID_ERROR_CODES = {
     INVALID_LAYOUT_STATE: 1903,
 };
 
-const GridImports = [GridComponent, GridItemComponent, GridDebugComponent];
+const GridImports = [
+    GridComponent,
+    GridItemComponent,
+    GridItemToolbarComponent,
+    GridItemDefaultActionsComponent,
+    GridDebugComponent,
+];
 
 const NOTIFICATION_ERROR_CODES = {
     ACTION_OUTSIDE_NOTIFICATION: 1700,
@@ -6663,6 +6964,10 @@ class OverlayContainerComponent {
         this.destroyRef = inject(DestroyRef);
         this.elementRef = inject(ElementRef);
         this.overlayRef = inject(OVERLAY_REF);
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
+        this.surfaceContextTracker = injectSurfaceContextTracker();
+        this.renderer = injectRenderer();
+        this.rootBoundary = injectBoundaryElement();
         this.component = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "component" }] : /* istanbul ignore next */ []));
         this.componentInputs = input(undefined, /* @ts-ignore */
@@ -6672,10 +6977,6 @@ class OverlayContainerComponent {
         this.renderArrow = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "renderArrow" }] : /* istanbul ignore next */ []));
         this.contentOutlet = viewChild.required('contentOutlet', { read: ViewContainerRef });
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
-        this.surfaceContextTracker = injectSurfaceContextTracker();
-        this.renderer = injectRenderer();
-        this.rootBoundary = injectBoundaryElement();
         this.animatedLifecycle = signal(inject(ANIMATED_LIFECYCLE_TOKEN), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "animatedLifecycle" }] : /* istanbul ignore next */ []));
         this.contentComponentRef = signal(null, /* @ts-ignore */
@@ -8464,6 +8765,7 @@ const topSheetOverlayStrategy = (config = {}) => {
 class OverlayDirective {
     constructor() {
         this.destroyRef = inject(DestroyRef);
+        this.overlayManager = injectOverlayManager();
         this.mode = input('non-modal', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         this.role = input(undefined, /* @ts-ignore */
@@ -8508,7 +8810,6 @@ class OverlayDirective {
         ...(ngDevMode ? [{ debugName: "autoCloseIfReferenceHidden" }] : /* istanbul ignore next */ []));
         this.mirrorWidth = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mirrorWidth" }] : /* istanbul ignore next */ []));
-        this.overlayManager = injectOverlayManager();
         /** @internal */
         this.registeredAnchor = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "registeredAnchor" }] : /* istanbul ignore next */ []));
@@ -8778,9 +9079,9 @@ class OverlayBodyComponent {
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
         this.scrollObserver = inject(ScrollObserverDirective);
+        this.overlayManager = injectOverlayManager();
         this.dividers = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dividers" }] : /* istanbul ignore next */ []));
-        this.overlayManager = injectOverlayManager();
         this.dividersEnabled = computed(() => this.dividers() === 'dynamic' || this.dividers() === 'static', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dividersEnabled" }] : /* istanbul ignore next */ []));
         this.dynamicDividersEnabled = computed(() => this.dividers() === 'dynamic', /* @ts-ignore */
@@ -8868,12 +9169,12 @@ class OverlayCloseDirective {
     constructor() {
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
+        this.overlayManager = injectOverlayManager();
         this.ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
         this.type = input('button', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         this.closeResult = input(undefined, { ...(ngDevMode ? { debugName: "closeResult" } : /* istanbul ignore next */ {}), alias: 'etOverlayClose' });
         this.closeResultAlt = input(undefined, { ...(ngDevMode ? { debugName: "closeResultAlt" } : /* istanbul ignore next */ {}), alias: 'et-overlay-close' });
-        this.overlayManager = injectOverlayManager();
         applyHostListener('click', () => {
             const overlayRef = this.overlayRef ?? getClosestOverlay(this.elementRef, this.overlayManager.openOverlays());
             overlayRef?.close(this.closeResult() ?? this.closeResultAlt());
@@ -9192,8 +9493,8 @@ class OverlayMainDirective {
         this.parent = inject(OVERLAY_MAIN_TOKEN, { optional: true, skipSelf: true });
         this.elementRef = inject(ElementRef);
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
-        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'etOverlayMain', transform: booleanAttribute });
         this.overlayManager = injectOverlayManager();
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : /* istanbul ignore next */ {}), alias: 'etOverlayMain', transform: booleanAttribute });
     }
     ngOnInit() {
         this.overlayRef = resolveClosestOverlay({
@@ -9280,10 +9581,10 @@ class OverlayTitleDirective {
     constructor() {
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
-        this.id = input(`et-overlay-title-${uniqueId++}`, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.overlayManager = injectOverlayManager();
         this.renderer = injectRenderer();
+        this.id = input(`et-overlay-title-${uniqueId++}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.overlayRef = resolveClosestOverlay({
@@ -9581,8 +9882,8 @@ class OverlayBackOrCloseDirective {
     constructor() {
         this.overlayRef = inject(OVERLAY_REF);
         this.elementRef = inject(ElementRef);
-        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.router = injectOverlayRouter();
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         fromEvent(this.elementRef.nativeElement, 'click')
             .pipe(filter(() => !this.disabled()), tap(() => {
             if (!this.router.back()) {
@@ -9619,8 +9920,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 class OverlayRouteHeaderTemplateOutletComponent {
     constructor() {
         this.overlay = inject(OVERLAY_REF);
-        this.animatedLifecycle = viewChild.required(ANIMATED_LIFECYCLE_TOKEN);
         this.router = injectOverlayRouter();
+        this.animatedLifecycle = viewChild.required(ANIMATED_LIFECYCLE_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayRouteHeaderTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: OverlayRouteHeaderTemplateOutletComponent, isStandalone: true, selector: "et-overlay-route-header-template-outlet", host: { properties: { "class.et-overlay-router-outlet-nav-dir--backward": "router.navigationDirection() === 'backward'", "class.et-overlay-router-outlet-nav-dir--forward": "router.navigationDirection() === 'forward'" }, classAttribute: "et-overlay-route-header-template-outlet-host" }, viewQueries: [{ propertyName: "animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, isSignal: true }], ngImport: i0, template: `
@@ -9654,11 +9955,11 @@ const OVERLAY_ROUTER_LINK_TOKEN = new InjectionToken('OVERLAY_ROUTER_LINK_TOKEN'
 class OverlayRouterLinkDirective {
     constructor() {
         this.elementRef = inject(ElementRef);
+        this.router = injectOverlayRouter();
         this.path = input.required({ ...(ngDevMode ? { debugName: "path" } : /* istanbul ignore next */ {}), alias: 'etOverlayRouterLink' });
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.navigationDirection = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigationDirection" }] : /* istanbul ignore next */ []));
-        this.router = injectOverlayRouter();
         this.isActive = computed(() => this.router.resolvePath(this.path()).route === this.router.currentRoute(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
         fromEvent(this.elementRef.nativeElement, 'click')
@@ -9867,13 +10168,13 @@ class OverlayRouterOutletComponent {
         this.injector = inject(Injector);
         this.overlayRef = inject(OVERLAY_REF, { optional: true });
         this.elementRef = inject(ElementRef);
+        this.router = injectOverlayRouter();
+        this.renderer = injectRenderer();
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.sharedRouteTemplate = contentChild(OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, { ...(ngDevMode ? { debugName: "sharedRouteTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.outletDisabledTemplate = contentChild(OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, { ...(ngDevMode ? { debugName: "outletDisabledTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.pageWrappers = viewChildren('pageWrapper', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageWrappers" }] : /* istanbul ignore next */ []));
-        this.router = injectOverlayRouter();
-        this.renderer = injectRenderer();
         this.hasSidebar = !!injectSidebarOverlay({ optional: true });
         this.wasDisabled = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "wasDisabled" }] : /* istanbul ignore next */ []));
@@ -10046,12 +10347,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class OverlaySidebarComponent {
     constructor() {
+        this.sidebar = injectSidebarOverlay();
         this.pageDividers = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pageDividers" }] : /* istanbul ignore next */ []));
         this.sidebarContent = viewChild.required('sidebarContentTpl');
         this.sidebarHeaderContent = contentChild(OVERLAY_HEADER_TEMPLATE_TOKEN, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sidebarHeaderContent" }] : /* istanbul ignore next */ []));
-        this.sidebar = injectSidebarOverlay();
         syncSignal(this.sidebarContent, this.sidebar.sidebarContentTemplate, { skipSyncRead: true });
         syncSignal(this.sidebarHeaderContent, this.sidebar.sidebarHeaderTemplate);
         syncSignal(this.pageDividers, this.sidebar.sidebarPageDividers);
@@ -11532,9 +11833,9 @@ class PipBackDirective {
     constructor() {
         this.chrome = inject(PIP_CHROME_REF_TOKEN, { optional: true });
         this.tokenEntry = inject(PIP_ENTRY_TOKEN, { optional: true });
+        this.pipManager = injectPipManager();
         this.entry = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "entry" }] : /* istanbul ignore next */ []));
-        this.pipManager = injectPipManager();
     }
     back(event) {
         event.stopPropagation();
@@ -12002,13 +12303,13 @@ class PipPlayerComponent {
         this.document = inject(DOCUMENT$1);
         this.el = inject(ElementRef);
         this.pipCell = inject(PipCellDirective, { optional: true });
+        this.streamManager = injectStreamManager();
+        this.pipManager = injectPipManager();
+        this.renderer = injectRenderer();
         this.entry = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "entry" }] : /* istanbul ignore next */ []));
         this.showThumbnail = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "showThumbnail" }] : /* istanbul ignore next */ []));
-        this.streamManager = injectStreamManager();
-        this.pipManager = injectPipManager();
-        this.renderer = injectRenderer();
         this.isReady = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isReady" }] : /* istanbul ignore next */ []));
         this.resolvedEntry = computed(() => this.entry() ?? this.pipCell?.cell().pip ?? null, /* @ts-ignore */
@@ -12104,11 +12405,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
 
 class StreamPipChromeComponent {
     constructor() {
+        this.pipManager = injectPipManager();
         this.stageRef = viewChild(PipStageDirective, { ...(ngDevMode ? { debugName: "stageRef" } : /* istanbul ignore next */ {}), read: ElementRef });
         this.pipWindowRef = viewChild(PipWindowComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pipWindowRef" }] : /* istanbul ignore next */ []));
         this.gridBtnRef = viewChild(PipGridToggleDirective, { ...(ngDevMode ? { debugName: "gridBtnRef" } : /* istanbul ignore next */ {}), read: ElementRef });
-        this.pipManager = injectPipManager();
         this.state = createPipChromeState();
         this.animations = createPipChromeAnimations(this.state, {
             stageRef: this.stageRef,
@@ -12712,9 +13013,9 @@ class PipCloseDirective {
         this.chrome = inject(PIP_CHROME_REF_TOKEN, { optional: true });
         this.pipWindow = inject(PipWindowComponent, { optional: true });
         this.tokenEntry = inject(PIP_ENTRY_TOKEN, { optional: true });
+        this.pipManager = injectPipManager();
         this.entry = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "entry" }] : /* istanbul ignore next */ []));
-        this.pipManager = injectPipManager();
     }
     close(event) {
         event.stopPropagation();
@@ -12759,12 +13060,12 @@ class PipSlotPlaceholderComponent {
     constructor() {
         this.slotPlayerId = inject(STREAM_SLOT_PLAYER_ID_TOKEN);
         this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
-        this.bringBackDir = viewChild(PipBringBackDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "bringBackDir" }] : /* istanbul ignore next */ []));
         this.pipManager = injectPipManager();
         this.config = injectPipSlotPlaceholderConfig();
         this.locale = injectLocale();
         this.surfaceThemes = injectSurfaceThemes({ optional: true });
+        this.bringBackDir = viewChild(PipBringBackDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bringBackDir" }] : /* istanbul ignore next */ []));
         this.cardSurface = computed(() => {
             const themes = this.surfaceThemes;
             if (!themes)
@@ -13159,11 +13460,11 @@ class StreamPlayerSlotDirective {
         this.playerComponent = inject(STREAM_PLAYER_COMPONENT_TOKEN);
         this.provideSurface = inject(ProvideSurfaceDirective);
         this.parentSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
+        this.styleManager = injectStyleManager();
         this.streamSlotPriority = input(false, { ...(ngDevMode ? { debugName: "streamSlotPriority" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.streamSlotOnPipBack = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "streamSlotOnPipBack" }] : /* istanbul ignore next */ []));
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
-        this.styleManager = injectStyleManager();
         this.resolvedSurface = computed(() => {
             const themes = this.surfaceThemes;
             if (!themes)
@@ -16199,6 +16500,7 @@ class ToggletipComponent {
         this.triggerColorProvider = inject(COLOR_PROVIDER, { optional: true, skipSelf: true });
         this.triggerSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
         this.injector = inject(Injector);
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.toggletipId = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "toggletipId" }] : /* istanbul ignore next */ []));
         this.contentId = input.required(/* @ts-ignore */
@@ -16209,7 +16511,6 @@ class ToggletipComponent {
         ...(ngDevMode ? [{ debugName: "colorProvider" }] : /* istanbul ignore next */ []));
         this.surfaceProvider = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "surfaceProvider" }] : /* istanbul ignore next */ []));
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.hasTemplate = computed(() => this.content() instanceof TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasTemplate" }] : /* istanbul ignore next */ []));
         this.contentText = computed(() => {
@@ -16270,6 +16571,7 @@ class ToggletipDirective {
         this.elementRef = inject(ElementRef);
         this.colorProvider = inject(COLOR_PROVIDER, { optional: true });
         this.surfaceProvider = inject(SURFACE_PROVIDER, { optional: true });
+        this.overlayManager = injectOverlayManager();
         this.content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'etToggletip' });
         this.ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'etToggletipAriaLabel' });
         this.ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'etToggletipAriaLabelledBy' });
@@ -16285,7 +16587,6 @@ class ToggletipDirective {
         ...(ngDevMode ? [{ debugName: "viewportPadding" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'etToggletipDisabled' });
         this.open = model(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), alias: 'etToggletipOpen' });
-        this.overlayManager = injectOverlayManager();
         /** @internal */
         this.overlayRef = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "overlayRef" }] : /* istanbul ignore next */ []));
@@ -16537,6 +16838,7 @@ class TooltipComponent {
         this.ownSurfaceProvider = inject(ProvideSurfaceDirective);
         this.triggerColorProvider = inject(COLOR_PROVIDER, { optional: true, skipSelf: true });
         this.triggerSurfaceProvider = inject(SURFACE_PROVIDER, { optional: true, skipSelf: true });
+        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.tooltipId = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
         this.content = input.required(/* @ts-ignore */
@@ -16545,7 +16847,6 @@ class TooltipComponent {
         ...(ngDevMode ? [{ debugName: "colorProvider" }] : /* istanbul ignore next */ []));
         this.surfaceProvider = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "surfaceProvider" }] : /* istanbul ignore next */ []));
-        this.surfaceThemes = injectSurfaceThemes({ optional: true });
         this.hasTemplate = computed(() => this.content() instanceof TemplateRef, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasTemplate" }] : /* istanbul ignore next */ []));
         this.contentText = computed(() => {
@@ -16609,6 +16910,9 @@ class TooltipDirective {
         this.elementRef = inject(ElementRef);
         this.colorProvider = inject(COLOR_PROVIDER, { optional: true });
         this.surfaceProvider = inject(SURFACE_PROVIDER, { optional: true });
+        this.overlayManager = injectOverlayManager();
+        this.focusVisibleTracker = injectFocusVisibleTracker();
+        this.renderer = injectRenderer();
         this.content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'etTooltip' });
         this.ariaDescription = input(null, { ...(ngDevMode ? { debugName: "ariaDescription" } : /* istanbul ignore next */ {}), alias: 'etTooltipAriaDescription' });
         this.placement = input('top', /* @ts-ignore */
@@ -16624,9 +16928,6 @@ class TooltipDirective {
         this.showDelay = input(DEFAULT_TOOLTIP_DELAY, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
         this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), alias: 'etTooltipDisabled' });
-        this.overlayManager = injectOverlayManager();
-        this.focusVisibleTracker = injectFocusVisibleTracker();
-        this.renderer = injectRenderer();
         /** @internal */
         this.overlayRef = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "overlayRef" }] : /* istanbul ignore next */ []));
@@ -16830,5 +17131,5 @@ const TOOLTIP_IMPORTS = [TooltipDirective, TooltipComponent];
  * Generated bundle index. Do not edit.
  */
 
-export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BOLD_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDirective, GridItemRef, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHandlerLinkDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RICH_TEXT_EDITOR_IMPORTS, RadioComponent, RadioGroupComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, STRIKETHROUGH_ICON, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, bottomSheetOverlayStrategy, buildAnchoredRuntimePositionStrategy, centeredOverlayStrategy, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, createGridAdapter, createNotificationRef, createOverlayHandler, createOverlayHandlerWithQueryParamLifecycle, createOverlayRef, createOverlayStrategyController, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, dialogOverlayStrategy, enableDragToDismiss, findNextRelevantHtmlElement, fromGridPosition, fullScreenDialogOverlayStrategy, getClosestOverlay, getOriginCoordinatesAndDimensions, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectDialogStrategy, injectDialogStrategyDefaults, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSidebarOverlay, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isHtmlElement, isPointerEvent, isTouchEvent, leftSheetOverlayStrategy, mergeOverlayBreakpointConfigs, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideDialogStrategy, provideDialogStrategyDefaults, provideFormSupport, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideIcons, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTopSheetStrategy, provideTopSheetStrategyDefaults, resolveClosestOverlay, rightSheetOverlayStrategy, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, toGridPosition, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy };
+export { ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, BOLD_ICON, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BrandLoaderComponent, ButtonComponent, ButtonDirective, ButtonStylesDirective, CHECKBOX_IMPORTS, CHEVRON_ICON, CHOICE_FIELD_IMPORTS, CLIPBOARD_CHECK_ICON, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxOptionComponent, ChoiceFieldComponent, DAILYMOTION_PLAYER_TOKEN, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_STREAM_PLAYER_STATE, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DescriptionComponent, FACEBOOK_PLAYER_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FocusRingDirective, FormErrorComponent, FormFieldComponent, FormFieldDirective, GRID_2X2_ICON, GRID_ERROR_CODES, GRID_TOKEN, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridImports, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, INPUT_IMPORTS, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputPrefixDirective, InputSuffixDirective, KICK_PLAYER_TOKEN, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOCK_ICON, LabelDirective, NAV_TABS_TOKEN, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STATUS, NavTabImports, NavTabLinkComponent, NavTabLinkDirective, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHandlerLinkDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PENCIL_ICON, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLUS_ICON, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, RICH_TEXT_EDITOR_IMPORTS, RadioComponent, RadioGroupComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, SCROLLABLE_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SOOP_PLAYER_TOKEN, STREAM_CONSENT_TOKEN, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_USER_CONSENT_PROVIDER_TOKEN, STRIKETHROUGH_ICON, SWITCH_IMPORTS, ScrollableActiveChildDirective, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableErrorCode, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksDirective, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamImports, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_PANEL_TOKEN, TAB_SIZES, TIKTOK_PLAYER_TOKEN, TIMES_ICON, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TRIANGLE_EXCLAMATION_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabImports, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TextButtonComponent, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, TooltipComponent, TooltipDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, bottomSheetOverlayStrategy, buildAnchoredRuntimePositionStrategy, centeredOverlayStrategy, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, createGridAdapter, createNotificationRef, createOverlayHandler, createOverlayHandlerWithQueryParamLifecycle, createOverlayRef, createOverlayStrategyController, createPipChromeAnimations, createPipChromeState, createStreamConfig, createStreamPlayerSlot, dialogOverlayStrategy, enableDragToDismiss, findNextRelevantHtmlElement, fromGridPosition, fullScreenDialogOverlayStrategy, getClosestOverlay, getOriginCoordinatesAndDimensions, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectDialogStrategy, injectDialogStrategyDefaults, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSidebarOverlay, injectStreamConfig, injectStreamConsentConfig, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isHtmlElement, isPointerEvent, isTouchEvent, leftSheetOverlayStrategy, mergeOverlayBreakpointConfigs, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideDialogStrategy, provideDialogStrategyDefaults, provideFormSupport, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideIcons, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideStreamConfig, provideStreamConsentConfig, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTopSheetStrategy, provideTopSheetStrategyDefaults, resolveClosestOverlay, rightSheetOverlayStrategy, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, toGridPosition, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy };
 //# sourceMappingURL=ethlete-components.mjs.map