@ethlete/components 1.0.0-next.54 → 1.0.0-next.55

package/fesm2022/ethlete-components.mjs

@@ -6,7 +6,7 @@ import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1,
 import { DomSanitizer } from '@angular/platform-browser';
 import { format, startOfWeek, startOfDay, endOfWeek, isBefore, addDays, endOfMonth, startOfMonth, isSameYear, isSameMonth, isSameDay, startOfYear, isAfter, addYears, addMonths, setMonth, setYear, getDate, setDate, lastDayOfMonth, getWeek, endOfYear, parse, isValid, setSeconds, setMinutes, setHours, setMilliseconds, endOfDay, eachDayOfInterval, differenceInCalendarDays, addMinutes, differenceInMinutes, addHours } from 'date-fns';
 import { takeUntilDestroyed, toSignal, toObservable, outputFromObservable, outputToObservable, rxResource } from '@angular/core/rxjs-interop';
-import { Subject, take, tap, timer, takeUntil, fromEvent, filter, switchMap, map, combineLatest, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, mergeMap } from 'rxjs';
+import { Subject, take, tap, timer, takeUntil, fromEvent, filter, switchMap, map, combineLatest, distinctUntilChanged, EMPTY, debounceTime, merge, defer, finalize, of, isObservable, from, catchError, firstValueFrom, concat, scan, interval, animationFrameScheduler, EmptyError, exhaustMap, Observable, shareReplay, defaultIfEmpty, expand, toArray, takeWhile, mergeMap } from 'rxjs';
 import * as i1$1 from '@angular/router';
 import { Router, RouterLink, ActivatedRoute, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { withArgs, queryStateSignal, isQueryStateSuccess, isQueryStateFailure, isQueryStateLoading, executeUntilSettled, extractQuery, queryComputed, parseHttpErrorCodeToMessageEn, parseHttpErrorCodeToTitleEn, parseHttpErrorCodeToMessageDe, parseHttpErrorCodeToTitleDe, queryErrorMessages, createQueryErrorResponse } from '@ethlete/query';
@@ -36922,13 +36922,13 @@ class MenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyContentElement", first: true, predicate: ["menuBodyContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MenuComponent, isStandalone: true, selector: "et-menu", host: { classAttribute: "et-menu" }, viewQueries: [{ propertyName: "headerElement", first: true, predicate: ["menuHeader"], descendants: true, isSignal: true }, { propertyName: "bodyContentElement", first: true, predicate: ["menuBodyContent"], descendants: true, isSignal: true }], hostDirectives: [{ directive: MenuPanelDirective }, { directive: i1.ProvideColorDirective }, { directive: i1.AutoSurfaceDirective }], ngImport: i0, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding-inline:var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-body-content{padding-block:var(--et-menu-padding-block)}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"], dependencies: [{ kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-menu', encapsulation: ViewEncapsulation.None, imports: [ProvideColorDirective, SpinnerComponent], hostDirectives: [MenuPanelDirective, ProvideColorDirective, AutoSurfaceDirective], host: {
                         class: 'et-menu',
-                    }, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
+                    }, template: "<div #menuHeader class=\"et-menu-header\">\n  <div class=\"et-menu-search-field\">\n    <ng-content select=\"input[etMenuSearch]\" />\n\n    @if (showSearchSpinner()) {\n      <et-spinner class=\"et-menu-search-spinner\" diameter=\"16\" />\n    }\n  </div>\n\n  @if (searchError(); as error) {\n    <p [id]=\"searchErrorId\" [etProvideColor]=\"errorColorTheme\" class=\"et-menu-search-error\" role=\"alert\">\n      {{ error }}\n    </p>\n  }\n</div>\n\n<div class=\"et-menu-body\">\n  <div #menuBodyContent class=\"et-menu-body-content\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@layer components{@property --et-menu-min-width{syntax: \"<length>\"; inherits: false; initial-value: 180px;}@property --et-menu-max-height{syntax: \"<length-percentage>\"; inherits: false; initial-value: 40vh;}@property --et-menu-padding-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-padding-inline{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-item-height{syntax: \"<length>\"; inherits: true; initial-value: 36px;}@property --et-menu-item-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-gap{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-menu-item-border-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-menu-item-font-size{syntax: \"<length>\"; inherits: true; initial-value: 14px;}@property --et-menu-item-icon-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}@property --et-menu-separator-margin-block{syntax: \"<length>\"; inherits: false; initial-value: 6px;}@property --et-menu-group-label-font-size{syntax: \"<length>\"; inherits: false; initial-value: 12px;}@property --et-menu-search-height{syntax: \"<length>\"; inherits: false; initial-value: 36px;}.et-overlay.et-overlay--menu{overflow:visible;background:transparent;box-shadow:none}.et-menu{--_et-menu-background: var(--et-surface-background-solid, var(--et-surface-2, rgb(32 32 32)));--_et-menu-color: var(--et-surface-color-solid, var(--et-color-main-contrast, rgb(244 244 245)));--_et-menu-border: var(--et-surface-border-solid, rgb(255 255 255 / .1));--_et-menu-shadow: 0 10px 24px rgb(0 0 0 / .16);--_et-menu-radius: 10px;--_et-menu-item-active-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 12%, transparent );--_et-menu-item-pressed-background: color-mix( in srgb, var(--et-surface-interaction-solid, rgb(255 255 255)) 20%, transparent );--_et-menu-muted-color: var(--et-surface-color-muted-solid, rgb(255 255 255 / .55));--_et-menu-separator-color: var(--et-surface-border-solid, rgb(255 255 255 / .1));display:flex;flex-direction:column;min-inline-size:var(--et-menu-min-width);max-inline-size:min(320px,calc(100vw - 24px));max-block-size:min(var(--et-menu-max-height),var(--et-overlay-max-height, 100vh));border-radius:var(--_et-menu-radius);border:1px solid var(--_et-menu-border);background:var(--_et-menu-background);color:var(--_et-menu-color);font-family:var(--et-font-family, inherit);font-size:var(--et-menu-item-font-size);box-shadow:var(--_et-menu-shadow);outline:none}.et-menu.et-menu--resizing{overflow:clip}.et-menu.et-menu--resizing .et-menu-body{overflow:clip}.et-menu .et-menu-header{flex:none;padding:var(--et-menu-padding-block) var(--et-menu-padding-inline) 0;contain:inline-size}.et-menu .et-menu-header:not(:has(input[etmenusearch])){display:none}.et-menu .et-menu-header .et-menu-search-field{position:relative}.et-menu .et-menu-header .et-menu-search-field:has(.et-menu-search-spinner) input[etmenusearch]{padding-inline-end:calc(var(--et-menu-item-padding-inline) + 22px)}.et-menu .et-menu-header .et-menu-search-spinner{position:absolute;inset-block-start:50%;inset-inline-end:10px;translate:0 -50%;color:var(--_et-menu-muted-color)}.et-menu .et-menu-header .et-menu-search-error{margin:6px 2px 0;font-size:12px;color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-header input[etmenusearch]{inline-size:100%;block-size:var(--et-menu-search-height);padding-inline:var(--et-menu-item-padding-inline);border-radius:var(--et-menu-item-border-radius);border:1px solid var(--_et-menu-border);background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;box-sizing:border-box;transition:border-color .12s ease,background .12s ease}.et-menu .et-menu-header input[etmenusearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-menu .et-menu-header input[etmenusearch]::placeholder{color:var(--_et-menu-muted-color)}.et-menu .et-menu-body{flex:1;min-block-size:0;padding-inline:var(--et-menu-padding-inline);overflow-y:auto;overscroll-behavior:contain}.et-menu .et-menu-body-content{padding-block:var(--et-menu-padding-block)}.et-menu .et-menu-group{display:block}.et-menu .et-menu-item{display:flex;align-items:center;gap:var(--et-menu-item-gap);inline-size:100%;min-block-size:var(--et-menu-item-height);padding-inline:var(--et-menu-item-padding-inline);border:none;border-radius:var(--et-menu-item-border-radius);background:transparent;color:inherit;font:inherit;text-align:start;text-decoration:none;cursor:pointer;outline:none;box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:background .12s ease,color .12s ease,opacity .12s ease}.et-menu .et-menu-item[data-active]:where(:focus-visible),.et-menu .et-menu-item[data-menu-open]{background:var(--_et-menu-item-active-background)}@media(hover:hover){.et-menu .et-menu-item[data-active]:where(:hover){background:var(--_et-menu-item-active-background)}}.et-menu .et-menu-item:active:not([aria-disabled=true]){background:var(--_et-menu-item-pressed-background)}.et-menu .et-menu-item[aria-disabled=true]{opacity:.4;cursor:default}.et-menu .et-menu-item[data-variant=destructive]{color:var(--et-theme-color-primary-solid, rgb(248 113 113))}.et-menu .et-menu-item .et-menu-item-content{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-from,.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-to{opacity:0}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:transform .14s ease,opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:transform .1s ease,opacity .1s ease}.et-overlay--menu[data-overlay-placement^=top].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=top].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(.3rem)!important}.et-overlay--menu[data-overlay-placement^=bottom].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=bottom].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translateY(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=right].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=right].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(-.3rem)!important}.et-overlay--menu[data-overlay-placement^=left].et-animation-enter-from,.et-overlay--menu[data-overlay-placement^=left].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0) translate(.3rem)!important}@media(prefers-reduced-motion:reduce){.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-enter-active{transition:opacity .14s ease}.et-overlay.et-with-default-animation.et-overlay--menu.et-animation-leave-active{transition:opacity .1s ease}.et-overlay--menu[data-overlay-placement].et-animation-enter-from,.et-overlay--menu[data-overlay-placement].et-animation-leave-to{transform:translate3d(var(--et-overlay-anchored-x, 0px),var(--et-overlay-anchored-y, 0px),0)!important}}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerElement: [{ type: i0.ViewChild, args: ['menuHeader', { isSignal: true }] }], bodyContentElement: [{ type: i0.ViewChild, args: ['menuBodyContent', { isSignal: true }] }] } });
 
 const MENU_IMPORTS = [
@@ -60291,11 +60291,14 @@ const isFlexibleTrack = (track) => /\bauto\b|[\d.]fr\b/.test(track);
 const sameJson = (a, b) => JSON.stringify(a) === JSON.stringify(b);
 /** Sub-pixel slack (px) before a scroll offset counts as "there is content over there". */
 const SCROLL_FADE_EPSILON = 1;
+/** Sort indicator enter duration (must match the CSS animation) - see {@link TableComponent.sortIndicatorEnter}. */
+const SORT_INDICATOR_ANIMATION_MS = 150;
 /** What a cell renders as when nothing pins columns - see `registerColumnPinning`. */
 const NO_PIN = { stickyStart: false, stickyEnd: false, offsetStart: null, offsetEnd: null };
 /** The same for a leading utility cell, and for the scroll fades' inline offsets. */
 const NO_LEAD_PIN = { sticky: false, offset: null };
 const NO_INSET = { start: 0, end: 0 };
+const EMPTY_COLUMN_KEYS = /* @__PURE__ */ new Set();
 // Per-table counter, so the ids a row link is named by are unique across every table on the page.
 let uniqueTableId = 0;
 /**
@@ -60316,6 +60319,8 @@ class TableComponent {
     constructor() {
         this.elementRef = inject(ElementRef);
         this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT$1);
         this.injectedLabels = injectTableLabels();
         /** The rows to render. */
         this.data = input([], /* @ts-ignore */
@@ -60477,6 +60482,8 @@ class TableComponent {
         // renders only when there's actually footer content.
         this.footerSlot = contentChild(TableFooterDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
+        this.gridRef = viewChild('grid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "gridRef" }] : /* istanbul ignore next */ []));
         this.headerCells = viewChildren('headerCell', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerCells" }] : /* istanbul ignore next */ []));
         // Every rendered body cell (tagged with `data-col-key`); the first drives virtual-window
@@ -60487,6 +60494,9 @@ class TableComponent {
         // the pinned data columns know how far in they start.
         this.leadHeaderCells = viewChildren('leadHeaderCell', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leadHeaderCells" }] : /* istanbul ignore next */ []));
+        // The same for the trailing utility columns, stacked from the trailing edge instead.
+        this.trailHeaderCells = viewChildren('trailHeaderCell', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trailHeaderCells" }] : /* istanbul ignore next */ []));
         // Base of the ids a row link is named by - one per table, so two tables on a page can't collide.
         this.LINK_ID_PREFIX = `et-table-${uniqueTableId++}-row-link`;
         /** The sort mode in effect: what you set, else `'server'` when a {@link rowsSource} is bound. */
@@ -60596,17 +60606,44 @@ class TableComponent {
         // during an `autosizeColumns` pass.
         this.autosizing = signal(new Set(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "autosizing" }] : /* istanbul ignore next */ []));
-        /**
-         * Where content is currently scrolled out of view horizontally. Drives the edge gradients: they mark
-         * the boundary the rows disappear under, which is *not* the viewport edge when columns are pinned -
-         * a pinned column is the thing they slide beneath, so the fade sits at its inner edge instead. That
-         * offset is what a generic scroll-fade wrapper can't know, so the table draws its own.
-         */
+        /** Where content is currently scrolled out of view horizontally. */
         this.scrollFades = signal({ start: false, end: false }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "scrollFades" }] : /* istanbul ignore next */ []));
+        /** The columns currently covered by a pinned one - see {@link syncObscuredColumns}. */
+        this.obscuredColumns = signal(EMPTY_COLUMN_KEYS, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "obscuredColumns" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether rows are currently passing under the sticky header, and whether more follow under the footer
+         * bar. Both edges cut a row off mid-height - on `cards`, mid-card - and a cut with nothing to explain
+         * it reads as a broken box, so each edge casts a shadow while there is something behind it.
+         */
+        this.blockScrollShadows = signal({
+            blockStart: false,
+            blockEnd: false,
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blockScrollShadows" }] : /* istanbul ignore next */ []));
         /** The inline offset (px) each edge gradient is pushed in by, so it clears any pinned columns. */
         this.fadeInset = computed(() => this.columnPinning()?.insets() ?? NO_INSET, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fadeInset" }] : /* istanbul ignore next */ []));
+        /**
+         * The scroll viewport's own inline size, published as a custom property for the rules that have to
+         * span it rather than the tracks - the empty and the error message. A row spans every column, which
+         * on a table wider than its viewport is not where the reader is looking.
+         */
+        this.viewportInlineSize = computed(() => this.hostDimensions().client?.width ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportInlineSize" }] : /* istanbul ignore next */ []));
+        /**
+         * Which edge gradients actually show. A gradient marks the boundary rows slide out under - so an edge
+         * that pins a column has one already: the pinned cells' own edge shadow, drawn per row. Two marks on
+         * the same boundary read as a smear, and the gradient is the one that has to go: it spans the whole
+         * grid, so on `cards` it paints across the gaps between them as well.
+         */
+        this.visibleScrollFades = computed(() => {
+            const scrolled = this.scrollFades();
+            const inset = this.fadeInset();
+            return { start: scrolled.start && inset.start === 0, end: scrolled.end && inset.end === 0 };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleScrollFades" }] : /* istanbul ignore next */ []));
         // The declared columns paired with their keys, in declaration order - the form everything else
         // (rendering, features, state) works with. Keys are the record's, so they can't collide.
         this.columnDefs = computed(() => Object.entries(this.columns()).map(([key, column]) => ({ ...column, key })), /* @ts-ignore */
@@ -60671,11 +60708,17 @@ class TableComponent {
             return this.visibleColumns().some((column) => footers.has(column.key));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasFooter" }] : /* istanbul ignore next */ []));
-        /** The leading utility columns in render order - whatever features registered (selection, expansion). */
-        this.leadColumns = computed(() => this.leadColumnList()
+        // Every live utility column, in render order within its own side.
+        this.utilityColumns = computed(() => this.leadColumnList()
             .filter((lead) => lead.enabled?.() ?? true)
             .sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "utilityColumns" }] : /* istanbul ignore next */ []));
+        /** The leading utility columns in render order - whatever features registered (selection, expansion). */
+        this.leadColumns = computed(() => this.utilityColumns().filter((column) => (column.side?.() ?? 'start') === 'start'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leadColumns" }] : /* istanbul ignore next */ []));
+        /** The trailing utility columns in render order - those a feature registered with `side: 'end'`. */
+        this.trailColumns = computed(() => this.utilityColumns().filter((column) => column.side?.() === 'end'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trailColumns" }] : /* istanbul ignore next */ []));
         /**
          * The column tracks, plus whether they are all rigid.
          *
@@ -60703,11 +60746,16 @@ class TableComponent {
                 !measuring.size &&
                 !tracks.some(isFlexibleTrack) &&
                 !(this.columnPinning()?.hasStickyEnd() ?? false);
-            // Leading utility columns come first, in registration order (see `leadColumns`). Their widths are
-            // px, not rem: they must fit their control (a 24px button / 16px checkbox plus the cell's 4px
-            // inline padding) regardless of the host app's root font size.
+            // Utility columns bracket the data columns, in registration order (see `leadColumns`). Their widths
+            // are px, not rem: they must fit their control (a 24px button / 16px checkbox plus the cell's 4px
+            // inline padding) regardless of the host app's root font size. A trailing one goes after the filler,
+            // so the slack sits between the data and it rather than pushing it off the panel's edge.
             const leads = this.leadColumns().map((lead) => lead.width);
-            return { template: [...leads, ...tracks, ...(fixed ? [FILLER_TRACK] : [])].join(' '), fixed };
+            const trails = this.trailColumns().map((trail) => trail.width);
+            return {
+                template: [...leads, ...tracks, ...(fixed ? [FILLER_TRACK] : []), ...trails].join(' '),
+                fixed,
+            };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columnTracks" }] : /* istanbul ignore next */ []));
         /** The `grid-template-columns` value for the visible columns (plus a leading expander track when expandable). */
@@ -60720,6 +60768,17 @@ class TableComponent {
          */
         this.hasFiller = computed(() => this.columnTracks().fixed, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasFiller" }] : /* istanbul ignore next */ []));
+        // Set while the sort the user just asked for renders, cleared once its animation has run. A sort that
+        // arrives from a URL, a restored state or a bound source mounts the arrow too, and that one has to
+        // appear already there rather than fade in over a table the reader is still taking in.
+        this.sortGesture = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortGesture" }] : /* istanbul ignore next */ []));
+        /** The arrow's enter animation, empty unless the sort was a gesture on this table. */
+        this.sortIndicatorEnter = computed(() => (this.sortGesture() ? 'et-table-sort-indicator--enter' : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortIndicatorEnter" }] : /* istanbul ignore next */ []));
+        /** The same for the arrow of a column the gesture unsorted. */
+        this.sortIndicatorLeave = computed(() => (this.sortGesture() ? 'et-table-sort-indicator--leave' : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sortIndicatorLeave" }] : /* istanbul ignore next */ []));
         /** The serializable, versioned table state - column order, visibility, sort, filters and feature slices. */
         this.state = computed(() => {
             const sort = this.sort();
@@ -60848,10 +60907,22 @@ class TableComponent {
             }));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leadCells" }] : /* istanbul ignore next */ []));
+        /** The trailing utility cells - the same, pinned to the trailing edge instead. */
+        this.trailCells = computed(() => {
+            const pinning = this.columnPinning();
+            return this.trailColumns().map((trail) => ({
+                key: trail.key,
+                cellClass: trail.cellClass,
+                ...(pinning?.trailPinning(trail.key) ?? NO_LEAD_PIN),
+                lead: trail,
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trailCells" }] : /* istanbul ignore next */ []));
         this.headerCellVms = computed(() => {
             const pinning = this.columnPinning();
             const templates = this.columnTemplates().header;
             const labels = this.resolvedLabels();
+            const obscured = this.obscuredColumns();
             return this.visibleColumns().map((column) => {
                 const direction = this.sortDirection(column.key);
                 // The header announces what the *next* activation does, and the cycle is asc → desc → clear.
@@ -60872,6 +60943,7 @@ class TableComponent {
                     sortLabel: column.sortable ? labels.sortAction(column.header ?? column.key, next) : null,
                     direction,
                     template: templates.get(column.key) ?? null,
+                    obscured: obscured.has(column.key),
                 };
             });
         }, /* @ts-ignore */
@@ -60900,6 +60972,7 @@ class TableComponent {
             const templates = this.columnTemplates().cell;
             const columns = this.visibleColumns();
             const leads = this.leadCells();
+            const trails = this.trailCells();
             const cellState = this.cellState();
             const indexOffset = this.rowIndexOffset();
             const detail = this.rowDetail();
@@ -60925,14 +60998,15 @@ class TableComponent {
                     link,
                     href,
                     linkLabelId: `${this.LINK_ID_PREFIX}-${indexOffset + index}`,
-                    classes: leads
-                        .map((lead) => lead.lead.rowClass?.(row))
+                    classes: [...leads, ...trails]
+                        .map((utility) => utility.lead.rowClass?.(row))
                         .filter((className) => !!className)
                         .join(' '),
                     stripe: (indexOffset + index) % 2 === 1,
                     last: endsWithRows && index === rendered.length - 1,
                     detail: detail?.isOpen(row) ? detail : null,
                     leads,
+                    trails,
                     cells: columns.map((column) => {
                         const value = column.value(row);
                         // The callback may answer with the bare state or with a message alongside it.
@@ -60945,8 +61019,7 @@ class TableComponent {
                             ...(pinning?.cellPinning(column.key) ?? NO_PIN),
                             key: column.key,
                             align: column.align ?? 'start',
-                            // Not while this cell is being edited: the link covers the cell, and the editor must have it.
-                            linkHost: href !== null && column.key === linkColumn && editTemplate === null,
+                            linkHost: href !== null && column.key === linkColumn,
                             interactive: !!column.interactive,
                             state,
                             message: typeof answer === 'string' ? null : (answer?.message ?? null),
@@ -60982,6 +61055,8 @@ class TableComponent {
          */
         this.allColumns = computed(() => this.orderedColumns(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []));
+        // Which feature owns the drag each live pointer started - see claimPointerGesture.
+        this.pointerGestureClaims = new Map();
         // A detail template with nothing to render it looks like a broken template rather than a missing
         // import, so name the mistake. Deferred to an effect because a feature registers from its own
         // constructor, which runs after the table's - and it asks whether one registered at all rather
@@ -61026,10 +61101,10 @@ class TableComponent {
         effect(() => {
             this.hostDimensions();
             this.templateColumns();
-            afterNextRender({ read: () => this.syncScrollFades() }, { injector: this.injector });
+            afterNextRender({ read: () => this.syncScrollState() }, { injector: this.injector });
         });
     }
-    syncScrollFades() {
+    syncScrollState() {
         const element = this.elementRef.nativeElement;
         // `scrollLeft` counts down from 0 in RTL, so compare distances rather than raw offsets.
         const offset = Math.abs(element.scrollLeft);
@@ -61038,6 +61113,16 @@ class TableComponent {
         const current = this.scrollFades();
         if (next.start !== current.start || next.end !== current.end)
             this.scrollFades.set(next);
+        const below = element.scrollHeight - element.clientHeight - element.scrollTop;
+        const shadows = {
+            blockStart: element.scrollTop > SCROLL_FADE_EPSILON,
+            blockEnd: below > SCROLL_FADE_EPSILON,
+        };
+        const currentShadows = this.blockScrollShadows();
+        if (shadows.blockStart !== currentShadows.blockStart || shadows.blockEnd !== currentShadows.blockEnd) {
+            this.blockScrollShadows.set(shadows);
+        }
+        this.syncObscuredColumns();
     }
     /**
      * A template registered for one of a column's slots, or `null`. Part of the feature contract - the
@@ -61152,10 +61237,22 @@ class TableComponent {
     leadColumnsMeta() {
         return this.leadColumns().map((lead) => ({ key: lead.key, cellClass: lead.cellClass }));
     }
+    /** The rendered header cells of the trailing utility columns. Part of the feature contract. */
+    trailHeaderCellElements() {
+        return this.trailHeaderCells().map((ref) => ref.nativeElement);
+    }
+    /** The trailing utility columns, in render order. Part of the feature contract. */
+    trailColumnsMeta() {
+        return this.trailColumns().map((trail) => ({ key: trail.key, cellClass: trail.cellClass }));
+    }
     /** Whether a trailing slack track is in play. Part of the feature contract. */
     hasFillerTrack() {
         return this.hasFiller();
     }
+    /** Whether rows have a box of their own (a card, a row link). Part of the feature contract. */
+    hasRowBox() {
+        return this.rowBox();
+    }
     /** The `expandedRowTemplate` input, type-erased for the feature contract. */
     detailTemplate() {
         return this.expandedRowTemplate() ?? null;
@@ -61182,6 +61279,29 @@ class TableComponent {
     editCell(rowIndex, columnIndex) {
         return this.cellEditing()?.editCell(rowIndex, columnIndex) ?? false;
     }
+    /** What a pinned block covers at each inline edge. Part of the feature contract. */
+    frozenInsets() {
+        return this.fadeInset();
+    }
+    /**
+     * Claim the drag a pointer started for one feature. Part of the feature contract - it is how
+     * `etTableReorder` keeps a header drag away from `etTableDragScroll` without either knowing about
+     * the other. Consumers never call this.
+     */
+    claimPointerGesture(event, feature) {
+        const { pointerId } = event;
+        this.pointerGestureClaims.set(pointerId, feature);
+        // Released off the document, not off the table: a pointer let go outside the table sends its
+        // `pointerup` nowhere near this element, and a claim left behind would block the next gesture
+        // that reuses the id.
+        merge(fromEvent(this.document, 'pointerup'), fromEvent(this.document, 'pointercancel'))
+            .pipe(filter((ended) => ended.pointerId === pointerId), take(1), tap(() => this.pointerGestureClaims.delete(pointerId)), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /** Which feature claimed this pointer's drag, or `null`. Part of the feature contract. */
+    pointerGestureClaim(event) {
+        return this.pointerGestureClaims.get(event.pointerId) ?? null;
+    }
     /** A rendered body cell, for a feature measuring real row height. Part of the feature contract. */
     firstBodyCellElement() {
         return this.bodyCells()[0]?.nativeElement ?? null;
@@ -61234,7 +61354,11 @@ class TableComponent {
             return 1;
         return Math.max(1, Math.floor(viewport / rowHeight) - 1);
     }
-    /** Apply a previously captured {@link TableState} - column order, visibility, sort, filters and feature slices. */
+    /**
+     * Apply a previously captured {@link TableState} - column order, visibility, sort, filters and feature
+     * slices. A bound {@link rowsSource} keeps the sort and the filters it publishes; only the layout and
+     * the feature slices are restored onto such a table.
+     */
     restoreState(next) {
         this.columnOrder.set(next.columns.map((column) => column.key));
         this.hiddenColumns.set(new Set(next.columns.filter((column) => column.hidden).map((column) => column.key)));
@@ -61244,15 +61368,24 @@ class TableComponent {
                 widths[column.key] = column.width;
         }
         this.columnWidths.set(widths);
-        const sort = next.columns
-            .filter((column) => column.sort)
-            .sort((a, b) => (a.sortPriority ?? 0) - (b.sortPriority ?? 0))
-            .map((column) => ({ key: column.key, direction: column.sort }));
-        this.sort.set(sort);
-        const filters = next.columns
-            .filter((column) => column.filterValues?.length)
-            .map((column) => ({ key: column.key, values: column.filterValues ?? [] }));
-        this.filters.set(filters);
+        // Whatever a bound source publishes, it owns (see the constructor). Writing it from a restored
+        // state would leave the mirror holding a value the source never had: the source does not change,
+        // so the effect does not re-run to correct it. A layout-only state would silently drop the sort
+        // arrow off a header whose rows are still sorted.
+        const source = this.rowsSource();
+        if (!source?.sort) {
+            const sort = next.columns
+                .filter((column) => column.sort)
+                .sort((a, b) => (a.sortPriority ?? 0) - (b.sortPriority ?? 0))
+                .map((column) => ({ key: column.key, direction: column.sort }));
+            this.sort.set(sort);
+        }
+        if (!source?.filters) {
+            const filters = next.columns
+                .filter((column) => column.filterValues?.length)
+                .map((column) => ({ key: column.key, values: column.filterValues ?? [] }));
+            this.filters.set(filters);
+        }
         // Hand each feature its own slice back. A slice with no matching feature (it wasn't imported here)
         // is left alone rather than dropped, so a round-trip through a table that lacks a feature doesn't
         // erase that feature's state elsewhere.
@@ -61390,6 +61523,10 @@ class TableComponent {
     visibleColumnsMeta() {
         return this.visibleColumns();
     }
+    /** The grid itself, for a feature measuring the whole of it. Part of the feature contract. */
+    gridElement() {
+        return this.gridRef()?.nativeElement ?? null;
+    }
     /** The rendered header cells, ordered like {@link visibleColumnsMeta}. Part of the feature contract. */
     headerCellElements() {
         return this.headerCells().map((ref) => ref.nativeElement);
@@ -61489,12 +61626,52 @@ class TableComponent {
             return next;
         });
     }
+    // Which columns have scrolled behind a pinned one. Their cells are hidden by the pinned cells' own
+    // opaque fill, but anything a feature hangs off a header cell in a portal - a filter menu, a column
+    // menu - is not: it floats over the pinned column, anchored to a cell nobody can see. floating-ui's
+    // own `referenceHidden` can't catch this either, since the cell is clipped by nothing; it is covered.
+    // So the table says when a column is covered, and the header drops its adornments.
+    syncObscuredColumns() {
+        const inset = this.fadeInset();
+        if (inset.start === 0 && inset.end === 0) {
+            if (this.obscuredColumns().size)
+                this.obscuredColumns.set(EMPTY_COLUMN_KEYS);
+            return;
+        }
+        const cells = this.headerCells();
+        const columns = this.visibleColumns();
+        // One live read per scroll tick over the header row only, which is what this has to compare against
+        // the pinned edges - `signalElementDimensions` observes a single element and never sees a scroll.
+        const host = this.elementRef.nativeElement.getBoundingClientRect();
+        const startEdge = host.left + inset.start;
+        const endEdge = host.right - inset.end;
+        const next = new Set();
+        columns.forEach((column, index) => {
+            if (column.sticky)
+                return;
+            const cell = cells[index]?.nativeElement;
+            if (!cell)
+                return;
+            const rect = cell.getBoundingClientRect();
+            if (rect.right <= startEdge || rect.left >= endEdge)
+                next.add(column.key);
+        });
+        const current = this.obscuredColumns();
+        const changed = next.size !== current.size || [...next].some((key) => !current.has(key));
+        if (changed)
+            this.obscuredColumns.set(next);
+    }
     /**
      * The one place sort state is written. A bound {@link rowsSource} owns it - it resets the page and
      * refetches - and its own value syncs back into `sort` (see the constructor), so everything else can
      * keep reading `sort()` whichever drives it.
      */
     applySort(sort) {
+        this.sortGesture.set(true);
+        this.sortGestureReset?.unsubscribe();
+        this.sortGestureReset = timer(SORT_INDICATOR_ANIMATION_MS)
+            .pipe(tap(() => this.sortGesture.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
         const source = this.rowsSource();
         if (source?.setSort) {
             source.setSort(sort);
@@ -61526,10 +61703,10 @@ class TableComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollFades()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null" }, classAttribute: "et-table-host" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableComponent, isStandalone: true, selector: "et-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowsSource: { classPropertyName: "rowsSource", publicName: "rowsSource", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, errorTemplate: { classPropertyName: "errorTemplate", publicName: "errorTemplate", isSignal: true, isRequired: false, transformFunction: null }, cellState: { classPropertyName: "cellState", publicName: "cellState", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, sortMode: { classPropertyName: "sortMode", publicName: "sortMode", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, expandedRowTemplate: { classPropertyName: "expandedRowTemplate", publicName: "expandedRowTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowInteractive: { classPropertyName: "rowInteractive", publicName: "rowInteractive", isSignal: true, isRequired: false, transformFunction: null }, rowLink: { classPropertyName: "rowLink", publicName: "rowLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sort: "sortChange", filters: "filtersChange", rowClick: "rowClick" }, host: { listeners: { "scroll": "syncScrollState()" }, properties: { "attr.data-appearance": "appearance()", "attr.data-density": "density()", "attr.aria-busy": "resolvedLoading() ? \"true\" : null", "class.et-table-host--scrolled-block-start": "blockScrollShadows().blockStart", "class.et-table-host--scrolled-block-end": "blockScrollShadows().blockEnd", "class.et-table-host--scrolled-inline-start": "scrollFades().start", "class.et-table-host--scrolled-inline-end": "scrollFades().end", "style.--_et-table-viewport-inline-size.px": "viewportInlineSize()" }, classAttribute: "et-table-host" }, providers: [
             { provide: TABLE_FEATURE_HOST, useExisting: TableComponent },
             provideIcons(ARROW_UP_ICON, TRIANGLE_EXCLAMATION_ICON),
-        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n            @if (cell.direction; as direction) {\n              <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                   swapping; only appearing and disappearing are the fade. -->\n              <i\n                [attr.data-direction]=\"direction\"\n                class=\"et-table-sort-indicator\"\n                animate.enter=\"et-table-sort-indicator--enter\"\n                animate.leave=\"et-table-sort-indicator--leave\"\n                etIcon=\"et-arrow-up\"\n              ></i>\n            }\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported. -->\n        @for (adornment of headerAdornments(); track $index) {\n          <ng-container\n            *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n          />\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <div class=\"et-table-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--link]=\"cell.linkHost\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n\n            @if (cell.linkHost) {\n              <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n                   wrapping any content, so the cells stay exactly as a table without links renders them.\n                   It carries no text of its own and is named by this cell instead - `aria-labelledby`\n                   resolves to the cell's content, which is the row's identity. -->\n              <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n                   allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n              <a\n                [attr.href]=\"rowVm.href\"\n                [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n                (click)=\"activateRowLink(rowVm.link, $event)\"\n                class=\"et-table-row-link\"\n              ></a>\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally. The layer is absolutely positioned\n       over the whole grid \u2014 the full scroll extent, not just the viewport \u2014 which is what lets the two\n       fades inside it hold their place with `position: sticky` for the entire scroll range. Their inline\n       inset clears whatever columns are pinned at that edge, so the fade marks where rows actually\n       disappear (a pinned column's inner edge) rather than the viewport's edge. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"scrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"scrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-surface-background-solid, Canvas);--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--et-surface-background-solid, Canvas);--_et-table-row-hover: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--et-surface-background-solid, Canvas) )}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--_et-table-band);--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--_et-table-band);--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--et-surface-background-solid, Canvas) )}.et-table-host:where([data-appearance=grid]){--_et-table-header-bg: var(--_et-table-band);--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-header-bg: var(--et-surface-background-solid, Canvas);--_et-table-row-divider: transparent;--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-band) )}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-host:where([data-appearance=grid]) .et-table-header-cell,.et-table-host:where([data-appearance=grid]) .et-table-cell{border-inline-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=grid]) .et-table-header-row .et-table-header-cell:last-child,.et-table-host:where([data-appearance=grid]) .et-table-row .et-table-cell:last-child{border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:4px 0 6px -4px #0000002e}.et-table-sticky-end{box-shadow:-4px 0 6px -4px #0000002e}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--et-surface-background-solid, Canvas)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,#00000029,#0000)}.et-table-scroll-fade--end{background:linear-gradient(to left,#00000029,#0000)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-cell--link{overflow:visible}.et-table-row-link{position:absolute;inset:0;cursor:pointer}.et-table-row-link:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive){position:relative;z-index:1}.et-table-host:where([data-appearance=cards]) .et-table-row{margin-block-end:var(--et-table-row-gap, 8px);background:var(--_et-table-band);border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-row-radius, 10px)}.et-table-host:where([data-appearance=cards]) .et-table-header-cell{margin-block-end:var(--et-table-row-gap, 8px)}.et-table-host:where([data-appearance=cards]) .et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: transparent;--_et-table-row-hover-solid: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row>:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row-link{border-radius:var(--et-table-row-radius, 10px)}.et-table-header-label{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "footerSlot", first: true, predicate: TableFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "gridRef", first: true, predicate: ["grid"], descendants: true, isSignal: true }, { propertyName: "headerCells", predicate: ["headerCell"], descendants: true, isSignal: true }, { propertyName: "bodyCells", predicate: ["bodyCell"], descendants: true, isSignal: true }, { propertyName: "leadHeaderCells", predicate: ["leadHeaderCell"], descendants: true, isSignal: true }, { propertyName: "trailHeaderCells", predicate: ["trailHeaderCell"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n            @if (cell.direction; as direction) {\n              <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                   swapping; only appearing and disappearing are the fade, and only for a sort the user\n                   just asked for (see sortIndicatorEnter). -->\n              <i\n                [attr.data-direction]=\"direction\"\n                [animate.enter]=\"sortIndicatorEnter()\"\n                [animate.leave]=\"sortIndicatorLeave()\"\n                class=\"et-table-sort-indicator\"\n                etIcon=\"et-arrow-up\"\n              ></i>\n            }\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured) {\n          @for (adornment of headerAdornments(); track $index) {\n            <ng-container\n              *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n            />\n          }\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (appearance() === 'cards') {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-row-hover: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent;--_et-table-row-surface: var(--_et-table-band)}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: 2.8rem;--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-host:where([data-appearance=grid]) .et-table-header-cell,.et-table-host:where([data-appearance=grid]) .et-table-cell{border-inline-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=grid]) .et-table-header-row .et-table-header-cell:last-child,.et-table-host:where([data-appearance=grid]) .et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-4px}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-host:where([data-appearance=cards]) .et-table-row{margin-block-end:var(--et-table-row-gap, 8px);background:var(--_et-table-band);border-radius:var(--et-table-row-radius, 10px)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:inset(0 -24px)}.et-table-host:where([data-appearance=cards]) .et-table-header-cell{margin-block-end:var(--et-table-row-gap, 8px)}.et-table-host:where([data-appearance=cards]) .et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: transparent;--_et-table-row-hover-solid: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row-link{border-radius:var(--et-table-row-radius, 10px)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-end:-2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-host:where([data-appearance=cards]) .et-table-busy-bar{margin-block-start:calc((var(--et-table-row-gap, 8px) + 2px) / -2);margin-block-end:calc((var(--et-table-row-gap, 8px) - 2px) / 2)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -61541,9 +61718,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         '[attr.data-appearance]': 'appearance()',
                         '[attr.data-density]': 'density()',
                         '[attr.aria-busy]': 'resolvedLoading() ? "true" : null',
-                        '(scroll)': 'syncScrollFades()',
-                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n            @if (cell.direction; as direction) {\n              <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                   swapping; only appearing and disappearing are the fade. -->\n              <i\n                [attr.data-direction]=\"direction\"\n                class=\"et-table-sort-indicator\"\n                animate.enter=\"et-table-sort-indicator--enter\"\n                animate.leave=\"et-table-sort-indicator--leave\"\n                etIcon=\"et-arrow-up\"\n              ></i>\n            }\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported. -->\n        @for (adornment of headerAdornments(); track $index) {\n          <ng-container\n            *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n          />\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <div class=\"et-table-busy-bar\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--link]=\"cell.linkHost\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n\n            @if (cell.linkHost) {\n              <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n                   wrapping any content, so the cells stay exactly as a table without links renders them.\n                   It carries no text of its own and is named by this cell instead - `aria-labelledby`\n                   resolves to the cell's content, which is the row's identity. -->\n              <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n                   allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n              <a\n                [attr.href]=\"rowVm.href\"\n                [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n                (click)=\"activateRowLink(rowVm.link, $event)\"\n                class=\"et-table-row-link\"\n              ></a>\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally. The layer is absolutely positioned\n       over the whole grid \u2014 the full scroll extent, not just the viewport \u2014 which is what lets the two\n       fades inside it hold their place with `position: sticky` for the entire scroll range. Their inline\n       inset clears whatever columns are pinned at that edge, so the fade marks where rows actually\n       disappear (a pinned column's inner edge) rather than the viewport's edge. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"scrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"scrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-surface-background-solid, Canvas);--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--et-surface-background-solid, Canvas);--_et-table-row-hover: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--et-surface-background-solid, Canvas) )}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--_et-table-band);--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--_et-table-band);--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--et-surface-background-solid, Canvas) )}.et-table-host:where([data-appearance=grid]){--_et-table-header-bg: var(--_et-table-band);--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-header-bg: var(--et-surface-background-solid, Canvas);--_et-table-row-divider: transparent;--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-band) )}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-host:where([data-appearance=grid]) .et-table-header-cell,.et-table-host:where([data-appearance=grid]) .et-table-cell{border-inline-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=grid]) .et-table-header-row .et-table-header-cell:last-child,.et-table-host:where([data-appearance=grid]) .et-table-row .et-table-cell:last-child{border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:4px 0 6px -4px #0000002e}.et-table-sticky-end{box-shadow:-4px 0 6px -4px #0000002e}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--et-surface-background-solid, Canvas)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,#00000029,#0000)}.et-table-scroll-fade--end{background:linear-gradient(to left,#00000029,#0000)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-cell--link{overflow:visible}.et-table-row-link{position:absolute;inset:0;cursor:pointer}.et-table-row-link:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive){position:relative;z-index:1}.et-table-host:where([data-appearance=cards]) .et-table-row{margin-block-end:var(--et-table-row-gap, 8px);background:var(--_et-table-band);border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:var(--et-table-row-radius, 10px)}.et-table-host:where([data-appearance=cards]) .et-table-header-cell{margin-block-end:var(--et-table-row-gap, 8px)}.et-table-host:where([data-appearance=cards]) .et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: transparent;--_et-table-row-hover-solid: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row>:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row-link{border-radius:var(--et-table-row-radius, 10px)}.et-table-header-label{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }] } });
+                        '[class.et-table-host--scrolled-block-start]': 'blockScrollShadows().blockStart',
+                        '[class.et-table-host--scrolled-block-end]': 'blockScrollShadows().blockEnd',
+                        '[class.et-table-host--scrolled-inline-start]': 'scrollFades().start',
+                        '[class.et-table-host--scrolled-inline-end]': 'scrollFades().end',
+                        '[style.--_et-table-viewport-inline-size.px]': 'viewportInlineSize()',
+                        '(scroll)': 'syncScrollState()',
+                    }, template: "<!-- Every binding below reads a field off a render model (see the `\u2026Vm` types in the component):\n     methods belong in event bindings, not in bindings the framework re-evaluates each pass. -->\n<div #grid [style.grid-template-columns]=\"templateColumns()\" class=\"et-table\" role=\"grid\">\n  <!-- Rows a feature renders above the column headers (etTableGroupHeaders' spanning group row). Each\n       is display: contents and lays its own cells into these tracks \u2014 see registerHeaderRow. -->\n  @for (headerRow of headerRows(); track $index) {\n    <ng-container *ngComponentOutlet=\"headerRow.component; injector: headerRow.injector\" />\n  }\n\n  <div class=\"et-table-header-row\" role=\"row\">\n    <!-- Leading utility columns (selection from a feature, the expander when expansion is on). The\n         table owns the cell chrome; the feature only supplies what goes inside. -->\n    @for (lead of leadCells(); track lead.key) {\n      <div\n        #leadHeaderCell\n        [class]=\"lead.cellClass\"\n        [class.et-table-sticky-start]=\"lead.sticky\"\n        [style.inset-inline-start.px]=\"lead.offset\"\n        [attr.aria-hidden]=\"lead.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (lead.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: lead.lead.injector\" />\n        }\n      </div>\n    }\n    @for (cell of headerCellVms(); track cell.key) {\n      <div\n        #headerCell\n        [attr.data-align]=\"cell.align\"\n        [attr.data-col-key]=\"cell.key\"\n        [attr.aria-sort]=\"cell.ariaSort\"\n        [class.et-table-sticky-start]=\"cell.stickyStart\"\n        [class.et-table-sticky-end]=\"cell.stickyEnd\"\n        [style.inset-inline-start.px]=\"cell.offsetStart\"\n        [style.inset-inline-end.px]=\"cell.offsetEnd\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        <!-- Sorting is the whole header's job, not a control's: the label plus everything around it is\n             one button, and the only sort affordance is the direction arrow, which appears once the\n             column is actually sorted. Adornments sit outside it so their own clicks don't sort. -->\n        @if (cell.sortable) {\n          <button\n            [attr.aria-label]=\"cell.sortLabel\"\n            (click)=\"toggleSort(cell.key)\"\n            class=\"et-table-header-label et-table-header-label--sortable\"\n            type=\"button\"\n          >\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n            @if (cell.direction; as direction) {\n              <!-- Flipping direction keeps this element mounted, so the arrow turns over rather than\n                   swapping; only appearing and disappearing are the fade, and only for a sort the user\n                   just asked for (see sortIndicatorEnter). -->\n              <i\n                [attr.data-direction]=\"direction\"\n                [animate.enter]=\"sortIndicatorEnter()\"\n                [animate.leave]=\"sortIndicatorLeave()\"\n                class=\"et-table-sort-indicator\"\n                etIcon=\"et-arrow-up\"\n              ></i>\n            }\n          </button>\n        } @else {\n          <span class=\"et-table-header-label\">\n            @if (cell.template; as headerTemplate) {\n              <ng-container *ngTemplateOutlet=\"headerTemplate; context: { $implicit: cell.column.header }\" />\n            } @else {\n              <span class=\"et-table-cell-text\">{{ cell.column.header }}</span>\n            }\n          </span>\n        }\n\n        <!-- UI from opt-in features (filter menu, \u2026), each registered rather than referenced \u2014 see\n             registerHeaderAdornment. Renders nothing when no feature is imported.\n\n             Dropped once the column is covered by a pinned one: an adornment's menu is a portal, so it\n             would go on floating over the pinned column, anchored to a cell nobody can see. Unmounting\n             the trigger is what closes it. -->\n        @if (!cell.obscured) {\n          @for (adornment of headerAdornments(); track $index) {\n            <ng-container\n              *ngComponentOutlet=\"adornment.component; inputs: { column: cell.column }; injector: adornment.injector\"\n            />\n          }\n        }\n      </div>\n    }\n    <!-- Filler cell for the trailing slack track (see hasFiller): carries the header band to the\n         panel's edge when every column is a rigid width. -->\n    @if (hasFiller()) {\n      <div class=\"et-table-header-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n    }\n    <!-- Trailing utility columns (a selection column moved to this edge). Same chrome as the leading\n         ones, pinned to the trailing edge instead - see TableLeadColumn.side. -->\n    @for (trail of trailCells(); track trail.key) {\n      <div\n        #trailHeaderCell\n        [class]=\"trail.cellClass\"\n        [class.et-table-sticky-end]=\"trail.sticky\"\n        [style.inset-inline-end.px]=\"trail.offset\"\n        [attr.aria-hidden]=\"trail.lead.headerComponent ? null : 'true'\"\n        class=\"et-table-header-cell\"\n        role=\"columnheader\"\n      >\n        @if (trail.lead.headerComponent; as headerComponent) {\n          <ng-container *ngComponentOutlet=\"headerComponent; injector: trail.lead.injector\" />\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Refetching over rows that are already on screen: a 2px indeterminate bar right under the header,\n       so the data stays readable and in place. Drawn here rather than with `et-progress-bar` \u2014 the base\n       table takes no component dependencies, and this is 2px of chrome, not a control. -->\n  @if (showBusyBar()) {\n    <!-- Faded in and out: a refetch is often over in a few hundred ms, and a bar that pops in and\n         vanishes reads as a flicker rather than as work happening. -->\n    <div\n      class=\"et-table-busy-bar\"\n      animate.enter=\"et-table-busy-bar--enter\"\n      animate.leave=\"et-table-busy-bar--leave\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    ></div>\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.start\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  @if (hasError()) {\n    <!-- The error state stands in for the whole body: rows are either trustworthy or absent. -->\n    <div class=\"et-table-message-row\" role=\"row\">\n      <div class=\"et-table-error-cell\" role=\"gridcell\" aria-live=\"polite\">\n        @if (errorTemplate(); as template) {\n          <ng-container *ngTemplateOutlet=\"template; context: { $implicit: error() }\" />\n        } @else {\n          <ng-content select=\"[etTableError]\">\n            <i [etProvideColor]=\"errorColorTheme\" class=\"et-table-error-icon\" etIcon=\"et-triangle-exclamation\"></i>\n            <span>{{ resolvedLabels().error }}</span>\n          </ng-content>\n        }\n      </div>\n    </div>\n  } @else if (showPlaceholderRows()) {\n    <!-- First load with nothing to show yet. What a loading body looks like belongs to a feature\n         (etTableSkeleton draws placeholder rows in these tracks); with none the body stays blank rather\n         than showing a misleading empty state \u2014 the host's `aria-busy` is the announcement. -->\n    @if (bodyPlaceholder(); as placeholder) {\n      <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n    }\n  } @else {\n    @for (rowVm of bodyRows(); track rowVm.key) {\n      <!-- A linked row is not a tab stop of its own: its anchor is the one stop, and the one link. -->\n      <div\n        [class]=\"rowVm.classes\"\n        [class.et-table-row--stripe]=\"rowVm.stripe\"\n        [class.et-table-row--last]=\"rowVm.last\"\n        [class.et-table-row--interactive]=\"rowInteractive()\"\n        [class.et-table-row--box]=\"rowBox()\"\n        [class.et-table-row--link]=\"rowVm.href !== null\"\n        [attr.tabindex]=\"rowInteractive() && !cellNavigation() && rowVm.href === null ? 0 : null\"\n        (click)=\"activateRow(rowVm.row, $event)\"\n        (keydown.enter)=\"activateRow(rowVm.row, $event)\"\n        (keydown.space)=\"activateRow(rowVm.row, $event)\"\n        class=\"et-table-row\"\n        role=\"row\"\n      >\n        @for (lead of rowVm.leads; track lead.key) {\n          <div\n            [class]=\"lead.cellClass\"\n            [class.et-table-sticky-start]=\"lead.sticky\"\n            [style.inset-inline-start.px]=\"lead.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"lead.lead.bodyComponent; inputs: { row: rowVm.row }; injector: lead.lead.injector\"\n            />\n          </div>\n        }\n        @for (cell of rowVm.cells; track cell.key) {\n          <div\n            #bodyCell\n            [attr.data-align]=\"cell.align\"\n            [attr.data-col-key]=\"cell.key\"\n            [attr.tabindex]=\"cellNavigation() ? -1 : null\"\n            [attr.data-state]=\"cell.state\"\n            [attr.id]=\"cell.linkHost ? rowVm.linkLabelId : null\"\n            [class.et-table-cell--interactive]=\"cell.interactive\"\n            [class.et-table-cell--editing]=\"cell.edit\"\n            [class.et-skeleton--animated]=\"cell.state === 'loading'\"\n            [class.et-table-sticky-start]=\"cell.stickyStart\"\n            [class.et-table-sticky-end]=\"cell.stickyEnd\"\n            [style.inset-inline-start.px]=\"cell.offsetStart\"\n            [style.inset-inline-end.px]=\"cell.offsetEnd\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            @if (cell.edit; as edit) {\n              <!-- The one cell in edit mode: the column's etTableCellEdit template, rendered with the\n                   editing feature's own context (the draft field). See registerCellEditing. -->\n              <ng-container *ngTemplateOutlet=\"edit.template; context: edit.context\" />\n            } @else if (cell.state === 'loading' && cellPlaceholder(); as placeholder) {\n              <!-- A cell that is loading on its own (an inline edit saving) shows a feature's placeholder\n                   instead of its value; the row around it stays readable. Without one the value stays put\n                   and `data-state` carries the cue \u2014 see registerCellPlaceholder. -->\n              <ng-container *ngComponentOutlet=\"placeholder.component; injector: placeholder.injector\" />\n            } @else {\n              @if (cell.state === 'error') {\n                @if (cellErrorMark(); as mark) {\n                  <!-- A feature (etTableCellErrorTooltip) draws the mark instead, so the overlay runtime\n                       only ships when a table actually wants a tooltip. -->\n                  <ng-container\n                    *ngComponentOutlet=\"mark.component; inputs: { message: cell.message }; injector: mark.injector\"\n                  />\n                } @else {\n                  <!-- Color-scoped here rather than on the cell: the mark is the only part that must read\n                       as an error, and a provider per errored cell is cheap where one per cell would not\n                       be. The message rides along as `title`, which costs nothing. -->\n                  <i\n                    [etProvideColor]=\"errorColorTheme\"\n                    [attr.title]=\"cell.message\"\n                    [attr.aria-label]=\"cell.message\"\n                    [attr.aria-hidden]=\"cell.message ? null : 'true'\"\n                    class=\"et-table-cell-error-icon\"\n                    etIcon=\"et-triangle-exclamation\"\n                  ></i>\n                }\n              }\n              @if (cell.template; as bodyTemplate) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate; context: cell.context\" />\n              } @else {\n                <span class=\"et-table-cell-text\">{{ cell.value }}</span>\n              }\n            }\n          </div>\n        }\n        @if (hasFiller()) {\n          <div class=\"et-table-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n        @for (trail of rowVm.trails; track trail.key) {\n          <div\n            [class]=\"trail.cellClass\"\n            [class.et-table-sticky-end]=\"trail.sticky\"\n            [style.inset-inline-end.px]=\"trail.offset\"\n            class=\"et-table-cell\"\n            role=\"gridcell\"\n          >\n            <ng-container\n              *ngComponentOutlet=\"trail.lead.bodyComponent; inputs: { row: rowVm.row }; injector: trail.lead.injector\"\n            />\n          </div>\n        }\n\n        @if (rowVm.href !== null) {\n          <!-- The row's link: one real anchor, stretched over the row box (see rowBox) rather than\n               wrapping any content, so the cells stay exactly as a table without links renders them.\n               It carries no text of its own and is named by the identity cell instead - `aria-labelledby`\n               resolves to that cell's content, which is the row's identity.\n\n               A child of the row, not of a cell: a cell that is pinned is `position: sticky` and would\n               therefore be the anchor's containing block, shrinking the row's hit area to that one\n               column. The row box is the containing block that spans every cell. -->\n          <!-- eslint-disable-next-line @angular-eslint/template/elements-content -- the rule's\n               allowList knows `aria-label` but not `aria-labelledby`, which names it just as well. -->\n          <a\n            [attr.href]=\"rowVm.href\"\n            [attr.aria-labelledby]=\"rowVm.linkLabelId\"\n            (click)=\"activateRowLink(rowVm.link, $event)\"\n            class=\"et-table-row-link\"\n          ></a>\n        }\n\n        @if (appearance() === 'cards') {\n          <div class=\"et-table-card-corners\" role=\"presentation\" aria-hidden=\"true\"></div>\n        }\n      </div>\n\n      <!-- The detail row of an expanded row, from etTableRowExpansion \u2014 the whole row, its chrome and\n           its animation belong to the feature, so a table that never expands carries none of them. -->\n      @if (rowVm.detail; as detail) {\n        <ng-container *ngComponentOutlet=\"detail.component; inputs: { row: rowVm.row }; injector: detail.injector\" />\n      }\n    } @empty {\n      <div class=\"et-table-message-row\" role=\"row\">\n        <div class=\"et-table-empty-cell\" role=\"gridcell\">\n          @if (emptyTemplate(); as template) {\n            <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rows() }\" />\n          } @else {\n            <ng-content select=\"[etTableEmpty]\">{{ resolvedLabels().empty }}</ng-content>\n          }\n        </div>\n      </div>\n    }\n  }\n\n  @if (spacers(); as spacer) {\n    <div [style.block-size.px]=\"spacer.end\" class=\"et-table-spacer\" role=\"presentation\" aria-hidden=\"true\"></div>\n  }\n\n  <!-- Edge gradients marking rows scrolled out of view horizontally, on the edges no pinned column\n       already marks (see visibleScrollFades). The layer is absolutely positioned over the whole grid \u2014\n       the full scroll extent, not just the viewport \u2014 which is what lets the two fades inside it hold\n       their place with `position: sticky` for the entire scroll range. -->\n  <div class=\"et-table-scroll-fades\" role=\"presentation\" aria-hidden=\"true\">\n    <div\n      [style.inset-inline-start.px]=\"fadeInset().start\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().start\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--start\"\n    ></div>\n    <div\n      [style.inset-inline-end.px]=\"fadeInset().end\"\n      [class.et-table-scroll-fade--visible]=\"visibleScrollFades().end\"\n      class=\"et-table-scroll-fade et-table-scroll-fade--end\"\n    ></div>\n  </div>\n\n  @if (hasFooter()) {\n    <div class=\"et-table-footer-row\" role=\"row\">\n      @for (lead of leadCells(); track lead.key) {\n        <div\n          [class]=\"lead.cellClass\"\n          [class.et-table-sticky-start]=\"lead.sticky\"\n          [style.inset-inline-start.px]=\"lead.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n      @for (cell of footerCells(); track cell.key) {\n        <div\n          [attr.data-align]=\"cell.align\"\n          [class.et-table-sticky-start]=\"cell.stickyStart\"\n          [class.et-table-sticky-end]=\"cell.stickyEnd\"\n          [style.inset-inline-start.px]=\"cell.offsetStart\"\n          [style.inset-inline-end.px]=\"cell.offsetEnd\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n        >\n          @if (cell.template; as footerTemplate) {\n            <ng-container *ngTemplateOutlet=\"footerTemplate; context: { $implicit: rows() }\" />\n          }\n        </div>\n      }\n      @if (hasFiller()) {\n        <div class=\"et-table-footer-cell et-table-filler-cell\" role=\"presentation\" aria-hidden=\"true\"></div>\n      }\n      @for (trail of trailCells(); track trail.key) {\n        <div\n          [class]=\"trail.cellClass\"\n          [class.et-table-sticky-end]=\"trail.sticky\"\n          [style.inset-inline-end.px]=\"trail.offset\"\n          class=\"et-table-footer-cell\"\n          role=\"gridcell\"\n          aria-hidden=\"true\"\n        ></div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Full-width footer slot (paginator, page-size, etc.), pinned to the bottom of the scroll viewport.\n     Rendered only when the consumer projects `[etTableFooter]`, so the chrome never shows empty. -->\n@if (footerSlot()) {\n  <div class=\"et-table-footer\">\n    <ng-content select=\"[etTableFooter]\" />\n  </div>\n}\n\n<!-- Floating UI from opt-in features (the reorder drag ghost / drop indicator), stamped here so a\n     feature can draw without having a view \u2014 or an element \u2014 of its own. -->\n@for (layer of layers(); track $index) {\n  <ng-container *ngComponentOutlet=\"layer.component; injector: layer.injector\" />\n}\n", styles: ["@layer components{@property --et-table-cell-padding-block{syntax: \"<length>\"; inherits: true; initial-value: 10px;}@property --et-table-cell-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 12px;}:where(.et-table-host){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 35%,transparent) transparent;--_et-table-band: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 7%, var(--et-surface-background-solid, Canvas) );--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-header-border: var(--et-surface-border-solid, rgb(128 128 128 / .3));--_et-table-row-divider: transparent;--_et-table-row-surface: var(--et-surface-background-solid, Canvas);--_et-table-stripe-bg: transparent;--_et-table-stripe-solid: var(--_et-table-row-surface);--_et-table-row-hover: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 8%, transparent);--_et-table-row-hover-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 8%, var(--_et-table-row-surface) );--_et-table-pin-shadow: var( --et-table-pin-shadow-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 30%, transparent) );--_et-table-pin-shadow-inline: var(--et-table-pin-shadow-color-inline, var(--_et-table-pin-shadow));--_et-table-pin-shadow-block: var(--et-table-pin-shadow-color-block, var(--_et-table-pin-shadow));--_et-table-edge-none: 0 0 transparent;--_et-table-edge-start: var(--_et-table-edge-none);--_et-table-edge-end: var(--_et-table-edge-none);--_et-table-edge-block-start: var(--_et-table-edge-none);--_et-table-edge-block-end: var(--_et-table-edge-none)}.et-table-host--scrolled-inline-start{--_et-table-edge-start: 8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-inline-end{--_et-table-edge-end: -8px 0 10px -6px var(--_et-table-pin-shadow-inline)}.et-table-host--scrolled-block-start{--_et-table-edge-block-start: 0 8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host--scrolled-block-end{--_et-table-edge-block-end: 0 -8px 10px -6px var(--_et-table-pin-shadow-block)}.et-table-host:where([data-density=sm]){--et-table-cell-padding-block: 6px;--et-table-cell-padding-inline: 10px}.et-table-host:where([data-density=md]){--et-table-cell-padding-block: 10px;--et-table-cell-padding-inline: 12px}.et-table-host:where([data-density=lg]){--et-table-cell-padding-block: 15px;--et-table-cell-padding-inline: 16px}.et-table-host:where([data-appearance=enclosed],[data-appearance=zebra],[data-appearance=grid]){border:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3));border-radius:10px}.et-table-host:where([data-appearance=enclosed]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15));box-shadow:0 1px 2px #0000000a,0 6px 16px #0000000f}.et-table-host:where([data-appearance=divided]){--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=zebra]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-stripe-bg: color-mix(in srgb, var(--et-surface-interaction-solid, gray) 4%, transparent);--_et-table-stripe-solid: color-mix( in srgb, var(--et-surface-interaction-solid, gray) 4%, var(--_et-table-row-surface) )}.et-table-host:where([data-appearance=grid]){--_et-table-header-bg: var(--et-table-header-background-color, var(--_et-table-band));--_et-table-row-divider: var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=bare]){--_et-table-header-border: transparent}.et-table-host:where([data-appearance=cards]){--_et-table-header-bg: var(--et-table-header-background-color, var(--et-surface-background-solid, Canvas));--_et-table-row-divider: transparent;--_et-table-row-surface: var(--_et-table-band)}.et-table{display:grid;position:relative;align-content:start;inline-size:min-content;min-inline-size:100%;background:var(--et-surface-background-solid, Canvas);color:var(--et-surface-color-solid, CanvasText);font-size:14px;line-height:1.4}.et-table-filler-cell{padding-inline:0}.et-table-header-row,.et-table-row{display:contents}.et-table-header-cell,.et-table-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}.et-table-cell-text{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-table-header-cell{position:sticky;inset-block-start:max(0px,calc(var(--_et-table-group-h, 0px) - 1px));gap:4px;z-index:1;font-weight:600;color:var(--et-surface-color-muted-solid, CanvasText);background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-header-cell .et-table-filter-trigger,.et-table-header-cell .et-table-column-menu-trigger{--et-icon-button-size: 2.8rem;--et-icon-button-icon-size: 1.6rem;min-width:24px;min-height:24px}.et-table-cell{border-block-end:1px solid var(--_et-table-row-divider)}.et-table-header-cell{box-shadow:var(--_et-table-edge-block-start)}.et-table-header-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-start)}.et-table-header-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-start),var(--_et-table-edge-end)}.et-table-footer,.et-table-footer-cell{box-shadow:var(--_et-table-edge-block-end)}.et-table-footer-cell.et-table-sticky-start{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-start)}.et-table-footer-cell.et-table-sticky-end{box-shadow:var(--_et-table-edge-block-end),var(--_et-table-edge-end)}.et-table-row--last:not(:has(+.et-table-detail-row)) .et-table-cell{border-block-end:0}.et-table-row--stripe .et-table-cell{background:var(--_et-table-stripe-bg)}.et-table-host:where([data-appearance=grid]) .et-table-header-cell,.et-table-host:where([data-appearance=grid]) .et-table-cell{border-inline-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=grid]) .et-table-header-row .et-table-header-cell:last-child,.et-table-host:where([data-appearance=grid]) .et-table-row .et-table-cell:nth-last-child(1 of.et-table-cell){border-inline-end:0}.et-table-sticky-start,.et-table-sticky-end{position:sticky;z-index:1}.et-table-sticky-start{box-shadow:var(--_et-table-edge-start)}.et-table-sticky-end{box-shadow:var(--_et-table-edge-end)}.et-table-sticky-start:has(~.et-table-sticky-start){--_et-table-edge-start: 0 0 transparent}.et-table-sticky-end~.et-table-sticky-end{--_et-table-edge-end: 0 0 transparent}.et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){background:var(--_et-table-row-surface)}.et-table-row--stripe .et-table-cell.et-table-sticky-start,.et-table-row--stripe .et-table-cell.et-table-sticky-end{background:var(--_et-table-stripe-solid)}@media(hover:hover){.et-table-row:hover .et-table-cell.et-table-sticky-start,.et-table-row:hover .et-table-cell.et-table-sticky-end{background:var(--_et-table-row-hover-solid)}}.et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end),.et-table-footer-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:3}.et-table-footer-row{display:contents}.et-table-footer-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);position:sticky;inset-block-end:0;z-index:1;font-weight:600;background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-footer-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-scroll-fades{position:absolute;inset:0;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.et-table-scroll-fade{position:sticky;flex:none;inline-size:var(--et-table-scroll-fade-size, 28px);opacity:0;transition:opacity .15s ease;--_et-table-scroll-fade-color: var( --et-table-scroll-fade-color, color-mix(in srgb, var(--et-surface-interaction-solid, black) 22%, transparent) )}.et-table-scroll-fade--visible{opacity:1}.et-table-scroll-fade--start{background:linear-gradient(to right,var(--_et-table-scroll-fade-color),transparent)}.et-table-scroll-fade--end{background:linear-gradient(to left,var(--_et-table-scroll-fade-color),transparent)}@media(prefers-reduced-motion:reduce){.et-table-scroll-fade{transition:none}}.et-table-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;position:sticky;inset-block-end:0;inset-inline-start:0;z-index:4;padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline);background:var(--_et-table-header-bg);border-block-start:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .3))}.et-table-footer-label{margin:0;font-size:14px;color:var(--et-surface-color-muted-solid, CanvasText)}@media(pointer:coarse){.et-table-footer{gap:8px;padding:8px var(--et-table-cell-padding-inline)}}.et-table-header-cell:where([data-align=center]),.et-table-cell:where([data-align=center]){justify-content:center;text-align:center}.et-table-header-cell:where([data-align=end]),.et-table-cell:where([data-align=end]){justify-content:flex-end;text-align:end}.et-table-row--interactive .et-table-cell{cursor:pointer}@media(hover:hover){.et-table-row:hover .et-table-cell{background:var(--_et-table-row-hover)}}.et-table-row--box{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;position:relative;z-index:0}.et-table-row-link{position:absolute;inset:0;z-index:2;cursor:pointer}.et-table-header-label:focus-visible,.et-table-expander:focus-visible,.et-table-cell:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-2px}.et-table-header-label{border-radius:4px}.et-table-row-link:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-4px}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing){z-index:3}.et-table-row--link :where(.et-table-select-cell,.et-table-expander-cell,.et-table-cell--interactive,.et-table-cell--editing):not(.et-table-sticky-start,.et-table-sticky-end){position:relative}.et-table-host:where([data-appearance=cards]) .et-table-row{margin-block-end:var(--et-table-row-gap, 8px);background:var(--_et-table-band);border-radius:var(--et-table-row-radius, 10px)}.et-table-host:where([data-appearance=cards]) .et-table-row--box:after{content:\"\";position:absolute;inset:0;z-index:4;border:1px solid var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));border-radius:inherit;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-cell:where(.et-table-sticky-start,.et-table-sticky-end){clip-path:inset(0 -24px)}.et-table-host:where([data-appearance=cards]) .et-table-header-cell{margin-block-end:var(--et-table-row-gap, 8px)}.et-table-host:where([data-appearance=cards]) .et-table-row:not(.et-table-row--interactive,.et-table-row--link){--_et-table-row-hover: transparent;--_et-table-row-hover-solid: var(--_et-table-band)}.et-table-host:where([data-appearance=cards]) .et-table-row>:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row>.et-table-cell:nth-last-child(1 of.et-table-cell){border-start-end-radius:inherit;border-end-end-radius:inherit}.et-table-host:where([data-appearance=cards]) .et-table-row-link{border-radius:var(--et-table-row-radius, 10px)}.et-table-card-corners{position:absolute;inset:0;z-index:5;display:flex;justify-content:space-between;pointer-events:none}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before,.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{--_et-table-card-radius: var(--et-table-row-radius, 10px);--_et-table-card-edge: var(--et-table-row-border-color, var(--et-surface-border-solid, rgb(128 128 128 / .3)));--_et-table-card-outside: var(--et-surface-background-solid, Canvas);content:\"\";flex:0 0 auto;inline-size:var(--_et-table-card-radius)}.et-table-row:has(.et-table-sticky-start) .et-table-card-corners:before{position:sticky;inset-inline-start:0}.et-table-row:has(.et-table-sticky-end) .et-table-card-corners:after{position:sticky;inset-inline-end:0}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 100% 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 0 0 / 1px 100% no-repeat}.et-table-host:where([data-appearance=cards]) .et-table-card-corners:after{background:radial-gradient(circle at 0 100%,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 0 / 100% var(--_et-table-card-radius) no-repeat,radial-gradient(circle at 0 0,transparent calc(var(--_et-table-card-radius) - 1.2px),var(--_et-table-card-edge) calc(var(--_et-table-card-radius) - .8px) calc(var(--_et-table-card-radius) - .2px),var(--_et-table-card-outside) calc(var(--_et-table-card-radius) + .2px)) 0 100% / 100% var(--_et-table-card-radius) no-repeat,linear-gradient(var(--_et-table-card-edge),var(--_et-table-card-edge)) 100% 0 / 1px 100% no-repeat}.et-table-header-label{display:flex;align-items:center;gap:4px;flex:1;min-inline-size:0;margin:0;padding:0;font:inherit;color:inherit;text-align:inherit;background:none;border:none}.et-table-header-label:where(.et-table-header-label--sortable){cursor:pointer}.et-table-header-cell:where([data-align=center]) .et-table-header-label{justify-content:center}.et-table-header-cell:where([data-align=end]) .et-table-header-label{justify-content:flex-end}.et-table-sort-indicator{flex:none;inline-size:1.15em;block-size:1.15em;transform:translateY(-.045em);color:var(--et-theme-color-primary-solid, currentColor);transition:transform .2s var(--ease-out-5, ease)}.et-table-sort-indicator:where([data-direction=desc]){transform:translateY(-.045em) rotate(180deg)}.et-table-sort-indicator.et-table-sort-indicator--enter{animation:et-table-sort-in .15s ease}.et-table-sort-indicator.et-table-sort-indicator--leave{animation:et-table-sort-in .12s ease reverse forwards}@keyframes et-table-sort-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.et-table-sort-indicator{transition:none}.et-table-sort-indicator.et-table-sort-indicator--enter,.et-table-sort-indicator.et-table-sort-indicator--leave{animation:none}}.et-table-message-row{display:contents}.et-table-empty-cell,.et-table-error-cell{grid-column:1 / -1;position:sticky;inset-inline-start:0;inline-size:var(--_et-table-viewport-inline-size, 100%);padding:32px var(--et-table-cell-padding-inline);color:var(--et-surface-color-muted-solid, CanvasText);text-align:center}.et-table-empty-cell{display:grid;place-content:center;justify-items:center}.et-table-error-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:8px}.et-table-error-icon{flex:none;inline-size:16px;block-size:16px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=error]){gap:6px}.et-table-cell-error-icon{flex:none;inline-size:14px;block-size:14px;color:var(--et-theme-color-ink-solid, currentColor)}.et-table-cell:where([data-state=loading]){display:flex}.et-table-busy-bar{grid-column:1 / -1;block-size:2px;margin-block-end:-2px;overflow:hidden;background:color-mix(in srgb,var(--et-surface-interaction-solid, gray) 10%,transparent)}.et-table-host:where([data-appearance=cards]) .et-table-busy-bar{margin-block-start:calc((var(--et-table-row-gap, 8px) + 2px) / -2);margin-block-end:calc((var(--et-table-row-gap, 8px) - 2px) / 2)}.et-table-busy-bar.et-table-busy-bar--enter{animation:et-table-busy-fade .15s ease}.et-table-busy-bar.et-table-busy-bar--leave{animation:et-table-busy-fade .25s ease reverse forwards}@keyframes et-table-busy-fade{0%{opacity:0}to{opacity:1}}.et-table-busy-bar:after{content:\"\";display:block;inline-size:40%;block-size:100%;border-radius:999px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-table-busy-sweep 1.1s ease-in-out infinite}@keyframes et-table-busy-sweep{0%{transform:translate(-100%)}to{transform:translate(250%)}}@media(prefers-reduced-motion:reduce){.et-table-busy-bar:after{inline-size:100%;animation:none}.et-table-busy-bar.et-table-busy-bar--enter,.et-table-busy-bar.et-table-busy-bar--leave{animation:none}}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowsSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSource", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], errorTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTemplate", required: false }] }], cellState: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellState", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], sortMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortMode", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], expandedRowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedRowTemplate", required: false }] }], rowInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInteractive", required: false }] }], rowLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowLink", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TableFooterDirective), { isSignal: true }] }], gridRef: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }], headerCells: [{ type: i0.ViewChildren, args: ['headerCell', { isSignal: true }] }], bodyCells: [{ type: i0.ViewChildren, args: ['bodyCell', { isSignal: true }] }], leadHeaderCells: [{ type: i0.ViewChildren, args: ['leadHeaderCell', { isSignal: true }] }], trailHeaderCells: [{ type: i0.ViewChildren, args: ['trailHeaderCell', { isSignal: true }] }] } });
 
 /**
  * Opt-in persistence for a table's setup - column order, visibility, widths, sort, filters, expanded
@@ -61941,6 +62123,18 @@ class TableColumnChooserComponent {
         /** The table whose columns this toggles - bind a template ref to the `<et-table>`. */
         this.table = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []));
+        /**
+         * Size of the trigger button. The default suits the chooser sitting in the table's own chrome; match
+         * it to the other controls when you put it in a toolbar of your own.
+         */
+        this.size = input(BUTTON_SIZES.SM, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * Shape of the trigger button, for the same reason as {@link size}: the default reads as table chrome,
+         * and a chooser standing among an app's own buttons has to read as one of them.
+         */
+        this.variant = input(BUTTON_VARIANTS.TRANSPARENT, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
         /**
          * The bound table's wording, so the chooser needs no strings of its own - localize it with
          * `provideTableLabels` or the table's `labels` input like everything else.
@@ -61969,7 +62163,7 @@ class TableColumnChooserComponent {
         table.setColumnVisible(key, !table.isColumnVisible(key));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableColumnChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableColumnChooserComponent, isStandalone: true, selector: "et-table-column-chooser", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null } }, providers: [provideIcons(GRID_2X2_ICON, EYE_ICON)], ngImport: i0, template: "<div class=\"et-table-column-chooser\" etMenu>\n  <button class=\"et-table-column-chooser-trigger\" et-button size=\"sm\" variant=\"transparent\" etMenuTrigger type=\"button\">\n    <i etIcon=\"et-grid-2x2\"></i>\n    {{ labels().columns }}\n  </button>\n\n  <ng-template etMenuSurface>\n    <et-menu>\n      <!-- Every declared column, hidden ones included: this list is the only way back from hiding one. -->\n      @for (column of table().allColumns(); track column.key) {\n        <et-menu-checkbox-item\n          [value]=\"column.key\"\n          [checked]=\"table().isColumnVisible(column.key)\"\n          [disabled]=\"isLastVisible(column.key)\"\n          [closeOnActivate]=\"KEEP_MENU_OPEN\"\n          (activate)=\"toggle(column.key)\"\n        >\n          {{ column.header || column.key }}\n        </et-menu-checkbox-item>\n      }\n\n      <!-- Always rendered, disabled when nothing is hidden: appearing and disappearing would resize the\n           menu under the pointer while columns are being toggled. -->\n      <et-menu-separator />\n      <button\n        [closeOnActivate]=\"KEEP_MENU_OPEN\"\n        [disabled]=\"!hasHidden()\"\n        (activate)=\"table().showAllColumns()\"\n        et-menu-item\n        type=\"button\"\n      >\n        <i class=\"et-table-column-chooser-icon\" etIcon=\"et-eye\"></i>\n        {{ labels().showAllColumns }}\n      </button>\n    </et-menu>\n  </ng-template>\n</div>\n", styles: ["@layer components{et-table-column-chooser{display:contents}.et-table-column-chooser{display:inline-flex;flex:none}.et-table-column-chooser-icon{inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px)}}\n"], dependencies: [{ kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "loop", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuItemComponent, selector: "button[et-menu-item], a[et-menu-item]", inputs: ["variant"] }, { kind: "component", type: MenuSeparatorComponent, selector: "et-menu-separator" }, { kind: "component", type: MenuCheckboxItemComponent, selector: "et-menu-checkbox-item", inputs: ["icon"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableColumnChooserComponent, isStandalone: true, selector: "et-table-column-chooser", inputs: { table: { classPropertyName: "table", publicName: "table", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideIcons(GRID_2X2_ICON, EYE_ICON)], ngImport: i0, template: "<div class=\"et-table-column-chooser\" etMenu>\n  <button\n    [size]=\"size()\"\n    [variant]=\"variant()\"\n    class=\"et-table-column-chooser-trigger\"\n    et-button\n    etMenuTrigger\n    type=\"button\"\n  >\n    <i etIcon=\"et-grid-2x2\"></i>\n    {{ labels().columns }}\n  </button>\n\n  <ng-template etMenuSurface>\n    <et-menu>\n      <!-- Every declared column, hidden ones included: this list is the only way back from hiding one. -->\n      @for (column of table().allColumns(); track column.key) {\n        <et-menu-checkbox-item\n          [value]=\"column.key\"\n          [checked]=\"table().isColumnVisible(column.key)\"\n          [disabled]=\"isLastVisible(column.key)\"\n          [closeOnActivate]=\"KEEP_MENU_OPEN\"\n          (activate)=\"toggle(column.key)\"\n        >\n          {{ column.header || column.key }}\n        </et-menu-checkbox-item>\n      }\n\n      <!-- Always rendered, disabled when nothing is hidden: appearing and disappearing would resize the\n           menu under the pointer while columns are being toggled. -->\n      <et-menu-separator />\n      <button\n        [closeOnActivate]=\"KEEP_MENU_OPEN\"\n        [disabled]=\"!hasHidden()\"\n        (activate)=\"table().showAllColumns()\"\n        et-menu-item\n        type=\"button\"\n      >\n        <i class=\"et-table-column-chooser-icon\" etIcon=\"et-eye\"></i>\n        {{ labels().showAllColumns }}\n      </button>\n    </et-menu>\n  </ng-template>\n</div>\n", styles: ["@layer components{et-table-column-chooser{display:contents}.et-table-column-chooser{display:inline-flex;flex:none}.et-table-column-chooser-icon{inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px)}}\n"], dependencies: [{ kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "loop", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuItemComponent, selector: "button[et-menu-item], a[et-menu-item]", inputs: ["variant"] }, { kind: "component", type: MenuSeparatorComponent, selector: "et-menu-separator" }, { kind: "component", type: MenuCheckboxItemComponent, selector: "et-menu-checkbox-item", inputs: ["icon"] }, { kind: "component", type: ButtonComponent, selector: "[et-button]", inputs: ["variant", "size", "iconAlignment"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor", "label"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableColumnChooserComponent, decorators: [{
             type: Component,
@@ -61983,8 +62177,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         MenuCheckboxItemComponent,
                         ButtonComponent,
                         IconDirective,
-                    ], providers: [provideIcons(GRID_2X2_ICON, EYE_ICON)], template: "<div class=\"et-table-column-chooser\" etMenu>\n  <button class=\"et-table-column-chooser-trigger\" et-button size=\"sm\" variant=\"transparent\" etMenuTrigger type=\"button\">\n    <i etIcon=\"et-grid-2x2\"></i>\n    {{ labels().columns }}\n  </button>\n\n  <ng-template etMenuSurface>\n    <et-menu>\n      <!-- Every declared column, hidden ones included: this list is the only way back from hiding one. -->\n      @for (column of table().allColumns(); track column.key) {\n        <et-menu-checkbox-item\n          [value]=\"column.key\"\n          [checked]=\"table().isColumnVisible(column.key)\"\n          [disabled]=\"isLastVisible(column.key)\"\n          [closeOnActivate]=\"KEEP_MENU_OPEN\"\n          (activate)=\"toggle(column.key)\"\n        >\n          {{ column.header || column.key }}\n        </et-menu-checkbox-item>\n      }\n\n      <!-- Always rendered, disabled when nothing is hidden: appearing and disappearing would resize the\n           menu under the pointer while columns are being toggled. -->\n      <et-menu-separator />\n      <button\n        [closeOnActivate]=\"KEEP_MENU_OPEN\"\n        [disabled]=\"!hasHidden()\"\n        (activate)=\"table().showAllColumns()\"\n        et-menu-item\n        type=\"button\"\n      >\n        <i class=\"et-table-column-chooser-icon\" etIcon=\"et-eye\"></i>\n        {{ labels().showAllColumns }}\n      </button>\n    </et-menu>\n  </ng-template>\n</div>\n", styles: ["@layer components{et-table-column-chooser{display:contents}.et-table-column-chooser{display:inline-flex;flex:none}.et-table-column-chooser-icon{inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px)}}\n"] }]
-        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }] } });
+                    ], providers: [provideIcons(GRID_2X2_ICON, EYE_ICON)], template: "<div class=\"et-table-column-chooser\" etMenu>\n  <button\n    [size]=\"size()\"\n    [variant]=\"variant()\"\n    class=\"et-table-column-chooser-trigger\"\n    et-button\n    etMenuTrigger\n    type=\"button\"\n  >\n    <i etIcon=\"et-grid-2x2\"></i>\n    {{ labels().columns }}\n  </button>\n\n  <ng-template etMenuSurface>\n    <et-menu>\n      <!-- Every declared column, hidden ones included: this list is the only way back from hiding one. -->\n      @for (column of table().allColumns(); track column.key) {\n        <et-menu-checkbox-item\n          [value]=\"column.key\"\n          [checked]=\"table().isColumnVisible(column.key)\"\n          [disabled]=\"isLastVisible(column.key)\"\n          [closeOnActivate]=\"KEEP_MENU_OPEN\"\n          (activate)=\"toggle(column.key)\"\n        >\n          {{ column.header || column.key }}\n        </et-menu-checkbox-item>\n      }\n\n      <!-- Always rendered, disabled when nothing is hidden: appearing and disappearing would resize the\n           menu under the pointer while columns are being toggled. -->\n      <et-menu-separator />\n      <button\n        [closeOnActivate]=\"KEEP_MENU_OPEN\"\n        [disabled]=\"!hasHidden()\"\n        (activate)=\"table().showAllColumns()\"\n        et-menu-item\n        type=\"button\"\n      >\n        <i class=\"et-table-column-chooser-icon\" etIcon=\"et-eye\"></i>\n        {{ labels().showAllColumns }}\n      </button>\n    </et-menu>\n  </ng-template>\n</div>\n", styles: ["@layer components{et-table-column-chooser{display:contents}.et-table-column-chooser{display:inline-flex;flex:none}.et-table-column-chooser-icon{inline-size:var(--et-menu-item-icon-size, 16px);block-size:var(--et-menu-item-icon-size, 16px)}}\n"] }]
+        }], propDecorators: { table: [{ type: i0.Input, args: [{ isSignal: true, alias: "table", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**
  * Opt-in per-column menu for `et-table`: a `⋮` in every header cell opening the column's actions -
@@ -62213,6 +62407,150 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
             args: [{ selector: 'et-table-detail-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-table-detail-row{grid-column:1 / -1;display:grid;grid-template-rows:1fr;border-block-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}.et-table-host:where([data-appearance=cards]) .et-table-detail-row{border-block-end:0}.et-table-row--last+.et-table-detail-row{border-block-end:0}.et-table-detail-row.et-table-detail--enter{animation:et-table-detail-in .18s ease}.et-table-detail-row.et-table-detail--leave{animation:et-table-detail-out .18s ease forwards}@keyframes et-table-detail-in{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@keyframes et-table-detail-out{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}.et-table-detail-cell{min-block-size:0;overflow:hidden}.et-table-detail-body{padding:var(--et-table-cell-padding-block) var(--et-table-cell-padding-inline)}@media(prefers-reduced-motion:reduce){.et-table-detail-row.et-table-detail--enter,.et-table-detail-row.et-table-detail--leave{animation:none}}}\n"] }]
         }] });
 
+/**
+ * The grab cursors a dragged table scrolls under, as a styles-only component mounted by
+ * `etTableDragScroll` - see `TableDetailStylesComponent` for the same pattern.
+ *
+ * @internal
+ */
+class TableDragScrollStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDragScrollStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TableDragScrollStylesComponent, isStandalone: true, selector: "et-table-drag-scroll-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@media(hover:hover)and (pointer:fine){.et-table-host--drag-scrollable{cursor:grab}.et-table-host--dragging,.et-table-host--dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDragScrollStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-table-drag-scroll-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@media(hover:hover)and (pointer:fine){.et-table-host--drag-scrollable{cursor:grab}.et-table-host--dragging,.et-table-host--dragging *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}}}\n"] }]
+        }] });
+
+/** Whether a press landed in something whose own drag is the point of it: selecting text, not panning. */
+const isTextGesture = (target) => target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target instanceof HTMLSelectElement ||
+    // True inside a contenteditable region as well, not only on the element carrying the attribute.
+    (target instanceof HTMLElement && target.isContentEditable);
+/**
+ * Opt-in drag-to-scroll for `et-table`: pressing anywhere in the table and dragging scrolls it, the way
+ * a map pans. A wide table is otherwise reachable only through the scrollbar or a horizontal wheel,
+ * neither of which a mouse user has close to hand.
+ *
+ * A press that does not travel is still a click, so rows, row links and header controls behave exactly
+ * as they did; a press that becomes a drag swallows the click it would have ended on, so panning off a
+ * row link does not also follow it. Dragging inside a text field is left alone, and a touch pointer
+ * keeps the browser's own scrolling.
+ *
+ * @example
+ * <et-table [data]="rows()" [columns]="COLUMNS" etTableDragScroll />
+ */
+class TableDragScrollDirective {
+    constructor() {
+        this.table = injectTableFeatureHost('etTableDragScroll');
+        // The feature is a directive on the table, so its host *is* the table's scroll container.
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        /** See {@link TableDragScrollConfig}. */
+        this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTableDragScroll',
+            transform: (tableFeatureConfig) });
+        this.hostDimensions = signalHostElementDimensions();
+        /** Whether a drag is in progress, which is what the grabbing cursor reads. */
+        this.dragging = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+        /** Whether the table overflows at all - a table that fits takes no grab cursor. */
+        this.scrollable = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+        this.enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        injectStyleManager().mount(TableDragScrollStylesComponent);
+        // Whether the table overflows has no signal of its own: recheck whenever the host resizes or the
+        // tracks change, both of which decide it.
+        effect(() => {
+            this.hostDimensions();
+            this.table.columnWidths();
+            this.table.visibleColumnsMeta();
+            afterNextRender({ read: () => this.syncScrollable() }, { injector: this.injector });
+        });
+    }
+    syncScrollable() {
+        const host = this.elementRef.nativeElement;
+        const scrollable = this.enabled() && (host.scrollWidth > host.clientWidth || host.scrollHeight > host.clientHeight);
+        if (scrollable !== this.scrollable())
+            this.scrollable.set(scrollable);
+    }
+    /**
+     * A press that travels over an `<a>` or an image starts the browser's own drag-and-drop, which fires
+     * `pointercancel` and takes the gesture away before it has moved far enough to count as a drag. A
+     * table that pans by dragging has no room for the other kind.
+     */
+    preventNativeDrag(event) {
+        if (this.enabled())
+            event.preventDefault();
+    }
+    startDrag(event) {
+        // Touch already pans by dragging, and a pen or a mouse is the only pointer the scrollbar is awkward
+        // for. A non-primary button belongs to the browser's own menus.
+        if (!this.enabled() || event.pointerType === 'touch' || event.button !== 0)
+            return;
+        if (!this.scrollable() || isTextGesture(event.target))
+            return;
+        const host = this.elementRef.nativeElement;
+        const startLeft = host.scrollLeft;
+        const startTop = host.scrollTop;
+        dragGestureFrom(event, host)
+            .pipe(
+        // Column reorder starts from this same pointerdown and claims the gesture in that handler, so
+        // reading the claim here - once the drag has already travelled - gives the same answer
+        // whichever of the two listeners the browser ran first.
+        takeWhile(() => {
+            const claim = this.table.pointerGestureClaim(event);
+            return claim === null || claim === 'etTableDragScroll';
+        }), tap((gesture) => {
+            if (gesture.type === 'start') {
+                this.dragging.set(true);
+                this.table.claimPointerGesture(event, 'etTableDragScroll');
+            }
+            if (gesture.type === 'move') {
+                host.scrollLeft = startLeft - gesture.data.totalDx;
+                host.scrollTop = startTop - gesture.data.totalDy;
+            }
+            if (gesture.type === 'end' || gesture.type === 'cancelled')
+                this.swallowNextClick();
+        }), finalize(() => this.dragging.set(false)), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    /**
+     * The release ends on a `click` at whatever the pointer landed on. After a drag that click was never
+     * meant - the row under the pointer is not the row the user pressed - so it is eaten in the capture
+     * phase, before a row link or a header control can act on it. Only that one click, and only if it
+     * arrives on this turn of the loop: the next real click has to get through.
+     */
+    swallowNextClick() {
+        if (!this.dragging())
+            return;
+        fromEvent(this.elementRef.nativeElement, 'click', { capture: true })
+            .pipe(takeUntil(timer(0)), take(1), tap((click) => {
+            click.preventDefault();
+            click.stopPropagation();
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDragScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TableDragScrollDirective, isStandalone: true, selector: "[etTableDragScroll]", inputs: { config: { classPropertyName: "config", publicName: "etTableDragScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointerdown": "startDrag($event)", "dragstart": "preventNativeDrag($event)", "scroll": "syncScrollable()" }, properties: { "class.et-table-host--drag-scrollable": "scrollable()", "class.et-table-host--dragging": "dragging()" } }, exportAs: ["etTableDragScroll"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableDragScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etTableDragScroll]',
+                    exportAs: 'etTableDragScroll',
+                    host: {
+                        '[class.et-table-host--drag-scrollable]': 'scrollable()',
+                        '[class.et-table-host--dragging]': 'dragging()',
+                        '(pointerdown)': 'startDrag($event)',
+                        '(dragstart)': 'preventNativeDrag($event)',
+                        '(scroll)': 'syncScrollable()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etTableDragScroll", required: false }] }] } });
+
 const clamp = (value, max) => Math.min(Math.max(value, 0), max);
 /**
  * Opt-in arrow-key navigation over an `et-table`'s cells, following the
@@ -62915,12 +63253,13 @@ class TableGroupHeaderRowComponent {
         ...(ngDevMode ? [{ debugName: "blockSize" }] : /* istanbul ignore next */ []));
         this.leads = computed(() => this.table.leadColumnsMeta(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leads" }] : /* istanbul ignore next */ []));
+        this.trails = computed(() => this.table.trailColumnsMeta(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trails" }] : /* istanbul ignore next */ []));
         this.feature.rowHeight.set(this.blockSize);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableGroupHeaderRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: TableGroupHeaderRowComponent, isStandalone: true, selector: "et-table-group-header-row", host: { attributes: { "role": "row" }, classAttribute: "et-table-group-row" }, viewQueries: [{ propertyName: "groupCells", predicate: ["groupCell"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <!-- One empty cell per leading utility column (selection, expander), so the band covers their
-         tracks too. -->
+    <!-- One empty cell per utility column (selection, expander), so the band covers their tracks too. -->
     @for (lead of leads(); track $index) {
       <div class="et-table-group-cell" aria-hidden="true"></div>
     }
@@ -62941,13 +63280,15 @@ class TableGroupHeaderRowComponent {
     @if (table.hasFillerTrack()) {
       <div class="et-table-group-cell et-table-filler-cell" role="presentation" aria-hidden="true"></div>
     }
+    @for (trail of trails(); track $index) {
+      <div class="et-table-group-cell" aria-hidden="true"></div>
+    }
   `, isInline: true, styles: ["@layer components{.et-table-group-row{display:contents}.et-table-group-cell{display:flex;align-items:center;min-inline-size:0;overflow:hidden;padding:6px var(--et-table-cell-padding-inline);position:sticky;inset-block-start:0;z-index:2;background:var(--_et-table-header-bg);border-block-end:1px solid var(--_et-table-header-border)}.et-table-group-cell:where(.et-table-group-cell--labeled){justify-content:center;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--et-surface-color-muted-solid, CanvasText)}.et-table-host:where([data-appearance=grid]) .et-table-group-cell:where(.et-table-group-cell--labeled){border-inline-end:1px solid var(--et-surface-border-solid, rgb(128 128 128 / .15))}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableGroupHeaderRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'et-table-group-header-row', template: `
-    <!-- One empty cell per leading utility column (selection, expander), so the band covers their
-         tracks too. -->
+    <!-- One empty cell per utility column (selection, expander), so the band covers their tracks too. -->
     @for (lead of leads(); track $index) {
       <div class="et-table-group-cell" aria-hidden="true"></div>
     }
@@ -62968,6 +63309,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     @if (table.hasFillerTrack()) {
       <div class="et-table-group-cell et-table-filler-cell" role="presentation" aria-hidden="true"></div>
     }
+    @for (trail of trails(); track $index) {
+      <div class="et-table-group-cell" aria-hidden="true"></div>
+    }
   `, encapsulation: ViewEncapsulation.None, host: {
                         class: 'et-table-group-row',
                         role: 'row',
@@ -63283,10 +63627,128 @@ const injectHostTable = () => {
     return table;
 };
 
+/**
+ * The travelling header row, as a styles-only component mounted by `etTablePageStickyHeader` - see
+ * `TableDragScrollStylesComponent` for the same pattern.
+ *
+ * @internal
+ */
+class TablePageStickyHeaderStylesComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: TablePageStickyHeaderStylesComponent, isStandalone: true, selector: "et-table-page-sticky-header-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-travel{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-from{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-to{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@keyframes et-table-page-header-travel{to{transform:translateY(var(--_et-table-page-header-travel))}}@supports (animation-timeline: scroll()){.et-table-host--page-sticky-header .et-table-header-cell{z-index:4;animation:et-table-page-header-travel linear both;animation-timeline:scroll(root block);animation-range:var(--_et-table-page-header-from) var(--_et-table-page-header-to)}.et-table-host--page-sticky-header .et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:6}}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderStylesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'et-table-page-sticky-header-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-table-sticky-header-offset{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-travel{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-from{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@property --_et-table-page-header-to{syntax: \"<length>\"; inherits: true; initial-value: 0px;}@keyframes et-table-page-header-travel{to{transform:translateY(var(--_et-table-page-header-travel))}}@supports (animation-timeline: scroll()){.et-table-host--page-sticky-header .et-table-header-cell{z-index:4;animation:et-table-page-header-travel linear both;animation-timeline:scroll(root block);animation-range:var(--_et-table-page-header-from) var(--_et-table-page-header-to)}.et-table-host--page-sticky-header .et-table-header-cell:where(.et-table-sticky-start,.et-table-sticky-end){z-index:6}}}\n"] }]
+        }] });
+
+/**
+ * Keeps the header row of a page-scrolled `et-table` at the top of the viewport. Use it on a table that
+ * has no height of its own - one that grows to its rows while the document scrolls - where the header
+ * would otherwise leave with the page.
+ *
+ * The table's own sticky header pins to the host, which is the table's horizontal scroll container, so
+ * it can only ever stop at the host's top edge. This travels the header row down the grid instead, by
+ * exactly the distance the page has scrolled past the table, and stops it at the last row. The row keeps
+ * its place in the grid throughout, so the tracks, the pinned columns and the resize grips are untouched
+ * and the header still scrolls sideways with the columns.
+ *
+ * The travel runs on a scroll timeline, so it is the compositor's work and the header never falls behind
+ * the page. This directive only measures: it writes the distance and the two page offsets it runs
+ * between whenever the layout changes, and nothing at all while scrolling.
+ *
+ * Set `--et-table-sticky-header-offset` on the table to stop the header lower than the top of the
+ * viewport - under a page header or a toolbar that is pinned there itself.
+ *
+ * Not for a bounded table: one with a height of its own already pins its header, and one that virtual
+ * scrolls needs the bounded height to do it.
+ *
+ * @example
+ * <et-table [data]="rows()" [columns]="COLUMNS" style="--et-table-sticky-header-offset: 64px" etTablePageStickyHeader />
+ */
+class TablePageStickyHeaderDirective {
+    constructor() {
+        this.table = injectTableFeatureHost('etTablePageStickyHeader');
+        // The feature is a directive on the table, so its host *is* the table's scroll container.
+        this.elementRef = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.renderer = injectRenderer();
+        // The offset is a length, so a media query can change it at a width the table itself does not resize at.
+        this.viewportSize = injectViewportSize();
+        /** See {@link TablePageStickyHeaderConfig}. */
+        this.config = input({}, { ...(ngDevMode ? { debugName: "config" } : /* istanbul ignore next */ {}), alias: 'etTablePageStickyHeader',
+            transform: (tableFeatureConfig) });
+        this.hostDimensions = signalHostElementDimensions();
+        this.enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        injectStyleManager().mount(TablePageStickyHeaderStylesComponent);
+        // Everything the travel is made of comes out of the layout, so it is re-measured whenever the layout
+        // can have changed: the host resized, a column was resized, columns came or went, the config was
+        // rebound. Never on scroll - scrolling is the timeline's job, and reading geometry there is what
+        // makes a pinned header lag behind the page.
+        effect(() => {
+            this.hostDimensions();
+            this.viewportSize();
+            this.enabled();
+            this.config();
+            this.table.columnWidths();
+            this.table.visibleColumnsMeta();
+            afterNextRender({ read: () => this.measure() }, { injector: this.injector });
+        });
+    }
+    measure() {
+        const host = this.elementRef.nativeElement;
+        const grid = this.table.gridElement();
+        const headerCell = this.table.headerCellElements()[0] ?? this.table.leadHeaderCellElements()[0];
+        const view = host.ownerDocument.defaultView;
+        if (!this.enabled() || !grid || !headerCell || !view) {
+            this.write(host, { travel: 0, from: 0, to: 0 });
+            return;
+        }
+        // Layout offsets, not the header's own rect: the rect carries the travel the timeline has already
+        // applied, and reading it back would fold that into the next measurement.
+        const headerTop = headerCell.offsetTop;
+        const travel = Math.max(0, grid.offsetHeight - headerTop - headerCell.offsetHeight);
+        // Where the header rests, in page coordinates, so the two ends of the range are page scroll offsets.
+        const restingTop = grid.getBoundingClientRect().top + view.scrollY + headerTop;
+        const from = Math.max(0, restingTop - this.resolveOffset(host));
+        this.write(host, { travel, from, to: from + travel });
+    }
+    resolveOffset(host) {
+        const raw = getComputedStyle(host).getPropertyValue('--et-table-sticky-header-offset');
+        const parsed = Number.parseFloat(raw);
+        // Registered as a `<length>` (see the stylesheet), so the computed value is always in px.
+        return this.config().offset ?? (Number.isFinite(parsed) ? parsed : 0);
+    }
+    write(host, values) {
+        this.renderer?.setCssProperties(host, {
+            '--_et-table-page-header-travel': `${values.travel}px`,
+            '--_et-table-page-header-from': `${values.from}px`,
+            '--_et-table-page-header-to': `${values.to}px`,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TablePageStickyHeaderDirective, isStandalone: true, selector: "[etTablePageStickyHeader]", inputs: { config: { classPropertyName: "config", publicName: "etTablePageStickyHeader", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.et-table-host--page-sticky-header": "enabled()" } }, exportAs: ["etTablePageStickyHeader"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TablePageStickyHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[etTablePageStickyHeader]',
+                    exportAs: 'etTablePageStickyHeader',
+                    host: {
+                        '[class.et-table-host--page-sticky-header]': 'enabled()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "etTablePageStickyHeader", required: false }] }] } });
+
 /** How long a column takes to slide between preview positions. */
 const PREVIEW_DURATION_MS = 160;
 /** Dead zone (px) each side of a column's midpoint - see {@link TableReorderDirective.flipThresholdOf}. */
 const FLIP_HYSTERESIS_PX = 12;
+/** How near an inline edge a drag has to be held before the table scrolls itself under it. */
+const AUTO_SCROLL_ZONE_PX = 56;
+/** Fastest the edge auto-scroll runs, in px per frame - reached with the pointer on the edge itself. */
+const AUTO_SCROLL_MAX_STEP_PX = 18;
 /** The column order that dropping `key` next to `overKey` (on the given side) would produce. */
 const landingOrder = (order, move) => {
     const without = order.filter((candidate) => candidate !== move.key);
@@ -63345,6 +63807,11 @@ class TableReorderDirective {
         this.previewOffsets = new Map();
         // The last previewed landing order, to skip re-applying identical transforms on every pointer move.
         this.previewSignature = null;
+        // The pointer's last x, which the edge auto-scroll re-resolves the drop target against: it moves the
+        // columns while the pointer stands still, so no pointer event says the target changed.
+        this.pointerX = 0;
+        this.autoScrollFrame = null;
+        this.autoScrollStep = 0;
         this.table.registerLayer({
             component: TableReorderOverlayComponent,
             injector: this.injector,
@@ -63364,6 +63831,10 @@ class TableReorderDirective {
             const hit = this.headerCellAt(event);
             if (!hit)
                 return EMPTY;
+            // Claimed here, in the pointerdown itself, so drag-to-scroll reads the claim whichever of
+            // the two listeners the browser ran first. Without it a header drag reorders the column and
+            // pans the table out from under it at the same time.
+            this.table.claimPointerGesture(event, 'etTableReorder');
             return dragGestureFrom(event, hit.cell).pipe(tap((gesture) => {
                 if (gesture.type === 'start')
                     this.start(hit.key, gesture.data);
@@ -63398,6 +63869,7 @@ class TableReorderDirective {
         const header = this.table.visibleColumnsMeta().find((column) => column.key === key)?.header ?? key;
         this.dragging.set({ key, header });
         this.pointer.set({ x: at.clientX, y: at.clientY });
+        this.pointerX = at.clientX;
         this.target.set(null);
         this.previewSignature = null;
         this.markDragging(key, true);
@@ -63406,8 +63878,10 @@ class TableReorderDirective {
         if (!this.dragging())
             return;
         this.pointer.set({ x: at.clientX, y: at.clientY });
+        this.pointerX = at.clientX;
         this.resolveDropTarget(at.clientX);
         this.previewLandingOrder();
+        this.syncAutoScroll(at.clientX);
     }
     /** The browser took the gesture away, so there is no drop the user chose - slide back and clean up. */
     cancel() {
@@ -63418,6 +63892,7 @@ class TableReorderDirective {
     end() {
         const dragging = this.dragging();
         const target = this.target();
+        this.stopAutoScroll();
         if (dragging)
             this.markDragging(dragging.key, false);
         const moved = dragging && target && target.key !== dragging.key;
@@ -63437,6 +63912,52 @@ class TableReorderDirective {
         // frame. Cleared in the write phase of that render, which is before it paints.
         afterNextRender({ write: () => this.clearPreview({ animated: false }) }, { injector: this.injector });
     }
+    /**
+     * Scroll the table while the drag is held near an inline edge, so a column can be dropped past the
+     * visible range. A reorder is otherwise limited to what fits the viewport: the pointer is already
+     * down, so neither the wheel nor a drag-to-scroll pan is available to bring the target column in.
+     *
+     * The step grows with how far into the zone the pointer is, so the edge itself runs fastest and a
+     * pointer that only grazes the zone barely moves the table.
+     *
+     * Measured from the inner edge of each pinned block, not from the table's own edges: a pinned column
+     * covers that strip of the viewport, so a zone laid on the viewport edge sits underneath it and the
+     * drag has to travel all the way past the pinned column before the table moves at all.
+     */
+    syncAutoScroll(clientX) {
+        const bounds = this.table.element.getBoundingClientRect();
+        const frozen = this.table.frozenInsets();
+        const intoStart = AUTO_SCROLL_ZONE_PX - (clientX - (bounds.left + frozen.start));
+        const intoEnd = AUTO_SCROLL_ZONE_PX - (bounds.right - frozen.end - clientX);
+        const depth = intoStart > 0 ? -intoStart : intoEnd > 0 ? intoEnd : 0;
+        const ratio = Math.min(Math.abs(depth), AUTO_SCROLL_ZONE_PX) / AUTO_SCROLL_ZONE_PX;
+        this.autoScrollStep = Math.sign(depth) * ratio * AUTO_SCROLL_MAX_STEP_PX;
+        if (this.autoScrollStep === 0) {
+            this.stopAutoScroll();
+            return;
+        }
+        if (this.autoScrollFrame === null)
+            this.stepAutoScroll();
+    }
+    stepAutoScroll() {
+        const host = this.table.element;
+        const before = host.scrollLeft;
+        host.scrollLeft = before + this.autoScrollStep;
+        // The table is already at that end, so stop rather than run a frame per tick doing nothing.
+        if (host.scrollLeft === before) {
+            this.stopAutoScroll();
+            return;
+        }
+        this.resolveDropTarget(this.pointerX);
+        this.previewLandingOrder();
+        this.autoScrollFrame = requestAnimationFrame(() => this.stepAutoScroll());
+    }
+    stopAutoScroll() {
+        if (this.autoScrollFrame !== null)
+            cancelAnimationFrame(this.autoScrollFrame);
+        this.autoScrollFrame = null;
+        this.autoScrollStep = 0;
+    }
     /**
      * Resolve which column the pointer is over and which side it would drop on.
      *
@@ -63787,7 +64308,7 @@ class TableResizeGripComponent {
       etDragHandle
       aria-hidden="true"
     ></span>
-  `, isInline: true, styles: ["@layer components{et-table-resize-grip{display:contents}.et-table-resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:9px;z-index:1;cursor:col-resize}.et-table-resize-grip:after{content:\"\";position:absolute;inset-block:20%;inset-inline-end:3px;inline-size:2px;border-radius:1px;background:var(--et-surface-border-solid, rgb(128 128 128 / .4));transition:background .12s ease}@media(hover:hover){.et-table-resize-grip:where(:hover):after{inset-block:0;background:var(--et-theme-color-primary-solid, currentColor)}}@media(pointer:coarse){.et-table-resize-grip{inline-size:28px}.et-table-resize-grip:after{inset-block:15%;inline-size:3px}}}\n"], dependencies: [{ kind: "directive", type: DragHandleDirective, selector: "[etDragHandle]", inputs: ["commitThreshold", "disabled"], outputs: ["dragTapped", "dragStarted", "dragMoved", "dragEnded", "dragCancelled"] }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{et-table-resize-grip{display:contents}.et-table-resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:9px;z-index:1;cursor:col-resize}.et-table-resize-grip:after{content:\"\";position:absolute;inset-block:20%;inset-inline-end:0;inline-size:1px;background:var(--et-surface-border-solid, rgb(128 128 128 / .4));transition:background .12s ease}@media(hover:hover){.et-table-resize-grip:where(:hover):after{inset-block:0;inline-size:2px;background:var(--et-theme-color-primary-solid, currentColor)}}@media(pointer:coarse){.et-table-resize-grip{inline-size:28px}.et-table-resize-grip:after{inset-block:15%;inline-size:2px}}}\n"], dependencies: [{ kind: "directive", type: DragHandleDirective, selector: "[etDragHandle]", inputs: ["commitThreshold", "disabled"], outputs: ["dragTapped", "dragStarted", "dragMoved", "dragEnded", "dragCancelled"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableResizeGripComponent, decorators: [{
             type: Component,
@@ -63802,7 +64323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       etDragHandle
       aria-hidden="true"
     ></span>
-  `, encapsulation: ViewEncapsulation.None, imports: [DragHandleDirective], styles: ["@layer components{et-table-resize-grip{display:contents}.et-table-resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:9px;z-index:1;cursor:col-resize}.et-table-resize-grip:after{content:\"\";position:absolute;inset-block:20%;inset-inline-end:3px;inline-size:2px;border-radius:1px;background:var(--et-surface-border-solid, rgb(128 128 128 / .4));transition:background .12s ease}@media(hover:hover){.et-table-resize-grip:where(:hover):after{inset-block:0;background:var(--et-theme-color-primary-solid, currentColor)}}@media(pointer:coarse){.et-table-resize-grip{inline-size:28px}.et-table-resize-grip:after{inset-block:15%;inline-size:3px}}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [DragHandleDirective], styles: ["@layer components{et-table-resize-grip{display:contents}.et-table-resize-grip{position:absolute;inset-block:0;inset-inline-end:0;inline-size:9px;z-index:1;cursor:col-resize}.et-table-resize-grip:after{content:\"\";position:absolute;inset-block:20%;inset-inline-end:0;inline-size:1px;background:var(--et-surface-border-solid, rgb(128 128 128 / .4));transition:background .12s ease}@media(hover:hover){.et-table-resize-grip:where(:hover):after{inset-block:0;inline-size:2px;background:var(--et-theme-color-primary-solid, currentColor)}}@media(pointer:coarse){.et-table-resize-grip{inline-size:28px}.et-table-resize-grip:after{inset-block:15%;inline-size:2px}}}\n"] }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }] } });
 
 /**
@@ -63865,6 +64386,7 @@ class TableSelectionDirective {
         this.table.registerLeadColumn({
             key: 'et-table-selection',
             width: 'var(--et-table-select-width, 44px)',
+            side: computed(() => this.config().side ?? 'start'),
             // leftmost: before the expander (order 100) and any other feature column
             order: 0,
             cellClass: 'et-table-select-cell',
@@ -63959,7 +64481,7 @@ class TableSelectAllCellComponent {
       [attr.aria-label]="selection.selectAllLabel()"
       (checkedChange)="selection.toggleAll()"
     />
-  `, isInline: true, styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--et-surface-background-solid, Canvas))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--et-surface-background-solid, Canvas))}}}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "et-checkbox" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-select-cell et-checkbox{--_et-focus-ring-offset: -2px}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}}}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "et-checkbox" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableSelectAllCellComponent, decorators: [{
             type: Component,
@@ -63970,7 +64492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       [attr.aria-label]="selection.selectAllLabel()"
       (checkedChange)="selection.toggleAll()"
     />
-  `, encapsulation: ViewEncapsulation.None, imports: [CheckboxComponent], styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--et-surface-background-solid, Canvas))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--et-surface-background-solid, Canvas))}}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [CheckboxComponent], styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-select-cell et-checkbox{--_et-focus-ring-offset: -2px}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}}}\n"] }]
         }] });
 /**
  * One row's selection checkbox, stamped into the selection column by `etTableSelection`. This is
@@ -63994,7 +64516,7 @@ class TableSelectCellComponent {
         (checkedChange)="selection.setSelected(row(), $event)"
       />
     }
-  `, isInline: true, styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--et-surface-background-solid, Canvas))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--et-surface-background-solid, Canvas))}}}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "et-checkbox" }], encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-select-cell et-checkbox{--_et-focus-ring-offset: -2px}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}}}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "et-checkbox" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableSelectCellComponent, decorators: [{
             type: Component,
@@ -64006,7 +64528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         (checkedChange)="selection.setSelected(row(), $event)"
       />
     }
-  `, encapsulation: ViewEncapsulation.None, imports: [CheckboxComponent], styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--et-surface-background-solid, Canvas))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--et-surface-background-solid, Canvas))}}}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [CheckboxComponent], styles: ["@layer components{et-table-select-cell,et-table-select-all-cell{display:contents}.et-table-select-cell{justify-content:center;padding:0 4px;--et-checkbox-size: 16px}.et-table-select-cell et-checkbox{flex:1;justify-content:center;align-self:stretch}.et-table-select-cell et-checkbox{--_et-focus-ring-offset: -2px}.et-table-row--selected .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,transparent)}.et-table-row--selected .et-table-cell.et-table-sticky-start,.et-table-row--selected .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 12%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}@media(hover:hover){.et-table-row--selected:hover .et-table-cell{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,transparent)}.et-table-row--selected:hover .et-table-cell.et-table-sticky-start,.et-table-row--selected:hover .et-table-cell.et-table-sticky-end{background:color-mix(in srgb,var(--et-theme-color-primary-solid, gray) 18%,var(--_et-table-row-surface, var(--et-surface-background-solid, Canvas)))}}}\n"] }]
         }], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 /**
@@ -64044,6 +64566,8 @@ class TableStickyColumnsDirective {
         ...(ngDevMode ? [{ debugName: "offsets" }] : /* istanbul ignore next */ []));
         this.leadOffsets = signal({}, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "leadOffsets" }] : /* istanbul ignore next */ []));
+        this.trailOffsets = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trailOffsets" }] : /* istanbul ignore next */ []));
         /**
          * True when pinning is measured to crowd the non-pinned columns off-screen. Pinning is then dropped so
          * every column scrolls normally instead of hiding behind the pins - which is what makes the same table
@@ -64053,17 +64577,19 @@ class TableStickyColumnsDirective {
         ...(ngDevMode ? [{ debugName: "suppressed" }] : /* istanbul ignore next */ []));
         this.insets = signal({ start: 0, end: 0 }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "insets" }] : /* istanbul ignore next */ []));
+        this.enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
         /** Whether any visible column is pinned to the inline-start edge (which also pins the lead columns). */
         this.hasStickyStart = computed(() => !this.suppressed() && this.table.visibleColumnsMeta().some((column) => column.sticky === 'start'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasStickyStart" }] : /* istanbul ignore next */ []));
         /** Whether any visible column is pinned to the trailing edge. */
         this.hasStickyEnd = computed(() => !this.suppressed() && this.table.visibleColumnsMeta().some((column) => column.sticky === 'end'), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasStickyEnd" }] : /* istanbul ignore next */ []));
-        const enabled = computed(() => this.config().enabled ?? true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
+        const enabled = this.enabled;
         this.table.registerColumnPinning({
             cellPinning: (key) => this.cellPinning(key),
             leadPinning: (key) => this.leadPinning(key),
+            trailPinning: (key) => this.trailPinning(key),
             insets: () => this.insets(),
             hasStickyEnd: () => this.hasStickyEnd(),
             enabled,
@@ -64093,6 +64619,21 @@ class TableStickyColumnsDirective {
                 // eslint-disable-next-line ethlete/prefer-element-dimensions
                 leadWidth += leadCells[index]?.getBoundingClientRect().width ?? 0;
             });
+            // The trailing utility columns stack from the trailing edge, so they are summed in reverse: the
+            // last one sits at the edge and each one before it clears the ones after it.
+            const trailCells = this.table.trailHeaderCellElements();
+            const trailMeta = this.table.trailColumnsMeta();
+            const trailOffsets = {};
+            let trailWidth = 0;
+            for (let index = trailMeta.length - 1; index >= 0; index--) {
+                const trail = trailMeta[index];
+                if (!trail)
+                    continue;
+                trailOffsets[trail.key] = trailWidth;
+                // Same as above: a running sum over all trailing cells, not one observable element.
+                // eslint-disable-next-line ethlete/prefer-element-dimensions
+                trailWidth += trailCells[index]?.getBoundingClientRect().width ?? 0;
+            }
             const start = {};
             let left = leadWidth;
             let pinnedStartWidth = 0;
@@ -64108,7 +64649,9 @@ class TableStickyColumnsDirective {
                 left += width(index);
             }
             const end = {};
-            let right = 0;
+            // The trailing utility columns own that edge, so an end-pinned data column stacks after them -
+            // the mirror of `left` starting at the leading utility columns' width.
+            let right = trailWidth;
             for (let index = columns.length - 1; index >= 0; index--) {
                 const column = columns[index];
                 if (column?.sticky === 'end') {
@@ -64121,15 +64664,17 @@ class TableStickyColumnsDirective {
             // start pin makes them sticky too) leave the scrollable ones too little room to ever surface. Track
             // widths don't change when we unpin, so this can't oscillate.
             const containerWidth = this.hostDimensions()?.client?.width ?? 0;
-            const pinnedWidth = pinnedStartWidth + pinnedEndWidth + (hasStartPin ? leadWidth : 0);
+            // A trailing utility column is pinned whenever pinning is live, so its width always counts here.
+            const pinnedWidth = pinnedStartWidth + pinnedEndWidth + (hasStartPin ? leadWidth : 0) + trailWidth;
             const hasUnpinned = columns.some((column) => !column?.sticky);
             const suppressed = hasUnpinned && containerWidth > 0 && containerWidth - pinnedWidth < MIN_UNPINNED_SPACE;
             this.leadOffsets.set(leadOffsets);
+            this.trailOffsets.set(trailOffsets);
             this.offsets.set({ start, end });
             this.suppressed.set(suppressed);
             this.insets.set(suppressed
                 ? { start: 0, end: 0 }
-                : { start: hasStartPin ? leadWidth + pinnedStartWidth : 0, end: pinnedEndWidth });
+                : { start: hasStartPin ? leadWidth + pinnedStartWidth : 0, end: pinnedEndWidth + trailWidth });
         });
     }
     /** How a data column is pinned, as the table's header, body and footer cells render it. */
@@ -64150,6 +64695,15 @@ class TableStickyColumnsDirective {
         const pinned = this.hasStickyStart();
         return { sticky: pinned, offset: pinned ? (this.leadOffsets()[key] ?? 0) : null };
     }
+    /**
+     * Whether the trailing utility columns are pinned to the trailing edge, and how far in. Unlike the
+     * leading ones, these do not wait for a pinned data column: a feature puts its column at that edge to
+     * keep it reachable, so pinning is live means pinned - see {@link TableLeadColumn.side}.
+     */
+    trailPinning(key) {
+        const pinned = this.enabled() && !this.suppressed();
+        return { sticky: pinned, offset: pinned ? (this.trailOffsets()[key] ?? 0) : null };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: TableStickyColumnsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: TableStickyColumnsDirective, isStandalone: true, selector: "[etTableStickyColumns]", inputs: { config: { classPropertyName: "config", publicName: "etTableStickyColumns", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["etTableStickyColumns"], ngImport: i0 }); }
 }
@@ -64258,6 +64812,7 @@ class TableSkeletonRowsComponent {
     @for (row of rows(); track row.key) {
       <div
         [style.--_et-table-row-h.px]="feature.measuredRowHeight()"
+        [class.et-table-row--box]="table.hasRowBox()"
         class="et-table-row et-table-row--placeholder et-skeleton--animated"
         role="row"
         aria-hidden="true"
@@ -64281,6 +64836,12 @@ class TableSkeletonRowsComponent {
         @if (table.hasFillerTrack()) {
           <div class="et-table-cell et-table-filler-cell" role="presentation"></div>
         }
+        @for (trail of table.trailColumnsMeta(); track trail.key) {
+          <div [class]="trail.cellClass" class="et-table-cell" role="gridcell"></div>
+        }
+        @if (table.hasRowBox()) {
+          <div class="et-table-card-corners" role="presentation" aria-hidden="true"></div>
+        }
       </div>
     }
   `, isInline: true, styles: ["@layer components{.et-table-skeleton-rows{display:contents}.et-table-row--placeholder .et-table-cell{min-block-size:var(--_et-table-row-h, calc(1.4em + var(--et-table-cell-padding-block) * 2))}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkeletonItemComponent, selector: "et-skeleton-item", inputs: ["shape"] }], encapsulation: i0.ViewEncapsulation.None }); }
@@ -64291,6 +64852,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
     @for (row of rows(); track row.key) {
       <div
         [style.--_et-table-row-h.px]="feature.measuredRowHeight()"
+        [class.et-table-row--box]="table.hasRowBox()"
         class="et-table-row et-table-row--placeholder et-skeleton--animated"
         role="row"
         aria-hidden="true"
@@ -64314,6 +64876,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         @if (table.hasFillerTrack()) {
           <div class="et-table-cell et-table-filler-cell" role="presentation"></div>
         }
+        @for (trail of table.trailColumnsMeta(); track trail.key) {
+          <div [class]="trail.cellClass" class="et-table-cell" role="gridcell"></div>
+        }
+        @if (table.hasRowBox()) {
+          <div class="et-table-card-corners" role="presentation" aria-hidden="true"></div>
+        }
       </div>
     }
   `, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, SkeletonItemComponent], host: { class: 'et-table-skeleton-rows' }, styles: ["@layer components{.et-table-skeleton-rows{display:contents}.et-table-row--placeholder .et-table-cell{min-block-size:var(--_et-table-row-h, calc(1.4em + var(--et-table-cell-padding-block) * 2))}}\n"] }]
@@ -64449,6 +65017,12 @@ const TABLE_KEYBOARD_NAV_IMPORTS = [TableKeyboardNavDirective];
 const TABLE_INLINE_EDIT_IMPORTS = [TableInlineEditDirective, TableCellEditDirective];
 /** Drag-to-resize column widths (`etTableResize`). Pulls in the drag primitives. */
 const TABLE_RESIZE_IMPORTS = [TableResizeDirective];
+/**
+ * Drag-to-scroll (`etTableDragScroll`): pressing in the table and dragging pans it, so a wide table is
+ * reachable without the scrollbar. Pulls in the drag primitives - which it shares with
+ * {@link TABLE_RESIZE_IMPORTS} and {@link TABLE_REORDER_IMPORTS} when those are used too.
+ */
+const TABLE_DRAG_SCROLL_IMPORTS = [TableDragScrollDirective];
 /** Drag-to-reorder columns (`etTableReorder`), with the drag ghost and drop indicator. */
 const TABLE_REORDER_IMPORTS = [TableReorderDirective];
 /** Multi-row selection (`etTableSelection`). Pulls in the checkbox component. */
@@ -64464,6 +65038,11 @@ const TABLE_GROUP_HEADERS_IMPORTS = [TableGroupHeadersDirective];
  * chrome, which is why it is separate - a table that pins nothing measures nothing.
  */
 const TABLE_STICKY_COLUMNS_IMPORTS = [TableStickyColumnsDirective];
+/**
+ * A viewport-pinned header row (`etTablePageStickyHeader`) for a table the page scrolls rather than the
+ * table itself. A table with a height of its own pins its header without any of this.
+ */
+const TABLE_PAGE_STICKY_HEADER_IMPORTS = [TablePageStickyHeaderDirective];
 /**
  * Loading placeholders (`etTableSkeleton`): a block of skeleton rows while loading with no rows yet, a
  * bone in a cell that is loading on its own, and the `etTableCellSkeleton` template for saying what a
@@ -66514,11 +67093,11 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.54';
+const COMPONENTS_VERSION = '1.0.0-next.55';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_IMPORTS, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STACK_OVERLAY_LAYER, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_ROW_ROUTER_LINK_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, focusFirstInvalidField, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
+export { ACCORDION_ERROR_CODES, ACCORDION_GROUP_TOKEN, ACCORDION_IMPORTS, ACCORDION_TOKEN, ALIGN_CENTER_ICON, ALIGN_JUSTIFY_ICON, ALIGN_LEFT_ICON, ALIGN_RIGHT_ICON, ARROWS_LEFT_RIGHT_ICON, ARROW_OUT_UP_RIGHT_ICON, ARROW_RIGHT_ICON, ARROW_UP_ICON, AVATAR_IMPORTS, AVATAR_SHAPES, AVATAR_SIZES, AccordionComponent, AccordionContentDirective, AccordionDirective, AccordionGroupComponent, AccordionGroupDirective, AccordionHintDirective, AccordionLabelDirective, AccordionPanelDirective, AccordionTriggerDirective, AvatarComponent, AvatarGroupComponent, BADGE_ICON_ALIGNMENTS, BADGE_IMPORTS, BADGE_SIZES, BADGE_VARIANTS, BANNER_IMPORTS, BANNER_LABELS, BANNER_TYPES, BOLD_ICON, BRACKET_CARD_CONTEXT, BRACKET_DATA_LAYOUT, BRACKET_DEFAULTS, BRACKET_DENSITY, BRACKET_DENSITY_PRESETS, BRACKET_ERROR_CODES, BRACKET_IMPORTS, BRACKET_LABELS, BRACKET_ROUND_MIRROR_TYPE, BRACKET_SWISS_GROUP_COLOR_TYPE, BREADCRUMB_COLLAPSE_IMPORTS, BREADCRUMB_COLLAPSE_TOKEN, BREADCRUMB_ERROR_CODES, BREADCRUMB_IMPORTS, BREADCRUMB_LABELS, BREADCRUMB_SEGMENT_TOKEN, BREADCRUMB_SEO_IMPORTS, BREADCRUMB_TOKEN, BUTTON_ICON_ALIGNMENTS, BUTTON_IMPORTS, BUTTON_SIZES, BUTTON_SPINNER_CONFIG, BUTTON_TYPES, BUTTON_VARIANTS, BadgeComponent, BannerComponent, BracketComponent, BracketDefaultContinueComponent, BracketDefaultFinalMatchComponent, BracketDefaultMatchComponent, BracketDefaultRoundHeaderComponent, BracketMap, BracketRoundsListComponent, BrandLoaderComponent, BreadcrumbCollapseDirective, BreadcrumbComponent, BreadcrumbDirective, BreadcrumbItemDirective, BreadcrumbItemTemplateDirective, BreadcrumbOutletComponent, BreadcrumbOverflowComponent, BreadcrumbSegmentDirective, BreadcrumbSeoDirective, BreadcrumbSeparatorDirective, ButtonColorDirective, ButtonComponent, ButtonDirective, ButtonStylesDirective, CALENDAR_ERROR_CODES, CALENDAR_ICON, CALENDAR_IMPORTS, CALENDAR_LABELS, CARD_IMPORTS, CARD_VARIANTS, CAROUSEL_AUTOPLAY_TOKEN, CAROUSEL_ERROR_CODES, CAROUSEL_IMPORTS, CAROUSEL_LABELS, CAROUSEL_SLIDE_ALIGNMENTS, CAROUSEL_TOKEN, CAROUSEL_TRANSITIONS, CAROUSEL_TRANSITION_DRIVERS, CASCADER_ERROR_CODES, CASCADER_IMPORTS, CASCADER_LABELS, CASCADER_SELECTABLE_LEVELS, CHECKBOX_GROUP_IMPORTS, CHECKBOX_IMPORTS, CHECKBOX_OPTION_VARIANTS, CHECK_ICON, CHEVRON_ICON, CHIP_ERROR_CODES, CHIP_IMPORTS, CHIP_LABELS, CHOICE_FIELD_IMPORTS, CHOICE_FIELD_VARIANTS, CIRCLE_CHECK_ICON, CIRCLE_INFO_ICON, CLIPBOARD_CHECK_ICON, CLOCK_ICON, CODE_BLOCK_ICON, CODE_ICON, COLOR_INPUT_IMPORTS, COMMON_BRACKET_ROUND_TYPE, COMPONENTS_VERSION, COPY_BUTTON_IMPORTS, CalendarCellDirective, CalendarComponent, CalendarDirective, CalendarGridDirective, CalendarHeaderDirective, CardComponent, CarouselAutoplayDirective, CarouselComponent, CarouselDirective, CarouselItemDirective, CarouselNextDirective, CarouselPlayToggleDirective, CarouselPreviousDirective, CarouselSlideDirective, CascaderColumnDirective, CascaderComponent, CascaderDirective, CascaderNodeDirective, CascaderPanelComponent, CascaderSearchDirective, CascaderSearchOptionDirective, CascaderSurfaceDirective, CascaderTriggerDirective, CheckboxComponent, CheckboxDirective, CheckboxGroupComponent, CheckboxGroupSelectAllComponent, CheckboxOptionComponent, ChipComponent, ChipDirective, ChipRemoveDirective, ChoiceFieldComponent, ColorInputComponent, ColorInputDirective, ControlSuffixDirective, CopyButtonDirective, CounterComponent, DAILYMOTION_PLAYER_TOKEN, DATE_FORMAT, DATE_INPUT_ERROR_CODES, DATE_INPUT_IMPORTS, DATE_LOCALE, DATE_PICKER_HOST, DATE_RANGE_INPUT_ERROR_CODES, DATE_RANGE_INPUT_IMPORTS, DATE_TIME_INPUT_ERROR_CODES, DATE_TIME_INPUT_IMPORTS, DATE_TIME_LABELS, DATE_TIME_RANGE_INPUT_ERROR_CODES, DATE_TIME_RANGE_INPUT_IMPORTS, DEFAULT_BANNER_LABELS, DEFAULT_BRACKET_LABELS, DEFAULT_BREADCRUMB_LABELS, DEFAULT_BREAKPOINTS, DEFAULT_CALENDAR_LABELS, DEFAULT_CALENDAR_RANGE_STRATEGY, DEFAULT_CAROUSEL_LABELS, DEFAULT_CASCADER_LABELS, DEFAULT_CHIP_LABELS, DEFAULT_DATE_TIME_LABELS, DEFAULT_DROPZONE_LABELS, DEFAULT_FILTER_OVERLAY_LABELS, DEFAULT_FORM_FIELD_LABELS, DEFAULT_GRID_LABELS, DEFAULT_ICON_VARIANT, DEFAULT_INPUT_LABELS, DEFAULT_LOADER_LABELS, DEFAULT_MATCH_CARD_START_TIME_FORMAT, DEFAULT_MATCH_LABELS, DEFAULT_NOTIFICATION_LABELS, DEFAULT_NOTIFICATION_MANAGER_CONFIG, DEFAULT_NOTIFICATION_STATUS_ICONS, DEFAULT_PAGINATION_LABELS, DEFAULT_PHONE_INPUT_LABELS, DEFAULT_PIP_WINDOW_CONFIG, DEFAULT_QUERY_ERROR_LABELS, DEFAULT_RICH_TEXT_EDITOR_LABELS, DEFAULT_RICH_TEXT_EDITOR_TOOLS, DEFAULT_SCHEDULER_LABELS, DEFAULT_SELECT_LABELS, DEFAULT_SLIDER_LABELS, DEFAULT_STANDINGS_LABELS, DEFAULT_STREAM_LABELS, DEFAULT_STREAM_PLAYER_STATE, DEFAULT_TABLE_LABELS, DEFAULT_TIME_PICKER_LABELS, DESCRIPTION_IMPORTS, DESCRIPTION_LIST_IMPORTS, DESCRIPTION_LIST_VARIANTS, DIVIDER_IMPORTS, DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, DROPZONE_ENTRY_STATUSES, DROPZONE_ERROR_CODES, DROPZONE_FILES_ERROR_KIND, DROPZONE_FILE_CONSTRAINTS, DROPZONE_FILE_REJECTION_REASONS, DROPZONE_IMPORTS, DROPZONE_LABELS, DURATION_INPUT_ERROR_CODES, DURATION_INPUT_IMPORTS, DailymotionPlayerComponent, DailymotionPlayerDirective, DailymotionPlayerParamsDirective, DailymotionPlayerSlotComponent, DateInputComponent, DateInputDirective, DateInputFieldDirective, DatePickerPanelComponent, DatePickerSurfaceDirective, DatePickerTriggerDirective, DateRangeInputComponent, DateRangeInputDirective, DateRangeInputFieldDirective, DateTimeInputComponent, DateTimeInputDirective, DateTimeInputFieldDirective, DateTimeRangeInputComponent, DateTimeRangeInputDirective, DateTimeRangeInputFieldDirective, DescriptionComponent, DescriptionListComponent, DividerComponent, DropzoneComponent, DropzoneDirective, DurationInputComponent, DurationInputDirective, DurationInputFieldDirective, ELLIPSIS_ICON, ELLIPSIS_VERTICAL_ICON, EMPTY_STATE_IMPORTS, ET_BUILT_IN_ICON_NAMES, EYE_ICON, EYE_SLASH_ICON, EmptyStateComponent, FACEBOOK_PLAYER_TOKEN, FIELD_WARNINGS, FIELD_WARNING_KIND, FILE_ICON, FILTER_ICON, FILTER_OVERLAY_ERROR_CODES, FILTER_OVERLAY_IMPORTS, FILTER_OVERLAY_LABELS, FILTER_OVERLAY_TOKEN, FLOATING_ACTION_ERROR_CODES, FLOATING_ACTION_IMPORTS, FLOATING_ACTION_STATES, FLOATING_ACTION_TOKEN, FLOPPY_DISK_ICON, FOCUS_FRAME_ICON, FORM_ERROR_MESSAGE_RESOLVER, FORM_FIELD_APPEARANCES, FORM_FIELD_CONTROL_TYPES, FORM_FIELD_ERROR_CODES, FORM_FIELD_FILLS, FORM_FIELD_IMPORTS, FORM_FIELD_LABELS, FORM_FIELD_LABEL_MODES, FORM_FIELD_SIZES, FORM_FIELD_TOKEN, FORM_IMPORTS, FORM_WARNING_MESSAGE_RESOLVER, FabComponent, FacebookPlayerComponent, FacebookPlayerDirective, FacebookPlayerParamsDirective, FacebookPlayerSlotComponent, FilterOverlayResetDirective, FilterOverlaySubmitDirective, FloatingActionAnchorDirective, FloatingActionDirective, FloatingActionScopeDirective, FloatingActionTopDirective, FloatingActionTriggerDirective, FocusRingDirective, FormDirective, FormErrorComponent, FormFieldBarrierDirective, FormFieldComponent, FormFieldDirective, FormWarningComponent, GERMAN_FILTER_OVERLAY_LABELS, GERMAN_QUERY_ERROR_LABELS, GRID_2X2_ICON, GRID_DEBUG_IMPORTS, GRID_ERROR_CODES, GRID_IMPORTS, GRID_LABELS, GRID_TOKEN, GROUP_BRACKET_ROUND_TYPE, GridComponent, GridDebugComponent, GridDirective, GridDragDirective, GridItemComponent, GridItemDefaultActionsComponent, GridItemDirective, GridItemRef, GridItemToolbarComponent, GridResizeDirective, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, HintComponent, ICONS_TOKEN, ICON_DIRECTIVE_TOKEN, ICON_ERROR_CODES, ICON_IMPORTS, ICON_OVERRIDES_TOKEN, IMAGE_ICON, INHERIT_COLOR, INITIAL_SUPPORT_PRESENTATION_STATE, INPUT_IMPORTS, INPUT_LABELS, INPUT_MASK_HOST, INPUT_TEXT_ALIGNMENTS, INPUT_TYPES, INTERACTIVE_TAGS, ITALIC_ICON, IconButtonComponent, IconDirective, InputComponent, InputDirective, InputMaskDirective, InputPrefixDirective, InputSuffixDirective, KBD_IMPORTS, KBD_PLATFORM, KICK_PLAYER_TOKEN, KbdComponent, KickPlayerComponent, KickPlayerDirective, KickPlayerParamsDirective, KickPlayerSlotComponent, LINK_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LOADER_LABELS, LOCATION_ICON, LOCK_ICON, LabelDirective, MASKED_INPUT_ERROR_CODES, MASKED_INPUT_IMPORTS, MASK_VALUE_MODES, MASONRY_ERROR_CODES, MASONRY_IMPORTS, MASONRY_TOKEN, MATCH_CARD_IMPORTS, MATCH_CARD_SIZES, MATCH_CARD_TOKEN, MATCH_ERROR_CODES, MATCH_LABELS, MATCH_PARTICIPANT_IMPORTS, MENU_ERROR_CODES, MENU_IMPORTS, MENU_ITEM_VARIANTS, MENU_SELECTION_GROUP_MULTIPLE, MENU_SELECTION_GROUP_TOKEN, MENU_SELECTION_ITEM_KIND, MINUS_ICON, MULTI_LANGUAGE_RICH_TEXT_EDITOR_ERROR_CODES, MULTI_LANGUAGE_RICH_TEXT_EDITOR_IMPORTS, MasonryDirective, MasonryItemDirective, MatchCardComponent, MatchCardDirective, MatchCardGameScoresDirective, MatchCardMetaDirective, MatchCardScoreDirective, MatchParticipantComponent, MatchScoreComponent, MenuCheckboxGroupComponent, MenuCheckboxItemComponent, MenuComponent, MenuContextTriggerDirective, MenuDirective, MenuGroupLabelComponent, MenuItemComponent, MenuItemDirective, MenuItemShortcutComponent, MenuPanelDirective, MenuRadioGroupComponent, MenuRadioItemComponent, MenuSearchDirective, MenuSelectionGroupDirective, MenuSelectionItemDirective, MenuSeparatorComponent, MenuSurfaceDirective, MenuTriggerDirective, MultiLanguageRichTextEditorComponent, MultiLanguageRichTextEditorDirective, MultiLanguageRichTextEditorLanguageToolComponent, NAV_TABS_TOKEN, NAV_TAB_IMPORTS, NOTIFICATION_ACTION_SLOTS, NOTIFICATION_ERROR_CODES, NOTIFICATION_IMPORTS, NOTIFICATION_LABELS, NOTIFICATION_STACK_CONTEXT_TOKEN, NOTIFICATION_STACK_OVERLAY_LAYER, NOTIFICATION_STATUS, NUMBER_INPUT_IMPORTS, NavTabLinkComponent, NavTabLinkDirective, NavTabLinkStylesComponent, NavTabsComponent, NavTabsDirective, NavTabsOutletComponent, NavTabsOutletDirective, NotificationActionDirective, NotificationComponent, NotificationDirective, NotificationDismissDirective, NotificationItemDirective, NotificationStackDirective, NotificationSwipeToDismissDirective, NumberInputComponent, NumberInputDirective, OTP_INPUT_IMPORTS, OVERLAY_BACK_OR_CLOSE_TOKEN, OVERLAY_BODY_TOKEN, OVERLAY_CONFIG_CLASS_KEYS, OVERLAY_CONTENT_IMPORTS, OVERLAY_ERROR_CODES, OVERLAY_FOOTER_TOKEN, OVERLAY_HEADER_TEMPLATE_TOKEN, OVERLAY_HEADER_TOKEN, OVERLAY_IMPORTS, OVERLAY_MAIN_TOKEN, OVERLAY_QUERY_PARAM_INPUT_NAME, OVERLAY_REF, OVERLAY_ROUTER_CONFIG_TOKEN, OVERLAY_ROUTER_LINK_TOKEN, OVERLAY_ROUTER_OUTLET_DISABLED_TEMPLATE_TOKEN, OVERLAY_ROUTER_OUTLET_TOKEN, OVERLAY_ROUTER_TOKEN, OVERLAY_SHARED_ROUTE_TEMPLATE_TOKEN, OtpInputComponent, OtpInputDirective, OverlayAnchorDirective, OverlayBackOrCloseDirective, OverlayBodyComponent, OverlayCloseDirective, OverlayContainerComponent, OverlayDirective, OverlayFooterDirective, OverlayHeaderDirective, OverlayHeaderTemplateDirective, OverlayMainDirective, OverlayNavTabLinkComponent, OverlayOriginCloneComponent, OverlayRouteHeaderTemplateOutletComponent, OverlayRouterLinkDirective, OverlayRouterOutletComponent, OverlayRouterOutletDisabledTemplateDirective, OverlaySharedRouteTemplateDirective, OverlaySharedRouteTemplateOutletComponent, OverlaySidebarComponent, OverlaySidebarPageComponent, OverlaySurfaceDirective, OverlayTitleDirective, OverlayTriggerDirective, PAGE_SIZE_SELECT_IMPORTS, PAGINATION_IMPORTS, PAGINATION_LABELS, PARAGRAPH_ICON, PASSWORD_INPUT_IMPORTS, PAUSE_ICON, PENCIL_ICON, PHONE_COUNTRIES, PHONE_INPUT_ERROR_CODES, PHONE_INPUT_IMPORTS, PHONE_INPUT_LABELS, PICTURE_IMPORTS, PICTURE_STATES, PIP_CHROME_REF_TOKEN, PIP_ENTRY_TOKEN, PIP_WINDOW_ASPECT_RATIO_TOKEN, PLAY_ICON, PLUS_ICON, PROGRESS_STEPS_IMPORTS, PROGRESS_STEPS_ORIENTATIONS, PROGRESS_STEP_STATES, PageSizeSelectComponent, PaginationComponent, PaginationDirective, PaginationSeoDirective, PasswordInputComponent, PasswordInputDirective, PhoneInputComponent, PhoneInputDirective, PhoneInputFieldDirective, PhoneInputFlagDirective, PictureComponent, PictureErrorDirective, PicturePlaceholderDirective, PipBackDirective, PipBringBackDirective, PipCellDirective, PipCloseDirective, PipCollapseOverlayDirective, PipGridToggleDirective, PipPlayerComponent, PipSlotPlaceholderComponent, PipStageDirective, PipTitleBarDirective, PipTitleBarTemplateDirective, PipWindowComponent, PipWindowParamsDirective, ProgressBarComponent, ProgressStepComponent, ProgressStepsComponent, QUERY_ERROR_ERROR_CODES, QUERY_ERROR_IMPORTS, QUERY_ERROR_LABELS, QUERY_ERROR_TOKEN, QUOTE_ICON, QueryErrorActionsDirective, QueryErrorComponent, QueryErrorDirective, QueryErrorTitleDirective, QueryParamOverlayLinkDirective, RADIO_GROUP_IMPORTS, RADIO_VARIANTS, RATING_IMPORTS, REDO_ICON, RICH_TEXT_EDITOR_FLOATING_TOOLBAR, RICH_TEXT_EDITOR_HEADING_OPTIONS, RICH_TEXT_EDITOR_IMPORTS, RICH_TEXT_EDITOR_INLINE_TOOLS, RICH_TEXT_EDITOR_LABELS, RICH_TEXT_EDITOR_LANGUAGE_TOOL, RICH_TEXT_EDITOR_LINK_EDITOR, RICH_TEXT_EDITOR_TOKEN_CODEC, RICH_TEXT_EDITOR_TOKEN_PALETTE_IMPORTS, RICH_TEXT_EDITOR_TOOL, RICH_TEXT_EDITOR_TOOLS, RICH_TEXT_EDITOR_TOOL_BUTTONS, RICH_TEXT_EDITOR_TRIGGERS_IMPORTS, ROTATE_RIGHT_ICON, RadioComponent, RadioGroupComponent, RangeSliderComponent, RangeSliderDirective, RatingComponent, RatingDirective, RatingIconDirective, RichTextEditorAlignToolComponent, RichTextEditorComponent, RichTextEditorDirective, RichTextEditorFloatingToolbarComponent, RichTextEditorFloatingToolbarDirective, RichTextEditorHeadingToolComponent, RichTextEditorImageEditorComponent, RichTextEditorImageStylesComponent, RichTextEditorImageToolComponent, RichTextEditorLinkEditorComponent, RichTextEditorLinkEditorDirective, RichTextEditorTableStylesComponent, RichTextEditorTableToolComponent, RichTextEditorTokenPaletteComponent, RichTextEditorTokenPopupComponent, RichTextEditorTriggersDirective, SCHEDULER_ADD_SURFACE_OVERLAY, SCHEDULER_EDIT_SURFACE_HOST, SCHEDULER_EDIT_SURFACE_OVERLAY, SCHEDULER_ERROR_CODES, SCHEDULER_FEATURE_HOST, SCHEDULER_IMPORTS, SCHEDULER_LABELS, SCROLLABLE_DARKEN_IMPORTS, SCROLLABLE_DRAG_IMPORTS, SCROLLABLE_ERROR_CODES, SCROLLABLE_IMPORTS, SCROLLABLE_NAVIGATION_IMPORTS, SEGMENTED_BUTTON_GROUP_VARIANTS, SEGMENTED_BUTTON_IMPORTS, SELECTION_CARD_CONTROL_POSITIONS, SELECTION_LIST_IMPORTS, SELECTION_LIST_MULTIPLE, SELECTION_LIST_TOKEN, SELECT_ERROR_CODES, SELECT_FILTER_MODES, SELECT_IMPORTS, SELECT_LABELS, SIDEBAR_OVERLAY_CONFIG, SIDEBAR_OVERLAY_TOKEN, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, SKELETON_IMPORTS, SLIDER_ERROR_CODES, SLIDER_IMPORTS, SLIDER_LABELS, SLIDER_MARK_VALUE_ATTRIBUTE, SLIDER_TOKEN, SNAP_HYSTERESIS, SOOP_PLAYER_TOKEN, SPLIT_BUTTON_ERROR_CODES, STANDINGS_ERROR_CODES, STANDINGS_IMPORTS, STANDINGS_LABELS, STAR_ICON, STREAM_ALL_IMPORTS, STREAM_CONSENT_TOKEN, STREAM_DAILYMOTION_IMPORTS, STREAM_FACEBOOK_IMPORTS, STREAM_IMPORTS, STREAM_KICK_IMPORTS, STREAM_LABELS, STREAM_PIP_IMPORTS, STREAM_PLAYER_COMPONENT_TOKEN, STREAM_PLAYER_ERROR_CONTEXT_TOKEN, STREAM_PLAYER_ERROR_TOKEN, STREAM_PLAYER_PARAMS_TOKEN, STREAM_PLAYER_SLOT_TOKEN, STREAM_PLAYER_TOKEN, STREAM_SLOT_PLAYER_ID_TOKEN, STREAM_SOOP_IMPORTS, STREAM_TIKTOK_IMPORTS, STREAM_TWITCH_IMPORTS, STREAM_USER_CONSENT_PROVIDER_TOKEN, STREAM_VIMEO_IMPORTS, STREAM_YOUTUBE_IMPORTS, STRIKETHROUGH_ICON, SUPPORT_CONTENT_STATE, SUPPORT_TRANSITION_DIRECTION, SWISS_BRACKET_ROUND_TYPE, SWITCH_IMPORTS, SchedulerActionAddAppointmentDirective, SchedulerActionAddSubAppointmentDirective, SchedulerActionDeleteDirective, SchedulerAgendaDirective, SchedulerAgendaViewComponent, SchedulerAppointmentDragDirective, SchedulerBadgeChainCountComponent, SchedulerBadgeChainCountDirective, SchedulerBadgeColorDotComponent, SchedulerBadgeColorDotDirective, SchedulerBadgeLocationComponent, SchedulerBadgeLocationDirective, SchedulerBadgeTimeRangeComponent, SchedulerBadgeTimeRangeDirective, SchedulerBadgeTitleComponent, SchedulerBadgeTitleDirective, SchedulerComponent, SchedulerDirective, SchedulerEditColorComponent, SchedulerEditColorDirective, SchedulerEditDescriptionComponent, SchedulerEditDescriptionDirective, SchedulerEditLocationComponent, SchedulerEditLocationDirective, SchedulerEditSurfaceComponent, SchedulerEditSurfaceDirective, SchedulerEditTimeRangeComponent, SchedulerEditTimeRangeDirective, SchedulerEditTitleComponent, SchedulerEditTitleDirective, SchedulerMonthDirective, SchedulerMonthViewComponent, SchedulerSwipeNavigationDirective, SchedulerTimeGridDirective, SchedulerTimeGridViewComponent, ScrollableActiveChildDirective, ScrollableButtonsComponent, ScrollableButtonsDirective, ScrollableComponent, ScrollableDarkenDirective, ScrollableDirective, ScrollableDragDirective, ScrollableIgnoreChildDirective, ScrollableLoadingTemplateDirective, ScrollableMasksComponent, ScrollableNavigationComponent, ScrollableNavigationDirective, ScrollableSnapDirective, SegmentedButtonComponent, SegmentedButtonGroupComponent, SelectComponent, SelectDirective, SelectEmptyDirective, SelectErrorDirective, SelectListboxDirective, SelectLoadingDirective, SelectOptionComponent, SelectOptionDirective, SelectOptionGroupComponent, SelectOptionGroupDirective, SelectOptionTemplateDirective, SelectOptionsDirective, SelectPanelComponent, SelectSearchDirective, SelectSurfaceDirective, SelectTriggerDirective, SelectValueDirective, SelectViewportDirective, SelectVirtualOptionComponent, SelectVirtualOptionDirective, SelectionListControlDirective, SelectionListDirective, SelectionOptionDirective, SkeletonComponent, SkeletonItemComponent, SkeletonTextComponent, SliderComponent, SliderDirective, SliderThumbDirective, SliderThumbLabelDirective, SliderTrackDirective, SoopPlayerComponent, SoopPlayerDirective, SoopPlayerParamsDirective, SoopPlayerSlotComponent, SpinnerComponent, SplitButtonActionDirective, SplitButtonComponent, SplitButtonDirective, SplitButtonTriggerDirective, StandingsComponent, StandingsDirective, StreamConsentAcceptDirective, StreamConsentComponent, StreamConsentDirective, StreamPipChromeComponent, StreamPlayerErrorComponent, StreamPlayerErrorDirective, StreamPlayerLoadingComponent, StreamPlayerSlotDirective, SwitchComponent, SwitchDirective, TABLE_CELL_ERROR_TOOLTIP_IMPORTS, TABLE_COLUMN_CHOOSER_IMPORTS, TABLE_COLUMN_MENU_IMPORTS, TABLE_CSV_EXPORT_IMPORTS, TABLE_DRAG_SCROLL_IMPORTS, TABLE_ERROR_CODES, TABLE_FEATURE_HOST, TABLE_FILTER_IMPORTS, TABLE_GROUP_HEADERS_IMPORTS, TABLE_ICON, TABLE_IMPORTS, TABLE_INLINE_EDIT_IMPORTS, TABLE_KEYBOARD_NAV_IMPORTS, TABLE_LABELS, TABLE_PAGE_STICKY_HEADER_IMPORTS, TABLE_REORDER_IMPORTS, TABLE_RESIZE_IMPORTS, TABLE_ROW_EXPANSION_IMPORTS, TABLE_ROW_ROUTER_LINK_IMPORTS, TABLE_SELECTION_IMPORTS, TABLE_SKELETON_IMPORTS, TABLE_STATE_PERSISTENCE_IMPORTS, TABLE_STICKY_COLUMNS_IMPORTS, TABLE_VIRTUAL_SCROLL_IMPORTS, TAB_BAR_FITS, TAB_BAR_ORIENTATIONS, TAB_BAR_TOKEN, TAB_BAR_TRIGGER_TOKEN, TAB_BAR_VARIANTS, TAB_ERROR_CODES, TAB_GROUP_TOKEN, TAB_IMPORTS, TAB_PANEL_TOKEN, TAB_SIZES, TAG_INPUT_ERROR_CODES, TAG_INPUT_IMPORTS, TEXTAREA_IMPORTS, TEXTAREA_RESIZE_MODES, TEXT_ALIGNS, TIKTOK_PLAYER_TOKEN, TIMELINE_IMPORTS, TIMES_ICON, TIME_FORMAT, TIME_INPUT_ERROR_CODES, TIME_INPUT_IMPORTS, TIME_PICKER_ERROR_CODES, TIME_PICKER_IMPORTS, TIME_PICKER_LABELS, TIME_RANGE_INPUT_ERROR_CODES, TIME_RANGE_INPUT_IMPORTS, TOGGLETIP_ERROR_CODES, TOGGLETIP_IMPORTS, TOOLBAR_IMPORTS, TOOLBAR_ORIENTATIONS, TOOLTIP_ERROR_CODES, TOOLTIP_IMPORTS, TOURNAMENT_MODE, TRASH_ICON, TREE_ERROR_CODES, TREE_IMPORTS, TREE_LEVEL_STATUSES, TREE_MARKERS, TREE_SELECTION_MODES, TRIANGLE_EXCLAMATION_ICON, TROPHY_ICON, TWITCH_PLAYER_TOKEN, TabBarDirective, TabBarTriggerDirective, TabBarUnderlineDirective, TabComponent, TabGroupComponent, TabGroupDirective, TabLabelDirective, TabPanelDirective, TabTriggerDirective, TableCellDirective, TableCellEditDirective, TableCellErrorMarkComponent, TableCellErrorTooltipDirective, TableCellSkeletonDirective, TableColumnChooserComponent, TableColumnMenuDirective, TableColumnMenuTriggerComponent, TableComponent, TableCsvExportDirective, TableDetailStylesComponent, TableDragScrollDirective, TableDragScrollStylesComponent, TableExpanderCellComponent, TableFilterOptionDirective, TableFilterTriggerComponent, TableFiltersDirective, TableFooterCellDirective, TableFooterDirective, TableGroupHeaderRowComponent, TableGroupHeadersDirective, TableHeaderCellDirective, TableInlineEditDirective, TableInlineEditStylesComponent, TableKeyboardNavDirective, TablePageStickyHeaderDirective, TablePageStickyHeaderStylesComponent, TableReorderDirective, TableReorderOverlayComponent, TableResizeDirective, TableResizeGripComponent, TableRowDetailComponent, TableRowExpansionDirective, TableRowRouterLinkDirective, TableSelectAllCellComponent, TableSelectCellComponent, TableSelectionDirective, TableSkeletonDirective, TableSkeletonRowsComponent, TableStatePersistenceDirective, TableStickyColumnsDirective, TableVirtualScrollDirective, TableVirtualScrollStylesComponent, TagInputComponent, TagInputDirective, TagInputFieldDirective, TextButtonComponent, TextFieldControlDirective, TextareaComponent, TextareaDirective, TikTokPlayerComponent, TikTokPlayerDirective, TikTokPlayerParamsDirective, TikTokPlayerSlotComponent, TimeInputComponent, TimeInputDirective, TimeInputFieldDirective, TimePickerColumnDirective, TimePickerComponent, TimePickerDirective, TimePickerOptionDirective, TimeRangeInputComponent, TimeRangeInputDirective, TimeRangeInputFieldDirective, TimelineComponent, TimelineItemComponent, ToggletipCloseDirective, ToggletipComponent, ToggletipDirective, ToggletipTriggerDirective, ToolbarComponent, ToolbarDirective, TooltipComponent, TooltipDirective, TreeComponent, TreeDirective, TreeMarkerComponent, TreeNodeDefDirective, TreeNodeDirective, TwitchPlayerComponent, TwitchPlayerDirective, TwitchPlayerParamsDirective, TwitchPlayerSlotComponent, UNDERLINE_ICON, UNDO_ICON, UNIT_MS, UPLOAD_ICON, VIMEO_PLAYER_TOKEN, VimeoPlayerComponent, VimeoPlayerDirective, VimeoPlayerParamsDirective, VimeoPlayerSlotComponent, WCAG_CONTRAST_RATIOS, WINDOW_CONTROL_BUTTON_KINDS, WINDOW_CONTROL_BUTTON_SIZES, WindowControlButtonComponent, YOUTUBE_PLAYER_SLOT_TOKEN, YOUTUBE_PLAYER_TOKEN, YoutubePlayerComponent, YoutubePlayerDirective, YoutubePlayerParamsDirective, YoutubePlayerSlotComponent, YoutubePlayerSlotDirective, abortFullscreenAnimation, anchoredDialogOverlayStrategy, anchoredOverlayStrategy, autoPlace, bottomSheetOverlayStrategy, bracketFitsWidth, bracketNaturalWidth, buildAnchoredRuntimePositionStrategy, canHaveChildren, cascaderFromQuery, centeredOverlayStrategy, clampPosition, clampResizeRect, cleanupFullscreenAnimation, cleanupFullscreenAnimationStyles, clearLeavingSupportStateOnExit, colorContrast, compactLayout, computeGeometry, computeGridHeight, countDescendants, createAnchoredPanelController, createAutoScroller, createCardMask, createCurrencyMask, createDefaultDropzoneArgs, createDropzoneUpload, createExistingDropzoneEntry, createFileDropzoneEntry, createFixedLengthRangeStrategy, createGridAdapter, createIbanMask, createNormalizedBracketMatch, createNotificationPromiseFn, createNotificationRef, createOverlayOpener, createOverlayRef, createOverlayStrategyController, createOverlayUnsavedChangesGuard, createPipChromeAnimations, createPipChromeState, createRichTextEditorTrigger, createRichTextEditorTriggerWithQuery, createStreamConfig, createStreamPlayerSlot, createTableRowsSource, createTableStateStorage, createV2DropzoneUpload, createWeekRangeStrategy, defaultCompareWith$1 as defaultCompareWith, defaultDropzoneRejectionMessage, defineOverlay, defineQueryParamOverlay, deriveDurationFormatSpec, deserializeGridLayout, deserializeTableState, detectKbdPlatform, dialogOverlayStrategy, disposeDropzoneEntry, doubleEliminationBracketLayout, dropzoneFiles, enableDragToDismiss, extractFirstImageUrl, filterOverlayLabelsForLocale, filterOverlayPreviewFromQuery, filterRows, findCollision, findNextRelevantHtmlElement, findScrollableAncestor, focusFirstInvalidField, formatDuration, formatFileSize, fromGridPosition, fullScreenDialogOverlayStrategy, generateBracketDataForEthlete, generateRoundTypeFromEthleteRoundType, generateTournamentModeFormEthleteRounds, getClosestOverlay, getColorContrastRatio, getOriginCoordinatesAndDimensions, hexColor, hysteresisRound, iconRegistryKey, indexOfNode, injectAnchoredDialogStrategy, injectAnchoredDialogStrategyDefaults, injectBannerLabels, injectBottomSheetStrategy, injectBottomSheetStrategyDefaults, injectBracketConfig, injectBracketLabels, injectBreadcrumbLabels, injectBreadcrumbManager, injectCalendarLabels, injectCarouselLabels, injectCascaderLabels, injectChipLabels, injectDateFormat, injectDateLocale, injectDateTimeLabels, injectDialogStrategy, injectDialogStrategyDefaults, injectDropzoneLabels, injectFilterOverlay, injectFilterOverlayLabels, injectFormFieldLabels, injectFormSupport, injectFullscreenDialogStrategy, injectFullscreenDialogStrategyDefaults, injectGridConfig, injectGridLabels, injectInputLabels, injectLeftSheetStrategy, injectLeftSheetStrategyDefaults, injectLoaderLabels, injectMatchLabels, injectNotificationLabels, injectNotificationManager, injectNotificationManagerConfig, injectOverlayManager, injectOverlayRouter, injectOverlayScrollBlocker, injectOverlaySurfaceContext, injectPaginationLabels, injectPhoneInputLabels, injectPictureConfig, injectPipChromeManager, injectPipManager, injectPipSlotPlaceholderConfig, injectQueryErrorLabels, injectRichTextEditorLabels, injectRichTextEditorTools, injectRightSheetStrategy, injectRightSheetStrategyDefaults, injectSchedulerEditSurfaceHost, injectSchedulerFeatureHost, injectSchedulerLabels, injectSelectLabels, injectSidebarOverlay, injectSliderLabels, injectStandingsLabels, injectStreamConfig, injectStreamConsentConfig, injectStreamLabels, injectStreamManager, injectStreamPlayerErrorConfig, injectStreamPlayerLoadingConfig, injectStreamScriptLoader, injectStreamUserConsentProvider, injectTableCsvExport, injectTableFeatureHost, injectTableLabels, injectTimeFormat, injectTimePickerLabels, injectTopSheetStrategy, injectTopSheetStrategyDefaults, isFileAccepted, isHtmlElement, isInteractiveElement, isPointerEvent, isTargetInsideOverlayTree, isTouchEvent, itemsCollide, kbdKeyLabel, kbdKeyName, leftSheetOverlayStrategy, legacyQueryErrorSource, mapGridLayout, mapLayoutToBreakpoint, matchCountryByDialCode, matchParticipantDisplayName, mergeOverlayBreakpointConfigs, mergeOverlayConfigs, mirroredDoubleEliminationBracketLayout, mirroredSingleEliminationBracketLayout, mountNavTabLinkStyles, mountRichTextEditorImageStyles, mountRichTextEditorTableStyles, nodesEqual$1 as nodesEqual, normalizeEthleteBracketMatch, normalizeEthleteGroupRanking, normalizeEthleteMatch, normalizeEthleteMatchStatus, normalizeEthleteMedia, normalizeEthleteParticipant, normalizeEthletePlacement, normalizePictureSizes, normalizePictureSource, numberInputStepMultiplierFrom, paginate, parseDuration, parseKbdKeys, phoneCountryFlag, phoneCountryName, pixelRectsEqual, positionToPixelRect, positionsEqual, projectDragCell, provideAnchoredDialogStrategy, provideAnchoredDialogStrategyDefaults, provideBannerLabels, provideBottomSheetStrategy, provideBottomSheetStrategyDefaults, provideBracketConfig, provideBracketLabels, provideBreadcrumbLabels, provideBreadcrumbManager, provideCalendarLabels, provideCarouselLabels, provideCascaderLabels, provideChipLabels, provideDateFormat, provideDateLocale, provideDateTimeLabels, provideDialogStrategy, provideDialogStrategyDefaults, provideDropzoneLabels, provideFilterOverlay, provideFilterOverlayLabels, provideFormErrorMessageResolver, provideFormFieldLabels, provideFormSupport, provideFormWarningMessageResolver, provideFullscreenDialogStrategy, provideFullscreenDialogStrategyDefaults, provideGridConfig, provideGridLabels, provideIconOverrides, provideIcons, provideInputLabels, provideLeftSheetStrategy, provideLeftSheetStrategyDefaults, provideLoaderLabels, provideMatchLabels, provideNotificationLabels, provideNotificationManager, provideNotificationManagerConfig, provideNotificationManagerInstance, provideOverlay, provideOverlayManager, provideOverlayRouter, provideOverlayRouterConfig, provideOverlayRouterService, provideOverlayScrollBlocker, providePaginationLabels, providePhoneInputLabels, providePictureConfig, providePipChromeManager, providePipManager, providePipSlotPlaceholderConfig, provideQueryErrorLabels, provideRichTextEditorAlignmentTool, provideRichTextEditorAutoformat, provideRichTextEditorBlockquoteTool, provideRichTextEditorCodeBlockTool, provideRichTextEditorDefaultTools, provideRichTextEditorFloatingToolbar, provideRichTextEditorHeadingTool, provideRichTextEditorImageTool, provideRichTextEditorLabels, provideRichTextEditorLanguageTool, provideRichTextEditorLinkEditor, provideRichTextEditorLinkTool, provideRichTextEditorTableTool, provideRichTextEditorTokenRendering, provideRichTextEditorTools, provideRightSheetStrategy, provideRightSheetStrategyDefaults, provideSchedulerLabels, provideSelectLabels, provideSidebarOverlay, provideSidebarOverlayConfig, provideSidebarOverlayService, provideSliderLabels, provideStandingsLabels, provideStreamConfig, provideStreamConsentConfig, provideStreamLabels, provideStreamManager, provideStreamPlayerErrorConfig, provideStreamPlayerLoadingConfig, provideTableLabels, provideTimeFormat, provideTimePickerLabels, provideTopSheetStrategy, provideTopSheetStrategyDefaults, queryErrorLabelsForLocale, queryErrorResponseFromLegacyError, reconcileColumnOrder, reconcileColumnWidths, reconcileHiddenColumns, reduceSupportPresentation, registerSingleton, requiredLanguages, resizeSpanBounds, resolveBracketLayout, resolveBreakpoint, resolveClosestOverlay, resolveCollisions, resolveFilterOverlaySubmitButton, resolveNotificationStatusIcon, resolveTableCsvRows, rgbColor, richTextEditorToolLabel, rightSheetOverlayStrategy, rowsToPixelHeight, schedulerFeatureConfig, selectOptionsFromQuery, selectOptionsFromV2Query, serializeGridLayout, serializeTableState, setupRichTextEditorFloatingToolbar, setupRichTextEditorLinkEditor, singleEliminationBracketLayout, snapResizeSpan, sortRows, spanHeight, spanWidth, startFullscreenEnterAnimation, startFullscreenLeaveAnimation, startImageUpload, startOfCalendarUnit, stripTrunkZero, supportPresentationIncludesState, swissBracketLayout, tableCsvRowsFromPages, tableFeatureConfig, tableRowsFromQuery, tableRowsFromV2Query, tableToCsv, toChildrenObservable$1 as toChildrenObservable, toGridPosition, toNotificationContent, toPathObservable, toSearchObservable, topSheetOverlayStrategy, transformingBottomSheetToDialogOverlayStrategy, transformingFullScreenDialogToDialogOverlayStrategy, transformingFullScreenDialogToRightSheetOverlayStrategy, warn, wireFormSupport, withPictureBaseUrl };
 //# sourceMappingURL=ethlete-components.mjs.map