@skyux/layout 14.0.0-alpha.8 → 14.0.0-beta.0

package/fesm2022/skyux-layout.mjs

@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, contentChildren, effect, Inject, input, signal, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef, contentChildren, effect, Inject, input, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@skyux/router';
@@ -13,11 +13,11 @@ import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
 import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import { takeUntil, take } from 'rxjs/operators';
 import * as i1$1 from '@skyux/core';
-import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, SkyCoreAdapterService, SkyIdModule } from '@skyux/core';
+import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, SkyCoreAdapterService, _SkyAnimationEndHandlerDirective, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
-import * as i3$1 from '@skyux/i18n';
+import * as i5$1 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import * as i1$3 from '@skyux/help-inline';
 import { SkyHelpInlineModule } from '@skyux/help-inline';
@@ -25,9 +25,8 @@ import * as i3$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@skyux/forms';
 import { SkyCheckboxModule } from '@skyux/forms';
-import * as i2$2 from '@skyux/indicators';
+import * as i3$1 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
-import { trigger, transition, style, query, group, animate, state } from '@angular/animations';
 import * as i1$4 from '@skyux/modals';
 import { SkyModalModule } from '@skyux/modals';
 
@@ -407,7 +406,7 @@ class SkyBackToTopComponent {
         this.#_scrollToTopClick.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyBackToTopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyBackToTopComponent, isStandalone: false, selector: "sky-back-to-top", ngImport: i0, template: "<div\n  class=\"sky-back-to-top\"\n  [skyThemeClass]=\"{\n    'sky-shadow': 'default',\n    'sky-elevation-3': 'modern'\n  }\"\n>\n  <button\n    class=\"sky-btn sky-btn-link-inline\"\n    type=\"button\"\n    (click)=\"onScrollToTopClick()\"\n  >\n    {{ 'skyux_back_to_top' | skyLibResources }}\n  </button>\n</div>\n", styles: [".sky-back-to-top:not(.sky-theme-modern *){--sky-override-back-to-top-padding: var(--sky-margin-stacked-sm) var(--sky-margin-inline-lg);--sky-override-back-to-top-background-color: #ffffff}.sky-back-to-top{display:flex;align-items:center;width:100%;background-color:var(--sky-override-back-to-top-background-color, var(--sky-color-background-container-base));padding:var(--sky-override-back-to-top-padding, var(--sky-comp-back_to_top-space-inset-top) var(--sky-comp-back_to_top-space-inset-right) var(--sky-comp-back_to_top-space-inset-bottom) var(--sky-comp-back_to_top-space-inset-left))}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyBackToTopComponent, decorators: [{
             type: Component,
@@ -968,6 +967,7 @@ class SkyInlineDeleteComponent {
     #adapterService;
     #changeDetector;
     #elRef;
+    #initialized;
     constructor(adapterService, changeDetector, elRef) {
         /**
          * Whether the deletion is pending.
@@ -982,24 +982,24 @@ class SkyInlineDeleteComponent {
          * Fires when users click the delete button.
          */
         this.deleteTriggered = new EventEmitter();
-        this.animationState = 'shown';
         this.assistiveTextId = `sky-inline-delete-assistive-text-${++nextId$2}`;
         this.type = SkyInlineDeleteType.Standard;
+        this.enterAnimationTrigger = signal(true, ...(ngDevMode ? [{ debugName: "enterAnimationTrigger" }] : []));
+        this.#initialized = false;
         this.#adapterService = adapterService;
         this.#changeDetector = changeDetector;
         this.#elRef = elRef;
     }
-    /**
-     * Initialization lifecycle hook
-     * @internal
-     */
-    ngOnInit() {
-        this.animationState = 'shown';
+    onAnimationEnd() {
+        if (!this.#initialized) {
+            this.#initialized = true;
+            this.#adapterService.setEl(this.#elRef.nativeElement);
+            // Defer focus so it runs after the animationend event handler completes.
+            setTimeout(() => {
+                this.deleteButton?.nativeElement.focus();
+            });
+        }
     }
-    /**
-     * Destruction lifecycle hook
-     * @internal
-     */
     ngOnDestroy() {
         this.#adapterService.clearListeners();
         this.cancelTriggered.complete();
@@ -1009,7 +1009,7 @@ class SkyInlineDeleteComponent {
      * @internal
      */
     onCancelClick() {
-        this.animationState = 'hidden';
+        this.cancelTriggered.emit();
     }
     /**
      * @internal
@@ -1026,81 +1026,12 @@ class SkyInlineDeleteComponent {
         this.type = type;
         this.#changeDetector.detectChanges();
     }
-    /**
-     * Handles actions that should be taken after the inline delete animates
-     * @param event The animation event
-     * @internal
-     */
-    onAnimationDone(event) {
-        if (event.toState === 'hidden') {
-            this.cancelTriggered.emit();
-        }
-        else {
-            this.deleteButton?.nativeElement.focus();
-            /* istanbul ignore else */
-            if (this.#elRef) {
-                this.#adapterService.setEl(this.#elRef.nativeElement);
-            }
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteComponent, deps: [{ token: SkyInlineDeleteAdapterService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  [@inlineDeleteAnimation]=\"animationState\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"], dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], animations: [
-            trigger('inlineDeleteAnimation', [
-                transition('* => shown', [
-                    style({
-                        opacity: 0,
-                    }),
-                    query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
-                    group([
-                        animate('300ms ease-in-out', style({ opacity: 1 })),
-                        query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                            transform: 'scale(1)',
-                        }))),
-                    ]),
-                ]),
-                transition(`shown <=> *`, [
-                    query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
-                    group([
-                        animate('300ms ease-in-out', style({
-                            opacity: 0,
-                        })),
-                        query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                            transform: 'scale(0.0)',
-                        }))),
-                    ]),
-                ]),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  skyAnimationEndHandler\n  emitOnAnimateEnter\n  animate.enter=\"sky-inline-delete-entering\"\n  animate.leave=\"sky-inline-delete-leaving\"\n  [animationTrigger]=\"enterAnimationTrigger()\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (animationEnd)=\"onAnimationEnd()\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"], dependencies: [{ kind: "directive", type: i1$1._SkyAnimationEndHandlerDirective, selector: "[skyAnimationEndHandler]", inputs: ["emitOnAnimateEnter", "animationTrigger"], outputs: ["animationEnd"] }, { kind: "component", type: i3$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-inline-delete', animations: [
-                        trigger('inlineDeleteAnimation', [
-                            transition('* => shown', [
-                                style({
-                                    opacity: 0,
-                                }),
-                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(0.0)' })),
-                                group([
-                                    animate('300ms ease-in-out', style({ opacity: 1 })),
-                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                                        transform: 'scale(1)',
-                                    }))),
-                                ]),
-                            ]),
-                            transition(`shown <=> *`, [
-                                query('.sky-inline-delete-content-animation-container', style({ transform: 'scale(1)' })),
-                                group([
-                                    animate('300ms ease-in-out', style({
-                                        opacity: 0,
-                                    })),
-                                    query('.sky-inline-delete-content-animation-container', animate('300ms ease-in-out', style({
-                                        transform: 'scale(0.0)',
-                                    }))),
-                                ]),
-                            ]),
-                        ]),
-                    ], providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], standalone: false, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  [@inlineDeleteAnimation]=\"animationState\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (@inlineDeleteAnimation.done)=\"onAnimationDone($event)\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}\n"] }]
+            args: [{ selector: 'sky-inline-delete', providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], standalone: false, template: "<div\n  class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n  role=\"alertdialog\"\n  skyAnimationEndHandler\n  emitOnAnimateEnter\n  animate.enter=\"sky-inline-delete-entering\"\n  animate.leave=\"sky-inline-delete-leaving\"\n  [animationTrigger]=\"enterAnimationTrigger()\"\n  [attr.aria-describedby]=\"assistiveTextId\"\n  [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n  (animationEnd)=\"onAnimationEnd()\"\n>\n  <span\n    class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n    [id]=\"assistiveTextId\"\n  >\n    {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n  </span>\n  <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n  <div class=\"sky-inline-delete-content\">\n    <div class=\"sky-inline-delete-content-animation-container\">\n      <button\n        #delete\n        class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n        type=\"button\"\n        (click)=\"onDeleteClick()\"\n      >\n        {{ 'skyux_inline_delete_delete' | skyLibResources }}\n      </button>\n      <button\n        class=\"sky-btn sky-btn-default\"\n        type=\"button\"\n        (click)=\"onCancelClick()\"\n      >\n        {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"] }]
         }], ctorParameters: () => [{ type: SkyInlineDeleteAdapterService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { pending: [{
                 type: Input
             }], cancelTriggered: [{
@@ -1117,14 +1048,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class SkyInlineDeleteModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [SkyLayoutResourcesModule, SkyWaitModule], exports: [SkyInlineDeleteComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, imports: [SkyLayoutResourcesModule, SkyWaitModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, declarations: [SkyInlineDeleteComponent], imports: [_SkyAnimationEndHandlerDirective,
+            SkyLayoutResourcesModule,
+            SkyWaitModule], exports: [SkyInlineDeleteComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, imports: [SkyLayoutResourcesModule,
+            SkyWaitModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyInlineDeleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyInlineDeleteComponent],
-                    imports: [SkyLayoutResourcesModule, SkyWaitModule],
+                    imports: [
+                        _SkyAnimationEndHandlerDirective,
+                        SkyLayoutResourcesModule,
+                        SkyWaitModule,
+                    ],
                     exports: [SkyInlineDeleteComponent],
                 }]
         }] });
@@ -1244,11 +1182,11 @@ class SkyCardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyCardComponent, deps: [{ token: i1$1.SkyLogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyCardComponent, isStandalone: false, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div class=\"sky-card-check\">\n            <sky-checkbox\n              [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n              [ngModel]=\"selected\"\n              (click)=\"$event.stopPropagation()\"\n              (ngModelChange)=\"onCheckboxChange($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyCardComponent, isStandalone: false, selector: "sky-card", inputs: { size: "size", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, queries: [{ propertyName: "inlineDeleteComponent", predicate: SkyInlineDeleteComponent }, { propertyName: "titleComponent", predicate: SkyCardTitleComponent }], ngImport: i0, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1\n              class=\"sky-card-title sky-theme-font-heading-2 sky-font-heading-2\"\n            >\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div class=\"sky-card-check\">\n            <sky-checkbox\n              [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n              [ngModel]=\"selected\"\n              (click)=\"$event.stopPropagation()\"\n              (ngModelChange)=\"onCheckboxChange($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-theme-padding-inset-balanced-s\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color var(--sky-global-duration-short);vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color var(--sky-global-duration-short)}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "helpPopoverContent", "helpPopoverTitle", "iconName", "checkboxType", "checked", "indeterminate", "required", "labelText", "labelHidden", "hintText", "stacked", "helpKey"], outputs: ["change", "checkedChange", "disabledChange", "indeterminateChange"] }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-card', standalone: false, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1 class=\"sky-card-title sky-section-heading sky-font-heading-2\">\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div class=\"sky-card-check\">\n            <sky-checkbox\n              [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n              [ngModel]=\"selected\"\n              (click)=\"$event.stopPropagation()\"\n              (ngModelChange)=\"onCheckboxChange($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-padding-even-default\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color .15s;vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color .15s}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"] }]
+            args: [{ selector: 'sky-card', standalone: false, template: "<section\n  class=\"sky-card sky-shadow\"\n  [ngClass]=\"\n  {\n    'sky-card-small': size === 'small',\n    'sky-card-selectable': selectable,\n    'sky-card-selected': selectable &amp;&amp; selected\n  }\"\n>\n  <ng-content select=\"sky-inline-delete\" />\n  <header>\n    @if (selectable || showTitle) {\n      <div class=\"sky-card-header\" (click)=\"contentClick()\">\n        <div class=\"sky-card-heading-middle\">\n          @if (showTitle) {\n            <h1\n              class=\"sky-card-title sky-theme-font-heading-2 sky-font-heading-2\"\n            >\n              <ng-content select=\"sky-card-title\" />\n            </h1>\n          }\n        </div>\n        @if (selectable) {\n          <div class=\"sky-card-check\">\n            <sky-checkbox\n              [label]=\"'skyux_card_checkbox_label' | skyLibResources\"\n              [ngModel]=\"selected\"\n              (click)=\"$event.stopPropagation()\"\n              (ngModelChange)=\"onCheckboxChange($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n  </header>\n  <div\n    class=\"sky-card-content sky-theme-padding-inset-balanced-s\"\n    (click)=\"contentClick()\"\n  >\n    <ng-content select=\"sky-card-content\" />\n  </div>\n  <div\n    #actionsEl\n    class=\"sky-card-actions\"\n    [hidden]=\"actionsEl.children.length === 0\"\n  >\n    <ng-content select=\"sky-card-actions\" />\n  </div>\n</section>\n", styles: [".sky-card:not(.sky-theme-modern *){--sky-override-card-background-color-selected: #f1eef6;--sky-override-card-background-color: #fff;--sky-override-card-border-radius: 0;--sky-override-card-border: 1px solid #cdcfd2;--sky-override-card-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);--sky-override-card-checkbox-margin-right: 5px;--sky-override-card-content-padding: 10px;--sky-override-card-header-checkbox-padding-right: 10px;--sky-override-card-header-font-size: 26px;--sky-override-card-header-font-weight: 300;--sky-override-card-header-line-height: 1.428571429;--sky-override-card-header-padding: 10px 0 0 0;--sky-override-card-header-text-padding: 0 10px;--sky-override-card-large-height: 350px;--sky-override-card-large-width: 350px;--sky-override-card-margin: 0 10px 10px 0;--sky-override-card-small-height: 250px;--sky-override-card-small-width: 225px}.sky-card{--sky-comp-override-switch-label-margin-right: var( --sky-override-card-checkbox-margin-right, 0 );background-color:var(--sky-override-card-background-color, var(--sky-color-background-container-base));border:var(--sky-override-card-border, none);border-radius:var(--sky-override-card-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-container-base) var(--sky-color-border-container-base), var(--sky-elevation-raised-100));display:inline-flex;flex-direction:column;height:var(--sky-override-card-large-height, 360px);margin:var(--sky-override-card-margin, var(--sky-comp-card-space-offset-top) var(--sky-comp-card-space-offset-right) var(--sky-comp-card-space-offset-bottom) var(--sky-comp-card-space-offset-left));transition:background-color var(--sky-global-duration-short);vertical-align:top;width:var(--sky-override-card-large-width, 360px);position:relative}.sky-card-small{height:var(--sky-override-card-small-height, 256px);width:var(--sky-override-card-small-width, 240px)}.sky-card-small .sky-card-header{padding:var(--sky-override-card-header-padding, var(--sky-comp-card-small-header-space-inset-top) var(--sky-comp-card-small-header-space-inset-right) var(--sky-comp-card-small-header-space-inset-bottom) var(--sky-comp-card-small-header-space-inset-left))}.sky-card-small .sky-card-content{padding:var(--sky-override-card-content-padding, var(--sky-comp-card-small-content-space-inset-top) var(--sky-comp-card-small-content-space-inset-right) var(--sky-comp-card-small-content-space-inset-bottom) var(--sky-comp-card-small-content-space-inset-left))}.sky-card-selectable .sky-card-header,.sky-card-selectable .sky-card-content{cursor:pointer}.sky-card-selected{background-color:var(--sky-override-card-background-color-selected, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-card-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-secondary-base));transition:background-color var(--sky-global-duration-short)}.sky-card-header{align-items:center;display:flex;flex-shrink:0;margin:0;padding:var(--sky-override-card-header-padding, var(--sky-comp-card-large-header-space-inset-top) var(--sky-comp-card-large-header-space-inset-right) var(--sky-comp-card-large-header-space-inset-bottom) var(--sky-comp-card-large-header-space-inset-left))}.sky-card-heading-middle{flex-grow:1;padding:var(--sky-override-card-header-text-padding, 0 var(--sky-space-gap-text_action-l) 0 0);overflow:hidden}.sky-card-title{margin:0;line-height:var(--sky-override-card-header-line-height, var(--sky-font-line_height-heading-2));font-size:var(--sky-override-card-header-font-size, var(--sky-font-size-heading-2));font-weight:var(--sky-override-card-header-font-weight, var(--sky-font-style-heading-2))}.sky-card-check{flex-shrink:0;padding-right:var(--sky-override-card-header-checkbox-padding-right, 0)}.sky-card-content{flex-grow:1;font-weight:400;margin:0;padding:var(--sky-override-card-content-padding, var(--sky-comp-card-large-content-space-inset-top) var(--sky-comp-card-large-content-space-inset-right) var(--sky-comp-card-large-content-space-inset-bottom) var(--sky-comp-card-large-content-space-inset-left));overflow:hidden}.sky-card-actions{bottom:0;flex-shrink:0;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.SkyLogService }], propDecorators: { size: [{
                 type: Input
             }], selectable: [{
@@ -1331,11 +1269,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class SkyDefinitionListHeadingComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListHeadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDefinitionListHeadingComponent, isStandalone: false, selector: "sky-definition-list-heading", ngImport: i0, template: "<div class=\"sky-subsection-heading sky-definition-list-heading\">\n  <ng-content />\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDefinitionListHeadingComponent, isStandalone: false, selector: "sky-definition-list-heading", ngImport: i0, template: "<div class=\"sky-theme-font-heading-3 sky-definition-list-heading\">\n  <ng-content />\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListHeadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-definition-list-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-subsection-heading sky-definition-list-heading\">\n  <ng-content />\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"] }]
+            args: [{ selector: 'sky-definition-list-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-theme-font-heading-3 sky-definition-list-heading\">\n  <ng-content />\n</div>\n", styles: [".sky-definition-list-heading{margin-bottom:5px}\n"] }]
         }] });
 
 /**
@@ -1378,7 +1316,7 @@ class SkyDefinitionListValueComponent {
         this.service = service;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListValueComponent, deps: [{ token: SkyDefinitionListService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content />\n  </span>\n  @if (!valueEl.textContent?.trim()) {\n    <span class=\"sky-deemphasized\">\n      {{\n        (service.defaultValue | async) ||\n          ('skyux_definition_list_none_found' | skyLibResources)\n      }}\n    </span>\n  }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyDefinitionListValueComponent, isStandalone: false, selector: "sky-definition-list-value", ngImport: i0, template: "<div class=\"sky-definition-list-value\">\n  <span #valueEl>\n    <ng-content />\n  </span>\n  @if (!valueEl.textContent?.trim()) {\n    <span class=\"sky-deemphasized\">\n      {{\n        (service.defaultValue | async) ||\n          ('skyux_definition_list_none_found' | skyLibResources)\n      }}\n    </span>\n  }\n</div>\n", styles: [":host{flex:1}\n"], dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDefinitionListValueComponent, decorators: [{
             type: Component,
@@ -1511,7 +1449,7 @@ class SkyDescriptionListDescriptionComponent {
         this.#ngUnsubscribe.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, deps: [{ token: SkyDescriptionListService }, { token: i0.ChangeDetectorRef }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDescriptionListDescriptionComponent, isStandalone: false, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n  <span skyTrim class=\"sky-description-list-description\"\n    ><ng-content></ng-content\n  ></span>\n  <span\n    class=\"sky-description-list-default-value\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyDescriptionListDescriptionComponent, isStandalone: false, selector: "sky-description-list-description", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["descriptionTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #descriptionTemplateRef>\n  <span skyTrim class=\"sky-description-list-description\"\n    ><ng-content></ng-content\n  ></span>\n  <span\n    class=\"sky-description-list-default-value\"\n    data-sky-id=\"sky-description-list-default-value\"\n    [skyThemeClass]=\"{\n      'sky-font-deemphasized': 'modern',\n      'sky-deemphasized': 'default'\n    }\"\n  >\n    {{\n      (service.defaultDescription | async) ||\n        ('skyux_description_list_none_found' | skyLibResources)\n    }}\n  </span>\n</ng-template>\n", styles: [".sky-description-list-description:not(:empty)+.sky-description-list-default-value{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ4, selector: "[skyTrim]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyDescriptionListDescriptionComponent, decorators: [{
             type: Component,
@@ -2070,11 +2008,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /* Code coverage having problems with no statements in classes */
 class SkyPageSummarySubtitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageSummarySubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageSummarySubtitleComponent, isStandalone: false, selector: "sky-page-summary-subtitle", ngImport: i0, template: "<p class=\"sky-page-summary-subtitle sky-emphasized\">\n  <ng-content />\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageSummarySubtitleComponent, isStandalone: false, selector: "sky-page-summary-subtitle", ngImport: i0, template: "<p class=\"sky-page-summary-subtitle sky-theme-font-body-emphasized-m\">\n  <ng-content />\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageSummarySubtitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-summary-subtitle', standalone: false, template: "<p class=\"sky-page-summary-subtitle sky-emphasized\">\n  <ng-content />\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] }]
+            args: [{ selector: 'sky-page-summary-subtitle', standalone: false, template: "<p class=\"sky-page-summary-subtitle sky-theme-font-body-emphasized-m\">\n  <ng-content />\n</p>\n", styles: [".sky-page-summary-subtitle{margin-top:0;margin-bottom:10px;line-height:1.1}\n"] }]
         }] });
 
 /**
@@ -2085,11 +2023,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 /* Code coverage having problems with no statements in classes */
 class SkyPageSummaryTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageSummaryTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageSummaryTitleComponent, isStandalone: false, selector: "sky-page-summary-title", ngImport: i0, template: "<h1 class=\"sky-page-summary-title sky-page-heading\">\n  <ng-content />\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyPageSummaryTitleComponent, isStandalone: false, selector: "sky-page-summary-title", ngImport: i0, template: "<h1 class=\"sky-page-summary-title sky-theme-font-heading-1\">\n  <ng-content />\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyPageSummaryTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-page-summary-title', standalone: false, template: "<h1 class=\"sky-page-summary-title sky-page-heading\">\n  <ng-content />\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] }]
+            args: [{ selector: 'sky-page-summary-title', standalone: false, template: "<h1 class=\"sky-page-summary-title sky-theme-font-heading-1\">\n  <ng-content />\n</h1>\n", styles: [".sky-page-summary-title{margin-top:0;margin-bottom:5px}\n"] }]
         }] });
 
 /**
@@ -2204,6 +2142,9 @@ class SkyTextExpandAdapterService {
     removeContainerMaxHeight(containerEl) {
         this.#renderer.removeStyle(containerEl.nativeElement, 'max-height');
     }
+    setContainerMaxHeight(containerEl, height) {
+        this.#renderer.setStyle(containerEl.nativeElement, 'max-height', `${height}px`);
+    }
     setText(textEl, text) {
         textEl.nativeElement.textContent = text;
     }
@@ -2231,11 +2172,11 @@ class SkyTextExpandModalComponent {
         this.instance.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModalComponent, deps: [{ token: SKY_TEXT_EXPAND_MODAL_CONTEXT }, { token: i1$4.SkyModalInstance }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyTextExpandModalComponent, isStandalone: true, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout"] }, { kind: "component", type: i1$4.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$4.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$4.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyLayoutResourcesModule }, { kind: "pipe", type: i3$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyTextExpandModalComponent, isStandalone: true, selector: "sky-text-expand-modal", ngImport: i0, template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: SkyModalModule }, { kind: "component", type: i1$4.λ5, selector: "sky-modal", inputs: ["formErrors", "headingText", "helpKey", "helpPopoverContent", "helpPopoverTitle", "ariaRole", "tiledBody", "ariaDescribedBy", "ariaLabelledBy", "layout", "headingHidden"] }, { kind: "component", type: i1$4.λ2, selector: "sky-modal-content" }, { kind: "component", type: i1$4.λ3, selector: "sky-modal-footer" }, { kind: "component", type: i1$4.λ4, selector: "sky-modal-header" }, { kind: "ngmodule", type: SkyLayoutResourcesModule }, { kind: "pipe", type: i5$1.SkyLibResourcesPipe, name: "skyLibResources" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-text-expand-modal', imports: [SkyModalModule, SkyLayoutResourcesModule], template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+            args: [{ selector: 'sky-text-expand-modal', imports: [SkyModalModule, SkyLayoutResourcesModule], template: "<sky-modal>\n  <sky-modal-header>{{ context.header }}</sky-modal-header>\n  <sky-modal-content class=\"sky-text-expand-modal-content\">{{\n    context.text\n  }}</sky-modal-content>\n  <sky-modal-footer>\n    <button class=\"sky-btn sky-btn-link\" type=\"button\" (click)=\"close()\">\n      {{ 'skyux_text_expand_close_text' | skyLibResources }}\n    </button>\n  </sky-modal-footer>\n</sky-modal>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SKY_TEXT_EXPAND_MODAL_CONTEXT]
@@ -2339,7 +2280,6 @@ class SkyTextExpandComponent {
         this.contentSectionId = `sky-text-expand-content-${++nextId$1}`;
         this.expandable = false;
         this.isModal = false;
-        this.transitionHeight = 1;
         this.#collapsedText = '';
         this.#newlineCount = 0;
         this.#seeMoreText = '';
@@ -2384,12 +2324,8 @@ class SkyTextExpandComponent {
         if (this.textEl && this.containerEl) {
             // Ensure the correct text is displayed
             this.#textExpandAdapter.setText(this.textEl, this.#textToShow);
-            setTimeout(() => {
-                if (this.containerEl) {
-                    // Set height back to auto so the browser can change the height as needed with window changes
-                    this.#textExpandAdapter.removeContainerMaxHeight(this.containerEl);
-                }
-            });
+            // Set height back to auto so the browser can change the height as needed with window changes
+            this.#textExpandAdapter.removeContainerMaxHeight(this.containerEl);
         }
     }
     ngAfterContentInit() {
@@ -2467,58 +2403,42 @@ class SkyTextExpandComponent {
         if (this.containerEl && this.textEl) {
             const adapter = this.#textExpandAdapter;
             const container = this.containerEl;
+            const containerNative = container.nativeElement;
+            // Lock at current height as the transition starting point.
+            const currentHeight = adapter.getContainerHeight(container);
+            adapter.setContainerMaxHeight(container, currentHeight);
             if (expanding) {
                 adapter.setText(this.textEl, this.text);
                 this.#textToShow = this.text;
             }
             else {
+                // Measure the collapsed height while max-height is still large enough.
                 adapter.setText(this.textEl, this.#collapsedText);
                 this.#textToShow = this.#collapsedText;
             }
             this.buttonText = expanding ? this.#seeLessText : this.#seeMoreText;
-            // Measure the new height so we can animate to it.
-            const newHeight = adapter.getContainerHeight(container);
-            this.transitionHeight = newHeight;
-            // Always show all text while animating so that the animation is smooth. The animation callback will set this back if needed.
+            // Measure the target height.
+            const targetHeight = expanding
+                ? containerNative.scrollHeight
+                : adapter.getContainerHeight(container);
+            // For collapsing, show full text during the transition so it animates smoothly.
             if (!expanding) {
                 adapter.setText(this.textEl, this.text);
             }
+            // Force reflow so the browser registers the starting max-height.
+            containerNative.getBoundingClientRect();
+            // Set the target max-height to trigger the CSS transition.
+            adapter.setContainerMaxHeight(container, targetHeight);
             this.isExpanded = expanding;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i3$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandComponent, isStandalone: false, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  [@expansionAnimation]=\"{\n    value: isExpanded,\n    params: { transitionHeight: transitionHeight }\n  }\"\n  (@expansionAnimation.done)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n      [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n      [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n      [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n      (click)=\"textExpand()\"\n    >\n      {{ buttonText }}\n    </button>\n  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], animations: [
-            trigger('expansionAnimation', [
-                transition(':enter', []),
-                state('true', style({
-                    maxHeight: '{{transitionHeight}}px',
-                }), { params: { transitionHeight: 0 } }),
-                state('false', style({
-                    maxHeight: '{{transitionHeight}}px',
-                }), { params: { transitionHeight: 0 } }),
-                transition('true => false', animate('250ms ease')),
-                transition('false => true', animate('250ms ease')),
-                transition('void => *', []),
-            ]),
-        ] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, deps: [{ token: i5$1.SkyLibResourcesService }, { token: i1$4.SkyModalService }, { token: SkyTextExpandAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandComponent, isStandalone: true, selector: "sky-text-expand", inputs: { expandModalTitle: "expandModalTitle", maxExpandedLength: "maxExpandedLength", maxExpandedNewlines: "maxExpandedNewlines", maxLength: "maxLength", text: "text", truncateNewlines: "truncateNewlines" }, providers: [SkyTextExpandAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }, { propertyName: "textEl", first: true, predicate: ["text"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n      [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n      [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n      [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n      (click)=\"textExpand()\"\n    >\n      {{ buttonText }}\n    </button>\n  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: _SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandComponent, decorators: [{
             type: Component,
-            args: [{ animations: [
-                        trigger('expansionAnimation', [
-                            transition(':enter', []),
-                            state('true', style({
-                                maxHeight: '{{transitionHeight}}px',
-                            }), { params: { transitionHeight: 0 } }),
-                            state('false', style({
-                                maxHeight: '{{transitionHeight}}px',
-                            }), { params: { transitionHeight: 0 } }),
-                            transition('true => false', animate('250ms ease')),
-                            transition('false => true', animate('250ms ease')),
-                            transition('void => *', []),
-                        ]),
-                    ], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], standalone: false, template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  [@expansionAnimation]=\"{\n    value: isExpanded,\n    params: { transitionHeight: transitionHeight }\n  }\"\n  (@expansionAnimation.done)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n      [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n      [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n      [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n      (click)=\"textExpand()\"\n    >\n      {{ buttonText }}\n    </button>\n  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
-        }], ctorParameters: () => [{ type: i3$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
+            args: [{ imports: [_SkyTransitionEndHandlerDirective], selector: 'sky-text-expand', providers: [SkyTextExpandAdapterService], template: "<div\n  #container\n  class=\"sky-text-expand-container\"\n  skyTransitionEndHandler\n  transitionPropertyToTrack=\"max-height\"\n  [transitionTrigger]=\"isExpanded\"\n  (transitionEnd)=\"animationEnd()\"\n>\n  <span #text class=\"sky-text-expand-text\" [id]=\"contentSectionId\"></span>\n  @if (expandable) {\n    @if (!isExpanded) {\n      <span class=\"sky-text-expand-ellipsis\">... </span>\n    }\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-see-more\"\n      [attr.aria-expanded]=\"isModal ? undefined : !!isExpanded\"\n      [attr.aria-controls]=\"isModal ? undefined : contentSectionId\"\n      [attr.aria-haspopup]=\"isModal ? 'dialog' : undefined\"\n      (click)=\"textExpand()\"\n    >\n      {{ buttonText }}\n    </button>\n  }\n</div>\n", styles: [".sky-text-expand-container:not(.sky-theme-modern *){--sky-text-expand-see-more-margin-left: 5px}.sky-text-expand-ellipsis{letter-spacing:2px;white-space:nowrap}.sky-text-expand-space{white-space:normal}.sky-text-expand-see-more{white-space:nowrap;margin-left:var(--sky-text-expand-see-more-margin-left, var(--sky-space-gap-text_action-xs))}.sky-text-expand-text{margin:0;white-space:pre-wrap}.sky-text-expand-container{word-break:break-word;word-wrap:break-word;overflow:hidden;height:auto;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-modal-content{white-space:pre-line;word-wrap:break-word}\n"] }]
+        }], ctorParameters: () => [{ type: i5$1.SkyLibResourcesService }, { type: i1$4.SkyModalService }, { type: SkyTextExpandAdapterService }], propDecorators: { expandModalTitle: [{
                 type: Input
             }], maxExpandedLength: [{
                 type: Input
@@ -2546,13 +2466,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 class SkyTextExpandModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModule, declarations: [SkyTextExpandComponent], exports: [SkyTextExpandComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModule, imports: [SkyTextExpandComponent], exports: [SkyTextExpandComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyTextExpandComponent],
+                    imports: [SkyTextExpandComponent],
                     exports: [SkyTextExpandComponent],
                 }]
         }] });
@@ -2580,6 +2500,9 @@ class SkyTextExpandRepeaterAdapterService {
     removeContainerMaxHeight(containerEl) {
         this.#renderer.removeStyle(containerEl.nativeElement, 'max-height');
     }
+    setContainerMaxHeight(containerEl, height) {
+        this.#renderer.setStyle(containerEl.nativeElement, 'max-height', `${height}px`);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterAdapterService }); }
 }
@@ -2621,7 +2544,6 @@ class SkyTextExpandRepeaterComponent {
         this.expandable = false;
         this.contentSectionId = `sky-text-expand-repeater-content-${++nextId}`;
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
-        this.transitionHeight = 1;
         this.#resources = inject(SkyLibResourcesService);
         this.#seeMoreText = toSignal(this.#resources.getString('skyux_text_expand_see_more'), { initialValue: '' });
         this.#seeLessText = toSignal(this.#resources.getString('skyux_text_expand_see_less'), { initialValue: '' });
@@ -2645,18 +2567,15 @@ class SkyTextExpandRepeaterComponent {
         });
     }
     animationEnd() {
-        // Ensure all items that should be hidden are hidden. This is because we need them shown during the animation window for visual purposes.
+        // Ensure all items that should be hidden are hidden.
         if (!this.isExpanded()) {
             this.#hideItems();
         }
-        // This set timeout is needed as the `animationEnd` function is called by the angular animation callback prior to the animation setting the style on the element
-        setTimeout(() => {
-            const containerEl = this.containerEl();
-            if (containerEl) {
-                // Set height back to auto so the browser can change the height as needed with window changes
-                this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
-            }
-        });
+        const containerEl = this.containerEl();
+        if (containerEl) {
+            // Set height back to auto so the browser can change the height as needed with window changes
+            this.#textExpandRepeaterAdapter.removeContainerMaxHeight(containerEl);
+        }
     }
     repeaterExpand() {
         if (!this.isExpanded()) {
@@ -2670,22 +2589,32 @@ class SkyTextExpandRepeaterComponent {
         const adapter = this.#textExpandRepeaterAdapter;
         const container = this.containerEl();
         if (container) {
+            const containerNative = container.nativeElement;
+            // Lock at current height as the transition starting point.
+            const currentHeight = adapter.getContainerHeight(container);
+            adapter.setContainerMaxHeight(container, currentHeight);
             if (expanding) {
                 this.#showItems();
             }
             else {
                 this.#hideItems();
             }
-            this.transitionHeight = adapter.getContainerHeight(container);
+            // Measure the target height.
+            const targetHeight = expanding
+                ? containerNative.scrollHeight
+                : adapter.getContainerHeight(container);
             if (!expanding) {
                 // Show all items during animation for visual purposes.
                 this.#showItems();
             }
+            // Force reflow so the browser registers the starting max-height.
+            containerNative.getBoundingClientRect();
+            // Set the target max-height to trigger the CSS transition.
+            adapter.setContainerMaxHeight(container, targetHeight);
             this.isExpanded.set(expanding);
         }
     }
     #setup() {
-        const container = this.containerEl();
         const maxItems = this.maxItems();
         const value = this.trackedData();
         this.expandable = false;
@@ -2695,10 +2624,6 @@ class SkyTextExpandRepeaterComponent {
             if (maxItems && length > maxItems) {
                 this.expandable = true;
                 this.#hideItems();
-                if (container) {
-                    this.transitionHeight =
-                        this.#textExpandRepeaterAdapter.getContainerHeight(container);
-                }
             }
         }
         this.#changeDetector.detectChanges();
@@ -2718,49 +2643,30 @@ class SkyTextExpandRepeaterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      [@expansionAnimation]=\"{\n        value: isExpanded(),\n        params: { transitionHeight: transitionHeight }\n      }\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (@expansionAnimation.done)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      [@expansionAnimation]=\"{\n        value: isExpanded(),\n        params: { transitionHeight: transitionHeight }\n      }\"\n      [id]=\"contentSectionId\"\n      (@expansionAnimation.done)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
-            trigger('expansionAnimation', [
-                transition(':enter', []),
-                state('true', style({
-                    maxHeight: '{{transitionHeight}}px',
-                }), { params: { transitionHeight: 0 } }),
-                state('false', style({
-                    maxHeight: '{{transitionHeight}}px',
-                }), { params: { transitionHeight: 0 } }),
-                transition('true => false', animate('250ms ease')),
-                transition('false => true', animate('250ms ease')),
-                transition('void => *', []),
-            ]),
-        ] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyTextExpandRepeaterComponent, isStandalone: false, selector: "sky-text-expand-repeater", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, listStyle: { classPropertyName: "listStyle", publicName: "listStyle", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SkyTextExpandRepeaterAdapterService], viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1._SkyTransitionEndHandlerDirective, selector: "[skyTransitionEndHandler]", inputs: ["transitionTrigger", "transitionPropertyToTrack"], outputs: ["transitionEnd"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterComponent, decorators: [{
             type: Component,
-            args: [{ animations: [
-                        trigger('expansionAnimation', [
-                            transition(':enter', []),
-                            state('true', style({
-                                maxHeight: '{{transitionHeight}}px',
-                            }), { params: { transitionHeight: 0 } }),
-                            state('false', style({
-                                maxHeight: '{{transitionHeight}}px',
-                            }), { params: { transitionHeight: 0 } }),
-                            transition('true => false', animate('250ms ease')),
-                            transition('false => true', animate('250ms ease')),
-                            transition('void => *', []),
-                        ]),
-                    ], selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      [@expansionAnimation]=\"{\n        value: isExpanded(),\n        params: { transitionHeight: transitionHeight }\n      }\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (@expansionAnimation.done)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      [@expansionAnimation]=\"{\n        value: isExpanded(),\n        params: { transitionHeight: transitionHeight }\n      }\"\n      [id]=\"contentSectionId\"\n      (@expansionAnimation.done)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"] }]
+            args: [{ selector: 'sky-text-expand-repeater', providers: [SkyTextExpandRepeaterAdapterService], standalone: false, template: "<div class=\"sky-text-expand-repeater\">\n  @if (listStyle() !== 'ordered') {\n    <ul\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-list-style-none': listStyle() === 'unstyled'\n      }\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ul>\n  } @else {\n    <ol\n      #container\n      class=\"sky-text-expand-repeater-container\"\n      skyTransitionEndHandler\n      transitionPropertyToTrack=\"max-height\"\n      [transitionTrigger]=\"isExpanded()\"\n      [id]=\"contentSectionId\"\n      (transitionEnd)=\"animationEnd()\"\n    >\n      <ng-template [ngTemplateOutlet]=\"listItemTemplate\" />\n    </ol>\n  }\n  @if (expandable) {\n    <button\n      type=\"button\"\n      class=\"sky-btn sky-btn-link-inline sky-text-expand-repeater-see-more\"\n      [attr.aria-expanded]=\"isExpanded()\"\n      [attr.aria-controls]=\"contentSectionId\"\n      [ngClass]=\"{\n        'sky-text-expand-repeater-see-more-list-style-none':\n          listStyle() === 'unstyled'\n      }\"\n      (click)=\"repeaterExpand()\"\n    >\n      {{ buttonText() }}\n    </button>\n  }\n</div>\n\n<ng-template #defaultItemTemplate let-item>\n  {{ item }}\n</ng-template>\n\n<ng-template #listItemTemplate>\n  @for (item of trackedData(); track item.index) {\n    <li class=\"sky-text-expand-repeater-item\">\n      <ng-template\n        [ngTemplateOutlet]=\"itemTemplate() || defaultItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: item.item }\"\n      />\n    </li>\n  }\n</ng-template>\n", styles: [":host{display:block}.sky-text-expand-repeater-container{overflow-y:hidden;height:auto;margin-bottom:0;margin-top:0;transition-duration:var(--sky-global-duration-medium);transition-property:max-height;transition-timing-function:ease}.sky-text-expand-repeater-see-more{white-space:nowrap;margin-left:40px}.sky-text-expand-repeater-list-style-none{list-style-type:none;padding-left:0}.sky-text-expand-repeater-see-more-list-style-none{margin-left:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], containerEl: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 class SkyTextExpandRepeaterModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, declarations: [SkyTextExpandRepeaterComponent], imports: [SkyLayoutResourcesModule, CommonModule], exports: [SkyTextExpandRepeaterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, imports: [SkyLayoutResourcesModule, CommonModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, declarations: [SkyTextExpandRepeaterComponent], imports: [SkyLayoutResourcesModule,
+            CommonModule,
+            _SkyTransitionEndHandlerDirective], exports: [SkyTextExpandRepeaterComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, imports: [SkyLayoutResourcesModule,
+            CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyTextExpandRepeaterModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyTextExpandRepeaterComponent],
-                    imports: [SkyLayoutResourcesModule, CommonModule],
+                    imports: [
+                        SkyLayoutResourcesModule,
+                        CommonModule,
+                        _SkyTransitionEndHandlerDirective,
+                    ],
                     exports: [SkyTextExpandRepeaterComponent],
                 }]
         }] });